/* ABT01 desk. Only when the page is opened with desk=1.
   Public ABT01, and brand=abt01 without desk, stay as they are.
   Left glass controls, right grid preview, orange tracks. */

html.is-desk {
  --desk-accent: #e56b1f;
  --desk-ink: #1c1917;
  --desk-muted: #57534e;
  --desk-line: #ece2d3;
  --desk-grid: rgba(120, 90, 60, .07);
  background: #fff7f1 !important;
}
html.is-desk,
html.is-desk body {
  height: 100%;
  margin: 0;
}
html.is-desk body {
  background-color: #fff7f1 !important;
  background-image:
    radial-gradient(ellipse 920px 520px at 6% -8%, rgba(240, 106, 42, .22) 0%, transparent 58%),
    radial-gradient(ellipse 760px 480px at 100% 0%, rgba(255, 111, 125, .16) 0%, transparent 54%) !important;
  color: var(--desk-ink);
}

html.is-desk .st-price,
html.is-desk .gen-note,
html.is-desk .kr-price-note,
html.is-desk .nyx-price,
html.is-desk .litho-price-note { display: none !important; }

/* Letters studio: the dock is the left panel, the card is the grid. */
html.is-desk:not(.is-embed) body.studio-page {
  display: grid !important;
  grid-template-columns: 380px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  background-color: transparent !important;
}
html.is-desk:not(.is-embed) body.studio-page .st-top,
html.is-desk:not(.is-embed) body.studio-page .st-steps,
html.is-desk:not(.is-embed) body.studio-page .st-menu,
html.is-desk:not(.is-embed) body.studio-page .nyx-ben,
html.is-desk:not(.is-embed) body.studio-page .st-sign { display: none !important; }
html.is-desk:not(.is-embed) body.studio-page .st-stage {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  margin: 0;
  min-height: 0;
  height: 100%;
}
html.is-desk:not(.is-embed) body.studio-page .st-dock {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  align-content: start;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 30px -8px rgba(60, 40, 20, .14);
}
html.is-desk:not(.is-embed) body.studio-page .st-card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 252, 248, .94) !important;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 30px -8px rgba(60, 40, 20, .14) !important;
}
html.is-desk:not(.is-embed) body.studio-page .st-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--desk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--desk-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
html.is-desk:not(.is-embed) body.studio-page .gen-frame { z-index: 1; background: transparent; }
html.is-desk:not(.is-embed) .st-height-mark,
html.is-desk:not(.is-embed) .st-size,
html.is-desk:not(.is-embed) .st-orbit,
html.is-desk:not(.is-embed) .st-rail { z-index: 3; }
html.is-desk:not(.is-embed) .st-orbit {
  top: 14px;
  right: 14px;
  bottom: auto;
  left: auto;
  transform: none;
}
html.is-desk:not(.is-embed) .st-card::after {
  content: "Live preview";
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  pointer-events: none;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 26px;
  border-radius: 999px;
  border: 1px solid var(--desk-line);
  background-color: rgba(255, 255, 255, .86);
  background-image: radial-gradient(circle at 13px 50%, #1f9d62 3.5px, transparent 4px);
  font-size: 12px;
  font-weight: 600;
  color: var(--desk-muted);
}
html.is-desk:not(.is-embed) .st-sliders { grid-template-columns: 1fr; }
html.is-desk:not(.is-embed) .st-words {
  position: static;
  width: auto;
  min-width: 0;
  z-index: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 10px;
  pointer-events: auto;
}
html.is-desk:not(.is-embed) .st-words span {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a837c;
}
html.is-desk:not(.is-embed) body.theme-light-print.studio-page .st-words input[type="text"] {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #ddcfb9 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
html.is-desk:not(.is-embed) .st-words i { display: none; }
html.is-desk:not(.is-embed) .st-more {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  z-index: auto;
  display: grid !important;
  background: transparent;
  box-shadow: none;
  padding: 0 0 12px;
}
html.is-desk:not(.is-embed) .st-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
html.is-desk:not(.is-embed) .st-quote { width: 100%; margin-left: 0; }

/* Embedded tools share that same two-column desk. */
html.is-desk.is-embed body {
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}
html.is-desk.is-embed .site-header,
html.is-desk.is-embed .site-footer,
html.is-desk.is-embed .bg-fx,
html.is-desk.is-embed .litho-hero,
html.is-desk.is-embed .litho-section,
html.is-desk.is-embed .section-head,
html.is-desk.is-embed .shop-frame,
html.is-desk.is-embed .kr-vault-intro,
html.is-desk.is-embed .kr-how,
html.is-desk.is-embed footer { display: none !important; }

html.is-desk.is-embed .qr-stage,
html.is-desk.is-embed .pet-stage,
html.is-desk.is-embed .sc-stage,
html.is-desk.is-embed .litho-maker-stage,
html.is-desk.is-embed .relief-grid,
html.is-desk.is-embed .md-stage,
html.is-desk.is-embed body.studio-page .gen-tool,
html.is-desk.is-embed #lib-panel-keyrings .kr-layout {
  display: grid !important;
  grid-template-columns: 380px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  flex: 1;
  min-height: 0;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  align-items: stretch;
  background: transparent !important;
}

html.is-desk.is-embed .qr-view-col,
html.is-desk.is-embed .pet-view,
html.is-desk.is-embed .sc-view-col,
html.is-desk.is-embed .ls-view,
html.is-desk.is-embed .md-view-col,
html.is-desk.is-embed .relief-pair,
html.is-desk.is-embed body.studio-page .gen-view,
html.is-desk.is-embed .kr-preview-panel {
  order: 0;
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  height: 100%;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 252, 248, .94) !important;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 30px -8px rgba(60, 40, 20, .14) !important;
}
html.is-desk.is-embed .qr-stage > .qr-card,
html.is-desk.is-embed .pet-stage > .pet-card:not(.pet-view),
html.is-desk.is-embed .sc-stage > .sc-card:not(.sc-view),
html.is-desk.is-embed .ls-panel,
html.is-desk.is-embed .relief-controls,
html.is-desk.is-embed .md-stage > .md-card:not(.md-view),
html.is-desk.is-embed body.studio-page #gen-form,
html.is-desk.is-embed .kr-form-panel {
  order: 0;
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  height: 100%;
  max-height: none !important;
  overflow: auto;
  align-content: start;
  background: rgba(255, 247, 241, .96) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 30px -8px rgba(60, 40, 20, .14) !important;
}

html.is-desk.is-embed .qr-view-col::before,
html.is-desk.is-embed .pet-view::before,
html.is-desk.is-embed .sc-view-col::before,
html.is-desk.is-embed .ls-view::before,
html.is-desk.is-embed .md-view-col::before,
html.is-desk.is-embed .relief-pair > .relief-view::before,
html.is-desk.is-embed body.studio-page .gen-view::before,
html.is-desk.is-embed .kr-preview-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--desk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--desk-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
html.is-desk.is-embed .qr-view-col canvas,
html.is-desk.is-embed .pet-view canvas,
html.is-desk.is-embed .sc-view canvas,
html.is-desk.is-embed .ls-view canvas,
html.is-desk.is-embed .md-view canvas,
html.is-desk.is-embed .relief-view canvas,
html.is-desk.is-embed body.studio-page .gen-view canvas,
html.is-desk.is-embed .kr-preview-3d canvas {
  position: relative;
  z-index: 1;
}
html.is-desk.is-embed .ls-empty,
html.is-desk.is-embed .ls-processing { z-index: 2; }

/* Map and 3D stay side by side. The settings sit under the map. */
html.is-desk.is-embed .relief-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr) !important;
  grid-template-rows: minmax(180px, 1fr) minmax(240px, 1fr);
}
html.is-desk.is-embed .relief-pair {
  display: contents !important;
}
html.is-desk.is-embed .relief-pair > .relief-view {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 0;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 252, 248, .94) !important;
}
html.is-desk.is-embed .relief-map {
  grid-column: 2;
  grid-row: 1;
  border-radius: 18px;
  height: 100%;
  min-height: 0;
}
html.is-desk.is-embed .relief-controls {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  height: 100%;
  min-height: 0;
}

html.is-desk.is-embed .kr-preview-panel {
  display: flex;
  flex-direction: column;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  overflow: hidden;
}
html.is-desk.is-embed .kr-preview-3d {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 252, 248, .94) !important;
}
html.is-desk.is-embed .kr-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.is-desk.is-embed #lib-panel-keyrings { height: 100%; min-height: 0; }
html.is-desk.is-embed .kr-cart-panel {
  flex: none;
  max-height: 168px;
  overflow: auto;
  margin-top: 12px;
}

html.is-desk.is-embed body.studio-page {
  background: transparent !important;
  padding: 0 !important;
  height: 100%;
  overflow: hidden;
}
html.is-desk.is-embed body.studio-page .st-stage,
html.is-desk.is-embed body.studio-page .st-card,
html.is-desk.is-embed body.studio-page .gen-native {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
}
html.is-desk.is-embed body.studio-page .st-stage { height: 100%; min-height: 0; margin: 0; }
html.is-desk.is-embed body.studio-page .st-card { position: absolute; inset: 0; }
html.is-desk.is-embed body.studio-page .gen-native { padding: 0; overflow: hidden; }
html.is-desk.is-embed body.studio-page #gen-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  padding: 16px 18px;
}
html.is-desk.is-embed body.studio-page #gen-form > h1,
html.is-desk.is-embed body.studio-page #gen-form > .gen-lead { display: none !important; }

html.is-desk.is-embed .qr-stage > .qr-card,
html.is-desk.is-embed .pet-stage > .pet-card:not(.pet-view) {
  display: block;
  padding: 16px 18px;
}
html.is-desk.is-embed .litho-page,
html.is-desk.is-embed .litho-maker,
html.is-desk.is-embed .litho-maker > .wrap,
html.is-desk.is-embed .shell,
html.is-desk.is-embed main {
  min-height: 0;
  height: 100%;
}

/* Peach page. The brand embed paints #f3f5f8, which beats the desk body
   and shows through the menu as a cool blue. This selector wins. */
html.is-desk.brand-abt01.is-embed,
html.is-desk.brand-abt01.is-embed body {
  background-color: #fff7f1 !important;
  background-image:
    radial-gradient(ellipse 920px 520px at 6% -8%, rgba(240, 106, 42, .22) 0%, transparent 58%),
    radial-gradient(ellipse 760px 480px at 100% 0%, rgba(255, 111, 125, .16) 0%, transparent 54%) !important;
}
html.is-desk.brand-abt01.is-embed .sc-view-col,
html.is-desk.brand-abt01.is-embed .md-view-col {
  background: rgba(255, 252, 248, .94) !important;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 30px -8px rgba(60, 40, 20, .14) !important;
}

/* Orange tracks. The input is a 22px hit target. The line is the 4px track.
   WebKit pins the thumb to the top of that line; -7px centers an 18px knob.
   border-box keeps the orange ring inside the 18px so the knob stays on the line. */
html.is-desk.brand-abt01,
html.is-desk.brand-abt01 body.studio-page { --st-orange: var(--desk-accent); }
html.is-desk.brand-abt01 body.studio-page .st-slider input[type="range"],
html.is-desk.brand-abt01 body.studio-page .gen-slider input[type="range"],
html.is-desk.brand-abt01.is-embed body.theme-light-print input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 22px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Mould side menu. The embed sheet puts four fields on one line and
   squeezes each control beside its label. Inside the 380px column the
   labels, hints and the split slider land on top of each other. */
html.is-desk.is-embed .md-stage > .md-card:not(.md-view) {
  padding: 8px 14px 6px !important;
}
html.is-desk.is-embed .md-dock {
  background: rgba(255, 247, 241, .96) !important;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 30px -8px rgba(60, 40, 20, .14) !important;
}
html.is-desk.is-embed .md-row:not(.md-row-file),
html.is-desk.is-embed .md-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px 12px !important;
  margin-bottom: 6px;
}
html.is-desk.is-embed .md-row-file {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 10px;
}
html.is-desk.is-embed .md-field:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.25;
}
html.is-desk.is-embed .md-field > select,
html.is-desk.is-embed .md-field > input:not([type="range"]) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  flex: none;
}
html.is-desk.is-embed body.theme-light-print .md-field input:not([type="range"]):not([type="file"]),
html.is-desk.is-embed body.theme-light-print .md-field select {
  height: auto !important;
  min-height: 32px;
  padding: 5px 10px !important;
  border-radius: 10px;
  font-size: 13px;
  background: #fff !important;
  border: 1px solid #eadfce !important;
  box-sizing: border-box;
}
html.is-desk.is-embed body.theme-light-print .md-field input[type="file"] {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  padding: 6px 8px !important;
  box-sizing: border-box;
}
html.is-desk.is-embed .md-range {
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: normal;
}
html.is-desk.is-embed .md-row-file .btn {
  justify-self: start;
  white-space: nowrap;
}
html.is-desk.is-embed body.theme-light-print .md-field input[type="range"] {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 2px 0 0 !important;
}
html.is-desk.is-embed .md-view-tools {
  display: flex !important;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: 16px;
}
html.is-desk.is-embed .md-view-tools .md-explode {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
html.is-desk.is-embed .md-view-tools .md-explode input[type="range"] {
  margin: 0 !important;
}
html.is-desk.is-embed .md-note,
html.is-desk.is-embed .md-status {
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 4px;
}

/* Keyring side menu. The embed sheet uses four columns. Inside the 380px
   desk column the labels, millimetre values and slider knobs overlap. */
html.is-desk.brand-abt01.is-embed .kr-form-panel,
html.is-desk.brand-abt01.is-embed .kr-cart-panel {
  background: rgba(255, 247, 241, .96) !important;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 30px -8px rgba(60, 40, 20, .14) !important;
}
html.is-desk.brand-abt01.is-embed .kr-preview-3d {
  background: rgba(255, 252, 248, .94) !important;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 30px -8px rgba(60, 40, 20, .14) !important;
}
html.is-desk.is-embed .kr-form-actions {
  background: transparent !important;
}
html.is-desk.is-embed body.theme-light-print .kr-form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px 12px !important;
}
html.is-desk.is-embed body.theme-light-print .kr-field {
  min-width: 0;
  gap: 4px;
}
html.is-desk.is-embed body.theme-light-print .kr-field > span {
  min-width: 0;
  line-height: 1.25;
}
html.is-desk.is-embed body.theme-light-print .kr-field input:not([type="range"]),
html.is-desk.is-embed body.theme-light-print .kr-field select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
  height: auto !important;
  min-height: 34px;
  padding: 6px 10px !important;
}
html.is-desk.is-embed body.theme-light-print .kr-field.gen-slider:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}
html.is-desk.is-embed body.theme-light-print .kr-field.gen-slider > span {
  grid-column: 1;
  grid-row: 1;
}
html.is-desk.is-embed body.theme-light-print .kr-field.gen-slider > output {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}
html.is-desk.is-embed body.theme-light-print .kr-field.gen-slider > input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}
html.is-desk.brand-abt01.is-embed body.vault-body .kr-field input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 22px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.is-desk.brand-abt01 body.studio-page .st-slider input[type="range"]::-webkit-slider-runnable-track,
html.is-desk.brand-abt01 body.studio-page .gen-slider input[type="range"]::-webkit-slider-runnable-track,
html.is-desk.brand-abt01.is-embed body.theme-light-print input[type="range"]::-webkit-slider-runnable-track,
html.is-desk.brand-abt01.is-embed body.vault-body .kr-field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(to right, #e56b1f var(--p, 40%), #e6d9cf var(--p, 40%)) !important;
}
html.is-desk.brand-abt01 body.studio-page .st-slider input[type="range"]::-moz-range-track,
html.is-desk.brand-abt01 body.studio-page .gen-slider input[type="range"]::-moz-range-track,
html.is-desk.brand-abt01.is-embed body.theme-light-print input[type="range"]::-moz-range-track,
html.is-desk.brand-abt01.is-embed body.vault-body .kr-field input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(to right, #e56b1f var(--p, 40%), #e6d9cf var(--p, 40%)) !important;
}
html.is-desk .st-slider input[type="range"]::-webkit-slider-thumb,
html.is-desk body.studio-page .gen-slider input[type="range"]::-webkit-slider-thumb,
html.is-desk.is-embed input[type="range"]::-webkit-slider-thumb,
html.is-desk.is-embed body.vault-body .kr-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid #e56b1f;
  background: #fff;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.25);
}
html.is-desk .st-slider input[type="range"]::-moz-range-thumb,
html.is-desk body.studio-page .gen-slider input[type="range"]::-moz-range-thumb,
html.is-desk.is-embed input[type="range"]::-moz-range-thumb,
html.is-desk.is-embed body.vault-body .kr-field input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #e56b1f;
  background: #fff;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.25);
}
html.is-desk.brand-abt01 .st-slider output,
html.is-desk.brand-abt01 .st-height-mark,
html.is-desk.brand-abt01.is-embed .gen-slider output,
html.is-desk.brand-abt01.is-embed .qr-slider output,
html.is-desk.brand-abt01.is-embed .kr-field output { color: #e56b1f !important; }
html.is-desk.brand-abt01 .st-quote,
html.is-desk.brand-abt01 body.studio-page #gen-form .btn-primary,
html.is-desk.brand-abt01.is-embed .btn-primary {
  background: linear-gradient(135deg, #f08a45, #e56b1f 55%, #d25612) !important;
  border-color: #e56b1f !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -6px rgba(229, 107, 31, .55) !important;
}

@media (max-width: 860px) {
  html.is-desk,
  html.is-desk body { height: auto; overflow: visible; }
  html.is-desk:not(.is-embed) body.studio-page {
    display: flex !important;
    flex-direction: column;
    height: auto;
    overflow: visible;
    gap: 12px;
  }
  html.is-desk:not(.is-embed) body.studio-page .st-stage {
    order: -1;
    height: 46vh;
    min-height: 240px;
    flex: none;
  }
  html.is-desk:not(.is-embed) body.studio-page .st-dock {
    height: auto;
    overflow: visible;
  }
  html.is-desk.is-embed body { overflow: visible; height: auto; }
  html.is-desk.is-embed .qr-stage,
  html.is-desk.is-embed .pet-stage,
  html.is-desk.is-embed .sc-stage,
  html.is-desk.is-embed .litho-maker-stage,
  html.is-desk.is-embed .relief-grid,
  html.is-desk.is-embed .md-stage,
  html.is-desk.is-embed body.studio-page .gen-tool,
  html.is-desk.is-embed #lib-panel-keyrings .kr-layout {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    grid-template-columns: 1fr !important;
  }
  html.is-desk.is-embed .qr-view-col,
  html.is-desk.is-embed .pet-view,
  html.is-desk.is-embed .sc-view-col,
  html.is-desk.is-embed .ls-view,
  html.is-desk.is-embed .md-view-col,
  html.is-desk.is-embed .relief-pair,
  html.is-desk.is-embed body.studio-page .gen-view,
  html.is-desk.is-embed .kr-preview-panel {
    order: -1;
    height: 46vh;
    min-height: 240px;
    flex: none;
  }
  html.is-desk.is-embed .qr-stage > .qr-card,
  html.is-desk.is-embed .pet-stage > .pet-card:not(.pet-view),
  html.is-desk.is-embed .sc-stage > .sc-card:not(.sc-view),
  html.is-desk.is-embed .ls-panel,
  html.is-desk.is-embed .relief-controls,
  html.is-desk.is-embed .md-stage > .md-card:not(.md-view),
  html.is-desk.is-embed body.studio-page #gen-form,
  html.is-desk.is-embed .kr-form-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  html.is-desk.is-embed .relief-pair {
    display: flex !important;
    flex-direction: column;
    height: auto;
    min-height: 0;
    gap: 12px;
  }
  html.is-desk.is-embed .relief-pair > .relief-view {
    grid-column: auto;
    grid-row: auto;
    height: 46vh;
    min-height: 240px;
  }
  html.is-desk.is-embed .relief-map {
    grid-column: auto;
    grid-row: auto;
    height: clamp(220px, 42vw, 380px);
    min-height: 220px;
  }
  html.is-desk.is-embed .relief-controls {
    grid-column: auto;
    grid-row: auto;
  }
  html.is-desk.is-embed .kr-cart-panel { max-height: none; }
  html.is-desk.is-embed .md-view-tools .md-explode {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pet tags side menu. Tighter than the public card, and each size
   slider keeps a label, a millimetre value, and a full-width track.
   WebKit and Firefox tracks stay in separate rules. */
html.is-desk.is-embed .pet-stage > .pet-card:not(.pet-view) {
  display: block;
  padding: 10px 14px 8px;
}
html.is-desk.is-embed .pet-card .pet-pills {
  gap: 5px;
  margin-bottom: 8px;
}
html.is-desk.is-embed .pet-card .pet-pills button {
  padding: 5px 11px;
  font-size: 0.82rem;
}
html.is-desk.is-embed .pet-card .pet-field {
  gap: 3px;
  margin-bottom: 8px;
}
html.is-desk.is-embed #pet-lines {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 10px;
  margin-bottom: 8px;
}
html.is-desk.is-embed .pet-field input {
  padding: 7px 10px;
  border-radius: 10px;
}
html.is-desk.is-embed .pet-stage > .pet-card:not(.pet-view) > .gen-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  width: 100%;
  margin: 0 0 2px;
}
html.is-desk.is-embed .pet-stage > .pet-card:not(.pet-view) > .gen-slider > input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}
html.is-desk.brand-abt01.is-embed .pet-card .gen-slider input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 22px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.is-desk.brand-abt01.is-embed .pet-card .gen-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(to right, #e56b1f var(--p, 40%), #e6d9cf var(--p, 40%)) !important;
}
html.is-desk.brand-abt01.is-embed .pet-card .gen-slider input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(to right, #e56b1f var(--p, 40%), #e6d9cf var(--p, 40%)) !important;
}
html.is-desk.brand-abt01.is-embed .pet-card .gen-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid #e56b1f;
  background: #fff;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.25);
}
html.is-desk.brand-abt01.is-embed .pet-card .gen-slider input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #e56b1f;
  background: #fff;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.25);
}
html.is-desk.is-embed .pet-card .pet-note {
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.35;
}
html.is-desk.is-embed .pet-card .pet-inks { gap: 6px; }
html.is-desk.is-embed .pet-actions { gap: 6px; margin-bottom: 8px; }

/* Desk nameplates. Name and title share a row. Font, each size
   slider, and each colour row stay full width. WebKit and Firefox
   tracks stay in separate rules. */
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px 10px !important;
  padding: 10px 14px 8px !important;
  align-content: start;
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .gen-field:has(#g-font),
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .gen-slider,
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .gen-field:has(.gen-swatches),
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .gen-status,
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .gen-actions,
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .nyx-account-bar {
  grid-column: 1 / -1;
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .gen-field {
  margin-bottom: 0;
  gap: 3px;
  min-width: 0;
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) .gen-field input,
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) .gen-field select {
  padding: 7px 10px;
  min-height: 34px;
  border-radius: 10px;
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .gen-slider {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  width: 100%;
  margin: 0;
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) > .gen-slider > input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}
html.is-desk.brand-abt01.is-embed body.studio-page #gen-form .gen-slider input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 22px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.is-desk.brand-abt01.is-embed body.studio-page #gen-form .gen-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(to right, #e56b1f var(--p, 40%), #e6d9cf var(--p, 40%)) !important;
}
html.is-desk.brand-abt01.is-embed body.studio-page #gen-form .gen-slider input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(to right, #e56b1f var(--p, 40%), #e6d9cf var(--p, 40%)) !important;
}
html.is-desk.brand-abt01.is-embed body.studio-page #gen-form .gen-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid #e56b1f;
  background: #fff;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.25);
}
html.is-desk.brand-abt01.is-embed body.studio-page #gen-form .gen-slider input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #e56b1f;
  background: #fff;
  box-shadow: 0 1px 4px rgba(40, 20, 10, 0.25);
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) .gen-swatches { gap: 6px; }
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) .gen-swatch {
  width: 22px;
  height: 22px;
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) .gen-actions {
  gap: 6px;
  margin: 2px 0 0;
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-font) .gen-actions .btn {
  padding: 7px 12px;
  margin-left: 0 !important;
}
html.is-desk.is-embed body.studio-page #gen-form:has(#g-title-size) > .gen-field:has(#g-colour) {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  html.is-desk.is-embed body.studio-page:has(#g-font) .st-stage {
    height: auto;
  }
  html.is-desk.is-embed body.studio-page:has(#g-font) .st-card {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
  }
  html.is-desk.is-embed body.studio-page:has(#g-font) .gen-native {
    position: relative;
    inset: auto;
    height: auto;
    overflow: visible;
  }
  html.is-desk.is-embed body.studio-page:has(#g-font) .gen-view {
    display: block !important;
    position: relative;
    order: -1;
    width: 100%;
    height: 46vh;
    min-height: 240px;
    flex: none;
  }
  html.is-desk.is-embed body.studio-page:has(#g-font) #gen-view {
    width: 100%;
    height: 100% !important;
    min-height: 240px;
  }
  html.is-desk.is-embed body.studio-page:has(#g-font) #gen-form {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }
}


/* STL splitter fills the studio frame */
html.is-desk.is-embed:has(.gen-frame:not([hidden])),
html.is-desk.is-embed body.studio-page:has(.gen-frame:not([hidden])) {
  height: 100%;
}
html.is-desk.is-embed body.studio-page:has(.gen-frame:not([hidden])) .st-stage {
  height: 100%;
  min-height: 100%;
  overflow: auto;
}
html.is-desk.is-embed body.studio-page:has(.gen-frame:not([hidden])) .st-card,
html.is-desk.is-embed body.studio-page:has(.gen-frame:not([hidden])) .gen-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}