/* studiostage.css - the skin studio's stage design (js/studiostage.mjs). Loaded after the lab's own sheets.
   body.sd-ready   = the stage module booted (every width)
   body.sd-stagebg = the stage background is the backdrop (every width)
   body.sd         = the desktop layout: top bar, docked panel, view box (901 px and wider)
   Structural literals: the near-black stage ground, the callout node fill, shadows and the ?sdperf readout. */

/* ---------- the stage background ---------- */
#sd-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
body:not(.sd-stagebg) #sd-bg { display: none; }
body.sd-stagebg #stage-wrap { background: #050404; }
body.sd-stagebg #stage-canvas { z-index: 2; }
/* signed out: the sign-in button floats over the stage instead of a dark curtain */
body.sd-stagebg .stage-gate { background: linear-gradient(180deg, rgba(5, 4, 4, 0) 0%, rgba(5, 4, 4, .18) 55%, rgba(5, 4, 4, .45) 100%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- before the module runs: the lab's chrome stays hidden on a desktop (an 8 s fallback reveals it) ---------- */
@media (min-width: 901px) {
  body.studiolab:not(.sd) #species-rail, body.studiolab:not(.sd) #lab-col, body.studiolab:not(.sd) .vp-overlay, body.studiolab:not(.sd) #lab-rail,
  body.studiolab:not(.sd) .crt-spinner { visibility: hidden; animation: sdReveal 0s linear 8s forwards; }
  body.studiolab:not(.sd) { grid-template-columns: minmax(0, 1fr) !important; }
  body.studiolab:not(.sd) #workspace { grid-column: 1 / -1 !important; }
  body.studiolab:not(.sd) #stage-wrap { background: #050404; }
}
@keyframes sdReveal { to { visibility: visible; } }

/* ---------- desktop layout ---------- */
body.studiolab.sd { grid-template-columns: minmax(0, 1fr) !important; }
body.sd #species-rail { display: none !important; }
body.sd #workspace { grid-column: 1 / -1 !important; }
body.sd .vp-center-stack, body.sd .vp-tools, body.sd #lab-rail, body.sd #vp-loading ~ .crt-spinner { display: none !important; }
body.sd .vp-rot { position: absolute; left: 50%; bottom: 12px; top: auto; right: auto; transform: translateX(-50%); z-index: 9; font: 600 10px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; pointer-events: none; }

#sd-top, #sd-panel, #sd-view { zoom: var(--sd-z, 1); }
body:not(.sd) #sd-top, body:not(.sd) #sd-panel, body:not(.sd) #sd-view, body:not(.sd) #sd-wire, body:not(.sd) #sd-tags { display: none !important; }

/* shared controls in the site's look */
.sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--fg); font: 700 12px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s, color .18s; }
.sd-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 16px var(--accent-glow); }
.sd-btn.on { border-color: transparent; color: var(--on-primary); background: linear-gradient(100deg, var(--accent), var(--accent-hi)); box-shadow: 0 0 18px var(--accent-glow); }
.sd-btn.sm { height: 30px; padding: 0 11px; font-size: 11.5px; }
.sd-btn.xs { height: 26px; padding: 0 8px; font-size: 10.5px; letter-spacing: .08em; }
.sd-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-k { font: 700 10.5px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; }

/* ---------- top bar ---------- */
#sd-top { position: absolute; top: 12px; left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
#sd-top > * { pointer-events: auto; }
.sd-name-row { display: flex; align-items: center; gap: 14px; }
body.sd #sd-top .vp-specnav { position: static; transform: none; display: inline-flex; align-items: center; gap: 14px; order: 0; }
body.sd #sd-top .vp-specnav .spec-name { font-family: var(--font-display); font-size: 54px; line-height: .9; letter-spacing: .12em; color: var(--fg); text-shadow: 0 0 24px var(--accent-glow); }
body.sd #sd-top .vp-specnav .spec-name .dot { display: none; }
body.sd #sd-top .vp-specnav .spec-status { font: 700 10px/1 var(--font-ui); letter-spacing: .3em; color: var(--fg-mute); }
body.sd #sd-top .vp-specnav .nav-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--fg); }
body.sd #sd-top .vp-specnav .nav-arrow:hover { border-color: var(--accent); box-shadow: 0 0 16px var(--accent-glow); color: var(--accent-hi); }
.sd-growth-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sd-seg { display: inline-flex; gap: 4px; }
body.sd #sd-top .stage-growth { position: static; transform: none; left: auto; right: auto; top: auto; max-width: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 0 6px; background: none; border: 0; box-shadow: none; }
body.sd #sd-top .stage-growth .gr-label { display: none; }
body.sd #sd-top .stage-growth input[type="range"] { width: 120px; height: 18px; }
/* the stage buttons already name the stage; keep only the exact size next to the fine slider */
body.sd #sd-top .stage-growth .gr-readout { min-width: 0; font-size: 0; color: var(--fg-dim); }
body.sd #sd-top .stage-growth #growth-pct { font: 700 10.5px/1 var(--font-ui); letter-spacing: .14em; }
body.sd #sd-top .stage-growth #growth-stage { display: none; }
.sd-cycler-row:empty { display: none; }
body.sd #sd-top .skin-cycler { position: static; transform: none; }

/* ---------- the docked panel ---------- */
#sd-panel { position: absolute; z-index: 32; width: 420px; display: flex; flex-direction: column; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3); }
#sd-panel::before, #sd-panel::after { content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--accent); pointer-events: none; filter: drop-shadow(0 0 4px var(--accent-glow)); }
#sd-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 6px; }
#sd-panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 6px; }
#sd-panel.dragging { box-shadow: 0 40px 100px rgba(0, 0, 0, .65), 0 0 0 1px var(--accent); user-select: none; }
.sd-p-head { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 8px 6px 12px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); cursor: grab; touch-action: none; }
.sd-p-head:active { cursor: grabbing; }
.sd-grip { display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; opacity: .75; }
.sd-grip i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.sd-p-title { font: 400 21px/1 var(--font-display); letter-spacing: .14em; color: var(--fg); text-transform: uppercase; }
.sd-p-pos { display: flex; gap: 3px; margin-left: auto; }
.sd-p-fold { width: 26px; height: 26px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); background: none; color: var(--fg-dim); display: grid; place-items: center; cursor: pointer; }
#sd-panel.min .sd-p-body, #sd-panel.min .sd-p-tabs { display: none; }
.sd-p-tabs { flex: none; }
body.sd.sd-species .sd-p-tabs { display: none; }
.sd-p-body { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent; }

/* the studio's own column, now inside the panel */
body.sd #sd-panel #lab-col { display: flex !important; flex-direction: column; grid-row: auto !important; grid-column: auto !important; min-height: 0; }
body.sd #sd-panel #lab-tabs { position: static; z-index: 3; display: flex !important; align-items: stretch; min-height: 44px; width: 100%; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
body.sd #sd-panel #lab-tabs .lab-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; font: 700 12px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; padding: 11px 4px 9px; white-space: nowrap; }
/* skin-access status (studio's skinaccess.mjs): small pills under each tab name, a tidy box above the pane it is about */
body.sd #sd-panel .sa-status.sa-compact { display: block; margin: 0; padding: 0; }
body.sd #sd-panel .sa-compact .sa-head { justify-content: center; gap: 3px; }
body.sd #sd-panel .sa-pill, body.sd #sd-panel .sa-badge { font: 700 8.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
body.sd #sd-panel .sa-status:not(.sa-compact) { margin: 6px 0 10px; padding: 8px 10px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
body.sd #sd-panel .sa-message, body.sd #sd-panel .sa-countdown, body.sd #sd-panel .sa-howto, body.sd #sd-panel .sa-limits { font: 500 11px/1.4 var(--font-ui); }
body.sd #sd-panel .sa-slot:has(+ [hidden]) { display: none; }   /* the box of a pane that is not showing */
body.sd #sd-panel #panel .lab-lede { display: none; }
body.sd #sd-panel #studio-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
body.sd #sd-panel #studio-tabs [role="tab"] { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 8px 6px; }
body.sd #sd-panel #lab-tabs .lab-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
body.sd #sd-panel #lab-dock-panel { position: static !important; height: auto !important; overflow: visible !important; inset: auto !important; }
body.sd #sd-panel #lab-dock-panel .deck-row-l.deck-wells { overflow: visible; }
body.sd #sd-panel #lab-dock-panel .deck-codes { display: block; }
body.sd #sd-panel #panel { position: static !important; transform: none !important; width: auto !important; height: auto !important; max-height: none !important; border: 0 !important; display: none; overflow: visible; padding: 12px 14px 18px; background: none !important; }
body.sd.drawer-open #sd-panel #panel { display: block; }
body.sd.drawer-open #sd-panel #lab-dock-panel { display: none !important; }
body.sd #lab-drawer-scrim { display: none !important; }
body.sd #sd-panel .drawer-head { display: none; }

/* species, swapped in for the skin creator: names only */
.sd-species-view { display: none; padding: 12px 14px 14px; }
body.sd.sd-species .sd-species-view { display: block; }
body.sd.sd-species #sd-panel #lab-col { display: none !important; }
.sd-back { width: 100%; justify-content: flex-start; margin-bottom: 10px; }
body.sd .sd-species-view .deck-search { margin: 0 0 10px; }
body.sd .sd-species-view #deck-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.sd .sd-species-view .deck-row { min-height: 40px; padding: 0 12px; align-items: center; justify-content: flex-start; }
body.sd .sd-species-view .deck-row .dr-thumb, body.sd .sd-species-view .deck-row span, body.sd .sd-species-view .deck-row::after { display: none !important; }
body.sd .sd-species-view .deck-row b { font: 400 17px/1 var(--font-display); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sd .sd-species-view .deck-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* panel above the dino: wide, the editor in three columns */
#sd-panel.wide .sd-species-view #deck-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.sd #sd-panel.wide #lab-dock-panel .deck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
body.sd #sd-panel.wide #lab-dock-panel .deck > .deck-row-l { grid-row: 1; }
body.sd #sd-panel.wide #lab-dock-panel .deck > .deck-head { grid-column: 1; }
body.sd #sd-panel.wide #lab-dock-panel .deck > .deck-wells { grid-column: 2; }
body.sd #sd-panel.wide #lab-dock-panel .deck > .deck-actions { grid-column: 3; border-top: 0; }
body.sd #sd-panel.wide #lab-dock-panel .deck > .deck-codes { grid-column: 3; grid-row: 2; }

/* ---------- view settings ---------- */
#sd-view { position: absolute; left: 16px; bottom: 24px; z-index: 30; width: 420px; padding: 0; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-2); }
body.sd[data-sd-dock="left"] #sd-view { left: auto; right: 16px; }
.sd-vr { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 26px; }
.sd-vr.sd-vr-nolabel { grid-template-columns: minmax(0, 1fr); }
.sd-vr-anim:has(#anim-bar[hidden]) { display: none; }
.sd-vc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sd-vr-read .sd-vc:empty { display: none; }
.sd-vr-read:has(.sd-vc:empty) { display: none; }
body.sd #sd-view #anim-bar { position: static !important; transform: none !important; display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; background: none; border: 0; }
body.sd #sd-view #anim-bar[hidden] { display: none !important; }
body.sd #sd-view #anim-bar { flex-wrap: nowrap; }
body.sd #sd-view #anim-bar button { height: 24px; min-height: 24px; padding: 0 7px; font: 700 10px/1 var(--font-ui); letter-spacing: .06em; }
body.sd #sd-view .vp-autorotate, body.sd #sd-view .vp-rotate, body.sd #sd-view .vp-exposure, body.sd #sd-view .vp-viewkeys, body.sd #sd-view .vp-readout { position: static !important; transform: none !important; width: auto !important; margin: 0; }
body.sd #sd-view .vp-autorotate { height: 26px; padding: 0 9px; font: 700 10px/1 var(--font-ui); letter-spacing: .06em; white-space: nowrap; }
body.sd #sd-view .vp-rotate, body.sd #sd-view .vp-exposure { display: inline-flex; align-items: center; gap: 6px; }
body.sd #sd-view .vp-rotate input, body.sd #sd-view .vp-exposure input { width: 84px; height: 16px; }
body.sd #sd-view .vp-rotate, body.sd #sd-view .vp-exposure { padding: 0 6px; height: 26px; border-radius: 999px; }
body.sd #sd-view .sd-vr-spin .sd-vc, body.sd #sd-view .sd-vr-light .sd-vc { flex-wrap: nowrap; }
body.sd #sd-view .vp-viewkeys { display: inline-flex; gap: 6px; align-items: center; }
body.sd #sd-view .rail-colors { position: static; display: inline-flex; flex-direction: row; gap: 6px; align-items: center; }
body.sd #sd-view .rail-colors button { width: 16px; height: 16px; min-height: 16px; border-radius: 50%; padding: 0; }
body.sd #sd-view .rail-colors .rail-custom { width: 16px; height: 16px; }
body.sd #sd-view .sd-vr-tog .rail-action { height: 26px; min-height: 26px; padding: 0 9px; font: 700 10px/1 var(--font-ui); letter-spacing: .06em; width: auto; }
body.sd #sd-view .sd-vr-tog .sd-vc { flex-wrap: nowrap; }
body.sd #sd-view .vp-readout { display: inline-flex; gap: 8px; margin-left: auto; padding: 0; background: none; border: 0; font: 600 9px/1.2 var(--font-ui); letter-spacing: .14em; color: var(--fg-mute); }
body.sd #sd-view .vp-readout .vp-readout-quiet { display: none; }

/* ---------- callout line + stage labels ---------- */
#sd-wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 31; transition: opacity .25s; }
#sd-wire.off { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
#sd-wire-path { fill: none; stroke: var(--accent); stroke-width: 1.6px; stroke-dasharray: 1; filter: drop-shadow(0 0 4px var(--accent-glow)); }
#sd-wire.draw #sd-wire-path { animation: sdWire .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sdWire { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
#sd-wire-node { fill: #0b0908; stroke: var(--accent); stroke-width: 2px; }
/* the pulse ring is its own composited element: it animates without repainting the line */
.sd-pulse { position: absolute; left: 0; top: 0; width: calc(10px * var(--sd-z, 1)); height: calc(10px * var(--sd-z, 1)); margin: calc(-5px * var(--sd-z, 1)) 0 0 calc(-5px * var(--sd-z, 1)); border-radius: 50%; border: 1.5px solid var(--accent); pointer-events: none; z-index: 31; display: none; will-change: transform, opacity; }
.sd-pulse.on { display: block; animation: sdPulse 1.8s ease-out infinite; }
@keyframes sdPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
body.sd.showcase #sd-pulse, body:not(.sd) #sd-pulse { display: none; }
#sd-wire-tag rect { fill: rgba(11, 9, 8, .9); stroke: color-mix(in srgb, var(--accent) 60%, transparent); }
#sd-wire-tag text { fill: var(--fg); font: 700 12px/1 var(--font-ui); letter-spacing: .14em; }
.sd-tags { position: absolute; inset: 0; pointer-events: none; z-index: 29; }
.sd-stage-tag { position: absolute; transform: translate(-50%, 0); font: 700 calc(12px * var(--sd-z, 1))/1 var(--font-ui); letter-spacing: .22em; color: var(--fg-dim); text-transform: uppercase; text-shadow: 0 0 10px var(--accent-glow); white-space: nowrap; }

/* ---------- clean view (the studio's showcase) hides the whole interface ---------- */
body.sd.showcase #sd-top, body.sd.showcase #sd-panel, body.sd.showcase #sd-view, body.sd.showcase #sd-wire, body.sd.showcase #sd-tags { opacity: 0; pointer-events: none; }
#sd-top, #sd-panel, #sd-view { transition: opacity .3s; }

/* ---------- speed: the governor's steps and the readout (?sdperf=1) ---------- */
body.sd-noblur #sd-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--surface) 94%, transparent); }
body.sd-noblur #sd-view { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--surface) 92%, transparent); }
#sd-hud { position: fixed; left: 10px; bottom: 10px; z-index: 99; padding: 6px 9px; border-radius: 4px; background: rgba(0, 0, 0, .62); color: #fff; font: 11px/1.45 var(--font-mono); white-space: pre; pointer-events: none; }

/* The editor keeps one scrolling area and a clear action foot. View and layout
   settings disclose on demand; the renderer and original control nodes survive. */
#sd-panel::before,#sd-panel::after { content: none; }
#sd-panel.min { height: auto !important; }
body.sd #sd-panel .sd-p-head { flex: none; cursor: grab; padding: 12px 14px; border-color: var(--border); }
body.sd #sd-panel .sd-p-title { font: 650 15px/1.3 var(--font-ui); text-transform: none; letter-spacing: normal; }
body.sd #sd-panel .sd-grip { opacity: .35; }
.sd-layout-options { position: relative; margin-left: auto; font: 500 12px/1.4 var(--font-ui); }
.sd-layout-options summary { cursor: pointer; padding: 5px 8px; color: var(--fg-dim); }
.sd-layout-options .sd-p-pos { position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; gap: 6px; padding: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; }
.sd-layout-options .sd-btn { height: 36px; border-radius: 6px; letter-spacing: normal; text-transform: none; }
body.sd #sd-panel #lab-tabs { padding: 4px 8px 0; background: var(--surface); border-left: 0; border-color: var(--border); }
body.sd #sd-panel #lab-tabs .lab-tab { font-size: 12px; letter-spacing: normal; text-transform: none; min-height: 44px; padding: 10px 8px; color: var(--fg-dim); }
body.sd #sd-panel #lab-tabs .lab-tab.active { color: var(--fg); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-radius: 7px 7px 0 0; }
body.sd #sd-panel #lab-col { height: 100%; }
body.sd #sd-panel #lab-dock-panel { flex: 1; min-height: 0; }
body.sd.rainbow-face #sd-p-body { overflow: hidden; }
body.sd.rainbow-face #sd-panel #rainbow-pane { flex: 1; }
body.sd #sd-panel #lab-dock-panel .deck { min-height: 100%; height: auto; padding: 0; background: var(--surface); border: 0; }
body.sd #sd-panel .deck-head { flex: none; gap: 14px; padding: 18px; }
body.sd #sd-panel .micro-label,body.sd #sd-panel .stage-foot-k,body.sd #sd-panel .deck-eyebrow,
body.sd #sd-panel #size-chips-k,body.sd #sd-panel .skin-theme-label { font: 600 12px/1.4 var(--font-ui); text-transform: none; letter-spacing: normal; color: var(--fg-dim); }
body.sd #sd-panel #design-name { font: 400 13px/1.4 var(--font-ui); height: 38px; border-radius: 8px; background: var(--surface-2); border-color: var(--border-2); }
body.sd #sd-panel .deck-pattern .chips .chip { min-height: 34px; border-radius: 7px; padding: 6px 10px; clip-path: none; font-size: 12px; }
body.sd #sd-panel .deck-wells { flex: 1 0 auto; padding: 18px; }
body.sd #sd-panel #channel-list { gap: 8px; }
body.sd #sd-panel .channel { min-height: 46px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); clip-path: none; }
body.sd #sd-panel .channel .chan-label { letter-spacing: normal; text-transform: none; font-size: 12px; }
body.sd #sd-panel .deck-actions { order: 10; flex: none; position: sticky; bottom: 0; z-index: 3; background: var(--surface); border-color: var(--border); padding: 14px 18px; }
body.sd #sd-panel .deck-actions .btn { min-height: 38px; border-radius: 8px; clip-path: none; font: 600 12px/1.4 var(--font-ui); letter-spacing: normal; text-transform: none; }
body.sd #sd-panel .deck-actions .deck-apply { min-height: 44px; }
body.sd #sd-panel #lab-dock-panel .deck-codes { order: 5; padding: 0 18px; display: block; }
body.studiolab .deck-codes:not(:has(#code-row)) { display: none; }
body.studiolab .deck-codes > summary { cursor: pointer; padding: 14px 0; font: 600 12px/1.4 var(--font-ui); color: var(--fg-dim); }
body.studiolab .deck-codes[open] #code-row { padding-bottom: 16px; }
body.sd #sd-panel.wide #lab-dock-panel .deck { display: flex; }
body.sd #sd-panel.wide .deck-wells { flex: none; }
body.sd #sd-panel.wide #channel-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
body.sd #sd-top { align-items: flex-start; right: calc(440px * var(--sd-z,1)); padding-left: 24px; }
body.sd #sd-top .vp-specnav .spec-name { font-size: clamp(28px,3vw,44px); letter-spacing: .04em; }
body.sd #sd-top .vp-specnav .spec-status { letter-spacing: .1em; margin-top: 5px; }
body.sd #sd-top .sd-btn { letter-spacing: normal; text-transform: none; border-radius: 7px; }
body.sd[data-sd-dock="left"] #sd-top { left: calc(440px * var(--sd-z,1)); right: 0; }
body.sd[data-sd-dock="top"] #sd-top,body.sd[data-sd-dock="free"] #sd-top { right: 0; align-items: center; }
body.sd #sd-view { width: auto; min-width: 156px; max-width: min(480px,calc(100% - 32px)); }
#sd-view > summary { list-style: none; cursor: pointer; padding: 13px 16px; font: 600 12px/1.4 var(--font-ui); }
#sd-view > summary::after { content: ' +'; color: var(--fg-dim); }
#sd-view[open] > summary::after { content: ' −'; }
#sd-view > summary::-webkit-details-marker { display: none; }
.sd-view-content { padding: 0 14px 14px; display: grid; gap: 12px; }
#sd-view .sd-growth-row { justify-content: flex-start; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
#sd-view .sd-growth-row > .sd-k { flex: 1 1 100%; }
#sd-view .sd-seg { flex-wrap: wrap; }
#sd-view .sd-btn { letter-spacing: normal; text-transform: none; border-radius: 6px; }
body.sd #sd-view .stage-growth { position: static; transform: none; border: 0; padding: 0; background: none; }
#sd-view .sd-k { font-size: 11px; letter-spacing: normal; text-transform: none; }
body.sd #sd-view .sd-vc { flex-wrap: wrap; }
#sd-view summary:focus-visible,.sd-layout-options summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  body.sd #sd-panel .deck-pattern .chips .chip { min-height: 44px; }
  body.sd #sd-panel .deck-actions .btn { min-height: 44px; }
}
@media (max-width: 900px) {
  body.studiolab.rainbow-face #wc-chat-launch { bottom: calc(var(--lab-bar,0px) + min(48dvh,520px) + var(--lab-dock-h,52px) + 12px); }
}