/* ============================================================================ ALLURING COFFEE / CLASSIFIED FILE 069420 The site is a dossier someone compiled on a one-person studio. Every section is a differently-shaped page of that file. Paper over espresso; neon only where the grid leaks in. Nothing here is a card grid twice. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} :root{ --void:#080605; --bg:#0b0806; --bg2:#110c09; --ink:#0a0807; --paper:#17110d; --paper2:#1e1610; --paper3:#241a13; --rule:rgba(232,180,100,.16); --rule2:rgba(232,180,100,.34); --text:#f6e9d6; --muted:#b6a086; --dim:#9a8068; --gold:#e8b464; --amber:#ff9d4d; --stamp:#e0563f; --roast:#8a4b2a; --cyan:#2ee6f6; --magenta:#ff2e97; --lime:#7bff9e; --violet:#b06cff; --maxw:1200px; --display:"Chakra Petch",ui-sans-serif,system-ui,sans-serif; --body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace; --ease:cubic-bezier(.22,1,.36,1); } .neon{--rule:rgba(126,146,255,.18);--rule2:rgba(126,146,255,.38);--gold:var(--cyan); --paper:#0e0b22;--paper2:#141038;--paper3:#191347;--text:#e9eaff;--muted:#9ba2d4;--dim:#767ca8} html{scroll-behavior:smooth} /* The sideways guard sits on as `clip` rather than on as `hidden`. `overflow-x:hidden` on turns the body into a real scroll container, which is a footgun for fixed children and scroll anchoring; `clip` guards the same overflow without creating a scroll box at all. (For the record: deep links were fine under both. I spent a while convinced they were broken before noticing the browser window was occluded, which freezes rAF and therefore freezes smooth scrolling. Verified with scroll-behavior forced to auto: both configurations land on the target exactly.) */ html{overflow-x:clip} @supports not (overflow:clip){html{overflow-x:hidden}} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body); font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased} /* the rider canvas lives here, behind everything */ #grid-life{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85} /* NB: do not use `body > *:not(#grid-life)` here - :not() carries the id's specificity and silently beats header.site's position:sticky. */ main,footer.site,.boot,#toast,.lb{position:relative;z-index:1} img,video{max-width:100%;display:block;height:auto} a{color:var(--gold);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:600;background:var(--gold);color:#170e05;padding:10px 16px;border-radius:8px;font-weight:700} h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;margin:0} p{margin:0 0 1em} .lead{font-size:1.12rem;color:#e0cfb6;max-width:66ch} .neon .lead{color:#c9cdf0} .muted{color:var(--muted)} .tiny{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} /* ---------------------------------------------------------------- paper --- Every block of content is a sheet in the file: punched margin, faint grain, and a hair of rotation so it never reads machine-set. */ .paper{position:relative;background: repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px), linear-gradient(157deg,var(--paper2),var(--paper)); border:1px solid var(--rule);border-radius:3px;padding:30px 30px 30px 62px; box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.03)} .paper::before{ /* margin rule + punch holes */ content:"";position:absolute;left:38px;top:0;bottom:0;width:1px; background:linear-gradient(rgba(224,86,63,.42),rgba(224,86,63,.12))} .paper::after{content:"";position:absolute;left:14px;top:44px;width:11px;height:11px;border-radius:50%; background:var(--void);box-shadow:0 92px 0 var(--void),0 184px 0 var(--void),inset 0 1px 2px rgba(0,0,0,.9)} .paper.tilt-l{transform:rotate(-.35deg)} .paper.tilt-r{transform:rotate(.4deg)} @media (max-width:700px){.paper{padding:24px 20px}.paper::before,.paper::after{display:none}} /* file tab heading */ .tab{display:inline-flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:.74rem; letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--gold); padding:6px 16px 5px;border-radius:4px 4px 0 0;font-weight:700;transform:translateY(1px)} .tab b{font-weight:700} .tab i{font-style:normal;opacity:.62} /* rubber stamps */ .stamp{position:absolute;font-family:var(--display);font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--stamp);border:3px solid var(--stamp);border-radius:5px; padding:5px 13px;font-size:.9rem;opacity:.82;transform:rotate(-11deg);pointer-events:none; mix-blend-mode:screen;text-shadow:0 0 1px currentColor;white-space:nowrap} .stamp.green{color:var(--lime);border-color:var(--lime)} .stamp.gold{color:var(--gold);border-color:var(--gold)} .stamp.thunk{animation:thunk .45s var(--ease) both} @keyframes thunk{0%{opacity:0;transform:rotate(-11deg) scale(2.6)} 60%{opacity:.95;transform:rotate(-11deg) scale(.94)}100%{opacity:.82;transform:rotate(-11deg) scale(1)}} /* redaction: click to declassify */ .rd{position:relative;background:#0a0807;color:transparent;border-radius:2px;padding:0 .3em; cursor:pointer;user-select:none;box-shadow:0 0 0 1px rgba(255,255,255,.07); transition:background .35s var(--ease),color .35s var(--ease)} .rd::after{content:"";position:absolute;inset:0;background:#0a0807;border-radius:2px; transition:transform .4s var(--ease),opacity .3s var(--ease);transform-origin:left} .rd:hover::after{background:#161010} .rd.open{background:transparent;color:var(--amber)} .rd.open::after{transform:scaleX(0);opacity:0} /* typewriter form rows */ .form{display:grid;grid-template-columns:auto 1fr;gap:0} .form dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase; color:var(--dim);padding:10px 22px 10px 0;border-bottom:1px dashed var(--rule);white-space:nowrap} .form dd{margin:0;padding:10px 0;border-bottom:1px dashed var(--rule);font-family:var(--mono); font-size:.92rem;color:var(--text)} @media (max-width:620px){.form{grid-template-columns:1fr}.form dt{border-bottom:0;padding-bottom:0} .form dd{padding-top:2px}} /* ---------------------------------------------------------------- chrome --- */ header.site{position:sticky;top:0;z-index:80;background:rgba(11,8,6,.9); backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)} .nav{display:flex;align-items:center;gap:18px;height:62px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700; color:var(--text);font-size:1rem;letter-spacing:.02em} .brand:hover{text-decoration:none} .brand .mark{width:28px;height:28px;flex:none} /* The studio mark. A cup, but the steam turns at ninety degrees, because in this house everything does. Drawn as inline SVG so it takes the page's theme colour and so it is still legible at 24px — the old PNG was 3% opaque line art and vanished completely at that size. */ .mark{display:block;overflow:visible; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--gold) 55%,transparent))} .mk-cup,.mk-node{stroke:none} .mk-cup{fill:var(--gold)} .mk-node{fill:rgba(0,0,0,.5)} .mk-handle{fill:none;stroke:var(--gold);stroke-width:2.2} .mk-steam{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:square} .mk-steam2{opacity:.65} /* the steam drifts. slowly. it has nowhere to be. */ @keyframes markdrift{ 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(-1.1px);opacity:.55}} .mk-steam{animation:markdrift 3.6s var(--ease) infinite} .mk-steam2{animation-delay:-1.5s} @media (prefers-reduced-motion:reduce){.mk-steam{animation:none}} .brand:hover .mk-node{fill:rgba(0,0,0,.18)} .brand b{color:var(--gold)} .brand s{text-decoration:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em; color:var(--dim);border:1px solid var(--rule);padding:2px 5px;border-radius:3px} .nav nav{margin-left:auto;display:flex;align-items:center;gap:4px} .nav nav a{color:var(--muted);font-size:.9rem;padding:8px 11px;border-radius:7px;font-weight:500; font-family:var(--mono);letter-spacing:.04em;transition:.18s var(--ease)} .nav nav a:hover{color:var(--text);background:rgba(232,180,100,.1);text-decoration:none} .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600; font-size:.94rem;letter-spacing:.03em;padding:12px 21px;border-radius:4px;border:1px solid var(--rule2); color:var(--text);background:rgba(232,180,100,.07);transition:.2s var(--ease);white-space:nowrap;cursor:pointer} .btn:hover{text-decoration:none;border-color:var(--gold);background:rgba(232,180,100,.16);transform:translateY(-2px)} .btn-primary{background:linear-gradient(135deg,var(--gold),#c68c3a);color:#170e05;border-color:transparent; box-shadow:0 7px 24px rgba(232,180,100,.28)} .btn-primary:hover{background:linear-gradient(135deg,#ffd591,var(--gold));color:#170e05} .btn-pink{border-color:rgba(255,46,151,.5);color:#ffd7ec;background:rgba(255,46,151,.1)} .btn-pink:hover{border-color:var(--magenta);background:rgba(255,46,151,.2)} .nav nav a.btn{color:var(--text)} .nav nav a.btn-primary,.nav nav a.btn-primary:hover{color:#170e05} .neon .btn-primary{background:linear-gradient(135deg,var(--cyan),#12b8d8);color:#04121a} .neon .btn-primary:hover{color:#04121a} /* ---------------------------------------------------------------- files --- */ section{padding:70px 0;position:relative} .fileno{display:flex;align-items:center;gap:14px;margin-bottom:-1px} /* .gridbg sits inside .pagehead on /404 and /press with aria-hidden and nothing else — its sibling wrap already carries `position:relative;z-index:2`, which is only there to sit ON TOP of something. Nothing ever defined it, so both page headers have been rendering an empty div where the grid should be. */ .gridbg{position:absolute;inset:0;pointer-events:none;opacity:.5; background: repeating-linear-gradient(90deg,transparent 0 63px,var(--rule) 63px 64px), repeating-linear-gradient(0deg,transparent 0 63px,var(--rule) 63px 64px); -webkit-mask-image:radial-gradient(120% 90% at 18% 0,#000 0%,transparent 72%); mask-image:radial-gradient(120% 90% at 18% 0,#000 0%,transparent 72%)} /* the sign-off line at the foot of the manual — likewise never styled */ .vnote{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--dim)} .vnote a{color:var(--muted)} .fileno hr{flex:1;border:0;border-top:1px solid var(--rule);margin:0} /* --------------------------------------------------- FILE 00 / the cover --- */ .cover{padding:0;border-bottom:1px solid var(--rule);overflow:hidden;position:relative} .cover .sheet{position:relative;padding:64px 0 58px; background:radial-gradient(90% 70% at 20% 0%,rgba(232,180,100,.11),transparent 60%), radial-gradient(70% 60% at 88% 96%,rgba(138,75,42,.2),transparent 66%)} .coverhead{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.66rem; letter-spacing:.2em;text-transform:uppercase;color:var(--stamp);margin:0 0 34px;flex-wrap:wrap; padding-bottom:16px;border-bottom:1px solid rgba(224,86,63,.3)} .coverhead span{border:1px solid rgba(224,86,63,.5);padding:4px 10px;border-radius:2px;white-space:nowrap} .covermain{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center} .cup{width:clamp(86px,10vw,124px);padding:10px 14px;cursor:pointer; background:radial-gradient(closest-side,rgba(2,7,10,.9),rgba(2,7,10,.5) 62%,transparent); filter:drop-shadow(0 0 18px rgba(46,230,246,.45));transition:filter .4s var(--ease)} .cup:hover{filter:drop-shadow(0 0 30px rgba(46,230,246,.75)) brightness(1.12)} .cup.jolt{animation:jolt .55s var(--ease)} @keyframes jolt{0%,100%{transform:none}25%{transform:translateY(-9px) rotate(-3deg)} 55%{transform:translateY(3px) rotate(2deg)}} .subject{font-family:var(--display);font-weight:700;line-height:.94;letter-spacing:.005em; font-size:clamp(2.3rem,6.4vw,4.6rem);margin:0 0 6px} .subject span{display:block;color:var(--gold);text-shadow:0 0 40px rgba(232,180,100,.35)} .covermain .lead{margin:16px 0 0} .coverfoot{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:20px; border-top:1px dashed var(--rule);font-family:var(--mono);font-size:.76rem;color:var(--muted)} .coverfoot b{color:var(--gold);font-weight:600} .coverfoot .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block; margin-right:7px;box-shadow:0 0 9px var(--lime);animation:blip 2.2s ease-in-out infinite} @keyframes blip{0%,100%{opacity:1}50%{opacity:.3}} .cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px} @media (max-width:760px){.covermain{grid-template-columns:1fr;gap:18px}} /* screening room - the trailer, framed like a reel can */ .reel{margin-top:40px;position:relative;border:1px solid var(--rule2);border-radius:4px; background:#000;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)} .reel video{width:100%;aspect-ratio:16/9;background:#000} .reel figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:10px 15px;border-top:1px solid var(--rule);background:rgba(11,8,6,.8); font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)} /* ------------------------------------------------ FILE 02 / evidence ------- */ .evidence{display:grid;gap:22px} .item{position:relative;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0; background:linear-gradient(157deg,var(--paper2),var(--paper));border:1px solid var(--rule); border-radius:3px;overflow:hidden;box-shadow:0 22px 56px rgba(0,0,0,.5);transition:.3s var(--ease)} .item:hover{transform:translateY(-3px);border-color:var(--rule2)} .item:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,340px)} .item:nth-child(even) .shotcol{order:2} .item .shotcol{position:relative;background:#000;min-height:190px} .item .shotcol img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .item .meta{padding:26px 28px;display:flex;flex-direction:column;gap:10px} .item h3{font-size:1.5rem} .item p{margin:0;color:var(--muted);font-size:.96rem} .tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:12px} .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; padding:4px 9px;border-radius:2px;border:1px solid var(--rule);color:var(--muted)} .tag.live{color:var(--lime);border-color:rgba(123,255,158,.45);background:rgba(123,255,158,.08)} .tag.hot{color:var(--amber);border-color:rgba(255,157,77,.5);background:rgba(255,157,77,.09)} .item.unroasted{grid-template-columns:1fr;background: repeating-linear-gradient(45deg,rgba(232,180,100,.035) 0 12px,transparent 12px 24px),var(--paper); border-style:dashed} @media (max-width:820px){.item,.item:nth-child(even){grid-template-columns:1fr} .item .shotcol{min-height:180px;order:0!important}} /* ------------------------------------------- FILE 03 / survival protocols -- */ .protocols{counter-reset:p;display:grid;gap:2px;margin-top:26px} .proto{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:20px 22px; background:var(--paper);border-left:3px solid var(--rule2);transition:.25s var(--ease)} .proto:hover{background:var(--paper2);border-left-color:var(--gold)} .proto::before{counter-increment:p;content:"0" counter(p);font-family:var(--display);font-weight:700; font-size:1.5rem;color:var(--gold);opacity:.5;line-height:1} .proto h3{font-size:1.05rem;margin-bottom:4px} .proto p{margin:0;color:var(--muted);font-size:.95rem} .proto.green{border-left-color:var(--lime)} .proto.green h3{color:var(--lime)} .proto.amber{border-left-color:#ffb347} .proto.amber h3{color:#ffb347} /* ---------------------------------------------------- FILE 04 / the game --- */ .rig{max-width:1000px;margin:0 auto;border:1px solid var(--rule2);border-radius:4px;padding:15px; background:linear-gradient(157deg,var(--paper2),var(--paper));box-shadow:0 26px 70px rgba(0,0,0,.6)} .rigbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px} .seg{display:flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden} .seg button{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase; padding:7px 11px;background:transparent;border:0;color:var(--dim);cursor:pointer;transition:.15s} .seg button+button{border-left:1px solid var(--rule)} .seg button:hover{color:var(--text);background:rgba(126,146,255,.08)} .seg button.on{background:var(--cyan);color:#04121a;font-weight:700} .stat{display:flex;flex-direction:column;gap:1px;padding:5px 13px;background:rgba(5,4,15,.7); border:1px solid var(--rule);border-radius:4px;min-width:80px} .stat span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .stat b{font-family:var(--display);font-size:1.15rem;line-height:1;color:var(--cyan);font-variant-numeric:tabular-nums} .gwrap{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--rule);background:#05040f} #gr{display:block;width:100%;background:#05040f;touch-action:none} #gr:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px} .gover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;text-align:center;padding:26px;background:radial-gradient(90% 90% at 50% 50%,rgba(5,4,15,.88),rgba(5,4,15,.97))} .gover[hidden]{display:none} .gtitle{font-family:var(--display);font-weight:700;margin:0;font-size:clamp(1.4rem,3.6vw,2.1rem); text-shadow:0 0 28px rgba(46,230,246,.45)} .gsub{margin:0;color:var(--muted);max-width:48ch;font-size:.94rem} .gsub b{color:var(--cyan)} .powers{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .powers button{position:relative;flex:1;min-width:112px;overflow:hidden;text-align:left; font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; padding:9px 11px;border:1px solid var(--rule);border-radius:4px;background:rgba(5,4,15,.6); color:var(--dim);cursor:pointer;transition:.15s} .powers button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fill,100%); background:rgba(46,230,246,.13);transition:width .2s linear} .powers button.ready{color:var(--cyan);border-color:rgba(46,230,246,.4)} .powers button:hover{background:rgba(46,230,246,.1)} .powers button i{position:relative;display:block;font-style:normal;font-size:.58rem;color:var(--dim); letter-spacing:.14em;margin-bottom:2px} .powers button b{position:relative} .inv{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-family:var(--mono);font-size:.72rem; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:1.2em} .inv i{display:inline-block;width:9px;height:9px;background:var(--c);border-radius:2px; box-shadow:0 0 8px var(--c);margin-right:5px} .inv .none{color:var(--dim);opacity:.65;letter-spacing:.08em;text-transform:none;font-style:italic} .keys{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-family:var(--mono);font-size:.7rem; color:var(--dim);letter-spacing:.06em} .keys kbd{background:rgba(126,146,255,.13);border:1px solid var(--rule);border-radius:4px; padding:1px 6px;margin-right:3px;color:var(--muted);font-family:var(--mono);font-size:.68rem} .gpad{display:none;flex-direction:column;align-items:center;gap:7px;margin-top:12px} .gpad div{display:flex;gap:7px} .gpad button{width:60px;height:48px;border-radius:5px;border:1px solid var(--rule2); background:rgba(126,146,255,.1);color:var(--cyan);font-size:1rem;cursor:pointer} @media (pointer:coarse){.gpad:not([hidden]){display:flex}} /* ------------------------------------------- FILE 05 / interrogation ------- */ .crt{border:1px solid rgba(123,255,158,.28);border-radius:5px;overflow:hidden;background:#040a05; box-shadow:0 26px 70px rgba(0,0,0,.65),inset 0 0 90px rgba(123,255,158,.05)} .crt .bar{display:flex;align-items:center;gap:8px;padding:8px 13px;background:#08130a; border-bottom:1px solid rgba(123,255,158,.2);font-family:var(--mono);font-size:.66rem; letter-spacing:.16em;text-transform:uppercase;color:#5f9c74} .crt .bar i{width:8px;height:8px;border-radius:50%;background:#26402d;flex:none} .crt .bar i:first-child{background:#7bff9e} .crt .screen{position:relative;height:min(58vh,470px);overflow-y:auto;padding:16px 16px 8px; font-family:var(--mono);font-size:.85rem;line-height:1.65;color:#9dffbe;cursor:text} .crt .screen::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(rgba(0,0,0,.22) 0 1px,transparent 1px 3px)} .crt p{margin:0 0 2px;white-space:pre-wrap;word-break:break-word} .crt .c{color:#4f8562} .crt .k{color:#7bff9e;font-weight:600} .crt .w{color:#ffb347} .crt .e{color:#ff6b6b} /* The manual's WARNING.txt panel: same chrome as the live shell, but a static

 instead of a scrolling screen. It carried class="term", which no
   stylesheet has ever defined, so for its whole life it rendered as bare text
   with three invisible dots above it. pre-wrap so it also stops shoving phones
   sideways. */
.crt pre{margin:0;padding:16px 16px 20px;color:#c9ffd8;font-family:var(--mono);
  font-size:.86rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.crt .inline{display:flex;gap:8px;align-items:baseline}
.crt input{flex:1;background:transparent;border:0;outline:0;color:#c9ffd8;font-family:var(--mono);
  font-size:.85rem;caret-color:#7bff9e;min-width:0}
.crt .prompt{color:#4f8562;white-space:nowrap}
.crt a{color:#7bff9e;text-decoration:underline}

/* ------------------------------------------------- FILE 06 / exhibits ----- */
.exhibits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:26px 20px;margin-top:34px}
.ex{position:relative;padding:11px 11px 42px;background:#141210;border:1px solid rgba(255,255,255,.05);
  border-radius:2px;cursor:zoom-in;display:block;width:100%;text-align:left;
  box-shadow:0 16px 40px rgba(0,0,0,.55);transition:.3s var(--ease)}
.ex:nth-child(3n){transform:rotate(-1.1deg)}
.ex:nth-child(3n+2){transform:rotate(.9deg)}
.ex:hover{transform:rotate(0) translateY(-5px) scale(1.02);z-index:2;box-shadow:0 26px 60px rgba(0,0,0,.7)}
.ex img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.ex figcaption,.ex .cap{position:absolute;left:12px;right:12px;bottom:12px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.06em;color:#a98d6f;line-height:1.4}
.ex::before{ /* tape */
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:82px;height:20px;background:rgba(232,180,100,.16);border:1px solid rgba(232,180,100,.12);
  border-radius:1px;backdrop-filter:blur(1px)}

/* manual page strip */
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:11px;margin-top:24px}
.pages a{position:relative;border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  background:#050b06;aspect-ratio:4/5;transition:.25s var(--ease);display:block}
.pages a:hover{border-color:#7bff9e;transform:translateY(-4px)}
.pages img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:brightness(1.3) contrast(1.06)}
.pages b{position:absolute;left:0;right:0;bottom:0;padding:13px 6px 4px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.1em;color:#9dffbe;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.92))}
.pages a.redacted img{filter:grayscale(1) brightness(.3)}
.pages a.redacted::after{content:"[DATA EXPUNGED]";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;color:#ff5f5f;text-align:center;padding:6px}
.pages a.redacted.open img{filter:none} .pages a.redacted.open::after{display:none}

/* ticker of the manual's real page footers */
.ticker{overflow:hidden;border-block:1px solid var(--rule);background:rgba(8,6,5,.6);padding:9px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker ul{display:flex;gap:40px;list-style:none;padding:0;margin:0;width:max-content;
  animation:slide 52s linear infinite;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ticker:hover ul{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* --------------------------------------------------------- lightbox ------- */
.lb{position:fixed;inset:0;z-index:400;background:rgba(5,3,2,.96);display:none;
  align-items:center;justify-content:center;padding:26px}
.lb.on{display:flex}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:13px}
.lb img{max-width:min(1400px,95vw);max-height:78vh;border-radius:4px;border:1px solid var(--rule2)}
.lb figcaption{color:var(--muted);font-size:.88rem;max-width:70ch;text-align:center;font-family:var(--mono)}
.lb button{background:rgba(232,180,100,.14);color:var(--text);border:1px solid var(--rule2);
  border-radius:5px;font-size:1.3rem;line-height:1;width:42px;height:42px;cursor:pointer}
.lb > button{position:absolute;top:18px;right:22px}
.lbnav{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;
  gap:6px;padding:6px 8px;background:rgba(8,6,5,.9);border:1px solid var(--rule2);border-radius:999px}
.lbnav button{width:38px;height:38px;font-size:.95rem}
.count{font-family:var(--mono);font-size:.8rem;color:var(--muted);min-width:58px;text-align:center}

/* ------------------------------------------------------ boot + toast ------ */
.boot{position:fixed;inset:0;z-index:600;background:#040302;display:grid;place-items:center;
  font-family:var(--mono);color:#9dffbe;font-size:.88rem;padding:24px;cursor:pointer}
.boot[hidden]{display:none}
.boot div{max-width:540px;width:100%;line-height:1.95}
.boot .cur{display:inline-block;width:9px;height:1.05em;background:#7bff9e;vertical-align:-2px;
  animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.boot small{display:block;margin-top:22px;color:#456b52;letter-spacing:.16em;font-size:.66rem}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);z-index:500;
  pointer-events:none;opacity:0;transition:.38s var(--ease)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast p{margin:0;font-family:var(--mono);font-size:.8rem;background:rgba(8,6,5,.96);
  border:1px solid var(--rule2);border-radius:3px;padding:10px 18px;color:var(--gold);
  box-shadow:0 14px 44px rgba(0,0,0,.7)}

/* konami */
body.sudo{--gold:#7bff9e;--amber:#7bff9e;--stamp:#7bff9e;--text:#c9ffd8;--muted:#6fb583;--dim:#4a7358;
  --bg:#020603;--bg2:#040a06;--paper:#061008;--paper2:#08170b;--void:#010402;
  --rule:rgba(123,255,158,.2);--rule2:rgba(123,255,158,.42)}
body.sudo::before{content:"root@grid:~# ";position:fixed;left:10px;bottom:8px;z-index:450;
  font-family:var(--mono);font-size:.68rem;color:#7bff9e;opacity:.55;pointer-events:none}

.reveal{opacity:0;transform:translateY(15px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------- footer -------- */
footer.site{border-top:1px solid var(--rule);background:var(--void);padding:52px 0 30px;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px;margin-bottom:30px}
footer.site h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 13px;font-weight:600}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer ul a{color:var(--muted)} footer ul a:hover{color:var(--gold)}
.fbot{border-top:1px solid var(--rule);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;color:var(--dim);font-size:.8rem;font-family:var(--mono)}
.fbrand{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-family:var(--display);
  font-weight:700;color:var(--text)}
.fbrand .mark{width:24px;height:24px;flex:none}

/* ------------------------------------------------- prose pages ------------ */
.prose{max-width:74ch}
.prose h2{margin:2.2rem 0 .8rem;font-size:1.5rem}
.prose h3{margin:1.7rem 0 .5rem;color:var(--gold)}
.prose ul{color:var(--muted);padding-left:22px}
.prose li{margin-bottom:.5em}
.pagehead{padding:54px 0 28px;border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.pagehead h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.35rem}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;
  font-weight:600;color:var(--gold);margin:0 0 .8rem}
.eyebrow::before{content:"// "}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:3px;background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:.93rem}
th,td{padding:12px 17px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);background:rgba(232,180,100,.06)}
tbody th{color:var(--muted);font-weight:600;white-space:nowrap;font-family:var(--body);font-size:.89rem}
tr:last-child th,tr:last-child td{border-bottom:0}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{padding-left:26px;position:relative;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;
  background:var(--gold);box-shadow:0 0 9px var(--gold);transform:rotate(45deg)}
.ticks li b{color:var(--text);font-weight:600}
/* minmax(300px,...) forces a 300px column even when the container is 266px
   wide, which pushed the press kit two pixels past the viewport at 320px and
   gave the whole page a horizontal scrollbar. min(300px,100%) lets the track
   give up its minimum when there is genuinely no room. */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.shot{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--paper);
  cursor:zoom-in;padding:0;display:block;width:100%}
.shot img{aspect-ratio:16/9;object-fit:cover;width:100%}

@media (max-width:980px){.nav{gap:10px}.nav nav{gap:1px}.nav nav a{padding:8px 8px;font-size:.84rem}}
@media (max-width:860px){.nav nav a.hide-sm{display:none}}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:640px){section{padding:52px 0}.fgrid{grid-template-columns:1fr}
  .crt .screen{height:64vh;font-size:.8rem}.exhibits{gap:22px 14px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}#grid-life{display:none}}
section{scroll-margin-top:76px}

@media (max-width:700px){.brand s{display:none}}

/* Phones. Four links, a file badge and a wishlist button do not fit across
   390px, and the old header simply overflowed — every page scrolled sideways
   on a phone. The brand keeps row one; everything else drops to a scrollable
   strip underneath, with the wishlist button pulled to the front of it so the
   one button that matters is never the one you have to scroll for. */
@media (max-width:620px){
  .nav{flex-wrap:wrap;height:auto;padding:9px 0;gap:8px}
  .brand{flex:1 1 auto;min-width:0}
  .nav nav{order:2;width:100%;margin-left:0;gap:3px;padding-bottom:2px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{flex:none;white-space:nowrap}
  .nav nav a.hide-sm{display:block}
  .nav nav a.btn-primary{order:-1}
  section{scroll-margin-top:104px}
}

/* alice spool-up: the loader is a light-cycle laying wall across a grid.
   Fresh trail is amber, settled trail is green. Same rule as the game. */
.loadgrid{margin:8px 0 4px;font-family:var(--mono);font-size:.72rem;line-height:1.06;
  letter-spacing:.6px;white-space:pre;overflow:hidden}
.loadgrid .off{color:#16281d}
.loadgrid .cool{color:#2f8a54}
.loadgrid .hot{color:#ffb347}
.loadgrid .head{color:#fff8ee;text-shadow:0 0 9px #ffb347,0 0 18px #ff8a2b}
.loadstat{margin:0 0 8px;color:#5f9c74;font-family:var(--mono);font-size:.76rem}
.loadstat b{color:#9dffbe;font-weight:600}
.loadstat .pct{color:#ffb347;font-variant-numeric:tabular-nums}

/* ---------------- the cup clicker ---------------- */
.cupbox{position:relative;display:inline-block;line-height:0;margin-bottom:16px}
.cupcount{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  display:none;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  background:rgba(8,6,5,.94);border:1px solid var(--rule2);border-radius:999px;
  padding:4px 11px;color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.cupcount.on{display:flex}
.cupcount b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.cupcount i{font-style:normal;color:var(--amber)}
.cupcount.bump{animation:cupbump .28s var(--ease)}
@keyframes cupbump{0%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(1.16)}
  100%{transform:translateX(-50%) scale(1)}}

.prestige{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
  z-index:520;width:min(430px,92vw);opacity:0;pointer-events:none;transition:.35s var(--ease);
  background:linear-gradient(157deg,var(--paper2),var(--paper));border:1px solid var(--rule2);
  border-radius:5px;padding:18px 20px;box-shadow:0 24px 70px rgba(0,0,0,.75)}
.prestige.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.prestige h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stamp);margin:0 0 8px}
.prestige p{margin:0 0 14px;font-size:.92rem;color:var(--muted);line-height:1.5}
.prestige p b{color:var(--text)}
.prestige .row{display:flex;gap:9px;flex-wrap:wrap}
.prestige button{font-family:var(--display);font-weight:600;font-size:.88rem;padding:9px 16px;
  border-radius:4px;cursor:pointer;border:1px solid var(--rule2);background:rgba(232,180,100,.08);
  color:var(--text);transition:.18s var(--ease)}
.prestige button.yes{background:linear-gradient(135deg,var(--gold),#c68c3a);color:#170e05;border-color:transparent}
.prestige button:hover{transform:translateY(-1px);border-color:var(--gold)}

/* 69420 — the reward is that everything becomes unusable and beautiful.
   NB: the saturation lives INSIDE the keyframe. An animation that sets `filter`
   replaces the whole property, so a static `filter: saturate()` on the same rule
   is silently discarded the moment the animation starts. */
@keyframes huecycle{
  from{filter:hue-rotate(0deg) saturate(2.1) contrast(1.06)}
  to  {filter:hue-rotate(360deg) saturate(2.1) contrast(1.06)}}
body.rainbow .cupcount{border-color:var(--lime);color:var(--lime)}

/* visually-hidden headings that still give the page a real outline */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================================
   1984 BUT THE FUTURE — chrome, CRT, and far too much equipment for a game
   about a line.
   ========================================================================== */

/* CRT: scanlines + a vignette over the whole document. Kept faint on purpose;
   the joke is the equipment, not eye strain. */
html::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  background:
    repeating-linear-gradient(rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.42) 100%);
  mix-blend-mode:multiply;opacity:.55}
@media (max-width:640px){html::after{opacity:.35}}

/* the wordmark is chrome now, because it is 1986 and we have a gradient */
.subject span{
  background:linear-gradient(178deg,#fffdf8 0%,#ffe9c2 20%,#e8b464 44%,#7a4d14 51%,
    #e8b464 59%,#fff6e2 78%,#c07f2c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(232,180,100,.35))}

/* ---------------- SYSTEM TELEMETRY: the over-engineering ---------------- */
#sys{position:fixed;right:14px;bottom:14px;z-index:210;font-family:var(--mono);
  width:222px;transition:transform .35s var(--ease)}
#sys[data-open="0"]{transform:translateY(calc(100% - 30px))}
/* Collapsed, it shrinks to a stub in the corner and stops catching clicks —
   the full-width strip was sitting on top of the cabinet legend. */
#sys .sysbar{transition:width .3s var(--ease)}
#sys[data-open="0"]{pointer-events:none}
#sys[data-open="0"] .sysbar{width:104px;margin-left:auto;border-radius:5px 5px 0 0;
  pointer-events:auto}
/* Stand down over the footer — the small print was there first. */
#sys[data-dock="1"]{transform:translateY(calc(100% + 20px));opacity:0;pointer-events:none}
@media (max-width:1100px){#sys{display:none}}

.sysbar{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;cursor:pointer;
  background:linear-gradient(180deg,#2a2018,#171009);border:1px solid var(--rule2);
  border-bottom:0;border-radius:5px 5px 0 0;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);user-select:none}
.sysbar .pwr{width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 8px var(--lime);flex:none;animation:blip 2.4s ease-in-out infinite}
.sysbar b{margin-left:auto;font-weight:400;opacity:.6}

.sysbody{background:linear-gradient(180deg,#141009,#0c0806);border:1px solid var(--rule2);
  border-radius:0 0 5px 5px;padding:11px 11px 12px;
  box-shadow:0 20px 50px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}

.gauge{margin-bottom:7px}
.gauge span{display:flex;justify-content:space-between;font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.gauge span i{font-style:normal;color:var(--gold)}
.bars{display:flex;gap:2px}
.bars i{flex:1;height:7px;background:#241a12;border-radius:1px;transition:background .3s,box-shadow .3s}
.bars i.on{background:var(--lime);box-shadow:0 0 6px var(--lime)}
.bars i.on.warn{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.bars i.on.crit{background:var(--stamp);box-shadow:0 0 6px var(--stamp)}

#scope{display:block;width:100%;height:34px;background:#050b06;border:1px solid rgba(123,255,158,.22);
  border-radius:3px;margin:8px 0}

.leds{display:grid;gap:4px;margin-bottom:9px}
.led{display:flex;align-items:center;gap:7px;font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.led u{width:7px;height:7px;border-radius:50%;background:#33261a;flex:none;text-decoration:none}
.led.ok u{background:var(--lime);box-shadow:0 0 7px var(--lime)}
.led.busy u{background:var(--amber);box-shadow:0 0 7px var(--amber);animation:blip 1s ease-in-out infinite}
.led b{margin-left:auto;color:var(--muted);font-weight:400}

/* seven-segment-ish counter */
.seg{display:flex;gap:2px;justify-content:center;margin:2px 0 10px;padding:5px 6px;
  background:#0a0604;border:1px solid rgba(232,180,100,.2);border-radius:3px}
.seg i{font-style:normal;font-family:var(--mono);font-size:.95rem;font-weight:700;
  color:var(--amber);text-shadow:0 0 9px rgba(255,157,77,.85);width:.66em;text-align:center}
.seg i.off{color:#2b1d10;text-shadow:none}

/* MASTER RESET, under a cover, because of course */
.reset{position:relative;border:1px solid rgba(210,67,47,.5);border-radius:4px;overflow:hidden;
  background:repeating-linear-gradient(45deg,rgba(224,86,63,.12) 0 7px,transparent 7px 14px)}
.reset .cover{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;
  cursor:pointer;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stamp);
  background:linear-gradient(180deg,#2b1611,#1a0d0a);transition:transform .4s var(--ease);
  transform-origin:top;border-bottom:1px solid rgba(210,67,47,.4)}
.reset.open .cover{transform:rotateX(-105deg)}
.reset .sw{display:flex;align-items:center;justify-content:center;height:36px;margin-top:-36px;
  font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.1em;color:#fff;
  background:linear-gradient(180deg,#e0563f,#9c2f1e);cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .3s .18s}
.reset.open .sw{opacity:1;pointer-events:auto}
.reset .sw:hover{background:linear-gradient(180deg,#ff6a50,#b83824)}
.reset .sw:active{background:linear-gradient(180deg,#8c2416,#6e1c11)}

/* ---------------- RAINBOW MODE, properly this time ---------------- */
body.rainbow{--rb:linear-gradient(90deg,#ff2e97,#ff7b3d,#ffe74d,#7bff9e,#2ee6f6,#7d7bff,#b06cff,#ff2e97);
  /* The spectrum used BEHIND DARK TEXT is not the same spectrum used for borders
     and washes. Rainbow mode hue-cycles the whole document through
     hue-rotate(0..360) saturate(2.1) contrast(1.06), and I measured every stop
     against the near-black tab/button text at every 10 degrees of that cycle.
     Six of the seven stops never drop below 5:1. The magenta does: #ff2e97
     bottoms out at 3.31:1 around 280deg, so for roughly a fifth of every five
     second cycle the word "Wishlist" was failing AA. Lightened to #ff62b1 the
     worst case across the whole rotation is 5.32:1. Nothing else changes. */
  --rb-text:linear-gradient(90deg,#ff62b1,#ff7b3d,#ffe74d,#7bff9e,#2ee6f6,#7d7bff,#b06cff,#ff62b1);
}
body.rainbow header.site,body.rainbow main,body.rainbow footer.site{
  animation:huecycle 5s linear infinite}
body.rainbow main{animation-delay:-1.6s}
body.rainbow footer.site{animation-delay:-3.2s}
body.rainbow h1,body.rainbow h2,body.rainbow .subject span,
body.rainbow .price,body.rainbow .gtitle{
  background:var(--rb);background-size:400% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.75)) brightness(1.25);
  animation:rbslide 3.4s linear infinite}
/* h3 sits inside cards on real content - leave it solid and readable */
body.rainbow h3{color:var(--text)}
body.rainbow .tab,body.rainbow .btn-primary{
  background:var(--rb-text);background-size:400% 100%;color:#140a04;
  animation:rbslide 3.4s linear infinite;border-color:transparent}
/* Rainbow BORDER, not a rainbow wash. The opaque panel layer must be listed
   FIRST (topmost) and clipped to padding-box; the spectrum sits underneath and
   is only visible in the border area. Getting this order wrong paints the
   gradient over the card and the text stops being readable. */
body.rainbow .paper,body.rainbow .item,body.rainbow .rig,body.rainbow .crt,body.rainbow .reel{
  border:1px solid transparent;
  background-image:linear-gradient(157deg,var(--paper2),var(--paper)),var(--rb);
  background-size:100% 100%,400% 100%;
  background-origin:padding-box,border-box;
  background-clip:padding-box,border-box;
  animation:rbborder 3.4s linear infinite}
@keyframes rbborder{to{background-position:0 0,400% 0}}
body.rainbow::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:var(--rb);background-size:400% 100%;opacity:.06;mix-blend-mode:screen;
  animation:rbslide 3.4s linear infinite}
body.rainbow .bars i.on{background:var(--lime)}
@keyframes rbslide{to{background-position:400% 0}}
@media (prefers-reduced-motion:reduce){
  body.rainbow header.site,body.rainbow main,body.rainbow footer.site{
    animation:none;filter:hue-rotate(115deg) saturate(1.7)}
  body.rainbow h1,body.rainbow h2,body.rainbow .tab,
  body.rainbow .btn-primary,body.rainbow .paper,body.rainbow .item,
  body.rainbow .rig,body.rainbow .crt,body.rainbow .reel,body.rainbow::after{animation:none}
}

/* buttons default to black text; if an exhibit image ever fails to load, the alt
   text would render invisible on the dark card. Give them an inherited colour. */
.ex,.shot,.pages a{color:var(--muted)}

/* ---------------- GRID LADDER ---------------- */
.ladder{max-width:1000px;margin:20px auto 0;border:1px solid var(--rule2);border-radius:4px;
  background:linear-gradient(157deg,var(--paper2),var(--paper));overflow:hidden}
.lhead{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.lhead b{margin-left:auto;font-weight:400;color:var(--dim);letter-spacing:.12em}
.ladder ol{list-style:none;margin:0;padding:0}
.ladder li{display:grid;grid-template-columns:44px minmax(0,1fr) auto minmax(0,1.5fr);gap:12px;
  align-items:baseline;padding:8px 14px;border-bottom:1px solid rgba(126,146,255,.07);
  font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.ladder li:last-child{border-bottom:0}
.ladder li .rk{color:var(--dim);font-size:.7rem}
.ladder li .who{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ladder li .sc{color:var(--cyan);font-variant-numeric:tabular-nums}
.ladder li .nb{color:var(--dim);font-size:.7rem;overflow:hidden;text-overflow:ellipsis}
.ladder li.me{background:rgba(46,230,246,.07)}
.ladder li.me .who{color:var(--cyan)}
.ladder li.boss .who{color:var(--gold)}
.ladder li.fuzz{background:repeating-linear-gradient(45deg,rgba(224,86,63,.07) 0 8px,transparent 8px 16px);
  border-top:1px dashed rgba(224,86,63,.4)}
.ladder li.fuzz .who{color:var(--stamp)}
.ladder li.fuzz .sc{color:var(--stamp)}
.lfoot{margin:0;padding:10px 14px;border-top:1px solid var(--rule);font-family:var(--mono);
  font-size:.68rem;color:var(--dim);line-height:1.6}
@media (max-width:700px){
  .ladder li{grid-template-columns:32px minmax(0,1fr) auto}
  .ladder li .nb{display:none}
}

/* ============================================================================
   PERFECTLY IMPERFECT
   Buttons are screwed to the page badly. Click one and it comes loose. Only one
   is ever broken at a time — clicking another puts the last one back.
   ========================================================================== */
.btn{transform-origin:center;will-change:transform}

@keyframes k-hang{
  0%{transform:none}
  22%{transform:rotate(-6deg)}
  100%{transform:rotate(82deg) translate(2px,4px)}}
@keyframes k-slump{
  0%{transform:none}
  30%{transform:rotate(4deg) translateY(-3px)}
  100%{transform:rotate(-8deg) translateY(6px)}}
@keyframes k-drop{
  0%{transform:none}
  35%{transform:translateY(-5px) rotate(1deg)}
  70%{transform:translateY(11px) rotate(4deg)}
  100%{transform:translateY(8px) rotate(3deg)}}
@keyframes k-peel{
  0%{transform:none}
  100%{transform:perspective(420px) rotateX(58deg) translateY(5px)}}

.btn.k1,.nav nav a.k1{animation:k-hang .78s cubic-bezier(.3,1.4,.5,1) forwards;
  transform-origin:9% 14%;z-index:3}
.btn.k2,.nav nav a.k2{animation:k-slump .62s cubic-bezier(.3,1.5,.5,1) forwards;
  transform-origin:14% 88%}
.btn.k3,.nav nav a.k3{animation:k-drop .7s cubic-bezier(.34,1.5,.5,1) forwards;
  transform-origin:50% 0}
.btn.k4,.nav nav a.k4{animation:k-peel .55s var(--ease) forwards;transform-origin:50% 100%}
.btn.k1,.btn.k2,.btn.k3,.btn.k4,
.nav nav a.k1,.nav nav a.k2,.nav nav a.k3,.nav nav a.k4{position:relative}
/* the screw that gave up */
.btn.k1::after,.nav nav a.k1::after{content:"";position:absolute;left:7%;top:11%;
  width:5px;height:5px;border-radius:50%;
  background:var(--dim);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
/* The nav breaks on the way out and is STILL broken when the next page loads.
   You click Manual, you arrive at the manual, and Manual is hanging off its
   screw. Clicking any other one puts it back, because only one thing in this
   building is allowed to be broken at a time. */
.nav nav a.k1,.nav nav a.k2,.nav nav a.k3,.nav nav a.k4{will-change:transform}
header.site{overflow:visible}

/* a coffee ring, because someone put a mug down on the paperwork */
.stain{position:absolute;pointer-events:none;width:104px;height:104px;border-radius:50%;
  opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(circle,transparent 58%,rgba(138,75,42,.5) 60%,rgba(138,75,42,.24) 66%,
    transparent 71%),radial-gradient(circle,transparent 62%,rgba(232,180,100,.14) 64%,transparent 70%)}

/* rules that were not drawn with a ruler */
.fileno hr{transform:rotate(-.12deg)}
.paper::before{transform:rotate(.15deg)}

@media (prefers-reduced-motion:reduce){
  .btn.k1,.btn.k2,.btn.k3,.btn.k4,
  .nav nav a.k1,.nav nav a.k2,.nav nav a.k3,.nav nav a.k4{animation:none}
  .btn.k1,.nav nav a.k1{transform:rotate(6deg)}
  .btn.k2,.nav nav a.k2{transform:rotate(-4deg)}
  .btn.k3,.nav nav a.k3{transform:translateY(3px)}
  .btn.k4,.nav nav a.k4{transform:rotate(2deg)}
}
.ladder li .who a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.ladder li .who a:hover{text-decoration:none;opacity:.8}

/* ---------------- sticky section jump bar ---------------- */
.subnav{position:sticky;top:62px;z-index:70;background:rgba(11,8,6,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
/* Scrollbars. The default Chrome bar is a light grey slab and it landed in the
   middle of a green phosphor terminal looking like a fire door in a submarine.
   Everything that scrolls now scrolls in the page's own colour. */
*{scrollbar-width:thin;scrollbar-color:var(--rule2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule2);border-radius:6px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:padding-box;
  border:2px solid transparent}
::-webkit-scrollbar-corner{background:transparent}
.crt .screen{scrollbar-color:color-mix(in srgb,var(--gold) 45%,transparent) transparent}
.crt .screen::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gold) 40%,transparent);
  background-clip:padding-box;border:2px solid transparent}
.crt .screen::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--gold) 70%,transparent);
  background-clip:padding-box;border:2px solid transparent}

.subnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{position:relative;flex:none;padding:11px 15px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
  border-bottom:2px solid transparent;transition:.18s var(--ease)}
.subnav a:hover{color:var(--text);text-decoration:none;background:rgba(232,180,100,.07)}
.subnav a.on{color:var(--gold);border-bottom-color:var(--gold)}
.subnav a i{font-style:normal;opacity:.45;margin-right:7px}
.neon .subnav a.on{color:var(--cyan);border-bottom-color:var(--cyan)}
@media (max-width:640px){.subnav{top:62px}.subnav a{padding:10px 11px;font-size:.62rem}}
section{scroll-margin-top:118px}

/* ============================================================================
   TWO MACHINES, ONE BUILDING
   .t-studio — 1986 office. Amber monochrome, paper, typewriter, coffee.
   .t-arcade — 1986 arcade. Cyan/magenta vector, chrome, scanlines, no warmth.
   .t-shell  — the green phosphor terminal, which belongs to neither.
   They contaminate each other constantly. See .bleed, further down.
   ========================================================================== */

/* ---------------- STUDIO: the office ---------------- */
body.t-studio{
  --bg:#0e0a06; --bg2:#140d07; --void:#080503;
  --paper:#1a120b; --paper2:#221809; --paper3:#2b1f0e;
  --text:#f7e6c8; --muted:#c3a97f; --dim:#a08a63;
  --gold:#ffb545; --amber:#ff9d4d; --stamp:#e0563f;
  --rule:rgba(255,181,69,.16); --rule2:rgba(255,181,69,.36);
}
/* amber monochrome phosphor wash - the whole office runs on one colour */
body.t-studio main::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,181,69,.07),transparent 62%)}
/* headings are typed, not set */
body.t-studio .tab,body.t-studio .eyebrow,body.t-studio .kicker{font-family:var(--mono)}
body.t-studio h2,body.t-studio h3{font-family:var(--mono);letter-spacing:-.01em;font-weight:700}
body.t-studio .item h3,body.t-studio .paper h2{text-transform:none}
/* perforated tractor-feed edge down the left of every sheet */
body.t-studio .paper{border-left:0;padding-left:70px}
body.t-studio .paper::after{content:"";position:absolute;left:12px;top:0;bottom:0;width:16px;
  background-image:radial-gradient(circle at 50% 50%,var(--void) 3.2px,transparent 3.4px);
  background-size:16px 26px;opacity:.9;box-shadow:none;border-radius:0;height:auto}
body.t-studio .paper::before{left:44px}
@media (max-width:700px){body.t-studio .paper{padding-left:20px}body.t-studio .paper::after{display:none}}
/* a fax header on the cover */
body.t-studio .coverhead{font-family:var(--mono)}

/* ---------------- ARCADE: the cabinet ---------------- */
body.t-arcade{
  --bg:#04030e; --bg2:#070519; --void:#020108;
  --paper:#0b0822; --paper2:#12103a; --paper3:#191650;
  --text:#eaf7ff; --muted:#97a9d8; --dim:#7183ba;
  --gold:#2ee6f6; --amber:#ff2e97; --stamp:#ff2e97;
  --rule:rgba(126,180,255,.18); --rule2:rgba(126,180,255,.4);
}
/* the horizon. It is 1986 and there is always a grid running to a vanishing point. */
body.t-arcade::before{content:"";position:fixed;left:-25%;right:-25%;bottom:0;height:46vh;z-index:0;
  pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(46,230,246,.34) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(46,230,246,.34) 1px,transparent 1px);
  background-size:74px 74px;
  transform:perspective(320px) rotateX(72deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top,#000 2%,transparent 68%);
  mask-image:linear-gradient(to top,#000 2%,transparent 68%);
  animation:horizon 6s linear infinite}
@keyframes horizon{to{background-position:0 74px,0 0}}
/* heavier CRT in the arcade */
body.t-arcade main{position:relative;z-index:1}
body.t-arcade .paper,body.t-arcade .item,body.t-arcade .rig{
  box-shadow:0 0 0 1px rgba(46,230,246,.08),0 24px 60px rgba(0,0,0,.7),
             inset 0 1px 0 rgba(126,220,255,.09)}
body.t-arcade h1,body.t-arcade h2{letter-spacing:.02em}
body.t-arcade .pagehead h1{
  background:linear-gradient(178deg,#ffffff 0%,#d8f7ff 22%,#2ee6f6 47%,#0a5a75 53%,
    #2ee6f6 60%,#eafcff 80%,#1d9fc0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(46,230,246,.4))}

/* ---------------- SHELL: green phosphor ---------------- */
body.t-shell{--gold:#7bff9e;--amber:#7bff9e;--text:#d8ffe4;--muted:#84c79a;--dim:#5d9770;
  --bg:#050a06;--bg2:#07100a;--void:#020603;--paper:#08150c;--paper2:#0c1f11;
  --rule:rgba(123,255,158,.18);--rule2:rgba(123,255,158,.4);--stamp:#7bff9e}
body.t-shell .pagehead h1{color:#9dffbe;text-shadow:0 0 30px rgba(123,255,158,.4)}

/* ============================================================================
   THEME BLEED — the two systems contaminate each other and we gave up pretending
   ========================================================================== */
.bleed{position:relative;margin:34px 0 0;padding:20px 22px;border-radius:4px;overflow:hidden}
.bleed p{margin:0;font-size:.95rem;line-height:1.55}
.bleedtag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:2px}
.bleedtag::before{content:"\26A0";font-size:.8rem}

/* neon leaking into the office */
.bleed-neon{background:linear-gradient(157deg,#12103a,#0b0822);
  border:1px dashed rgba(46,230,246,.5);color:#c9d8ff;
  box-shadow:0 0 34px rgba(46,230,246,.13),inset 0 0 40px rgba(46,230,246,.06)}
.bleed-neon b{color:#2ee6f6}
.bleed-neon .bleedtag{background:rgba(46,230,246,.12);color:#2ee6f6;border:1px solid rgba(46,230,246,.4)}
.bleed-neon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(rgba(46,230,246,.05) 0 1px,transparent 1px 3px)}

/* paperwork leaking into the arcade */
.bleed-paper{background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    linear-gradient(157deg,#221809,#1a120b);
  border:1px dashed rgba(255,181,69,.5);color:#e8d6b4;
  box-shadow:0 0 30px rgba(255,181,69,.12)}
.bleed-paper b{color:#ffb545}
.bleed-paper .bleedtag{background:rgba(255,181,69,.12);color:#ffb545;border:1px solid rgba(255,181,69,.42)}
.bleed-paper::after{content:"";position:absolute;right:14px;bottom:10px;width:74px;height:74px;
  border-radius:50%;pointer-events:none;opacity:.45;
  background:radial-gradient(circle,transparent 58%,rgba(138,75,42,.55) 60%,
    rgba(138,75,42,.22) 66%,transparent 71%)}

/* ============================================================================
   THE CABINET. A full arcade machine built around a browser game with four
   modes. The marquee is backlit. There is a coin slot. It takes no coins.
   ========================================================================== */
.cab{max-width:1040px;margin:26px auto 0;border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,#191340,#0d0a24 40%,#0a0820);
  border:1px solid rgba(126,180,255,.28);
  box-shadow:0 40px 90px rgba(0,0,0,.75),inset 0 1px 0 rgba(160,220,255,.14),
             inset 0 0 60px rgba(46,230,246,.05)}

.marquee{position:relative;text-align:center;padding:16px 18px 14px;overflow:hidden;
  border-radius:9px 9px 0 0;border-bottom:2px solid rgba(46,230,246,.3);
  background:linear-gradient(180deg,#2a2170,#14103c);
  box-shadow:inset 0 -14px 34px rgba(46,230,246,.16),inset 0 2px 0 rgba(190,230,255,.2)}
.marquee::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 5px)}
.mtitle{display:block;font-family:var(--display);font-weight:700;letter-spacing:.16em;
  font-size:clamp(1.5rem,4vw,2.5rem);line-height:1;
  background:linear-gradient(178deg,#fff 0%,#d6f6ff 26%,#2ee6f6 50%,#0b5f7c 56%,#5df0ff 66%,#fff 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(46,230,246,.6))}
.msub{display:block;margin-top:6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(190,225,255,.62)}
.cabbody{padding:14px}
.cabbody .rig{max-width:none;margin:0;border-radius:5px;
  border-color:rgba(126,180,255,.3);background:linear-gradient(180deg,#0a0820,#070518)}

.cpanel{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 16px 14px;
  border-top:1px solid rgba(126,180,255,.2);
  background:linear-gradient(180deg,#141133,#0b0920);border-radius:0 0 4px 4px}
.coin{display:flex;align-items:center;gap:10px;padding:7px 13px;border-radius:4px;cursor:pointer;
  border:1px solid rgba(46,230,246,.32);background:linear-gradient(180deg,#1c1748,#100d2e);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);transition:.18s var(--ease);user-select:none}
.coin:hover{border-color:var(--cyan);background:linear-gradient(180deg,#241d5c,#151038)}
.coin:active{transform:translateY(1px)}
.coin .slot{width:5px;height:20px;border-radius:2px;background:#04030d;flex:none;
  box-shadow:inset 0 0 5px rgba(0,0,0,.95),0 0 0 1px rgba(126,180,255,.3)}
.coin i{font-style:normal;color:var(--amber);font-variant-numeric:tabular-nums}
.coin.flash{animation:coinflash .5s var(--ease)}
@keyframes coinflash{0%,100%{background:linear-gradient(180deg,#1c1748,#100d2e)}
  40%{background:linear-gradient(180deg,#2ee6f6,#0d7f95)}}
.cplegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-left:auto;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cplegend b{color:var(--muted);font-weight:400}
.plate{width:100%;display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:10px;margin-top:2px;
  border-top:1px dashed rgba(126,180,255,.18);font-family:var(--mono);font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(120,140,190,.6)}
.plate span::before{content:"\25AA";margin-right:6px;opacity:.5}
@media (max-width:760px){.cplegend{margin-left:0}.cab{border-radius:6px}}

/* ============================================================================
   TEMPLE — the 16-colour window that opens under /dev/grid.

   Everything else on this site is dark, rounded, glowing and gradient-lit.
   This is white, square, flat and has exactly sixteen colours in it, because
   that is what TempleOS is, and softening it would miss the entire point.
   No border-radius. No box-shadow. No gradients. Not one.
   ========================================================================== */
.temple{margin:26px 0 0;padding:0;background:#ffffff;color:#000000;border:3px solid #000000;
  font-family:'Courier New',ui-monospace,SFMono-Regular,Menlo,monospace;
  transform-origin:50% 0;transform:scaleY(.02);opacity:0;
  transition:transform .34s cubic-bezier(.2,1.5,.4,1),opacity .18s linear}
.temple.up{transform:scaleY(1);opacity:1}
/* pinned by JS half a second after opening — see the failsafe in temple.js */
.temple.settled{transition:none;transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.temple{transition:none;transform:none;opacity:1}}

.temple .tbleed{display:flex;align-items:center;gap:8px;background:#0000aa;color:#ffffff;
  padding:5px 10px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:3px solid #000000}
.temple .tbar{display:flex;align-items:center;gap:14px;padding:4px 8px;
  background:#aaaaaa;border-bottom:3px solid #000000;font-size:.82rem}
.temple .tmenu{color:#000000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.temple .tgrow{flex:1}
.temple .tx{background:#ffffff;color:#000000;border:2px solid #000000;font:inherit;
  font-weight:700;line-height:1;padding:2px 9px;cursor:pointer;border-radius:0}
.temple .tx:hover{background:#ffff55}
.temple .tx:focus-visible{outline:3px solid #0000aa;outline-offset:2px}

.temple .tstage{background:#000000;border-bottom:3px solid #000000;line-height:0;
  display:flex;justify-content:center}
/* `display:flex` from an author sheet beats the UA's [hidden]{display:none},
   so the game stage sat there as a 480px black slab with nothing in it. */
.temple .tstage[hidden]{display:none}
.temple .tstage canvas{width:100%;max-width:640px;height:auto;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;outline:0}

.temple .tscreen{height:min(50vh,400px);overflow-y:auto;padding:12px 14px 10px;
  background:#ffffff;font-size:.84rem;line-height:1.5;
  scrollbar-color:#555555 #ffffff}
.temple.playing .tscreen{height:150px}
.temple .tscreen::-webkit-scrollbar{width:14px}
.temple .tscreen::-webkit-scrollbar-track{background:#aaaaaa}
.temple .tscreen::-webkit-scrollbar-thumb{background:#000000;border-radius:0;border:0}
.temple .tscreen p{margin:0 0 1px;white-space:pre-wrap;word-break:break-word}
.temple b{font-weight:700}

/* Only the palette members that clear AA on white are allowed to carry text.
   The other ten live on the canvas, where they belong. */
.temple .tk{color:#0000aa}                       /* BLUE      13.3:1 */
.temple .tc{color:#555555}                       /* DKGRAY     7.5:1 */
.temple .te{color:#aa0000}                       /* RED        7.8:1 */
.temple .tw{color:#aa5500}                       /* BROWN      5.2:1 */
.temple .tp{color:#0000aa;font-weight:700}
.temple .tgo{color:#0000aa;font-weight:700}
.temple .tno{color:#555555}
.temple .tgod{color:#aa00aa;font-weight:700;font-size:1.5rem;letter-spacing:.06em}
.temple .talice{color:#aa0000;background:#ffff55;padding:2px 6px;margin:4px 0}
.temple .tal{color:#000000}
.temple .tsw{display:inline-block;width:22px;height:14px;border:1px solid #000000;
  vertical-align:-2px;margin-right:5px}
.temple .tswl{display:inline-block;width:118px;color:#000000}

.temple .tline{display:flex;gap:8px;align-items:baseline}
.temple .tline input{flex:1;min-width:0;background:#ffff55;border:2px solid #000000;
  border-radius:0;outline:0;color:#000000;font:inherit;padding:1px 6px;caret-color:#aa0000}
.temple .tline input:focus{background:#ffffff;border-color:#0000aa}

.temple .tstatus{background:#000000;color:#ffffff;padding:5px 10px;font-size:.7rem;
  letter-spacing:.06em;border-top:3px solid #000000}
.temple .tstatus b{color:#ffff55}

@media (max-width:620px){
  .temple .tscreen{font-size:.76rem;height:min(46vh,320px)}
  .temple .tmenu{font-size:.7rem}
  .temple .tswl{width:96px;font-size:.72rem}
  .temple .tgod{font-size:1.15rem}
}

/* ----------------------------------------------------------------------------
   Rainbow: the stamp colour, declared LAST on purpose.

   The three theme blocks (.t-studio/.t-arcade/.t-shell) sit further down this
   file than the rainbow block and each re-declares --stamp. Same specificity,
   later wins, so setting --stamp up there had no effect at all — the rubber
   stamps and the TOP SECRET chips kept #e0563f, which bottoms out at 3.62:1 and
   4.31:1 partway through the hue cycle. #f07a63 holds 5.16:1 and 6.23:1 across
   the whole rotation. This rule has to stay at the end of the file.
   -------------------------------------------------------------------------- */
body.rainbow{--stamp:#f07a63}

/* ----------------------------------------------------------------------------
   Rainbow mode: the four colours the hue cycle pushes under AA.

   Every one of these passes in normal mode. Rainbow runs the whole document
   through hue-rotate(0..360) saturate(2.1) contrast(1.06) on a five second
   loop, and I measured each pair against its real backdrop at every ten
   degrees of that rotation. These four dip below 4.5:1 for part of the cycle,
   so they get a nudge for the duration of the joke and are untouched otherwise.

     .coin i  CREDIT 00   #ff2e97 bottoms out at 2.28:1  ->  #ff86c3  4.60:1
     --dim    arcade      #767ca8 bottoms out at 3.87:1  ->  #898eb4  4.66:1
     .msub    cabinet     #bee1ff bottoms out at 4.24:1  ->  #cbe7ff  4.60:1
     .crt .c  shell       #4f8562 bottoms out at 4.07:1  ->  #5d8f6f  4.68:1

   These live at the end of the file because .t-arcade and .t-shell are declared
   after body.rainbow and would otherwise win on source order.
   -------------------------------------------------------------------------- */
body.rainbow.t-arcade,body.rainbow .neon{--dim:#898eb4}
body.rainbow .msub{color:#cbe7ff}
body.rainbow .coin i{color:#ff86c3}
body.rainbow .crt .c,body.rainbow .crt .prompt{color:#5d8f6f}

/* ============================================================================
   LADDER — now with a door in it.

   The two appointed seats stay pinned while the middle scrolls: management at
   the top, the Count at the bottom, and everyone who registers sorts honestly
   in the gap between them. Scrolling past the man who is permanently last and
   having him refuse to leave the viewport is the entire joke, so `position:
   sticky` here is load-bearing comedy.
   ========================================================================== */
.ladder.full ol{max-height:min(52vh,360px);overflow-y:auto;overscroll-behavior:contain}
/* The pinned row needs an opaque backdrop or the scrolling rows show through
   it. It must match the panel it sits in, though: my first attempt used
   paper3 -> paper2, which is a shade lighter than the ladder's own background
   and quietly pushed the rank number and the note on that row from 4.6:1 down
   to 4.26:1. Same two stops as the container, and it passes again. */
.ladder.full li.boss{position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg,var(--paper2),var(--paper));
  box-shadow:0 6px 14px -6px rgba(0,0,0,.8)}
.ladder.full li.fuzz{position:sticky;bottom:0;z-index:2;
  box-shadow:0 -6px 14px -6px rgba(0,0,0,.8)}
.ladder.full li.fuzz::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper)}
.ladder li{position:relative}
.ladder li.reg .who{color:var(--lime)}
.ladder li.reg.me .who{color:var(--cyan)}

/* per-row controls, kept out of the way until you want them */
.ladder li .nb{display:flex;align-items:baseline;gap:6px}
.ltake,.lx{flex:none;margin-left:auto;background:none;border:1px solid var(--rule2);
  color:var(--dim);font:inherit;font-size:.62rem;line-height:1;padding:2px 6px;border-radius:3px;
  cursor:pointer;opacity:0;transition:.15s var(--ease)}
.lx{margin-left:0}
.ladder li:hover .ltake,.ladder li:hover .lx,
.ltake:focus-visible,.lx:focus-visible{opacity:1}
.ltake:hover{color:var(--gold);border-color:var(--gold)}
.lx:hover{color:var(--stamp);border-color:var(--stamp)}
@media (hover:none){.ltake,.lx{opacity:1}}

/* ---- registration ---- */
.lreg{border-top:1px solid var(--rule)}
.regtoggle{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;background:none;
  border:0;padding:11px 14px;cursor:pointer;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);transition:.15s var(--ease)}
.regtoggle:hover{background:rgba(126,180,255,.06)}
.regtoggle i{margin-left:auto;font-style:normal;text-transform:none;letter-spacing:.04em;
  color:var(--dim);font-size:.66rem}
.regform{padding:2px 14px 16px;border-top:1px dashed var(--rule)}
.regnote{margin:12px 0 14px;font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--muted)}
.regrow{margin-bottom:12px}
.regrow label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.regrow input{width:100%;max-width:380px;background:rgba(4,3,13,.7);border:1px solid var(--rule2);
  border-radius:3px;padding:8px 11px;color:var(--text);font-family:var(--mono);font-size:.82rem;
  transition:.15s var(--ease)}
.regrow input:focus{outline:0;border-color:var(--gold);background:rgba(4,3,13,.95)}
/* Chrome dims a placeholder to roughly half the text colour, which landed at
   3.93:1. Placeholder text is still text. */
.regrow input::placeholder{color:var(--muted);opacity:1}
.regrow small{display:block;margin-top:5px;font-family:var(--mono);font-size:.62rem;color:var(--dim)}
.regerr{margin:0 0 12px;padding:8px 11px;border-radius:3px;font-family:var(--mono);font-size:.72rem;
  line-height:1.55;color:var(--stamp);border:1px solid var(--stamp);
  background:rgba(224,86,63,.09)}
.regacts{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.regacts .btn{font-size:.78rem;padding:8px 15px}
.regprivacy{margin:14px 0 0;font-family:var(--mono);font-size:.64rem;line-height:1.7;color:var(--dim);
  max-width:66ch}
.regprivacy b{color:var(--muted)}
.regsend{margin:0 14px 16px;padding:12px 14px;border:1px dashed var(--rule2);border-radius:3px;
  background:rgba(126,180,255,.05)}
.regsend p{margin:0 0 10px;font-family:var(--mono);font-size:.7rem;line-height:1.65;color:var(--muted)}
.regsend code{display:block;margin-bottom:11px;padding:9px 11px;border-radius:3px;
  background:rgba(4,3,13,.75);border:1px solid var(--rule);color:var(--gold);
  font-family:var(--mono);font-size:.7rem;word-break:break-all;user-select:all}
@media (max-width:640px){
  .regtoggle{flex-wrap:wrap;gap:4px}
  .regtoggle i{margin-left:0;flex-basis:100%}
  .ladder.full ol{max-height:min(60vh,420px)}
}