/* ============================================================================
   system.css — canonical design system for harperz9.github.io
   Tokens, reset, WebGL-hero scaffolding, and the body component library
   (sections, instrument index, organ rows, verdict chips, proof exhibits,
   scroll-reveal). Shared by every page; edit here, not per-page.
   ============================================================================ */
:root{--void:#0d1b1c;--void-opaque:rgba(11,23,24,.98);--bone:#e9e2d0;--orange:#df5e00;--ember:#efab30;--prussian:#476762;--muted:#8a9b92;--gold:#efab30;--verified:#5fae93;--hairline:rgba(239,171,48,.15);--section-pad:clamp(4rem,9vw,7rem);--col-gap:clamp(1.8rem,4vw,3.6rem)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%;width:100%}
/* HERO CHANGE 1: overflow:hidden → overflow-x:hidden to enable page scroll */
body{background:var(--void);color:var(--bone);font-family:"EB Garamond",Georgia,serif;overflow-x:hidden;position:relative}
#gl,#motes{position:fixed;inset:0;width:100%;height:100%;display:block}
#gl{z-index:0}#motes{z-index:2;pointer-events:none}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(13,27,28,.82) 14%,rgba(13,27,28,.28) 36%,transparent 52%)}
/* HERO CHANGE 2: position:fixed;inset:0 → position:relative;min-height:100vh;width:100% */
/* grid, padding, pointer-events, z-index unchanged */
.frame{position:relative;min-height:100vh;width:100%;z-index:4;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(1.8rem,3.6vw,3.2rem) clamp(2.4rem,5.5vw,5rem);pointer-events:none}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;font-family:"Spline Sans Mono",monospace;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.bar .nm{color:var(--orange);letter-spacing:.3em}
.mid{align-self:center;max-width:min(92vw,37rem)}
.eyebrow{font-family:"Spline Sans Mono",monospace;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--orange);margin-bottom:1.7rem;opacity:.92}
h1{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:700;font-size:clamp(2.3rem,4.8vw,3.7rem);line-height:1.07;letter-spacing:-.015em;text-wrap:balance;color:var(--bone);text-shadow:0 4px 60px rgba(0,0,0,.9)}
h1 .g{color:var(--orange)}
.lede{margin-top:1.9rem;font-size:clamp(1.02rem,1.4vw,1.24rem);line-height:1.66;color:var(--bone);opacity:.9;max-width:37ch}
.lede em{color:var(--orange);font-style:italic}
.close{margin-top:1.2rem;font-style:italic;font-size:clamp(1.06rem,1.5vw,1.34rem);line-height:1.5;color:var(--orange);max-width:36ch}
.close b{font-style:normal;font-weight:500;color:var(--bone)}
.seal{font-family:"Spline Sans Mono",monospace;font-size:.62rem;letter-spacing:.16em;color:var(--muted)}
.seal b{color:var(--orange);font-weight:400}
@media (max-width:760px){.mid{max-width:94vw}.scrim{background:linear-gradient(to top,rgba(13,27,28,.93) 26%,rgba(13,27,28,.45) 62%,transparent 84%)}.bar .rt{display:none}}
@media (prefers-reduced-motion:reduce){#motes{display:none}}

/* ─── scrolling body ──────────────────────────────────────────── */
main{position:relative;z-index:5;width:100%}

/* ─── section shell ───────────────────────────────────────────── */
section.mv{position:relative;z-index:4;background:var(--void-opaque);border-top:1px solid var(--hairline);padding:var(--section-pad) clamp(2.4rem,5.5vw,5rem)}

/* interlude — transparent breath, organism shows through */
.interlude{position:relative;z-index:3;min-height:40vh;display:flex;align-items:center;justify-content:center;pointer-events:none}
.interlude-mark{font-family:"Spline Sans Mono",monospace;font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;color:rgba(223,94,0,.24)}

/* ─── section typography ──────────────────────────────────────── */
.mv .eyebrow{margin-bottom:1.2rem}
h2{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:600;font-size:clamp(1.7rem,3.1vw,2.6rem);line-height:1.13;letter-spacing:-.012em;color:var(--bone);margin-bottom:clamp(1.4rem,2.5vw,2.2rem);text-wrap:balance}
h2 .g{color:var(--orange)}
h2 em{font-style:normal;color:var(--orange)}
.body-text{font-size:clamp(1.04rem,1.3vw,1.2rem);line-height:1.72;color:var(--bone);opacity:.91;max-width:68ch}
.body-text em{color:var(--orange);font-style:italic}
.body-text+.body-text{margin-top:1.4em}
.mv .close{margin-top:1.6rem;display:block;font-style:italic;font-size:clamp(1.06rem,1.4vw,1.28rem);line-height:1.55;color:var(--orange);max-width:52ch}
.mv .close b{font-style:normal;font-weight:500;color:var(--bone)}
.pull{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:600;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.2;color:var(--orange);margin:clamp(2rem,4vw,3.2rem) 0;max-width:52ch;letter-spacing:-.01em}

/* ─── movement number + aperture row ─────────────────────────── */
.mv-head{display:flex;align-items:center;gap:1rem;margin-bottom:2.4rem}
.mv-num{font-family:"Spline Sans Mono",monospace;font-size:.64rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}

/* ─── aperture SVG glyph ──────────────────────────────────────── */
.aperture{display:inline-block;width:2rem;height:2rem;flex-shrink:0;vertical-align:middle}
@keyframes aperture-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.aperture .ring-outer{animation:aperture-pulse 3.6s ease-in-out infinite;transform-origin:16px 16px}
@media(prefers-reduced-motion:reduce){.aperture .ring-outer{animation:none}}

/* ─── instrument index — hairline rows ───────────────────────── */
.index{width:100%;max-width:72ch;border-top:1px solid var(--hairline);margin-top:clamp(2rem,3.5vw,3rem)}
.index-row{display:grid;grid-template-columns:8rem 1fr;gap:.5rem var(--col-gap);padding:.85rem 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.index-term{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);line-height:1.5}
.index-gloss{font-family:"EB Garamond",Georgia,serif;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;color:var(--muted)}

/* ─── organ rows ──────────────────────────────────────────────── */
.organs{width:100%;max-width:58rem;border-top:1px solid var(--hairline);margin-top:clamp(2rem,3.5vw,3rem)}
.organ-row{display:grid;grid-template-columns:12rem minmax(0,1fr) auto;column-gap:clamp(1.4rem,2.6vw,2.6rem);row-gap:.2rem;padding:1.5rem 0;border-bottom:1px solid var(--hairline);align-items:start}
.organ-name{grid-column:1;grid-row:1;font-family:"Spline Sans Mono",monospace;font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);line-height:1.45}
.organ-name a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(239,171,48,.45);padding-bottom:1px;transition:color .2s,border-color .2s}
.organ-name a:hover{color:var(--orange);border-color:var(--orange)}
.organ-role{grid-column:1;grid-row:2;font-family:"Spline Sans Mono",monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:.5em}
.organ-line{grid-column:2;grid-row:1/3;font-family:"EB Garamond",Georgia,serif;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.66;color:var(--bone);opacity:.9}
.organ-line em{color:var(--orange);font-style:italic}
.organ-verdict{grid-column:3;grid-row:1;align-self:start;padding-top:.1em}
.v-note{display:block;font-family:"Spline Sans Mono",monospace;font-size:.58rem;letter-spacing:.12em;color:var(--muted);margin-top:.55em;opacity:.72;line-height:1.7}

/* ─── specimen images ─────────────────────────────────────────── */
.specimen-wrap{float:right;margin:0 0 1.6rem 2.4rem;width:clamp(120px,18vw,220px)}
.specimen{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;filter:saturate(.38) brightness(.68);box-shadow:0 0 0 1px var(--hairline),0 0 24px rgba(0,0,0,.7);display:block}
@media(max-width:600px){.specimen-wrap{float:none;margin:0 0 1.6rem 0;width:clamp(88px,26vw,130px)}}

/* ─── verdict chips — shape + text, never color alone ────────── */
.verdict{font-family:"Spline Sans Mono",monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;padding:.3em .65em;white-space:nowrap;display:inline-block;line-height:1;vertical-align:top}
.verdict-shipped{color:var(--bone);border:1px solid var(--orange)}
.verdict-active{color:var(--muted);border:1px solid var(--muted)}
.verdict-dim{color:var(--muted);border:1px dotted rgba(160,125,119,.42);opacity:.78}

/* ─── seal / mono utility lines ──────────────────────────────── */
.seal-line{font-family:"Spline Sans Mono",monospace;font-size:.64rem;letter-spacing:.16em;color:var(--muted);margin-top:2rem;line-height:1.9}
.seal-line .g{color:var(--orange);font-weight:400}
.note-line{font-family:"Spline Sans Mono",monospace;font-size:.58rem;letter-spacing:.12em;color:var(--muted);margin-top:.75rem;opacity:.62;line-height:1.8}

/* ─── placeholder rendering ───────────────────────────────────── */
.placeholder{font-family:"Spline Sans Mono",monospace;font-size:.62rem;letter-spacing:.12em;color:var(--muted);opacity:.52;border:1px dotted rgba(160,125,119,.3);padding:.38em .68em;display:inline-block;margin-top:.8rem;line-height:1.5}

/* ─── channels ────────────────────────────────────────────────── */
.channels{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.18em;color:var(--bone);margin-top:1.8rem;line-height:2.4}
.channels .g{color:var(--orange)}
.channels a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(239,171,48,.4);padding-bottom:1px;transition:color .2s,border-color .2s}
.channels a:hover{color:var(--orange);border-color:var(--orange)}

/* ─── footer seal ─────────────────────────────────────────────── */
.footer-seal{border-top:1px solid var(--hairline);padding:clamp(2rem,4vw,3rem) clamp(2.4rem,5.5vw,5rem);position:relative;z-index:4;background:var(--void-opaque)}

/* ─── scroll-reveal ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease-out,transform .65s ease-out}
.reveal.visible{opacity:1;transform:none}
.reveal-children>*{opacity:0;transform:translateY(14px);transition:opacity .52s ease-out,transform .52s ease-out;transition-delay:calc(var(--i,0) * 75ms)}
.reveal-children.visible>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-children>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ─── responsive ──────────────────────────────────────────────── */
@media(max-width:1000px){.organ-row{grid-template-columns:10rem minmax(0,1fr) auto}}
@media(max-width:760px){
  .organ-row{grid-template-columns:1fr auto;row-gap:.15rem}
  .organ-name{grid-column:1;grid-row:1}
  .organ-role{grid-column:1;grid-row:2;padding-top:.2em}
  .organ-verdict{grid-column:2;grid-row:1;justify-self:end}
  .organ-line{grid-column:1/-1;grid-row:3;padding-top:.7rem}
}
@media(max-width:680px){
  .index-row{grid-template-columns:1fr}
}

/* ─── proof exhibits — real artifacts, shown ──────────────────── */
.proof{position:relative;z-index:4;background:var(--void-opaque);border-top:1px solid var(--hairline);padding:var(--section-pad) clamp(2.4rem,5.5vw,5rem)}
.proof-head{max-width:60ch}
.exhibit{margin:clamp(2.4rem,4.5vw,3.6rem) 0 0;max-width:60rem}
.exhibit-tag{font-family:"Spline Sans Mono",monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.7rem;display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap}
.exhibit-tag .ord{color:var(--orange)}
.exhibit-tag .what{color:var(--muted);letter-spacing:.12em}
.artifact{font-family:"Spline Sans Mono",monospace;font-size:clamp(.72rem,1.02vw,.83rem);line-height:1.72;color:var(--bone);background:linear-gradient(165deg,rgba(8,17,18,.95),rgba(13,27,28,.9));border:1px solid var(--hairline);border-radius:3px;padding:clamp(1rem,2vw,1.5rem) clamp(1.1rem,2.2vw,1.7rem);margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.artifact .cmt{color:var(--muted)}
.artifact .pr{color:var(--muted)}
.artifact .ok{color:#5fae93}
.artifact .bad{color:var(--orange)}
.artifact .lt{color:var(--ember)}
.artifact .kw{color:var(--ember)}
.artifact-cap{font-family:"EB Garamond",serif;font-size:clamp(1rem,1.3vw,1.16rem);font-style:italic;color:var(--orange);margin:.95rem 0 0;max-width:58ch;line-height:1.5}
.artifact-cap b{font-style:normal;font-weight:500;color:var(--bone)}
.artifact-note{font-family:"Spline Sans Mono",monospace;font-size:.6rem;letter-spacing:.07em;color:var(--muted);margin-top:.7rem;max-width:80ch;line-height:1.78}
.artifact-note b{color:var(--bone);font-weight:400}
.artifact-note em{color:var(--orange);font-style:italic}
@media(max-width:680px){.artifact{font-size:.66rem;line-height:1.65}}

/* ─── hero "built & tested" mini-index + scroll cue ───────────── */
.built{margin-top:1.7rem;border-top:1px solid var(--hairline);padding-top:1.1rem;max-width:41rem;text-shadow:0 1px 12px rgba(6,14,15,.92),0 0 3px rgba(6,14,15,.85)}
.built-head{font-family:"Spline Sans Mono",monospace;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-bottom:.85rem}
.built-row{display:grid;grid-template-columns:6.8rem 1fr;align-items:baseline;gap:.1rem .8rem;margin-top:.65rem}
.built-name{font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:var(--orange)}
.built-desc{font-family:"EB Garamond",Georgia,serif;font-size:1rem;line-height:1.45;color:var(--bone);opacity:.92}
.built-stat{font-family:"Spline Sans Mono",monospace;font-size:.62rem;letter-spacing:.05em;color:var(--ember);white-space:nowrap}
.hero-cue{margin-top:1.6rem;font-family:"Spline Sans Mono",monospace;font-size:.66rem;letter-spacing:.13em;color:var(--muted);text-shadow:0 1px 12px rgba(6,14,15,.9),0 0 3px rgba(6,14,15,.8)}
.hero-cue a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(239,171,48,.4);padding-bottom:1px;transition:color .2s,border-color .2s}
.hero-cue a:hover{color:var(--ember);border-color:var(--ember)}
/* .frame is pointer-events:none so the canvas behind stays interactive — but that
   makes the hero's own links unclickable. Re-enable pointer events on the links
   themselves (résumé/CV/research/GitHub/receipts + the name), nothing else. */
.frame a{pointer-events:auto}
@media(max-width:600px){
  .built-row{grid-template-columns:1fr;gap:.05rem}
}

/* ─── intentional section turn (replaces repeated mv-head scaffolding) ─ */
.turn{position:relative;z-index:4;background:var(--void-opaque);text-align:center;padding:clamp(3.4rem,7vw,5.8rem) 1.5rem;border-top:1px solid var(--hairline)}
.aperture-solo{width:2.7rem;height:2.7rem;margin:0 auto 1.05rem;display:block}
.turn-label{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:clamp(1.06rem,1.4vw,1.26rem);color:var(--muted);letter-spacing:.01em}

/* ─── hinge: a centered statement section (breaks the left-aligned panel rhythm) ─ */
.hinge{text-align:center;padding-top:clamp(5rem,10vw,8rem);padding-bottom:clamp(5rem,10vw,8rem)}
.hinge h2{max-width:22ch;margin-left:auto;margin-right:auto}
.hinge .body-text{max-width:58ch;margin-left:auto;margin-right:auto;text-align:left}
.hinge .close{margin-left:auto;margin-right:auto;max-width:44ch;font-size:clamp(1.2rem,1.9vw,1.58rem)}

/* ─── studio page ─────────────────────────────────────────────── */
.wrap{max-width:72rem;margin-left:auto;margin-right:auto;padding-left:clamp(1.8rem,5.5vw,5rem);padding-right:clamp(1.8rem,5.5vw,5rem)}
.studio{position:relative;z-index:5;padding-top:clamp(3.6rem,7vw,6rem);padding-bottom:clamp(3.6rem,7vw,6rem)}
.studio-top{margin-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.studio-top h1{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:700;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.09;letter-spacing:-.015em;color:var(--bone);margin-bottom:1.1rem}
.studio-top .lede{font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.68;color:var(--bone);opacity:.88;max-width:60ch;margin-bottom:1.8rem}

/* ─── seg: segmented control (mode switch) ────────────────────── */
.seg{display:flex;border:1px solid var(--hairline);border-radius:9px;overflow:hidden;background:rgba(15,33,34,.5);width:max-content}
.seg button{flex:1;font-family:"Spline Sans Mono","Courier New",monospace;font-size:.64rem;letter-spacing:.02em;color:var(--muted);background:transparent;border:0;border-right:1px solid var(--hairline);padding:.55em 1.2em;cursor:pointer;transition:background .18s ease,color .18s ease;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover,.seg button:focus-visible{color:var(--bone);background:rgba(239,171,48,.08);outline:none}
.seg button[aria-pressed="true"]{color:var(--void);background:var(--ember);font-weight:500}
.seg button:focus-visible{box-shadow:inset 0 0 0 2px var(--ember)}

/* ============================================================================
   WORLDS HERO ENGINE — appended by hero refactor 2026-06-19
   These rules NEVER override existing system.css rules above; they extend.

   REVEAL FIX:
     Resting state is opacity:1 (content always visible — headless, no-JS, FOUC).
     .visible adds a translateY settle (the entrance). The prior opacity:0 rest
     on lines 113/115 is superseded by the later-cascade rules below.
     The @media prefers-reduced-motion block in the existing rules (line 117-119)
     already covers the no-transition path; these new rules are compatible.

   WORLD TEXT ADAPTATION:
     body.world-0 (ENGRAVING — bone/off-white ground)  → dark ink copy
     body.world-1 (SPECTRUM  — vivid psychedelic ground) → dark ink copy
     body.world-2 (NEGATIVE  — near-black ground)       → existing light copy
     Default (no class, first paint)                    → same as world-2 (dark ground)
     Transition: 0.5s ease on color/text-shadow so the swap is smooth.

   INJECTED UI:
     #world-switcher, #hud, #osc-canvas, #boot-overlay all injected by hero.js.
     Styles here so they work whether JS runs or the body class is set.
   ============================================================================ */

/* ── REVEAL FIX — resting visible, entrance on .visible ─────────────────── */
/* Later cascade wins over the opacity:0 rest set earlier. */
.reveal{opacity:1;transform:translateY(8px)}
.reveal.visible{opacity:1;transform:none}
.reveal-children>*{opacity:1;transform:translateY(6px)}
.reveal-children.visible>*{opacity:1;transform:none}

/* ── WORLD SWITCHER ─────────────────────────────────────────────────────── */
#world-switcher{
  position:fixed;top:clamp(1.8rem,3.6vw,3.2rem);right:clamp(2.4rem,5.5vw,5rem);
  z-index:8;display:flex;gap:.5rem;align-items:center;pointer-events:auto
}
#world-switcher button{
  font-family:"Spline Sans Mono","Courier New",monospace;
  font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;
  padding:.38em .72em;border:1px solid;background:transparent;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease
}
#world-switcher button:focus-visible{outline:2px solid #256660;outline-offset:3px}

/* W2 / default (dark ground) — light button style */
#world-switcher button{
  color:#9ab8b5;border-color:rgba(108,223,214,.25);background:rgba(8,10,9,.72)
}
#world-switcher button[aria-pressed="true"]{
  color:#0a0c0b;border-color:#6cdfd6;background:#6cdfd6
}
#world-switcher button:hover:not([aria-pressed="true"]){
  background:rgba(108,223,214,.12);border-color:rgba(108,223,214,.50)
}

/* W0 / W1 (light ground) — dark button style */
body.world-0 #world-switcher button,
body.world-1 #world-switcher button{
  color:#3a4840;border-color:rgba(28,68,66,.30);background:rgba(237,232,223,.72)
}
body.world-0 #world-switcher button[aria-pressed="true"],
body.world-1 #world-switcher button[aria-pressed="true"]{
  color:#ede8df;border-color:#1c4442;background:#1c4442
}
body.world-0 #world-switcher button:hover:not([aria-pressed="true"]),
body.world-1 #world-switcher button:hover:not([aria-pressed="true"]){
  background:rgba(28,68,66,.10);border-color:rgba(28,68,66,.55)
}

/* ── HUD ─────────────────────────────────────────────────────────────────── */
#hud{
  position:fixed;bottom:clamp(1.8rem,3.6vw,3.2rem);right:clamp(2.4rem,5.5vw,5rem);
  z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:.28rem;
  pointer-events:none;opacity:0;transition:opacity .8s ease
}
#hud.visible{opacity:1}
#hud-label{font-family:"Spline Sans Mono","Courier New",monospace;font-size:.56rem;letter-spacing:.30em;text-transform:uppercase}
#hud-sha  {font-family:"Spline Sans Mono","Courier New",monospace;font-size:.52rem;letter-spacing:.10em}
#hud-status{font-family:"Spline Sans Mono","Courier New",monospace;font-size:.50rem;letter-spacing:.22em;text-transform:uppercase}
/* W2 / default */
#hud-label {color:#6cdfd6}
#hud-sha   {color:#3a8c88}
#hud-status{color:#9ab8b5}
body.world-0 #hud-label,body.world-1 #hud-label{color:#1c4442}
body.world-0 #hud-sha,  body.world-1 #hud-sha  {color:#256660}
body.world-0 #hud-status,body.world-1 #hud-status{color:#3a4840}

/* ── OSCILLOSCOPE CANVAS ─────────────────────────────────────────────────── */
#osc-canvas{
  position:fixed;bottom:clamp(1.8rem,3.6vw,3.2rem);right:clamp(2.4rem,5.5vw,5rem);
  width:120px;height:38px;z-index:6;pointer-events:none;
  opacity:0;transition:opacity .6s ease
}
#osc-canvas.visible{opacity:.62}

/* ── BOOT OVERLAY ────────────────────────────────────────────────────────── */
#boot-overlay{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.4rem;pointer-events:none;opacity:1;transition:opacity .5s ease
}
#boot-overlay.done{opacity:0}
#boot-iris{position:relative;width:90px;height:90px;display:flex;align-items:center;justify-content:center}
#boot-iris svg{width:90px;height:90px;overflow:visible}
#boot-corona{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(28,68,66,0)}
#boot-corona.pulse{animation:heroCoronaPulse .7s ease-out forwards}
@keyframes heroCoronaPulse{
  0%  {box-shadow:0 0 0 0 rgba(28,68,66,0.85)}
  100%{box-shadow:0 0 0 38px rgba(28,68,66,0)}
}
#boot-readout{
  font-family:"Spline Sans Mono","Courier New",monospace;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:#3a4840;text-align:center;line-height:1.9;
  display:flex;flex-direction:column;gap:.15rem
}
#boot-sha   {font-family:"Spline Sans Mono","Courier New",monospace;font-size:.6rem;letter-spacing:.1em;color:#1c4442}
#boot-status{font-family:"Spline Sans Mono","Courier New",monospace;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:#256660}

/* ── WORLD-DRIVEN BODY BACKGROUND ───────────────────────────────────────── */
/* Default (no class / world-2): near-black — already set by existing --void token */
body.world-0{background:#ede8df}
body.world-1{background:#0d0814}

/* ── WORLD-DRIVEN HERO SCRIM ─────────────────────────────────────────────── */
/* Existing .scrim in system.css has a dark-on-dark gradient. Override for W0/W1. */
body.world-0 .scrim,
body.world-1 .scrim{
  background:linear-gradient(
    100deg,
    rgba(237,232,223,.92) 8%,
    rgba(237,232,223,.58) 34%,
    rgba(237,232,223,.16) 56%,
    transparent 70%
  )
}

/* ── PER-WORLD HERO TEXT ADAPTATION ─────────────────────────────────────── */
/* Targets: .bar .nm, .bar .rt, .eyebrow, .mid h1, h1 .g, .lede, .close, .seal, .seal b */
/* Transition so colour swaps feel smooth */

/* Default + world-2 — existing light-on-dark. No override needed.
   Kept as explicit world-2 block so adding body.world-2 class changes nothing. */
body.world-2 .bar,
.bar{color:var(--muted);transition:color .5s ease}

body.world-2 .bar .nm,
.bar .nm{color:var(--orange);transition:color .5s ease}

/* World 0 + 1 — dark ink copy on light/vivid ground */
/* Deep oxide teal: readable on bone (#ede8df) at 4.5:1+ and on vivid W1 ground */
body.world-0 .bar,
body.world-1 .bar{color:#2d3c38}

body.world-0 .bar .nm,
body.world-1 .bar .nm{color:#1c4442}

/* .rt (right-hand bar tag) */
body.world-2 .bar .rt{color:var(--muted)}
body.world-0 .bar .rt,
body.world-1 .bar .rt{color:#3a4840}

/* eyebrow */
body.world-2 .eyebrow{color:var(--orange)}
body.world-0 .eyebrow,
body.world-1 .eyebrow{color:#1c4442;transition:color .5s ease}

/* h1 */
body.world-2 h1{color:var(--bone);text-shadow:0 4px 60px rgba(0,0,0,.9)}
body.world-0 h1,
body.world-1 h1{
  color:#0e1210;
  text-shadow:0 2px 22px rgba(237,232,223,.72),0 0 40px rgba(237,232,223,.45);
  transition:color .5s ease,text-shadow .5s ease
}

/* h1 .g accent */
body.world-2 h1 .g{color:var(--orange)}
body.world-0 h1 .g,
body.world-1 h1 .g{color:#1c4442;transition:color .5s ease}

/* lede */
body.world-2 .lede{color:var(--bone)}
body.world-0 .lede,
body.world-1 .lede{color:#1a1e1c;transition:color .5s ease}

/* .close */
body.world-2 .close{color:var(--orange)}
body.world-0 .close,
body.world-1 .close{color:#1c4442;transition:color .5s ease}

/* .seal */
body.world-2 .seal{color:var(--muted)}
body.world-0 .seal,
body.world-1 .seal{color:#3a4840;transition:color .5s ease}

body.world-2 .seal b{color:var(--orange)}
body.world-0 .seal b,
body.world-1 .seal b{color:#1c4442;font-weight:400;transition:color .5s ease}

/* ============================================================================
   ACCESSIBILITY CORRECTION — world-0/1 readability (2026-06-20)
   Verified by a per-world contrast scan against the live DOM. Two faults:

   (1) HERO copy on the light (bone) ground that the per-world block above
       never adapted: the .built mini-index (1.06–2.4:1), .hero-cue (2.4:1),
       and the .lede <em> (3.0:1) stayed light → invisible on bone.
   (2) LEAK — the global .close / .seal world overrides above ALSO matched the
       same-named elements inside <main> (the dark .mv / footer sections),
       turning them dark-on-dark (.close 1.43:1, .seal 1.60:1). .close lives
       ONLY in <main>; .seal lives in BOTH (hero line 31 + section line 324),
       so re-light just the <main> copies (specificity 0,0,2,2 wins).

   Every target re-measured ≥4.5:1 (most ≥7:1) after this block. world-2
   (dark ground) is untouched — its light copy already passes.
   ============================================================================ */

/* (1) HERO .built mini-index — dark ink on bone ground (world-0 + world-1) */
body.world-0 .built,
body.world-1 .built{text-shadow:none}
body.world-0 .built-head,
body.world-1 .built-head{color:#3a4840;transition:color .5s ease}      /* 7.5:1 */
body.world-0 .built-name,
body.world-1 .built-name{color:#1c4442;transition:color .5s ease}      /* 8.4:1 */
body.world-0 .built-desc,
body.world-1 .built-desc{color:#1a1e1c;opacity:1;transition:color .5s ease} /* 13:1 */
body.world-0 .built-stat,
body.world-1 .built-stat{color:#256660;transition:color .5s ease}      /* 5.2:1 */

/* (1) HERO .hero-cue + its links (scroll cue under the mini-index) */
body.world-0 .hero-cue,
body.world-1 .hero-cue{color:#3a4840;text-shadow:none;transition:color .5s ease}
body.world-0 .hero-cue a,
body.world-1 .hero-cue a{color:#1c4442;border-color:rgba(28,68,66,.5)}  /* 8.4:1 */

/* (1) HERO .lede emphasis — base --orange was 3.0:1 on bone */
body.world-0 .lede em,
body.world-1 .lede em{color:#1c4442}                                    /* 8.4:1 */

/* (2) LEAK FIX — re-light <main> .close / .seal so they stay light on the
   dark sections in the light worlds (the hero copies keep their dark ink). */
body.world-0 main .close,
body.world-1 main .close{color:var(--orange)}
body.world-0 main .seal,
body.world-1 main .seal{color:var(--muted)}

/* ============================================================================
   FOUNDATION PASS (2026-06-21) — site-wide a11y + mobile, additive only.
   Global keyboard focus, a skip-link, ≥44px-feel touch targets, small-screen
   reposition of the fixed hero widgets, and a readability bump for the
   load-bearing micro-labels. Later cascade; overrides above only where intended.
   ============================================================================ */

/* skip-link — first focusable element on every page; off-screen until focused */
.skip-link{position:absolute;left:.5rem;top:-3.5rem;z-index:30;
  font-family:"Spline Sans Mono","Courier New",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--void);background:var(--ember);
  padding:.6rem .95rem;border-radius:3px;text-decoration:none;transition:top .18s ease}
.skip-link:focus{top:.6rem;outline:2px solid var(--void);outline-offset:2px}

/* global keyboard focus ring — every link/button (was only #world-switcher) */
a:focus-visible,button:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:1px}

/* bigger tap targets on touch devices — chips and the small mono link rows.
   (Inline prose links are WCAG-exempt; these are discrete controls.) */
@media (pointer:coarse){
  .verdict{padding:.5em .85em}
  .channels a,.hero-cue a,.organ-name a{padding:.28em .1em}
  #world-switcher button{padding:.5em .78em}
}

/* the fixed hero widgets crowd content on phones — tuck them away, keep the
   world-switcher reachable bottom-left so it doesn't sit over body copy */
@media (max-width:600px){
  #hud,#osc-canvas{display:none}
  #world-switcher{top:auto;bottom:.85rem;right:auto;left:.85rem;gap:.4rem}
}

/* readability — the honest-limit micro-labels were the least legible thing on
   the page (muted at .52–.72 opacity, ~9px mono). The meaning shouldn't be the
   hardest text to read. Bring them up; contrast now clears AA. */
.v-note{opacity:.95}
.note-line{opacity:.9}
.placeholder{opacity:.85}

/* ============================================================================
   CHROME (world-3) HERO READABILITY (2026-06-21)
   Chrome was added as the 4th world but never received the per-world copy
   adaptation that the light-ground worlds (0/1) got. It is the BRIGHTEST,
   highest-variance ground, yet its copy fell through to the world-2 (dark)
   styling: bone text, a .lede with NO text-shadow, and muted grey cue/seal —
   all washing out over the metal highlights (verified against the live DOM).
   Fix, scoped to body.world-3 only (world-2 cold-load default untouched):
   a denser/wider dark hero scrim to seat the copy column, tight dark
   text-shadow halos that survive bright reflections, and a lift of the two
   genuinely-failing muted micro-rows (.hero-cue, .seal) toward bone. The
   light-on-dark aesthetic and the orange/ember brand accents are preserved.
   ============================================================================ */

/* denser, wider dark scrim under the copy column — the default .scrim fades to
   transparent by 52%, leaving bright metal under the lede + mini-index. This
   darkens the left ~64% and keeps the dramatic chrome on the right ~24%. */
body.world-3 .scrim{
  background:linear-gradient(100deg,
    rgba(9,18,19,.93) 8%,
    rgba(9,18,19,.78) 30%,
    rgba(9,18,19,.46) 48%,
    rgba(9,18,19,.12) 64%,
    transparent 78%)
}

/* headline — swap the soft 60px glow for a crisp dark halo that holds on metal */
body.world-3 h1{color:var(--bone);
  text-shadow:0 1px 2px rgba(6,12,13,.95),0 2px 16px rgba(6,12,13,.8),0 0 44px rgba(6,12,13,.55)}
body.world-3 h1 .g{color:var(--orange)}

/* eyebrow + lede (the lede carried text-shadow:none) */
body.world-3 .eyebrow{color:var(--orange);text-shadow:0 1px 8px rgba(6,12,13,.85)}
body.world-3 .lede{color:var(--bone);opacity:.96;
  text-shadow:0 1px 2px rgba(6,12,13,.92),0 1px 11px rgba(6,12,13,.78)}
body.world-3 .lede em{color:var(--orange)}

/* inner-page heroes carry a `.close` thesis line over the metal (the landing
   does not). Scope to `.frame` so the body's `.mv .close` in the dark sections
   is never touched — that exact leak was logged in the 2026-06-20 a11y note. */
body.world-3 .frame .close{color:var(--orange);
  text-shadow:0 1px 2px rgba(6,12,13,.9),0 1px 10px rgba(6,12,13,.75)}

/* built & tested mini-index — bone needs a halo on metal; accents kept */
body.world-3 .built-head{color:var(--bone);opacity:.9;text-shadow:0 1px 7px rgba(6,12,13,.85)}
body.world-3 .built-name{color:var(--orange);text-shadow:0 1px 7px rgba(6,12,13,.8)}
body.world-3 .built-desc{color:var(--bone);opacity:1;
  text-shadow:0 1px 2px rgba(6,12,13,.92),0 1px 10px rgba(6,12,13,.78)}
body.world-3 .built-stat{color:var(--ember);text-shadow:0 1px 7px rgba(6,12,13,.82)}

/* hero-cue + seal were MUTED grey (#8a9b92) — the lowest-contrast copy on the
   brightest world. Lift to bone with a halo; keep the orange links. */
body.world-3 .hero-cue{color:var(--bone);
  text-shadow:0 1px 2px rgba(6,12,13,.9),0 1px 10px rgba(6,12,13,.76)}
body.world-3 .hero-cue a{color:var(--orange);border-color:rgba(239,171,48,.5)}
body.world-3 .seal{color:var(--bone);opacity:.82;text-shadow:0 1px 7px rgba(6,12,13,.85)}
body.world-3 .seal b{color:var(--ember)}
/* top bar: .nm sits top-left on the dark scrim, but inner pages also carry a
   .rt tag top-right over the brightest metal (the landing has none) — lift the
   row + halo so .rt clears contrast; .rt is display:none under 760px. */
body.world-3 .bar{color:#cdd6cf;text-shadow:0 1px 8px rgba(6,12,13,.82)}
body.world-3 .bar .nm{color:var(--ember)}
body.world-3 .bar .rt{color:#cdd6cf}

/* mobile: copy spans full width, so the left-anchored scrim above is wrong here.
   Match the base mobile scrim's bottom-up vertical orientation, but denser, so
   the lower two-thirds (lede + mini-index + cue) seats on a dark base. */
@media (max-width:760px){
  body.world-3 .scrim{
    background:linear-gradient(to top,
      rgba(9,18,19,.95) 28%,
      rgba(9,18,19,.7) 58%,
      rgba(9,18,19,.34) 80%,
      transparent 93%)
  }
}

/* ============================================================================
   BAR TAG / WORLD-SWITCHER COLLISION (2026-06-21) — general, not world-scoped.
   Inner pages carry a right-aligned `.bar .rt` tag (e.g. "Proof Surface · the
   accountability contract"). The fixed #world-switcher occupies the same
   top-right corner with a higher z-index and a constant ~328px width, so the
   tag has only ever shown a ~45px sliver — clipped behind the buttons at every
   desktop width since the switcher was added. The eyebrow + h1 already name
   each page, so retire the redundant, perpetually-truncated tag rather than
   ship a clipped label. The landing has no `.rt`; it is unaffected. (Reversible:
   to restore the tag instead, relocate it out of the switcher's corner.) */
.bar .rt{display:none}

/* the footer closing wraps wide now; reserve the bottom-right column so it never
   runs under the fixed #hud witness glyph. HUD is a roughly constant ~120px and
   is hidden under 601px, so a desktop-only right-pad clears it robustly. */
@media (min-width:601px){ .footer-seal .seal{ padding-right:8.5rem } }

/* ============================================================================
   HOME PHOTOGRAPHIC HERO (2026-06-21) — the CGI worlds hero is retired on the
   landing; lead with a living macro photograph (the snail's logarithmic spiral
   reaching toward a bud — the kind of structure the work is modeled on, shot by
   iamBeTa). Scoped to body.home-photo, so the other pages are untouched.
   ============================================================================ */
.home-photo .hero-bg{
  position:fixed; inset:0; z-index:0;
  background:#0d1b1c url("../img/snail.jpg") 62% 42% / cover no-repeat;
  filter:saturate(1.03) contrast(1.03) brightness(.95)
}
/* warm veil: dark where the words sit (left), lifting toward the snail on the
   right, with a soft floor so the lower copy holds. */
.home-photo .scrim{
  background:
    linear-gradient(104deg, rgba(7,15,16,.93) 0%, rgba(7,15,16,.72) 34%, rgba(7,15,16,.34) 58%, rgba(24,14,5,.22) 100%),
    linear-gradient(to top, rgba(7,15,16,.66) 0%, rgba(7,15,16,.12) 24%, transparent 46%)
}
/* legibility halos over the photo (no per-world classes apply now) */
.home-photo h1{text-shadow:0 1px 2px rgba(5,11,12,.92),0 2px 20px rgba(5,11,12,.66)}
.home-photo h1 .g{color:var(--ember)}
.home-photo .lede{text-shadow:0 1px 2px rgba(5,11,12,.88),0 1px 13px rgba(5,11,12,.66)}
.home-photo .lede em{color:var(--ember)}
.home-photo .eyebrow{text-shadow:0 1px 10px rgba(5,11,12,.82)}
.home-photo .built-head,.home-photo .built-desc,.home-photo .hero-cue,.home-photo .seal{
  text-shadow:0 1px 2px rgba(5,11,12,.86),0 1px 10px rgba(5,11,12,.66)
}
.home-photo .built{text-shadow:none}
@media (max-width:760px){
  .home-photo .hero-bg{background-position:58% 40%}
  .home-photo .scrim{
    background:linear-gradient(to top, rgba(7,15,16,.93) 0%, rgba(7,15,16,.7) 42%, rgba(7,15,16,.34) 72%, rgba(7,15,16,.52) 100%)
  }
}

/* ============================================================================
   INNER-PAGE CLEAN HERO (2026-06-21) — the CGI worlds hero is retired on the
   inner pages too (canvases + hero.js gone; reveal.js handles the entrance).
   The full-screen splash becomes a calm, content-led header on the warm void,
   with a faint warm glow for life. Scoped to body.inner-clean.
   ============================================================================ */
.inner-clean .frame{
  min-height:auto; display:block; pointer-events:auto;
  padding-bottom:clamp(2.4rem,5vw,3.8rem);
  background:radial-gradient(135% 95% at 12% -14%, rgba(223,94,0,.08), transparent 56%)
}
.inner-clean .mid{align-self:auto; margin-top:clamp(1.3rem,3vw,2.2rem)}
.inner-clean .seal{margin-top:clamp(1.5rem,3vw,2.2rem)}

/* ---- shared site nav (one bar, every page) ---- */
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:1240px;margin:0 auto;padding:.9rem clamp(1rem,3vw,2rem);
  border-bottom:1px solid rgba(239,171,48,.15)}
.site-nav .sn-home{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone);text-decoration:none}
.site-nav .sn-links{display:flex;gap:clamp(.6rem,2vw,1.4rem);flex-wrap:wrap}
.site-nav .sn-links a{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:.84rem;
  color:var(--muted);text-decoration:none;padding:.2em 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.site-nav .sn-links a:hover,.site-nav .sn-links a:focus-visible{color:var(--bone);outline:none}
.site-nav .sn-links a[aria-current="page"]{color:var(--ember);border-color:var(--ember)}
@media (max-width:560px){ .site-nav{justify-content:center} .site-nav .sn-home{width:100%;text-align:center} }

/* ─── hero launchpad doors (Task 3 — index.html front door) ──── */
.hero-doors{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.btn{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.04em;
  color:var(--void);background:var(--ember);border:1px solid var(--ember);border-radius:9px;
  padding:.7em 1.2em;text-decoration:none;transition:background .15s,color .15s}
.btn:hover,.btn:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--bone);outline:none}
.btn.ghost{color:var(--ember);background:transparent}
.btn.ghost:hover,.btn.ghost:focus-visible{background:rgba(239,171,48,.1);color:var(--bone)}

/* ─── work-group catalog (Task 4 — overview.html grouped sections) ── */
.work-group{margin:2.2rem 0}
.work-group > h2{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:1rem;color:var(--ember);
  letter-spacing:.02em;margin:0 0 .8rem;padding-bottom:.3rem;border-bottom:1px solid rgba(239,171,48,.15)}

/* ─── studio two-witness frame + chat (Task 6) ───────────────────── */
.frame-row{display:grid;gap:clamp(1rem,2vw,1.6rem);align-items:start;
  grid-template-columns:1fr minmax(260px,0.92fr);margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.panel{border:1px solid var(--hairline);border-radius:14px;background:rgba(15,33,34,.55);
  padding:1.1rem 1.15rem;min-width:0}
.panel h2{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.02em;margin:0 0 .85rem;color:var(--bone)}
.stage{position:relative;width:100%;border-radius:10px;overflow:hidden;background:#000;
  border:1px solid rgba(0,0,0,.4);line-height:0}
.stage canvas{display:block;width:100%;height:auto}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.62rem;
  padding:.3rem 0;border-bottom:1px dotted rgba(138,155,146,.14)}
.rk{color:var(--muted);letter-spacing:.06em}
.rv{color:var(--bone);text-align:right;word-break:break-all}
.grounds{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.ground{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.55rem;color:var(--muted);
  background:rgba(0,0,0,.25);border:1px solid var(--hairline);border-radius:999px;padding:.12em .55em}
.ground .gk{color:var(--prussian)}
.mc-drift{margin-top:.6rem;font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.6rem;
  border-top:1px solid rgba(239,171,48,.12);padding-top:.5rem;color:var(--muted)}
.chat-log{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:.7rem;
  padding:.3rem .1rem .6rem;margin-bottom:.6rem}
.msg{max-width:84%;padding:.6rem .8rem;border-radius:12px;font-size:.96rem;line-height:1.5}
.msg .who{display:block;font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.5rem;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:.25rem;opacity:.8}
.msg.you{align-self:flex-end;background:rgba(71,103,98,.28);border:1px solid rgba(71,103,98,.4);color:var(--bone)}
.msg.you .who{color:var(--prussian)}
.msg.model{align-self:flex-start;
  background:linear-gradient(180deg,rgba(20,40,40,.7),rgba(15,33,34,.5));
  border:1px solid var(--hairline);color:#ded7c4}
.msg.model .who{color:var(--ember)}
.chat-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .8rem}
.chip{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.02em;
  color:var(--ember);cursor:pointer;background:transparent;border:1px solid rgba(239,171,48,.35);
  border-radius:999px;padding:.42em .8em;transition:background .15s,border-color .15s}
.chip:hover,.chip:focus-visible{background:rgba(239,171,48,.12);border-color:var(--ember);outline:none}
@media (max-width:700px){.frame-row{grid-template-columns:1fr}}

/* ─── studio · mounted Atelier controls (Task 7) ─────────────────────
   The Atelier markup is mounted into #studio-generate; its own control styles live in
   atelier.html's scoped <style>, so bring the control-relevant subset here, scoped to the
   Studio so it never collides. No stage column — the shared #studio-canvas is the stage. */
.studio-atelier{display:block;max-width:none;margin:0 0 clamp(1.4rem,3vw,2.2rem)}
.studio-atelier .at-panel{display:flex;flex-direction:column;gap:1.05rem;max-width:46rem}
.studio-atelier .at-glab{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.55rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;display:block}
.studio-atelier .at-glab .hint{color:rgba(138,155,146,.6);letter-spacing:.04em;text-transform:none}
.studio-atelier .at-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.studio-atelier .at-chip{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.52em .82em;border:1px solid var(--hairline);
  background:transparent;color:var(--muted);cursor:pointer;border-radius:2px;
  transition:border-color .18s,color .18s,background .18s}
.studio-atelier .at-chip:hover{border-color:rgba(239,171,48,.5);color:var(--bone)}
.studio-atelier .at-chip[aria-pressed=true]{border-color:var(--orange);color:var(--bone);background:rgba(223,94,0,.13)}
.studio-atelier .at-chip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.studio-atelier .at-chip[disabled]{opacity:.4;cursor:not-allowed}
.studio-atelier .at-slider,.studio-atelier .at-pslider{width:100%;accent-color:var(--orange);cursor:pointer;height:1.1rem}
.studio-atelier .at-slider:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.studio-atelier .at-params{display:flex;flex-direction:column;gap:.5rem;margin:.1rem 0 .3rem}
.studio-atelier .at-prow{display:grid;grid-template-columns:7.2rem 1fr;align-items:center;gap:.6rem}
.studio-atelier .at-pname{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.studio-atelier .at-seedrow{display:flex;gap:.4rem;align-items:stretch}
.studio-atelier .at-seed{flex:1;min-width:0;font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:.74rem;color:var(--bone);background:rgba(6,14,15,.7);border:1px solid var(--hairline);
  border-radius:2px;padding:.5em .7em;letter-spacing:.12em;transition:border-color .2s}
.studio-atelier .at-seed:focus{outline:none;border-color:rgba(239,171,48,.5)}
.studio-atelier .at-mini{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.74rem;
  color:var(--muted);border:1px solid var(--hairline);background:transparent;border-radius:2px;
  cursor:pointer;padding:0 .7em;transition:border-color .18s,color .18s}
.studio-atelier .at-mini:hover{border-color:rgba(239,171,48,.5);color:var(--bone)}
.studio-atelier .at-mini:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.studio-atelier .at-actions{display:flex;flex-wrap:wrap;gap:.55rem}
.studio-atelier .btn{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;padding:.64em 1.05em;border:1px solid var(--orange);
  background:transparent;color:var(--bone);cursor:pointer;border-radius:2px;transition:background .2s,color .2s}
.studio-atelier .btn:hover{background:var(--orange);color:var(--void)}
.studio-atelier .btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.studio-atelier .btn.ghost{border-color:var(--muted);color:var(--muted)}
.studio-atelier .btn.ghost:hover{background:var(--muted);color:var(--void)}
.studio-atelier .at-gate{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.04em;line-height:1.7;color:var(--muted);min-height:1.1em}
.studio-atelier .at-gate .g-allow{color:#5fae93}.studio-atelier .at-gate .g-deny{color:var(--orange)}
.studio-atelier .at-gate .g-needs{color:var(--ember)}.studio-atelier .at-gate .gmono{color:var(--ember);word-break:break-all}
.studio-atelier .at-blurb{font-family:"EB Garamond",Georgia,serif;font-size:.98rem;line-height:1.62;
  color:var(--muted);border-top:1px solid var(--hairline);padding-top:.95rem;margin-top:.1rem;min-height:2.4rem}
.studio-atelier .at-blurb b{color:var(--bone);font-weight:500}.studio-atelier .at-blurb .sp{color:var(--ember)}

/* ─── studio · BYO mode (Task 8) ──────────────────────────────────────
   Drop zone + transform palette + turn indicator. Lives inside #studio-byo
   which is shown/hidden by setMode(). Uses the shared .chat-chips/.chip
   classes for the transform buttons. */
.studio-drop{border:1.5px dashed rgba(239,171,48,.4);border-radius:14px;background:rgba(15,33,34,.4);
  min-height:200px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  overflow:hidden;transition:border-color .15s,background .15s;margin-bottom:1.1rem}
.studio-drop:hover,.studio-drop:focus-visible,.studio-drop.over{border-color:var(--ember);background:rgba(239,171,48,.06);outline:none}
.studio-drop-empty{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.1em;color:var(--muted);text-align:center;line-height:2;pointer-events:none}
.studio-drop-empty span{font-size:.6rem;color:var(--prussian)}
.studio-byo-ctrl{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.studio-ctrl-label{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin-bottom:.5rem}
.studio-turn{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.62rem;
  color:var(--muted);margin:.6rem 0;min-height:1.4em}

/* ─── studio · Watch with me (Task 8c) ─────────────────────────────────
   Live screen / camera capture → sample loop → perceive(). Scoped inside
   .studio-watch-ctrl so button styles don't bleed into the rest of the page. */
.studio-watch-ctrl{margin-top:clamp(1.2rem,2.5vw,1.8rem);border-top:1px solid var(--hairline);padding-top:clamp(1rem,2vw,1.4rem)}
.studio-watch-btns{display:flex;flex-wrap:wrap;gap:.55rem;margin:.55rem 0}
.studio-watch-ctrl .btn{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;padding:.64em 1.05em;border:1px solid var(--orange);
  background:transparent;color:var(--bone);cursor:pointer;border-radius:2px;transition:background .2s,color .2s}
.studio-watch-ctrl .btn:hover{background:var(--orange);color:var(--void)}
.studio-watch-ctrl .btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.studio-watch-ctrl .btn.ghost{border-color:var(--muted);color:var(--muted)}
.studio-watch-ctrl .btn.ghost:hover{background:var(--muted);color:var(--void)}
.studio-watch-ctrl .btn[aria-pressed=true]{background:var(--ember);border-color:var(--ember);color:var(--void)}
.studio-watch-note{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.58rem;
  letter-spacing:.04em;color:var(--prussian);line-height:1.7;margin:.5rem 0}
.studio-watch-live{margin-top:.8rem;display:flex;flex-direction:column;gap:.55rem}
.studio-watch-status{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--verified)}
.studio-watch-actions{display:flex;flex-wrap:wrap;gap:.45rem}

/* ─── studio · the MEASURIMETER (Task 8d) ──────────────────────────────
   A live instrument panel of every channel the tooling feeds the model: the faithful n×n
   representation mosaic, per-channel meters with bars, a motion sparkline, dominant-colour
   swatches, and audio level/spectrum/pitch. Meters stream via a throttled rAF loop. */
.mm-live{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--verified);margin-left:.6rem;vertical-align:middle;
  display:inline-flex;align-items:center;gap:.32em}
.mm-dot{width:.5em;height:.5em;border-radius:50%;background:var(--verified);box-shadow:0 0 6px var(--verified);
  animation:mm-pulse 1.1s ease-in-out infinite}
@keyframes mm-pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.mm-dot{animation:none;opacity:.9}}
.mm-describe{font-family:"EB Garamond",Georgia,serif;font-size:.92rem;line-height:1.5;color:#ded7c4;
  margin:.65rem 0 0;min-height:1.2em}
.mm-describe:empty{display:none}
.measurimeter{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.measurimeter .mm-sub{font-family:"EB Garamond",Georgia,serif;font-weight:400;font-size:.78rem;
  color:var(--muted);letter-spacing:0}
.mm-grid{display:grid;grid-template-columns:minmax(160px,0.8fr) 1.2fr;gap:clamp(1rem,2.4vw,1.8rem);align-items:start}
@media (max-width:640px){.mm-grid{grid-template-columns:1fr}}
.mm-clab{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.52rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember);margin-bottom:.45rem}
.mm-clab .mm-hint{color:rgba(138,155,146,.6);letter-spacing:.02em;text-transform:none}
.mm-mosaic{display:block;width:100%;max-width:160px;height:auto;aspect-ratio:1;border-radius:8px;
  border:1px solid var(--hairline);background:#000;image-rendering:pixelated}
.mm-motion{display:block;width:100%;height:40px;border-radius:6px;border:1px solid var(--hairline);background:rgba(0,0,0,.35)}
.mm-swatches{display:flex;gap:.3rem;flex-wrap:wrap}
.mm-sw{width:1.5rem;height:1.5rem;border-radius:5px;border:1px solid rgba(0,0,0,.5);position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mm-sw .mm-swf{position:absolute;left:0;right:0;bottom:-0.78rem;font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:.42rem;text-align:center;color:var(--muted)}
.mm-swatches.mm-empty::after{content:"—";color:var(--muted);font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.7rem}
.mm-meters{display:flex;flex-direction:column;gap:.34rem}
.mm-meter{display:grid;grid-template-columns:5.4rem 1fr 3.1rem;align-items:center;gap:.5rem}
.mm-mname{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.54rem;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase}
.mm-track{height:.5rem;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid rgba(138,155,146,.16);overflow:hidden}
.mm-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--prussian),var(--ember));border-radius:999px;
  transition:width .12s linear}
.mm-fill.mm-warm{background:linear-gradient(90deg,var(--prussian),var(--orange))}
.mm-mval{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.56rem;color:var(--bone);
  text-align:right;word-break:break-all}
.mm-meta .mm-meter{grid-template-columns:5.4rem 1fr;gap:.5rem}
.mm-meta .mm-mval{grid-column:2;text-align:left;color:var(--muted)}
/* tiny inline frequency-spectrum bars (audio) */
.mm-spectrum{display:flex;align-items:flex-end;gap:2px;height:.9rem}
.mm-bar{flex:1;min-width:2px;background:linear-gradient(180deg,var(--ember),var(--prussian));border-radius:1px 1px 0 0;height:2%}

/* ─── domain scenarios: with vs without, across fields ──────────────── */
.scenarios{display:grid;gap:1rem;margin:1.4rem 0}
.scenario{border:1px solid var(--hairline);border-radius:12px;padding:1rem 1.1rem;background:rgba(15,33,34,.4)}
.scenario h3{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:.95rem;color:var(--bone);margin:0 0 .3rem}
.scenario .setting{color:var(--muted);font-style:italic;margin:0 0 .6rem}
.scenario .without,.scenario .with{font-size:.95rem;line-height:1.5;padding:.5rem .7rem;border-radius:8px;margin:.35rem 0}
.scenario .without{border-left:3px solid var(--orange);background:rgba(223,94,0,.06)}
.scenario .with{border-left:3px solid var(--verified);background:rgba(127,207,155,.06)}
.scenario .lbl{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase}
.scenario .without .lbl{color:var(--orange)} .scenario .with .lbl{color:var(--verified)}

/* scenarios-lite — compact version for Home */
.scenarios-lite{position:relative;z-index:4;background:var(--void-opaque);border-top:1px solid var(--hairline);padding:var(--section-pad) clamp(2.4rem,5.5vw,5rem)}

/* ============================================================================
   THE STUDIO — single-viewport app shell (Task 8f)
   Desktop (≥900px): the page is a fixed-height CSS grid — site-nav on top, then
   rail · canvas · panel — and the PAGE never scrolls (body: 100dvh; overflow:hidden).
   Each region that can overflow (rail, right panel, chat log) scrolls inside itself.
   Below 900px the grid collapses to a single column and normal page scroll returns.
   ============================================================================ */
.studio-page{overflow-x:hidden}
/* Desktop: body is a fixed-height flex column (nav auto, app fills the rest) so nothing on the page
   ever overflows the viewport — the app, not the page, owns its scroll. No magic nav-height number. */
@media (min-width:900px){
  .studio-page{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  .studio-page .site-nav{flex:0 0 auto}
  .studio-page > .studio-app{flex:1 1 auto;min-height:0}
}

/* the app grid: rail | viewport | panel, filling the height the flex column gives it */
.studio-app{display:block}
@media (min-width:900px){
  .studio-app{
    display:grid;
    grid-template-columns:minmax(280px,22rem) minmax(0,1fr) minmax(310px,25rem);
    grid-template-areas:"rail viewport panel";
    height:100%;gap:0;align-items:stretch;overflow:hidden
  }
}
/* compact the shared nav on the studio app (one tight line) */
.studio-page .site-nav{padding-top:.55rem;padding-bottom:.55rem}

/* ── LEFT RAIL ───────────────────────────────────────────────────────────── */
.studio-rail{grid-area:rail;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--hairline);background:rgba(10,21,22,.5)}
@media (min-width:900px){.studio-rail{overflow:hidden}}
.rail-head{padding:clamp(.9rem,1.6vw,1.3rem) clamp(1rem,1.8vw,1.4rem) .4rem}
.rail-head h1{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:1.1;letter-spacing:-.01em;color:var(--bone);margin:0}
.rail-lede{font-family:"EB Garamond",Georgia,serif;font-size:.92rem;line-height:1.45;
  color:var(--muted);margin:.35rem 0 0}
.rail-own{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.56rem;letter-spacing:.04em;
  line-height:1.7;color:var(--prussian);margin:.5rem clamp(1rem,1.8vw,1.4rem) .2rem}
.rail-own b{color:var(--ember);font-weight:400}

/* the source menu — segmented tabs (wraps to a tidy grid so all five fit the narrow rail) */
.source-menu{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;
  padding:.55rem clamp(1rem,1.8vw,1.4rem) 0}
.source-menu button{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.02em;color:var(--muted);background:rgba(15,33,34,.55);border:1px solid var(--hairline);
  border-radius:8px;padding:.6em .5em;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;text-align:center}
.source-menu button:hover{color:var(--bone);border-color:rgba(239,171,48,.4)}
.source-menu button[aria-selected="true"]{color:var(--void);background:var(--ember);border-color:var(--ember);font-weight:500}
.source-menu button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.source-menu button:last-child:nth-child(odd){grid-column:1/-1}

/* the scrolling region of the rail — control blocks live here; only the active one is shown */
.rail-scroll{flex:1;min-height:0;padding:.5rem clamp(1rem,1.8vw,1.4rem) 1.4rem}
@media (min-width:900px){.rail-scroll{overflow-y:auto;overflow-x:hidden}}
.src-block[hidden]{display:none}

/* collapsible control groups (native <details>) */
.rail-group{border:1px solid var(--hairline);border-radius:10px;background:rgba(15,33,34,.4);
  margin:.55rem 0;overflow:hidden}
.rail-group>summary{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember);cursor:pointer;
  padding:.65rem .8rem;list-style:none;user-select:none;display:flex;align-items:center;gap:.5rem}
.rail-group>summary::-webkit-details-marker{display:none}
.rail-group>summary::before{content:"▸";color:var(--prussian);font-size:.7em;transition:transform .15s}
.rail-group[open]>summary::before{transform:rotate(90deg)}
.rail-group>summary:hover{color:var(--bone)}
.rail-group>summary:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
.rail-group>*:not(summary){margin-left:.8rem;margin-right:.8rem}
.rail-group>*:not(summary):last-child{margin-bottom:.8rem}
.rail-group .at-group{margin-top:.7rem}
.rail-about{margin-top:1rem}
.rail-about p{font-family:"EB Garamond",Georgia,serif;font-size:.9rem;line-height:1.55;color:var(--muted)}
.rail-about em{color:var(--ember);font-style:italic}
.src-hint{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.56rem;letter-spacing:.03em;
  color:var(--prussian);margin:.7rem 0 0;line-height:1.6}

/* the mounted Atelier panel needs no max-width inside the rail */
.studio-rail .studio-atelier .at-panel{max-width:none;gap:.7rem}
.studio-rail .studio-atelier{margin:0}
.studio-rail .studio-byo-ctrl{margin-bottom:0}
.studio-rail .studio-watch-ctrl{margin-top:0;border-top:0;padding-top:0}

/* ── CENTRE VIEWPORT (the hero) ──────────────────────────────────────────── */
.studio-viewport{grid-area:viewport;display:flex;flex-direction:column;min-height:0;
  align-items:center;justify-content:center;gap:.7rem;
  padding:clamp(1rem,2vw,1.8rem);background:
    radial-gradient(120% 100% at 50% 0%,rgba(223,94,0,.05),transparent 60%),rgba(8,17,18,.4)}
.viewport-stage{position:relative;flex:0 1 auto;display:flex;align-items:center;justify-content:center;
  max-width:100%;max-height:100%;border-radius:12px;overflow:hidden;background:#000;
  border:1px solid rgba(0,0,0,.5);box-shadow:0 10px 50px rgba(0,0,0,.5);line-height:0}
.viewport-stage canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (min-width:900px){
  /* the flex/grid cell already bounds the height; cap the stage to it (minus the toolbar row) so the
     toolbar always stays in view and the page never scrolls. min-height:0 lets it shrink. */
  .studio-viewport{min-height:0}
  .viewport-stage{min-height:0;max-height:100%}
}

/* the render toolbar — slim, real-software viewport controls */
.render-toolbar{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;width:100%;
  max-width:min(100%,640px);justify-content:center}
.render-toolbar .rt-spacer{flex:1;min-width:0}
.rt-btn{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.06em;
  color:var(--bone);background:rgba(15,33,34,.7);border:1px solid var(--hairline);border-radius:8px;
  padding:.5em .8em;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;
  transition:background .15s,border-color .15s,color .15s}
.rt-btn:hover:not([disabled]){background:rgba(239,171,48,.12);border-color:rgba(239,171,48,.5)}
.rt-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.rt-btn[disabled]{opacity:.4;cursor:not-allowed}
.rt-btn[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:var(--void)}
.rt-ico{font-size:.95em;line-height:1}
/* ── Overlay fallback: floating draggable in-page panel (Task 8h) ── */
.studio-overlay-panel{position:fixed;top:4.5rem;right:1.2rem;width:340px;max-height:80vh;z-index:9000;display:flex;flex-direction:column;background:rgba(11,23,24,.97);border:1px solid var(--hairline);border-radius:14px;box-shadow:0 8px 48px rgba(0,0,0,.72);overflow:hidden;resize:both;min-width:240px;min-height:200px}
.studio-overlay-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .8rem;background:rgba(15,33,34,.9);border-bottom:1px solid var(--hairline);cursor:move;flex-shrink:0;user-select:none}
.studio-overlay-head-label{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.studio-overlay-close{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.65rem;letter-spacing:.06em;color:var(--muted);background:transparent;border:1px solid var(--hairline);border-radius:4px;padding:.18em .55em;cursor:pointer}
.studio-overlay-close:hover{color:var(--bone);border-color:rgba(239,171,48,.5)}
.studio-overlay-close:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.studio-overlay-body{flex:1;min-height:0;overflow-y:auto;padding:.7rem .8rem}
.studio-overlay-note{font-family:"EB Garamond",Georgia,serif;font-size:.82rem;line-height:1.5;color:var(--muted);margin:.6rem 0 0;padding:.5rem .6rem;border-top:1px solid var(--hairline)}
.rt-quality{color:var(--muted)}
/* ── Immersive fullscreen (Task 8n): the canvas fills the screen; the toolbar becomes a slim,
   auto-hiding overlay that reveals on mouse move (.fs-idle hides it). Sleek + modern. ── */
.studio-viewport:fullscreen{background:#000;justify-content:center;padding:0;gap:0;position:relative}
.studio-viewport:fullscreen .viewport-stage{max-width:100vw;max-height:100vh;width:100vw;height:100vh;
  border-radius:0;border:0;box-shadow:none;background:#000}
.studio-viewport:fullscreen .viewport-stage canvas{max-width:100vw;max-height:100vh;
  width:auto;height:auto;object-fit:contain}
/* the toolbar floats as a translucent pill, bottom-centre, over the canvas */
.studio-viewport:fullscreen .render-toolbar{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);
  width:auto;max-width:94vw;z-index:50;background:rgba(8,17,18,.72);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border:1px solid var(--hairline);border-radius:14px;
  padding:.5rem .7rem;box-shadow:0 8px 40px rgba(0,0,0,.6);opacity:1;
  transition:opacity .4s ease,transform .4s ease}
/* idle: slide the pill down and fade it out (pointer-events off so it doesn't catch stray clicks) */
.studio-viewport:fullscreen.fs-idle .render-toolbar{opacity:0;transform:translateX(-50%) translateY(140%);
  pointer-events:none}
.studio-viewport:fullscreen.is-fullscreen{cursor:default}
.studio-viewport:fullscreen.fs-idle{cursor:none}
/* webkit-prefixed fullscreen mirror (Safari) */
.studio-viewport:-webkit-full-screen{background:#000;justify-content:center;padding:0;gap:0}
.studio-viewport:-webkit-full-screen .viewport-stage{max-width:100vw;max-height:100vh;width:100vw;height:100vh;border-radius:0;border:0}
.studio-viewport:-webkit-full-screen .render-toolbar{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);
  width:auto;z-index:50;background:rgba(8,17,18,.72);border:1px solid var(--hairline);border-radius:14px;padding:.5rem .7rem}
/* the interactive canvas wants a grab cursor when a camera-driven fractal source is live */
.viewport-stage.cam-interactive{cursor:grab;touch-action:none}
.viewport-stage.cam-interactive:active{cursor:grabbing}

/* ── RIGHT PANEL (what the model sees + chat) ────────────────────────────── */
.studio-panel{grid-area:panel;display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--hairline);background:rgba(10,21,22,.5)}
.panel-scroll{flex:1;min-height:0;padding:clamp(.8rem,1.5vw,1.2rem);display:flex;flex-direction:column;gap:.9rem}
@media (min-width:900px){.panel-scroll{overflow-y:auto;overflow-x:hidden}}
.studio-panel .panel{margin:0}
.studio-panel .measurimeter{margin:0}
/* tighten the measurimeter grid for the narrow panel */
.studio-panel .mm-grid{grid-template-columns:1fr;gap:.9rem}

/* the chat dock — pinned at the bottom of the panel, minimizable */
.chat-dock{flex:0 0 auto;display:flex;flex-direction:column;min-height:0;
  border-top:1px solid var(--hairline);background:rgba(8,17,18,.6)}
@media (min-width:900px){.chat-dock{max-height:46%}}
.chat-dock-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.55rem clamp(.8rem,1.5vw,1.2rem)}
.chat-dock-head h2{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.02em;margin:0;color:var(--bone)}
.chat-min{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:1rem;line-height:1;
  color:var(--muted);background:transparent;border:1px solid var(--hairline);border-radius:6px;
  width:1.7rem;height:1.7rem;cursor:pointer;transition:color .15s,border-color .15s}
.chat-min:hover{color:var(--bone);border-color:rgba(239,171,48,.5)}
.chat-min:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.chat-dock-body{display:flex;flex-direction:column;min-height:0;flex:1;
  padding:0 clamp(.8rem,1.5vw,1.2rem) clamp(.7rem,1.4vw,1rem)}
.chat-dock.minimized .chat-dock-body{display:none}
.studio-panel .chat-log{flex:1;min-height:0;max-height:none;overflow-y:auto;margin-bottom:.5rem}
.chat-dock .chat-chips{margin:.2rem 0 .5rem}
/* the free-text input row */
.chat-input{display:flex;gap:.45rem;align-items:stretch}
.chat-input input{flex:1;min-width:0;font-family:"EB Garamond",Georgia,serif;font-size:.95rem;
  color:var(--bone);background:rgba(6,14,15,.7);border:1px solid var(--hairline);border-radius:8px;
  padding:.5em .7em;transition:border-color .15s}
.chat-input input::placeholder{color:var(--prussian)}
.chat-input input:focus{outline:none;border-color:rgba(239,171,48,.55)}
.chat-input .btn{flex:0 0 auto;font-size:.62rem;padding:.5em .9em}

/* ── CUSTOM DROPDOWN (replaces every raw <select>) ───────────────────────── */
.dropdown{position:relative;width:100%;margin-top:.1rem}
.dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.04em;
  color:var(--bone);background:rgba(6,14,15,.7);border:1px solid var(--hairline);border-radius:6px;
  padding:.52em .7em;cursor:pointer;transition:border-color .15s,background .15s;text-align:left}
.dd-btn:hover{border-color:rgba(239,171,48,.45)}
.dd-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.dd-arrow{color:var(--ember);font-size:.7em;flex:0 0 auto}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:30;max-height:240px;overflow-y:auto;
  background:#0c1c1d;border:1px solid rgba(239,171,48,.35);border-radius:6px;
  box-shadow:0 12px 38px rgba(0,0,0,.6);padding:.25rem}
.dd-opt{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.03em;
  color:var(--muted);padding:.48em .6em;border-radius:4px;cursor:pointer;transition:background .12s,color .12s}
.dd-opt:hover,.dd-opt:focus-visible{background:rgba(239,171,48,.12);color:var(--bone);outline:none}
.dd-opt[aria-selected="true"]{color:var(--void);background:var(--ember)}

/* the topography label rows hold a dropdown now — keep them stacked + readable */
.studio-topo-ctrl{display:flex;flex-direction:column;gap:.7rem;margin-top:.4rem}
.studio-topo-ctrl label{display:flex;flex-direction:column;gap:.3rem;font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.studio-topo-ctrl input[type=range]{width:100%;accent-color:var(--orange);cursor:pointer}

/* ── RESPONSIVE: below 900px → single column, restore normal page scroll ──── */
@media (max-width:899.98px){
  .studio-app{display:block;height:auto;overflow:visible}
  .studio-rail,.studio-viewport,.studio-panel{border:0;overflow:visible;min-height:0}
  .studio-rail{border-bottom:1px solid var(--hairline)}
  .studio-panel{border-top:1px solid var(--hairline)}
  .rail-scroll,.panel-scroll{overflow:visible}
  .source-menu{grid-template-columns:1fr 1fr 1fr}
  .source-menu button:last-child:nth-child(odd){grid-column:auto}
  .viewport-stage{width:100%;max-width:min(560px,92vw)}
  .chat-dock{max-height:none}
  .studio-panel .chat-log{max-height:50vh}
  .chat-dock-body{padding-bottom:1rem}
}