@font-face{font-family:"Hanken Grotesk";src:url("../../techniques/fonts/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../../techniques/fonts/hanken-grotesk-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Conso";src:url("../../techniques/fonts/conso-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Conso";src:url("../../techniques/fonts/conso-medium.woff2") format("woff2");font-weight:500 700;font-display:swap}

/* Dark ground, ink type, one hot mark per view (the live mode number). The art carries the colour. */
:root{
  --ground:#0c0b10; --ink:#ece8df; --ink-2:#c9c4b9; --muted:#8f8a80; --line:rgba(236,232,223,.16);
  --slab:#ece8df; --slab-ink:#0c0b10; --hot:#ff7a3d; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"Conso",ui-monospace,monospace;
  --gut:clamp(16px,3.2vw,48px); color-scheme:dark;
  /* type scale (quality pass): six steps, each at least 1.125x the last; the shell's sizes */
  --t-xs:13px; --t-s:15px; --t-m:17px; --t-l:22px; --card:#d9d1bf; --card-ink:#2a2620;
}
:root[data-theme="light"]{--ground:#f2f0ea;--ink:#0b0c0e;--ink-2:#2c2e33;--muted:#5b5f68;--line:rgba(11,12,14,.18);--slab:#0b0c0e;--slab-ink:#f2f0ea;--hot:#c2410c;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#0c0b10}}
:root[data-theme="dark"]{--ground:#0c0b10}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--t-m);line-height:1.6;overflow-x:clip;font-synthesis:none;font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizeLegibility}
p{text-wrap:pretty}
.mono{font-family:var(--mono)} .small{font-size:var(--t-xs);color:var(--muted)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

.top{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem var(--gut);font-size:var(--t-s);color:var(--muted)}
.top .mark{font-weight:700;color:var(--ink)}

.intro{padding:clamp(1.5rem,6vw,5rem) var(--gut) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px)}
.intro h1{grid-column:1/-1;font-size:clamp(3rem,12.5vw,13.5rem);line-height:.82;font-weight:850;letter-spacing:-.055em}
.intro h1 span{display:block}
.intro h1 span:nth-child(2){padding-left:.9em;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.intro .lede{grid-column:7/-1;margin-top:clamp(1.2rem,3vw,2.4rem);max-width:56ch;color:var(--ink-2)}
.intro .lede p+p{margin-top:.8rem}

.room{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);padding:clamp(4rem,9vw,8rem) var(--gut) 0;isolation:isolate}
.numeral{position:absolute;z-index:-1;right:var(--gut);top:clamp(1rem,4vw,3rem);font-weight:850;font-size:clamp(9rem,32vw,30rem);line-height:.75;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--line);pointer-events:none;user-select:none}
.title{grid-column:1/-1;font-size:clamp(2.2rem,6vw,6rem);line-height:.92;font-weight:820;letter-spacing:-.04em;margin-bottom:clamp(1rem,3vw,2rem)}
.title .no{font-family:var(--mono);font-weight:400;font-size:var(--t-xs);letter-spacing:.04em;vertical-align:top;color:var(--muted);margin-right:.5rem}

.plate{position:relative;background:#050508;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.plate canvas{display:block;width:100%;height:auto;touch-action:manipulation;cursor:crosshair}
.plate.square{grid-column:1/8}
.plate.wide{grid-column:1/-1}
.readout{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;font-family:var(--mono);font-size:var(--t-xs);color:#d9d4c9;background:rgba(5,5,8,.78);pointer-events:none}
.readout b{color:var(--hot);font-weight:400}

/* The plate panel (quality pass): an instrument, not a text box. A matte vitrine with an inset rule, a mono
   running head, a big mode numeral between two steppers, segmented boundary picks, the reading on card stock. */
.panel{grid-column:8/-1;align-self:start;margin:clamp(2rem,8vw,7rem) 0 0 clamp(-4rem,-3vw,0rem);position:relative;z-index:2;
  background:#121116;border:1px solid var(--ink);box-shadow:inset 0 0 0 6px #121116,inset 0 0 0 7px var(--line),0 30px 60px -30px rgba(0,0,0,.9);
  padding:clamp(18px,2vw,28px);color:var(--ink)}
.runhead{display:flex;justify-content:space-between;gap:12px;font:400 var(--t-xs)/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:14px}
.dial{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;margin-bottom:14px}
.modeno{display:flex;align-items:baseline;justify-content:center;gap:.5rem}
.modeno .k{font:800 clamp(56px,6vw,88px)/.9 var(--sans);letter-spacing:-.04em;color:var(--hot);font-variant-numeric:tabular-nums}
.modeno .unit{font:400 var(--t-xs)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.panel button{font:600 var(--t-s)/1.2 var(--sans);color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;padding:10px 16px;min-height:44px;cursor:pointer;transition:background-color 120ms cubic-bezier(.2,0,0,1)}
.panel button:hover{background:#1d1c22}
.panel button.step{padding:0;font-size:var(--t-l)}
.panel button[aria-pressed="true"]{background:var(--ink);color:#121116}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.picks{border:0;margin:0 0 16px;padding:0;display:grid;gap:6px}
.picks legend{font:400 var(--t-xs)/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.picks label{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);cursor:pointer;font-size:var(--t-s);line-height:1.35;color:var(--ink-2)}
.picks label:has(input:checked){border-color:var(--ink);color:var(--ink)}
.picks b{font-weight:700;color:var(--ink);margin-right:.35em}
.picks input{accent-color:var(--hot)}
.fields{display:grid;gap:8px;margin-bottom:16px;font-size:var(--t-s);color:var(--ink-2)}
.word{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
#word{background:transparent;border:0;border-bottom:1px solid currentColor;font:400 var(--t-m) var(--mono);width:10ch;padding:.15rem 0;color:var(--ink)}
.check{display:flex;gap:.5rem;align-items:center}
.panel .what{font-size:var(--t-m);line-height:1.55;color:var(--ink-2);max-width:60ch;margin-bottom:16px}
.card{background:var(--card);color:var(--card-ink);padding:16px 18px 14px 24px;rotate:-1.2deg;font:400 var(--t-s)/1.6 var(--mono);box-shadow:0 10px 20px -12px rgba(0,0,0,.8);max-width:60ch}
.card figcaption{font:700 var(--t-s)/1.2 var(--sans);margin-bottom:6px}
.card q{font-style:normal}
.key{font:400 var(--t-xs)/1.5 var(--mono);color:var(--muted);margin-top:14px;max-width:62ch}
.label{grid-column:5/-1;background:var(--slab);color:var(--slab-ink);padding:clamp(1.1rem,2vw,1.8rem);font-size:var(--t-m);line-height:1.55;margin:-3rem 0 0 0;position:relative;z-index:2;align-self:start}
.label p{max-width:62ch}
.label .what{margin-bottom:.8rem}
.label p+p{margin-top:.6rem}
.controls{display:flex;flex-wrap:wrap;gap:.45rem;margin:.8rem 0}
.controls button{font:600 var(--t-s)/1.2 var(--sans);background:none;border:1px solid currentColor;padding:.5rem .9rem;cursor:pointer;min-height:44px;min-width:44px}

.foot{padding:clamp(4rem,8vw,7rem) var(--gut) 3rem;color:var(--muted);font-size:var(--t-s);max-width:calc(56ch + 2 * var(--gut))}

@media (max-width:820px){
  .plate.square,.plate.wide,.label,.panel{grid-column:1/-1;margin:0}
  .intro .lede{grid-column:1/-1}
  .label{margin-top:-1px}
  .readout{position:static;background:#050508}
  .panel{margin-top:-1px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media (max-width:820px){.intro h1{line-height:.98}.title{line-height:1}}  /* T3: tight display leading is for heads above 72 px */