/* Trench Radio - the page is the room a 1950s walnut valve receiver stands in. The set is 3D (radio3d), always centred;
   the scroll drives the camera, the text lives in the fields left and right of it. */
@font-face{font-family:'Yesteryear';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/yesteryear-normal-400.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/fonts/josefin-sans-normal-100-700.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:italic;font-weight:100 700;font-display:swap;src:url('/fonts/josefin-sans-italic-100-700.woff2') format('woff2')}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/commissioner-normal-100-900.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-normal-400.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-normal-500.woff2') format('woff2')}

:root{
  --room:#D9D4C5; --room-2:#CBC4B2; --room-deep:#17100A; --room-deep-2:#21170F;
  --walnut:#4A2A17; --walnut-d:#2B170C; --bake:#2A170E; --bake-d:#160C06;
  --ivory:#E9DFC6; --ivory-hi:#F3ECDA; --ivory-sh:#C9BB98;
  --brass:#B8914E; --brass-l:#D9B877; --brass-d:#7E6232;
  --glass:#1A120C; --print:#E9DCC0; --lamp:#FFB070;
  --ink:#24170E; --ink-2:#5B4A3A; --ink-3:#7A6A58;
  --live:#3BB273; --live-d:#1F7A4C; --needle:#B8402A;
  --f-plate:'Yesteryear',cursive; --f-label:'Josefin Sans',system-ui,sans-serif; --f-text:'Commissioner',system-ui,sans-serif; --f-num:'DM Mono',ui-monospace,monospace;
  --fw:clamp(300px,26vw,420px); --fwh:clamp(250px,18vw,330px); --gut:clamp(20px,3vw,48px); --bar:64px;
  --hair:1px solid rgba(36,23,14,.16);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--room);color:var(--ink);font:400 16px/1.55 var(--f-text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
a,button,[role=button],[role=slider],summary,label,.ca,[data-copy],[onclick]{cursor:pointer}
.mono,code{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.skip{position:fixed;left:12px;top:-60px;z-index:60;background:var(--bake);color:var(--ivory);padding:10px 14px;border-radius:6px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- room: one continuous background, darkens inside the cabinet ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 80% at 50% 38%,#E3DFD2 0,var(--room) 52%,#CFC9B8 100%)}
.room-dark{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--dark,0);background:radial-gradient(110% 80% at 50% 45%,#2A1D12 0,var(--room-deep) 60%,#0F0A06 100%);will-change:opacity}

/* ---------- header ---------- */
.bar{position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:40;display:flex;align-items:center;gap:20px;padding:0 var(--gut);transition:color .4s}
.brand{display:flex;align-items:baseline;padding:8px 0;min-height:44px;gap:8px;text-decoration:none;color:var(--walnut-d)}
.brand-s{font:400 34px/1 var(--f-plate);letter-spacing:.01em}
.brand-c{font:700 11px/1 var(--f-label);letter-spacing:.38em;text-transform:uppercase}
.bar-nav{display:flex;gap:22px;margin-left:auto}
.bar-nav a{font:600 12px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:10px 2px;position:relative}
.bar-nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.bar-nav a:hover::after,.bar-nav a[aria-current=true]::after{transform:scaleX(1)}
.bar-keys{display:flex;gap:8px}
body.dark .bar .brand{color:var(--ivory)} body.dark .bar-nav a{color:#CDBF9F}
/* plate under the fixed bar: room colour, crossfades to the dark room with --dark; headings slide under it cleanly */
.bar::before,.bar::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-26px;z-index:-1;pointer-events:none}
.bar::before{background:linear-gradient(180deg,#DCD8CA 0,#DCD8CA calc(100% - 26px),rgba(220,216,202,0) 100%)}
.bar::after{background:linear-gradient(180deg,#140E09 0,#140E09 calc(100% - 26px),rgba(20,14,9,0) 100%);opacity:var(--dark,0)}

/* ---------- keys (piano keys of the set) ---------- */
.key{--lip:3px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 20px;border:0;border-radius:5px 5px 9px 9px;
  font:600 13px/1 var(--f-label);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,background-color .2s;transform:translateY(0)}
.key span{position:relative;top:1px}
.key svg{flex:none}
.key-ivory{background:var(--ivory);color:var(--walnut-d);box-shadow:inset 0 1px 0 var(--ivory-hi),inset 0 calc(-1*var(--lip)) 0 var(--ivory-sh),0 1px 0 rgba(36,23,14,.28),0 6px 14px -8px rgba(36,23,14,.5)}
.key-dark{background:var(--bake);color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(184,145,78,.55),inset 0 calc(-1*var(--lip)) 0 var(--bake-d),0 1px 0 rgba(36,23,14,.3)}
.key:hover{transform:translateY(-1px)}
.key-ivory:hover{background:#EFE6CF}
.key-dark:hover{box-shadow:inset 0 0 0 1px var(--brass-l),inset 0 calc(-1*var(--lip)) 0 var(--bake-d),0 1px 0 rgba(36,23,14,.3)}
.key:active,.key.down{transform:translateY(3px);--lip:0px}
.key:disabled,.key[aria-disabled=true]{opacity:.5;transform:none;cursor:not-allowed;filter:saturate(.6)}
.key-sm{min-height:40px;padding:0 14px;font-size:11.5px}
.key .lamp{width:10px;height:10px;border-radius:50%;background:#5A3A1E;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);transition:background-color .6s}
.key-power[aria-pressed=true] .lamp{background:var(--lamp)}
.key-power.warming .lamp{background:#C97A3A}
.key-x span{letter-spacing:.12em}

/* ---------- the stage (fixed canvas) ---------- */
.stage{position:fixed;inset:0;z-index:0}
.gl{position:absolute;inset:0;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--mx,calc(var(--fw) + var(--gut) + 70px)) - var(--mf,100px)),#000 var(--mx,calc(var(--fw) + var(--gut) + 70px)),#000 calc(100% - var(--mx,calc(var(--fw) + var(--gut) + 70px))),transparent calc(100% - var(--mx,calc(var(--fw) + var(--gut) + 70px)) + var(--mf,100px)));
  mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--mx,calc(var(--fw) + var(--gut) + 70px)) - var(--mf,100px)),#000 var(--mx,calc(var(--fw) + var(--gut) + 70px)),#000 calc(100% - var(--mx,calc(var(--fw) + var(--gut) + 70px))),transparent calc(100% - var(--mx,calc(var(--fw) + var(--gut) + 70px)) + var(--mf,100px)))}
.gl canvas{opacity:0;transition:opacity .9s ease}
.gl.ready canvas{opacity:1}
.gl.tunable{cursor:none}
.poster{position:absolute;left:50%;top:var(--py,50%);height:var(--ph,66%);width:auto;max-width:none;transform:translate(-50%,-50%);transition:opacity .9s ease;pointer-events:none;user-select:none}
.stage.ready .poster{opacity:0}
.tuner{position:absolute;left:50%;transform:translateX(-50%);width:min(44vw,640px);height:12%;top:52%;outline:none;touch-action:pan-y;pointer-events:none}
.tuner:focus-visible{outline:2px dashed var(--brass);outline-offset:4px}
.keys-row{display:none}
.ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--brass-l);border-radius:50%;pointer-events:none;z-index:50;opacity:0;transform:translate3d(-80px,-80px,0);transition:opacity .2s,width .2s,height .2s}
.ring i{position:absolute;left:50%;top:-6px;width:1.5px;height:8px;margin-left:-.75px;background:var(--brass-l)}
.ring.on{opacity:1}
.ring.grab{width:40px;height:40px;margin:-20px 0 0 -20px}

/* subtitles: a line on the table under the set */
.cc{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);width:min(calc(100vw - 2*var(--fw) - 2*var(--gut) - 40px),760px);z-index:5;text-align:center;pointer-events:none;transition:opacity .5s}
.cc-st{margin:0 0 6px;font:600 11px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:10px;justify-content:center;align-items:center}
.eye-dot{width:8px;height:8px;border-radius:50%;background:#4A5A50;transition:background-color .4s}
body.on .eye-dot{background:var(--live)}
.cc-demo{color:var(--brass-d);border-left:1px solid currentColor;padding-left:10px}
.cc-l{margin:0;min-height:2.9em;font:500 clamp(17px,1.35vw,21px)/1.4 var(--f-text);color:var(--ink);text-wrap:balance}
.cc-l .w{transition:opacity .18s}
.cc-l .w.pend{opacity:.28}
.cc-l .w.hot{font-weight:750}
.cc-wait{color:var(--ink-3);font-weight:400}
body.dark .cc-l{color:var(--ivory)} body.dark .cc-st{color:#BBA987} body.dark .cc-wait{color:#9C8B70}
body.cc-hide .cc{opacity:0}

/* ---------- page + sections ---------- */
.page{position:relative;z-index:2;pointer-events:none}
.sc{position:relative;min-height:100vh;min-height:100svh;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--bar) + 24px) var(--gut) 120px}
.f{width:var(--fw);pointer-events:auto}
.f-r{text-align:left}
.sc-hero{align-items:center}
.sc-hero .f{width:var(--fwh)}
.sc-end{min-height:100vh}
.name{margin:0;line-height:.86;color:var(--walnut-d)}
.name-s{display:block;font:400 clamp(86px,8vw,138px)/.9 var(--f-plate);letter-spacing:-.005em;margin-left:-.04em}
.name-c{display:block;font:700 clamp(15px,1.25vw,19px)/1 var(--f-label);letter-spacing:.62em;text-transform:uppercase;margin:16px 0 0 .3em;color:var(--walnut)}
.f .lead{font:500 clamp(19px,1.5vw,23px)/1.35 var(--f-text);margin:30px 0 26px;max-width:19ch;text-wrap:balance;color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.row-links{margin-top:14px}
.kick{margin:0 0 6px;font:600 12px/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--brass-d)}
.h-s{margin:0 0 18px;font:400 clamp(54px,5.2vw,84px)/.95 var(--f-plate);color:var(--walnut-d)}
.h-xl{margin:0 0 14px;font:400 clamp(64px,6vw,96px)/.95 var(--f-plate);color:var(--walnut-d)}
.f p{margin:0 0 14px;max-width:38ch;color:var(--ink-2)}
.lab{margin:0 0 10px;font:600 11px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.fine{font-size:13px!important;color:var(--ink-3)!important;margin-top:8px!important}
.dark .h-s,.dark .h-xl{color:var(--ivory)} .dark .f p{color:#CDBF9F} .dark .kick{color:var(--brass-l)} .dark .lab{color:#A8977A}

/* CA */
.ca-wrap{margin:6px 0 4px}
.ca{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 14px;border:0;border-radius:4px;background:var(--glass);color:var(--print);text-align:left;box-shadow:inset 0 0 0 1px rgba(184,145,78,.55),inset 0 2px 6px rgba(0,0,0,.6)}
.ca-k{font:700 11px/1 var(--f-label);letter-spacing:.2em;color:var(--brass-l)}
.ca-v{font:500 12.5px/1.35 var(--f-num);word-break:break-all;color:var(--print)}
.ca-c{font:600 10.5px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:#A8977A}
.ca:hover .ca-c{color:var(--lamp)}
.ca-pend .ca-v{font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:12px}

/* hero right field */
.warm{display:flex;justify-content:space-between;align-items:baseline;border-bottom:var(--hair);padding:0 0 10px;margin:0 0 22px;transition:opacity .6s}
.warm-t{font:var(--ww,200) 13px/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.warm-n{font:500 13px/1 var(--f-num);color:var(--ink-2)}
.warm-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;text-align:right}
.warm.st-off .warm-t{color:var(--ink-3)}
.warm.st-heat .warm-t{color:#A0602C}
.warm.st-air .warm-t{color:var(--live-d);display:inline-flex;align-items:center;gap:10px}
.warm.st-air .warm-t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(59,178,115,.2)}
.nums{margin:0 0 22px;display:grid;gap:16px}
.nums div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:var(--hair);padding-bottom:12px}
.nums dt{font:600 11.5px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.nums dd{margin:0;font:500 clamp(26px,2.2vw,34px)/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--walnut-d);overflow:hidden;height:1.05em}
.nums dd .roll{display:inline-block;animation:roll .5s cubic-bezier(.2,.8,.2,1)}
@keyframes roll{from{transform:translateY(60%);opacity:.2}to{transform:none;opacity:1}}
.hint{font-size:14px!important;color:var(--ink-3)!important}
.hint b{font:600 11px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

/* dial section */
.legend{display:flex;gap:18px;margin-top:18px;font:600 11px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:16px;height:3px;background:var(--walnut)}
.legend .lg-coin{background:var(--brass)} .legend .lg-needle{width:3px;height:14px;background:var(--needle)}
.stations,.log{list-style:none;margin:0 0 22px;padding:0}
/* fixed boxes: live rows never push the page around (CLS) */
.stations{height:min(23rem,40vh);overflow-y:auto;overscroll-behavior:contain}
.log{height:24rem;overflow:hidden}
.stations li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:9px 0;border-bottom:var(--hair);transition:background-color .3s}
.stations .s-n{font:700 14px/1.1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--walnut-d)}
.stations .s-m{display:block;font:400 12px/1.3 var(--f-num);color:var(--ink-3);letter-spacing:0;text-transform:none;margin-top:3px}
.stations .s-k{font:600 10px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.stations li.on .s-n{color:var(--live-d)}
.stations li.on{background:linear-gradient(90deg,rgba(59,178,115,.08),transparent)}
.st-empty,.log-empty{color:var(--ink-3);font-size:14px;padding:8px 0}
.tune-b{min-height:36px;padding:0 12px;border:0;border-radius:4px 4px 7px 7px;background:var(--bake);color:var(--ivory);font:600 10.5px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(184,145,78,.5),inset 0 -2px 0 var(--bake-d);transition:transform .12s}
.tune-b:hover{transform:translateY(-1px)} .tune-b:active{transform:translateY(2px)}
.log li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:7px 0;border-bottom:var(--hair);font-size:14px;line-height:1.35;animation:logIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes logIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.log .t{font:400 12px/1.6 var(--f-num);color:var(--ink-3)}
.log .v{font:700 11px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);margin-right:6px}
.log .v.dn{color:var(--needle)}
.log a{display:inline-block;padding:8px 0;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(36,23,14,.25)}
.log .d{color:var(--ink-2);font-family:var(--f-num);font-size:12.5px}

/* knobs / your coin */
.slot{margin:20px 0 18px}
.slot label{display:block;padding:11px 0;margin-top:-5px;font:600 11px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.slot-in{display:flex;gap:8px;padding:6px;border-radius:5px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(184,145,78,.7),inset 0 3px 8px rgba(0,0,0,.7)}
.slot-in input{flex:1;min-width:0;height:40px;border:0;background:transparent;color:var(--print);font:500 13px/1 var(--f-num);padding:0 8px;outline:none}
.slot-in input::placeholder{color:#8A7A60;font-family:var(--f-label);letter-spacing:.08em}
.slot-in:focus-within{box-shadow:inset 0 0 0 1px var(--brass-l),inset 0 3px 8px rgba(0,0,0,.7)}
.slot-err{margin:8px 0 0!important;color:var(--needle)!important;font:600 12px/1.3 var(--f-label)!important;letter-spacing:.1em;text-transform:uppercase}
.watch-h{display:flex;justify-content:space-between;margin:0 0 8px!important;font:600 11px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)!important}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 4px 0 10px;border-radius:4px;background:var(--ivory);font:500 12px/1 var(--f-num);box-shadow:inset 0 -2px 0 var(--ivory-sh);animation:logIn .35s}
.chip button{width:28px;height:28px;border:0;background:none;font-size:18px;line-height:1;color:var(--ink-2)}
.acc{padding:22px;border-radius:6px;background:rgba(233,223,198,.55);box-shadow:inset 0 0 0 1px rgba(36,23,14,.12)}
.acc-coin{font:700 15px/1.2 var(--f-label)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--walnut-d)!important;margin:0 0 10px!important;word-break:break-all}
.acc-state{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.acc-state p{margin:0!important;font-size:14.5px}
.st{flex:none;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border-radius:3px;font:700 10.5px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;background:var(--bake);color:var(--ivory)}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:#6B5A48}
.st-on{color:#D6F0E1}.st-on::before{background:var(--live)}
.st-q::before{background:var(--lamp)}
.ways{display:grid;gap:14px;margin-top:4px}
.way{padding:16px 0 0;border-top:var(--hair)}
.way h3{margin:0 0 6px;font:700 13px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--walnut-d)}
.way p{font-size:14px;margin:0 0 12px!important}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 12px}
.seg button{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:10px 12px;border:0;border-radius:4px;background:transparent;box-shadow:inset 0 0 0 1px rgba(36,23,14,.2);text-align:left;transition:background-color .2s,box-shadow .2s}
.seg button span{font:600 10.5px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.seg button b{font:500 15px/1 var(--f-num)}
.seg button[aria-checked=true]{background:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--brass),inset 0 -2px 0 var(--ivory-sh)}
.acc-msg{min-height:1.2em;margin:12px 0 0!important;font-size:14px!important;color:var(--ink-2)!important}
.acc-msg.err{color:var(--needle)!important}
.wal,.pv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:var(--hair)}
.wal .lab,.pv .lab{width:100%;margin:0}
.wal code{font-size:12px;word-break:break-all;flex:1}
.lnk{border:0;background:none;padding:6px 0;font:600 11px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* inside: valves */
.valves{list-style:none;margin:0;padding:0;counter-reset:v}
.valves li{display:grid;grid-template-columns:34px 1fr auto;grid-template-areas:"n t x" "n d d" "n m m";gap:4px 10px;padding:12px 0;border-bottom:1px solid rgba(233,223,198,.14)}
.vn{grid-area:n;font:500 12px/1.5 var(--f-num);color:var(--brass-l)}
.vt{grid-area:t;font:700 14px/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.vd{grid-area:d;font-size:13.5px;line-height:1.4;color:#B8A88A}
.vx{grid-area:x;font:500 13px/1.2 var(--f-num);color:var(--ivory)}
.vm{grid-area:m;height:3px;background:rgba(233,223,198,.12);margin-top:6px;overflow:hidden}
.vm i{display:block;height:100%;background:var(--lamp);transform-origin:left;transform:scaleX(var(--l,0));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.valves li.hot .vt{color:var(--lamp)}

/* back: how + brass plate */
.how{margin:0 0 22px;padding:0;list-style:none;counter-reset:h}
.how li{counter-increment:h;position:relative;padding:0 0 12px 34px;margin-bottom:12px;border-bottom:1px solid rgba(233,223,198,.12);font-size:14.5px;line-height:1.5;color:#CDBF9F}
.how li::before{content:counter(h);position:absolute;left:0;top:1px;font:500 12px/1.4 var(--f-num);color:var(--brass-l)}
.how b{color:var(--ivory);font-weight:600}
/* the film: a little set of its own. Bakelite case, glass screen, the tuning scale as the timeline, red needle = playhead */
.vp{position:relative;margin:0 0 20px;padding:6px 6px 8px;border-radius:7px 7px 10px 10px;outline:none;
  background:linear-gradient(180deg,#33200F 0,var(--bake) 40%,var(--bake-d) 100%);
  box-shadow:inset 0 0 0 1px rgba(184,145,78,.5),inset 0 1px 0 rgba(255,214,150,.12),inset 0 -3px 0 rgba(0,0,0,.45),0 22px 40px -24px rgba(0,0,0,.9)}
.vp:focus-visible{box-shadow:inset 0 0 0 1px var(--brass-l),0 0 0 2px var(--brass-l),0 22px 40px -24px rgba(0,0,0,.9)}
.vp-scr{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#0d0906;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);cursor:pointer}
.vp-scr video{display:block;width:100%;height:100%;object-fit:cover;background:#0d0906}
.vp-scr::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(184,145,78,.35),inset 0 0 26px rgba(0,0,0,.55);
  background:radial-gradient(120% 90% at 50% 50%,transparent 45%,rgba(13,9,6,.45) 100%);transition:opacity .4s}
.vp.is-started .vp-scr::after{background:none}
/* the big key: a bakelite piano key with a brass-ringed play disc */
.vp-big{--lip:5px;position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;gap:12px;padding:9px 18px 9px 9px;border:0;border-radius:7px 7px 12px 12px;
  background:radial-gradient(120% 140% at 30% 0,#4A2D18 0,var(--bake) 45%,var(--bake-d) 100%);color:var(--ivory);transform:translate(-50%,-50%);
  box-shadow:inset 0 0 0 1px rgba(184,145,78,.7),inset 0 1px 0 rgba(255,214,150,.22),inset 0 calc(-1*var(--lip)) 0 #0E0703,0 2px 0 rgba(0,0,0,.4),0 18px 30px -12px rgba(0,0,0,.85);
  transition:transform .12s ease,box-shadow .12s ease}
.vp-big:hover{transform:translate(-50%,calc(-50% - 1px));box-shadow:inset 0 0 0 1px var(--brass-l),inset 0 1px 0 rgba(255,214,150,.3),inset 0 calc(-1*var(--lip)) 0 #0E0703,0 2px 0 rgba(0,0,0,.4),0 20px 32px -12px rgba(0,0,0,.9)}
.vp-big:active{--lip:1px;transform:translate(-50%,calc(-50% + 4px))}
.vp-big:focus-visible{outline:2px solid var(--brass-l);outline-offset:4px}
.vp-big-k{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--walnut-d);
  background:radial-gradient(circle at 40% 32%,var(--ivory-hi) 0,var(--ivory) 45%,var(--ivory-sh) 100%);
  box-shadow:0 0 0 3px var(--brass),0 0 0 4px rgba(0,0,0,.5),inset 0 -2px 3px rgba(80,55,25,.35)}
.vp-big-k .vi{width:22px;height:22px;margin-left:3px}
.vp-big-t{display:flex;flex-direction:column;gap:6px;font:600 12.5px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;padding-top:2px}
.vp-big-d{font:500 12px/1 var(--f-num);letter-spacing:.02em;text-transform:none;color:var(--brass-l)}
.vp.is-started .vp-big{display:none}
/* the scale */
.vp-dial{position:relative;height:40px;margin:7px 2px 0;touch-action:none;outline:none;cursor:pointer}
.vp-glass{position:absolute;inset:3px 0;border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,#120C07 0,var(--glass) 55%,#22170E 100%);box-shadow:inset 0 0 0 1px rgba(184,145,78,.55),inset 0 2px 6px rgba(0,0,0,.75)}
.vp-buf,.vp-lit{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);pointer-events:none}
.vp-buf{background:rgba(233,220,192,.05)}
.vp-lit{background:linear-gradient(90deg,rgba(255,176,112,.05),rgba(255,176,112,.3))}
.vp-ticks{position:absolute;inset:0;pointer-events:none}
.vp-ticks i{position:absolute;bottom:3px;width:1px;height:5px;background:rgba(233,220,192,.35)}
.vp-ticks i.mj{height:9px;background:rgba(233,220,192,.75)}
.vp-ticks b{position:absolute;top:5px;transform:translateX(-50%);font:500 9.5px/1 var(--f-num);color:#A8977A;font-weight:500}
.vp-needle{position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none;z-index:2}
.vp-needle::before{content:"";position:absolute;left:-1px;top:3px;bottom:3px;width:2px;background:var(--needle);box-shadow:0 0 6px rgba(184,64,42,.7)}
.vp-needle::after{content:"";position:absolute;left:-5px;top:-1px;border:5px solid transparent;border-top:7px solid var(--needle);border-bottom:0}
.vp-dial:hover .vp-needle::before,.vp.is-drag .vp-needle::before{background:#D9533A}
.vp-dial:focus-visible .vp-glass{box-shadow:inset 0 0 0 1px var(--brass-l),0 0 0 2px var(--brass-l),inset 0 2px 6px rgba(0,0,0,.75)}
/* the key row */
.vp-bar{display:flex;align-items:center;gap:6px;margin:4px 2px 0}
.vk{--lip:3px;flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:4px 4px 7px 7px;color:var(--ivory);
  background:linear-gradient(180deg,#3A2412 0,var(--bake) 100%);box-shadow:inset 0 0 0 1px rgba(184,145,78,.5),inset 0 calc(-1*var(--lip)) 0 #0E0703,0 1px 0 rgba(0,0,0,.4);
  transition:transform .12s,box-shadow .12s}
.vk:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--brass-l),inset 0 calc(-1*var(--lip)) 0 #0E0703,0 1px 0 rgba(0,0,0,.4)}
.vk:active{--lip:0px;transform:translateY(3px)}
.vk:focus-visible{outline:2px solid var(--brass-l);outline-offset:2px}
.vk .vi{width:18px;height:18px}
.vp-play{width:44px}
.vp-time{flex:1 1 auto;min-width:0;margin-left:6px;font:500 13px/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--print);white-space:nowrap}
.vp-time i{font-style:normal;color:#7E6E56;margin:0 2px}
.vp-vol{position:relative;flex:none;width:76px;height:36px;touch-action:none;outline:none;cursor:pointer;border-radius:4px}
.vp-vol:focus-visible{outline:2px solid var(--brass-l);outline-offset:2px}
.vp-vol-t{position:absolute;left:8px;right:8px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#0B0704;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,214,150,.08);overflow:hidden}
.vp-vol-t i{display:block;height:100%;background:linear-gradient(90deg,var(--brass-d),var(--brass-l));transform-origin:left}
.vp-knob{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 30%,#6A4428 0,var(--bake) 55%,var(--bake-d) 100%);box-shadow:0 0 0 1.5px var(--brass),0 2px 3px rgba(0,0,0,.6)}
.vp-i-pause,.vp.is-on .vp-i-play,.vp-i-off,.vp.is-muted .vp-i-snd,.vp-i-ex,.vp.is-fs .vp-i-fs{display:none}
.vp.is-on .vp-i-pause,.vp.is-muted .vp-i-off,.vp.is-fs .vp-i-ex{display:block}
.vp.is-fs{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:12px;border-radius:0}
.vp.is-fs .vp-scr{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.vp.is-fs video{object-fit:contain}
.vp.is-fs .vp-bar,.vp.is-fs .vp-dial{max-width:1100px;width:100%;margin-left:auto;margin-right:auto}
.plate{padding:22px 22px 18px;border-radius:5px;background:var(--brass);color:#2E2110;box-shadow:inset 0 0 0 1px rgba(255,236,190,.35),inset 0 0 0 5px rgba(126,98,50,.35),0 18px 40px -20px rgba(0,0,0,.8)}
.plate-h{margin:0 0 14px!important;font:700 12px/1 var(--f-label)!important;letter-spacing:.3em;text-transform:uppercase;color:#2E2110!important;display:flex;align-items:baseline;gap:8px}
.plate-s{font:400 34px/1 var(--f-plate);letter-spacing:0;text-transform:none}
.plate dl{margin:0;display:grid;gap:0}
.plate dl div{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:10px 0;border-top:1px solid rgba(46,33,16,.28)}
.plate dt{font:700 10.5px/1.5 var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.plate dd{margin:0;font-size:13px}
.plate .ca{background:transparent;box-shadow:none;padding:0;min-height:0;color:#2E2110;grid-template-columns:1fr auto}
.plate .ca .ca-k{display:none}.plate .ca-v{color:#2E2110}.plate .ca-c{color:#5E4520}
.plate-links{display:flex;gap:16px}
.plate-links .pl-x{min-width:32px;margin:0 -11px;text-align:center} /* tap zone >= 32px around the one-letter link, text stays put */
.plate-links a{display:inline-block;padding:8px 0;font:700 11px/1.5 var(--f-label);letter-spacing:.18em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}

/* end */
.sc-end .f-r .key-power{margin-bottom:14px}
.foot{position:relative;display:flex;justify-content:space-between;gap:12px;padding:22px var(--gut) 30px;font:600 11px/1.4 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);pointer-events:auto}

/* toast */
.toast{position:fixed;left:50%;bottom:120px;z-index:70;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 16px;border-radius:4px 4px 7px 7px;background:var(--bake);color:var(--ivory);font:600 12px/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(184,145,78,.5);transition:transform .3s,opacity .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* wallet picker dialog (kit/wallet.js) */
dialog.dlg{border:0;padding:26px;border-radius:6px;background:var(--ivory);color:var(--ink);width:min(420px,calc(100vw - 32px));box-shadow:inset 0 0 0 1px rgba(36,23,14,.15),0 30px 80px -20px rgba(0,0,0,.6)}
dialog.dlg::backdrop{background:rgba(23,16,10,.55)}
.dlg h2{margin:0 0 14px;font:400 40px/1 var(--f-plate);color:var(--walnut-d)}
.dlg-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;background:none;font-size:26px;line-height:1;color:var(--ink-2)}
.wp-list{display:grid;gap:8px}
.wp-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 12px;border:0;border-radius:4px 4px 7px 7px;background:#F4EEDF;text-align:left;font:600 13px/1 var(--f-label);letter-spacing:.1em;box-shadow:inset 0 0 0 1px rgba(36,23,14,.14),inset 0 -2px 0 var(--ivory-sh)}
.wp-item:hover{background:#fff}
.wp-item img{width:26px;height:26px}
.dlg a{color:var(--walnut)}
.dlg .mono{font-size:12px}

/* ---------- reveal (no hidden content without JS: only applied once JS adds .js) ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- dark sections ---------- */
.sc.dark{color:var(--ivory)}

/* ---------- mid widths: fields narrower ---------- */
@media (max-width:1180px){:root{--fw:clamp(270px,28vw,330px);--fwh:clamp(240px,22vw,270px)}.bar-nav{display:none}}

/* ---------- phones / portrait tablets: set on top, sheets under it ---------- */
@media (max-width:860px){
  :root{--bar:56px;--stage:min(48svh,440px);--gut:16px}
  .bar{background:var(--room);border-bottom:var(--hair);gap:10px}
  .bar::before,.bar::after{display:none}
  body.dark .bar{background:var(--room-deep);border-color:rgba(233,223,198,.12)}
  .brand-s{font-size:28px}.brand-c{font-size:9.5px;letter-spacing:.3em}
  .bar-keys{margin-left:auto}.bar-keys .key{min-height:40px;padding:0 12px;font-size:11px}
  .stage{top:var(--bar);bottom:auto;height:var(--stage);z-index:30;background:var(--room);display:flex;flex-direction:column;border-bottom:var(--hair)}
  body.dark .stage{background:var(--room-deep);border-color:rgba(233,223,198,.12)}
  .gl{position:relative;inset:auto;flex:1;min-height:0;-webkit-mask-image:none;mask-image:none}
  .poster{top:42%;height:auto;width:96%}
  .tuner{pointer-events:auto;top:30%;bottom:auto;height:34%;width:100%;left:0;transform:none}
  .keys-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:0 12px 8px}
  .pk{min-height:40px;border:0;border-radius:4px 4px 8px 8px;background:var(--ivory);color:var(--walnut-d);font:700 10.5px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 1px 0 var(--ivory-hi),inset 0 -3px 0 var(--ivory-sh),0 1px 0 rgba(36,23,14,.25);transition:transform .1s}
  .pk:active,.pk.down{transform:translateY(3px);box-shadow:inset 0 1px 0 var(--ivory-hi),0 1px 0 rgba(36,23,14,.25)}
  .pk[aria-pressed=true]{background:#F6EDD5;color:var(--live-d)}
  .cc{position:relative;left:auto;bottom:auto;transform:none;width:auto;padding:0 16px 8px;order:-1;flex:none;display:none}
  .cc-m{display:block}
  .cc{display:block;order:0}
  .cc-st{margin:0 0 3px;font-size:9.5px}
  .cc-l{height:2.7em;min-height:0;overflow:hidden;font-size:15px;line-height:1.35}
  .page{padding-top:calc(var(--bar) + var(--stage))}
  .sc{display:block;min-height:0;padding:30px var(--gut) 34px;border-bottom:var(--hair)}
  .sc.dark{border-color:rgba(233,223,198,.12)}
  .f,.sc-hero .f{width:auto}
  .f + .f{margin-top:26px}
  .sc-hero{padding-top:24px}
  .name-s{font-size:clamp(72px,22vw,96px)}
  .f .lead{margin:16px 0 18px}
  .h-s{font-size:clamp(46px,14vw,64px)}
  .h-xl{font-size:clamp(58px,17vw,80px)}
  .f p{max-width:none}
  .toast{bottom:24px}
  .ring{display:none}
  .foot{flex-direction:column}
  .vk{width:40px;height:40px}.vp-play{width:48px}.vp-dial{height:44px}.vp-vol{height:40px}
  .vp-big{gap:10px;padding:7px 14px 7px 7px}.vp-big-k{width:40px;height:40px}.vp-big-t{font-size:11.5px}
}
@media (max-width:360px){.bar-keys .key-x span{display:none}.brand-c{display:none}.vp-vol{width:60px}.vp-time{font-size:12px;margin-left:2px}}
@media (prefers-reduced-motion:reduce){.js .rv{transition-duration:.3s;transform:none}.log li,.chip{animation:none}}

/* ---------- docs ---------- */
body.docs{background:var(--room)}
.doc{max-width:860px;margin:0 auto;padding:calc(var(--bar) + 40px) var(--gut) 40px}
.doc-h .h-xl{margin-bottom:18px}
.doc-lead{font:500 clamp(18px,1.5vw,21px)/1.5 var(--f-text);color:var(--ink);max-width:56ch;margin:0 0 30px}
.doc-img{width:100%;height:auto;aspect-ratio:1280/800;border-radius:6px;background:var(--room-deep);object-fit:cover}
.doc-s{padding:40px 0 10px;border-top:var(--hair);margin-top:40px}
.doc-s h2{margin:0 0 16px;font:400 clamp(42px,4.4vw,60px)/1 var(--f-plate);color:var(--walnut-d)}
.doc-s h3{margin:0 0 8px;font:700 13px/1.2 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--walnut-d)}
.doc-s p,.doc-s li{color:var(--ink-2);max-width:68ch}
.doc-s ul{padding-left:20px}.doc-s li{margin-bottom:8px}
.doc-s b{color:var(--ink);font-weight:600}
.doc-s code{font-size:.88em;background:rgba(36,23,14,.07);padding:1px 5px;border-radius:3px;word-break:break-word}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 18px}
.doc-card{padding:20px;border-radius:6px;background:rgba(233,223,198,.6);box-shadow:inset 0 0 0 1px rgba(36,23,14,.12)}
.doc-card p{margin:0;font-size:15px}
.doc-plate{border-top:0}
.doc-plate .plate{max-width:520px}
@media (max-width:700px){.doc-grid{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
body.nf{min-height:100vh}
body.nf .stage{position:fixed;inset:0}
body.nf .gl{-webkit-mask-image:none;mask-image:none}
body.nf .poster{left:62%}
.nf-box{position:relative;z-index:3;max-width:min(420px,40vw);padding:0 var(--gut);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.nf-box .h-xl{font-size:clamp(52px,5vw,78px)}
.nf-box p{color:var(--ink-2);margin:0 0 22px}
@media (max-width:860px){
  body.nf .stage{position:relative;height:40svh;inset:auto;top:0}
  body.nf .poster{left:50%;width:96%;height:auto}
  .nf-box{max-width:none;min-height:0;padding:20px 16px 40px}
}