/* Studio skin for a generator embedded in the generators page.
   The tool keeps every control. The preview sits on the peach stage
   and the existing form becomes the white bar underneath. */
html.is-embed,
html.is-embed body {
  height: 100%;
  margin: 0;
  background: #fbf6f1 !important;
  box-sizing: border-box;
}
html.is-embed body {
  display: flex;
  flex-direction: column;
  padding: 46px 12px 12px !important;
  overflow: hidden;
}
html.is-embed .shell,
html.is-embed .vault,
html.is-embed .vault-shell,
html.is-embed .vmain,
html.is-embed main,
html.is-embed .litho-page,
html.is-embed .litho-maker,
html.is-embed .litho-maker > .wrap,
html.is-embed .pet-app,
html.is-embed .pet-app > .wrap,
html.is-embed .qr-app,
html.is-embed .qr-app > .wrap,
html.is-embed .sc-app,
html.is-embed .sc-app > .wrap,
html.is-embed .relief-app,
html.is-embed .relief-app > .wrap,
html.is-embed #lib-panel-keyrings,
html.is-embed #lib-panel-keyrings .kr-page {
  flex: 1;
  min-height: 0;
  height: auto !important;
  display: flex;
  flex-direction: column;
  background: transparent !important;
}
html.is-embed #lib-panel-keyrings { padding: 0 !important; overflow: hidden; }

html.is-embed .eyebrow,
html.is-embed .pet-app > .wrap > h1,
html.is-embed .qr-app > .wrap > h1,
html.is-embed .sc-app > .wrap > h1,
html.is-embed .pet-app > .wrap > .lead,
html.is-embed .qr-app > .wrap > .lead,
html.is-embed .sc-app > .wrap > .lead { display: none !important; }
html.is-embed .wrap,
html.is-embed .litho-maker > .wrap {
  width: 100% !important;
  max-width: none !important;
}

html.is-embed body.theme-light-print .kr-layout,
html.is-embed .pet-stage,
html.is-embed .qr-stage,
html.is-embed .sc-stage,
html.is-embed .litho-maker-stage,
html.is-embed .relief-grid {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  flex: 1;
  min-height: 0;
  width: 100% !important;
  gap: 12px;
  margin: 0 !important;
  height: auto !important;
  background: transparent !important;
}

html.is-embed .kr-preview-panel,
html.is-embed .pet-view,
html.is-embed .qr-view-col,
html.is-embed .sc-view-col,
html.is-embed .ls-view,
html.is-embed .relief-view {
  order: -1;
  flex: 1 1 auto;
  min-height: 160px;
  position: relative !important;
  align-self: stretch !important;
  width: 100% !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 28px !important;
  background: radial-gradient(120% 80% at 50% 42%, #fff3e8 0%, #f8dcc8 46%, #f3c9ae 100%) !important;
  box-shadow: 0 24px 60px rgba(120, 70, 40, 0.08) !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
html.is-embed .kr-preview-panel > h2,
html.is-embed .ls-panel > h2:first-child,
html.is-embed .relief-controls > h1 { display: none; }
html.is-embed .kr-preview-3d,
html.is-embed .pet-view canvas,
html.is-embed .qr-3d,
html.is-embed .sc-view,
html.is-embed .ls-view canvas,
html.is-embed .relief-view canvas {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  background: transparent !important;
  border-radius: 0 !important;
  display: block;
}
html.is-embed .kr-preview-proof {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: min(210px, 36%);
  margin: 0;
  padding: 8px;
  background: rgba(255, 252, 248, 0.92);
  border-radius: 14px;
  z-index: 2;
}
html.is-embed .kr-preview-proof canvas { height: 72px !important; width: 100%; }
html.is-embed .kr-preview-actions { display: none; }
html.is-embed .kr-preview-panel > .kr-hint {
  display: block !important;
  position: absolute;
  right: 16px;
  top: 14px;
  left: auto;
  margin: 0;
  max-width: 280px;
  text-align: right;
  color: #8a6858;
  font-size: 12px;
  font-weight: 650;
  z-index: 2;
}
html.is-embed .qr-flat {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: auto;
  margin: 0;
  padding: 8px;
  background: rgba(255, 252, 248, 0.92);
  border-radius: 14px;
  z-index: 2;
}
html.is-embed .qr-flat canvas { width: 120px !important; height: auto; }
html.is-embed #library::before,
html.is-embed .litho-section::before,
html.is-embed .shop-page.subpage::before,
html.is-embed .kr-page .subpage-band::before {
  display: none !important;
  content: none !important;
}
html.is-embed .qr-meta,
html.is-embed .pet-meta,
html.is-embed .sc-meta {
  position: absolute;
  left: 16px;
  top: 12px;
  margin: 0;
  color: #8a6858;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 2;
  max-width: calc(100% - 32px);
}
html.is-embed .relief-view-note {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 48px);
  margin: 0;
  text-align: center;
  color: #3f2e26;
  background: rgba(255, 252, 248, 0.94);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  z-index: 2;
}

html.is-embed .kr-preview-panel { display: flex; flex-direction: column; }
html.is-embed .kr-preview-3d {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  overflow: hidden;
  background: transparent !important;
}
/* The frame's height is set by flex, so a percentage on the canvas does not
   resolve and the bitmap keeps its 720×480 ratio, taller than the panel. */
html.is-embed .kr-preview-3d canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
}
html.is-embed .qr-view-col,
html.is-embed .sc-view-col { display: flex; flex-direction: column; }
html.is-embed .qr-3d,
html.is-embed .sc-view {
  flex: 1;
  min-height: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html.is-embed .qr-3d canvas,
html.is-embed .sc-view canvas { width: 100%; height: 100% !important; background: transparent !important; }

html.is-embed body.theme-light-print .kr-form-panel,
html.is-embed body.theme-light-print .kr-cart-panel,
html.is-embed .pet-stage > .pet-card:not(.pet-view),
html.is-embed .qr-stage > .qr-card,
html.is-embed .sc-stage > .sc-card,
html.is-embed .ls-panel,
html.is-embed .relief-controls {
  flex: 0 1 auto;
  max-height: 46vh;
  overflow: auto;
  margin: 0;
  background: #fff !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 36px rgba(90, 50, 20, 0.06) !important;
  backdrop-filter: none !important;
}
html.is-embed body.theme-light-print .kr-form-panel { max-height: 38vh; padding: 12px 16px 10px !important; }
html.is-embed .kr-cart-panel { max-height: none; padding: 10px 16px 12px !important; }
html.is-embed .kr-preview-panel { min-height: 280px; flex: 1 1 340px; }
html.is-embed .kr-form-panel h2,
html.is-embed .kr-cart-panel h2 { margin: 0 0 8px; font-size: 1rem; }
html.is-embed body.theme-light-print .kr-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px 14px;
}
html.is-embed body.theme-light-print .kr-field { gap: 2px; }
html.is-embed body.theme-light-print .kr-field input:not([type="range"]),
html.is-embed body.theme-light-print .kr-field select { padding: 0.4rem 0.65rem !important; }
html.is-embed .kr-form-actions {
  position: static;
  margin-top: 8px;
  padding-top: 8px;
  background: #fff;
}
html.is-embed .relief-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
html.is-embed .relief-pair > .relief-view {
  order: 0;
  width: auto !important;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  flex: none;
}
html.is-embed .relief-controls {
  height: auto !important;
  max-height: 34%;
  flex: 0 1 auto;
}
html.is-embed .relief-map {
  height: 100%;
  min-height: 0;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(120, 70, 40, 0.08);
}
html.is-embed .pet-stage > .pet-card:not(.pet-view),
html.is-embed .qr-stage > .qr-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  align-content: start;
}
html.is-embed .pet-stage > .pet-card:not(.pet-view) > .pet-pills,
html.is-embed .pet-stage > .pet-card:not(.pet-view) > .pet-note,
html.is-embed .pet-stage > .pet-card:not(.pet-view) > .pet-status,
html.is-embed .pet-stage > .pet-card:not(.pet-view) > .pet-actions,
html.is-embed .pet-stage > .pet-card:not(.pet-view) > #pet-lines,
html.is-embed .qr-stage > .qr-card > .qr-modes,
html.is-embed .qr-stage > .qr-card > [data-panel],
html.is-embed .qr-stage > .qr-card > .qr-note,
html.is-embed .qr-stage > .qr-card > .qr-status,
html.is-embed .qr-stage > .qr-card > .qr-actions,
html.is-embed .qr-stage > .qr-card > .qr-custom { grid-column: 1 / -1; }

html.is-embed body.theme-light-print input[type="range"],
body.vault-body .kr-vault-panel .kr-field input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 4px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  border: 0 !important;
  border-radius: 99px;
  box-shadow: none !important;
  background: linear-gradient(to right, #ff5c1f var(--p, 40%), #d5c9bc var(--p, 40%)) !important;
  outline: none;
}
html.is-embed body.theme-light-print input[type="range"]::-webkit-slider-runnable-track,
body.vault-body .kr-vault-panel .kr-field input[type="range"]::-webkit-slider-runnable-track,
html.is-embed body.theme-light-print input[type="range"]::-moz-range-track,
body.vault-body .kr-vault-panel .kr-field input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
  border: 0;
}
html.is-embed input[type="range"]::-webkit-slider-thumb,
body.vault-body .kr-vault-panel .kr-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.25);
  cursor: pointer;
}
html.is-embed input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.25);
  cursor: pointer;
}
html.is-embed .gen-slider output,
html.is-embed .qr-slider output,
html.is-embed .kr-field output {
  color: #ff5c1f;
  font-variant-numeric: tabular-nums;
}
html.is-embed .kr-swatches button,
html.is-embed .pet-inks button,
html.is-embed .qr-inks button,
html.is-embed .ls-inks button,
html.is-embed .sc-inks button,
html.is-embed .rel-dots button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
html.is-embed .btn-primary {
  background: #ff5c1f;
  border-color: #ff5c1f;
  border-radius: 16px;
}

@media (max-width: 980px) {
  html.is-embed body { overflow: auto; height: auto; }
  html.is-embed .shell,
  html.is-embed main,
  html.is-embed .kr-layout,
  html.is-embed .pet-stage,
  html.is-embed .qr-stage,
  html.is-embed .sc-stage,
  html.is-embed .litho-maker-stage,
  html.is-embed .relief-grid,
  html.is-embed .relief-pair { height: auto !important; overflow: visible; }
  html.is-embed .relief-pair {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: 0;
  }
  html.is-embed .kr-preview-panel,
  html.is-embed .pet-view,
  html.is-embed .qr-view-col,
  html.is-embed .sc-view-col,
  html.is-embed .ls-view,
  html.is-embed .relief-view { min-height: 46vh; flex: none; }
  html.is-embed .relief-pair > .relief-view { width: 100% !important; height: 52vw; min-height: 280px; }
  html.is-embed .relief-map { height: clamp(220px, 46vw, 380px); border-radius: 22px; }
  html.is-embed body.theme-light-print .kr-form-panel,
  html.is-embed body.theme-light-print .kr-cart-panel,
  html.is-embed .pet-stage > .pet-card:not(.pet-view),
  html.is-embed .qr-stage > .qr-card,
  html.is-embed .sc-stage > .sc-card,
  html.is-embed .ls-panel,
  html.is-embed .relief-controls { max-height: none; }
  html.is-embed body.theme-light-print .kr-form-grid { grid-template-columns: 1fr !important; }
  .kr-logo-controls { grid-template-columns: 1fr; }
  html.is-embed .pet-stage > .pet-card:not(.pet-view),
  html.is-embed .qr-stage > .qr-card { grid-template-columns: 1fr; }
  html.is-embed .md-view-col,
  html.is-embed .sp-view { min-height: 46vh; flex: none; }
  html.is-embed .md-stage > .md-card:not(.md-view),
  html.is-embed .sp-panel { max-height: none; }
}

/* Same stage and dock as the 3D letters studio. */
html.is-embed body {
  padding: 0 !important;
  gap: 12px;
  background: #f6f1ec !important;
}
html.is-embed .kr-vault-intro,
html.is-embed .kr-how,
html.is-embed .md-app .eyebrow,
html.is-embed .md-app h1,
html.is-embed .md-app .lead { display: none !important; }
html.is-embed .md-app,
html.is-embed .md-app > .wrap,
html.is-embed .sp-app {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: transparent !important;
}
html.is-embed .md-stage,
html.is-embed .sp-work {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px;
  flex: 1;
  min-height: 0;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  grid-template-columns: none !important;
}
html.is-embed .md-view-col,
html.is-embed .sp-view {
  order: -1;
  flex: 1 1 auto;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0;
  min-height: 280px;
  position: relative !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0 !important;
  border-radius: 28px !important;
  background: radial-gradient(120% 80% at 50% 42%, #fff3e8 0%, #f8dcc8 46%, #f3c9ae 100%) !important;
  box-shadow: 0 24px 60px rgba(120, 70, 40, 0.08) !important;
  padding: 0 !important;
}
html.is-embed .md-view,
html.is-embed .sp-stage {
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0;
  min-height: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
html.is-embed .md-view { position: relative; min-height: 120px; }
html.is-embed .sp-stage { min-height: 220px; }
html.is-embed .md-view canvas,
html.is-embed .sp-stage canvas {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
}
html.is-embed .md-view canvas {
  position: absolute;
  inset: 0;
  min-height: 0;
}
html.is-embed .sp-stage canvas { min-height: 220px; }
html.is-embed .md-banner {
  position: static;
  flex: 0 0 auto;
  z-index: 2;
  margin: 0;
  padding: 12px 16px 0;
  color: #6d564b;
  font-weight: 650;
}
html.is-embed .md-explode,
html.is-embed .md-meta {
  position: static;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0 16px;
  z-index: 2;
}
html.is-embed .md-view-tools {
  flex: 0 0 auto;
  padding: 6px 16px 0;
}
html.is-embed .md-explode {
  padding: 0;
  color: #3f2e26;
}
html.is-embed .md-meta {
  padding-bottom: 12px;
  color: #8a6858;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.is-embed .md-stage > .md-card:not(.md-view),
html.is-embed .sp-panel {
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  background: #fff !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 36px rgba(90, 50, 20, 0.06) !important;
}
html.is-embed .sp-panel {
  flex: 0 1 auto !important;
  flex-basis: auto !important;
  max-height: 42%;
  overflow: auto;
}
html.is-embed .md-stage > .md-card:not(.md-view) {
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  max-height: none;
  overflow: visible;
}
html.is-embed .sp-app { padding-top: 44px !important; }
html.is-embed .kr-form-actions,
html.is-embed .pet-actions,
html.is-embed .qr-actions,
html.is-embed .sc-actions,
html.is-embed .ls-actions,
html.is-embed .md-actions,
html.is-embed .sp-actions,
html.is-embed .relief-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
html.is-embed .btn-outline,
html.is-embed .sp-actions button {
  border: 1px solid #eadfce;
  background: #fff;
  color: #3f2e26;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
}
html.is-embed .btn-primary {
  margin-left: auto;
  background: #ff5c1f;
  border-color: #ff5c1f;
  color: #fff;
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 750;
  box-shadow: 0 10px 20px rgba(255, 92, 31, 0.28);
}

html.brand-abt01.is-embed,
html.brand-abt01.is-embed body {
  background: #f3f5f8 !important;
}
html.brand-abt01.is-embed .kr-preview-panel,
html.brand-abt01.is-embed .pet-view,
html.brand-abt01.is-embed .qr-view-col,
html.brand-abt01.is-embed .sc-view-col,
html.brand-abt01.is-embed .ls-view,
html.brand-abt01.is-embed .relief-view,
html.brand-abt01.is-embed .md-view-col,
html.brand-abt01.is-embed .sp-view {
  background: radial-gradient(120% 80% at 50% 42%, #f7f8fc 0%, #e4eaf6 46%, #d5deee 100%) !important;
  box-shadow: 0 24px 60px rgba(23, 17, 35, 0.08) !important;
}
html.brand-abt01.is-embed body.theme-light-print input[type="range"] {
  background: linear-gradient(to right, #f5c518 var(--p, 40%), #d5c9bc var(--p, 40%)) !important;
}
html.is-embed body.theme-light-print .kr-field.gen-slider:not([hidden]),
body.vault-body .kr-vault-panel .kr-field.gen-slider:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
}
html.is-embed body.theme-light-print .kr-field.gen-slider > span,
body.vault-body .kr-vault-panel .kr-field.gen-slider > span {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
}
html.is-embed body.theme-light-print .kr-field.gen-slider > output,
body.vault-body .kr-vault-panel .kr-field.gen-slider > output {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
html.is-embed body.theme-light-print .kr-field.gen-slider > input[type="range"],
body.vault-body .kr-vault-panel .kr-field.gen-slider > input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
}
.kr-logo-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 16px;
  align-items: end;
}
@media (min-width: 981px) {
  .kr-logo-controls:has(#kr-logo-size-field:not([hidden])) {
    grid-template-columns: minmax(180px, 1.6fr) minmax(0, 1fr) auto;
  }
}
.kr-logo-controls .gen-slider { min-width: 0; }
.kr-logo-field .kr-hint { margin: 4px 0 0; }
.kr-logo-status.is-bad { color: #b42318; font-weight: 750; }
body.vault-body .kr-vault-panel .kr-logo-field input[type="file"] {
  min-height: 0;
  height: auto;
  padding: 6px 8px;
  font-size: 13px;
  background: #fff;
}
#kr-logo-clear { align-self: center; }
html.brand-abt01.is-embed .gen-slider output,
html.brand-abt01.is-embed .qr-slider output,
html.brand-abt01.is-embed .kr-field output { color: #9a7200; }
html.brand-abt01.is-embed .btn-primary {
  background: #f5c518;
  border-color: #f5c518;
  color: #171123;
  box-shadow: 0 10px 20px rgba(245, 197, 24, 0.35);
}

html.is-embed .md-stage > .md-card:not(.md-view) {
  padding: 8px 10px 6px !important;
}
html.is-embed .md-row:not(.md-row-file) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 8px;
  margin-bottom: 4px;
}
html.is-embed .md-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 8px;
}
html.is-embed .md-field {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.15;
}
html.is-embed .md-field > select,
html.is-embed .md-field > input:not([type="range"]) {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
html.is-embed body.theme-light-print .md-field input:not([type="range"]):not([type="file"]),
html.is-embed body.theme-light-print .md-field select {
  padding: 2px 6px !important;
  border-radius: 8px;
  font-size: 13px;
  min-height: 0;
  height: 28px;
  line-height: 1.2;
}
html.is-embed body.theme-light-print .md-field input[type="file"] {
  padding: 2px 4px !important;
  font-size: 12px;
  min-height: 0;
  height: auto;
}
html.is-embed body.theme-light-print .md-field input[type="range"] {
  flex: 1 1 72px;
  width: auto !important;
  min-width: 64px;
  margin: 4px 0 !important;
}
html.is-embed .md-range {
  flex: 0 0 auto;
  font-size: 0.65rem;
  line-height: 1.1;
  white-space: nowrap;
}
html.is-embed .md-file-name { margin: 0 0 4px; font-size: 0.72rem; }
html.is-embed .md-note,
html.is-embed .md-status { font-size: 0.72rem; line-height: 1.3; }
html.is-embed .md-note { margin-top: 4px; }
html.is-embed .md-row-file .btn { padding: 4px 10px; }

html.is-embed .md-dock {
  position: static;
  flex: 0 0 auto;
  z-index: 4;
  margin: 0;
  padding: 10px 14px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 36px rgba(90, 50, 20, 0.06);
}
@media (max-width: 980px) {
  html.is-embed:has(.md-app),
  html.is-embed:has(.md-app) body {
    height: 100% !important;
    overflow: hidden;
  }
  html.is-embed:has(.md-app) .shell,
  html.is-embed .md-app,
  html.is-embed .md-app > .wrap,
  html.is-embed .md-stage {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  html.is-embed .md-view-col {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
  html.is-embed .md-stage { gap: 6px; }
  html.is-embed .md-banner {
    padding: 4px 46px 0 10px;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.is-embed .md-view {
    flex: 0 0 160px !important;
    height: 160px !important;
    min-height: 160px !important;
  }
  html.is-embed .md-view-tools { padding: 2px 10px 0; }
  html.is-embed .md-meta {
    padding: 0 10px 4px;
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.is-embed .md-dock { padding: 6px 10px; }
  html.is-embed .md-dock .md-actions { flex-wrap: nowrap; }
  html.is-embed .md-dock .btn { padding: 7px 8px; font-size: 12px; white-space: nowrap; }
  html.is-embed .md-dock .btn-primary { margin-left: auto; padding: 7px 10px; }
  html.is-embed .md-row-file .md-field { display: block; }
  html.is-embed .md-row-file .md-field > input[type="file"] {
    display: block;
    width: 100% !important;
    margin-top: 2px;
  }
  html.is-embed .md-stage > .md-card:not(.md-view) {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0;
    overflow: auto;
  }
  html.is-embed .md-grid,
  html.is-embed .md-row:not(.md-row-file) {
    grid-template-columns: 1fr 1fr;
  }
  @media (max-height: 620px) {
    html.is-embed .md-view {
      flex-basis: 108px !important;
      height: 108px !important;
      min-height: 108px !important;
    }
    html.is-embed .md-banner {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    html.is-embed .md-meta { display: none; }
    html.is-embed .md-stage > .md-card:not(.md-view) { padding: 4px 8px 4px !important; }
    html.is-embed .md-file-name { margin: 0; }
    html.is-embed .md-note { margin-top: 2px; }
  }
}