/* frozen-night HUD: one family (Manrope, like the rest of the site), text in white and greys only, uppercase micro labels, slashes as section marks, crosses on a 120 px grid */
:root{color-scheme:dark;--ink:#05070d;--ice:#ededf0;--frost:#9c9da3;--steel:#6d6e74;--mute:#a8a9ae;--vio:#8a63ff;--g:48px;--top:118px;--ease:cubic-bezier(.2,.7,.15,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}html{background:var(--ink)}body{touch-action:none}.modal,input{touch-action:pan-y}
body{color:var(--ice);font:400 13px/1.5 "Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--ink)}
::selection{background:var(--vio);color:#fff}
#gl{position:fixed;inset:0;z-index:0}#gl canvas{display:block;width:100%!important;height:100%!important}
#scroll{display:none}
.hud{position:fixed;inset:0;pointer-events:none;z-index:2}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.grid{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M56 60h8M60 56v8' stroke='%2383a1c5' stroke-opacity='.3' stroke-width='1'/%3E%3C/svg%3E") 0 0/120px 120px;opacity:.7}
.br{position:absolute;width:18px;height:18px;border:1px solid rgba(131,161,197,.5)}
.br.a{left:24px;top:24px;border-right:0;border-bottom:0}.br.b{right:24px;top:24px;border-left:0;border-bottom:0}.br.c{left:24px;bottom:24px;border-right:0;border-top:0}.br.d{right:24px;bottom:24px;border-left:0;border-top:0}
.up{text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.sl{color:var(--frost)}
em{font-style:normal}
/* header */
.hd{position:absolute;left:var(--g);right:var(--g);top:38px;display:flex;align-items:center;justify-content:space-between;pointer-events:auto}
.lg{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:.2em}
.lg svg{width:16px;height:16px}
.hd nav{display:flex;gap:30px}.hd nav a{color:var(--mute);transition:color .3s}.hd nav a:hover{color:var(--ice)}
.hd nav a.on{color:var(--ice)}.hd nav a.on::before{content:"[ ";color:var(--frost)}.hd nav a.on::after{content:" ]";color:var(--frost)}
.ut{display:flex;gap:26px;align-items:center}.ut b{font-weight:500;color:var(--frost)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:10px;margin-right:6px}.eq i{width:2px;height:3px;background:var(--frost);transition:height .25s}
.snd.on .eq i{animation:eq 1s infinite alternate}.snd.on .eq i:nth-child(2){animation-delay:-.4s}.snd.on .eq i:nth-child(3){animation-delay:-.7s}.snd.on .eq i:nth-child(4){animation-delay:-.2s}
@keyframes eq{from{height:2px}to{height:10px}}
/* chapter overlays */
.ov{position:absolute;opacity:0;visibility:hidden;transform:translate3d(0,16px,0);filter:blur(5px);transition:opacity .45s,transform .7s var(--ease),filter .45s,visibility 0s .45s}
.ov.on{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .8s .1s,transform 1s .1s var(--ease),filter .8s .1s,visibility 0s}
.ov.on .ui,.ov.on button,.ov.on a{pointer-events:auto}
h1,h2{font-weight:500;text-transform:none;letter-spacing:-.02em;line-height:.98}
h1{font-size:clamp(44px,5.6vw,84px);font-weight:300;letter-spacing:-.05em}h2{font-size:clamp(34px,3.9vw,58px);font-weight:340;letter-spacing:-.045em}
.p{font-size:14px;line-height:1.6;color:var(--mute);max-width:36ch}
.rd{display:grid;grid-template-columns:auto auto;justify-content:start;gap:5px 22px}.rd span{color:var(--steel)}.rd b{font-weight:500}
/* counter + rail */
#cnt{position:absolute;right:var(--g);bottom:44px;text-align:right}
#cnt b{display:block;font-weight:500;font-size:22px;letter-spacing:.02em;color:var(--ice)}#cnt b em{color:var(--steel)}
#rail{position:absolute;right:30px;top:50%;width:1px;height:26vh;transform:translateY(-50%);background:rgba(131,161,197,.22)}
#rail i{position:absolute;inset:0;background:var(--ice);transform-origin:0 0;transform:scaleY(0);box-shadow:0 0 8px rgba(230,238,251,.7)}
#rail .rt{position:absolute;left:-10px;width:21px;height:13px;margin-top:-6px;pointer-events:auto;display:block}#rail .rt::after{content:"";position:absolute;left:7px;top:6px;width:7px;height:1px;background:rgba(131,161,197,.7);transition:width .3s,left .3s,background .3s}#rail .rt:hover::after{left:4px;width:13px;background:var(--ice)}
.scr{left:50%;bottom:44px;transform:translateX(-50%);text-align:center}.scr.on{transform:translateX(-50%)}.scr span{display:block;margin-bottom:12px}
.scr i{display:block;margin:0 auto;width:1px;height:42px;background:linear-gradient(var(--frost),transparent);animation:drip 2.2s infinite var(--ease);transform-origin:0 0}
@keyframes drip{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* buttons and option rows */
.cta{display:inline-flex;gap:10px;align-items:center;padding:13px 18px;border:1px solid rgba(230,238,251,.75);font-weight:500;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.cta:hover{background:rgba(230,238,251,.1)}
.cta.f{background:var(--ice);color:var(--ink)}.cta.f:hover{background:#fff}
.opt{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid rgba(131,161,197,.22);width:100%;text-align:left;transition:color .25s}
.opt i{width:12px;height:12px;border:1px solid var(--frost);transition:background .25s,box-shadow .25s}
.opt.on i{background:var(--ice);border-color:var(--ice);box-shadow:0 0 10px rgba(230,238,251,.7)}
.opt em{color:var(--mute)}.opt:hover span{color:#fff}
.opt .bar{grid-column:1/-1;height:1px;background:rgba(131,161,197,.15);margin-top:2px;overflow:hidden}.opt .bar b{display:block;height:1px;background:var(--ice);transform-origin:0 0;transform:scaleX(0)}
/* leader labels on 3D anchors */
.lb{position:absolute;left:0;top:0;width:0;height:0;transition:opacity .4s}
.lb .ln{position:absolute;left:0;top:0;height:1px;background:rgba(131,161,197,.7);transform-origin:0 0}
.lb .dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border:1px solid var(--ice);background:var(--ink);transition:background .3s,border-color .3s}
.lb .bx{position:absolute;width:280px;pointer-events:auto}
.lb .bx b{display:block;font-weight:500;font-size:12px;letter-spacing:.08em;margin-bottom:6px}
.lb .bx p{font-size:12.5px;line-height:1.55;color:var(--mute);text-transform:none;letter-spacing:0}
.lb.hot .bx b{color:#fff}.lb.hot .bx b::before{content:"▸ ";color:var(--ice)}.lb.hot .dot{background:var(--vio);border-color:var(--vio)}
.lb.dim{opacity:.35}
/* ruler */
.rul{width:min(900px,78vw)}
.rul .tk{display:flex;justify-content:space-between;align-items:flex-end;height:26px;border-bottom:1px solid rgba(131,161,197,.35)}
.rul .tk button{width:24px;height:26px;display:flex;justify-content:center;align-items:flex-end;margin:0 -11px}
.rul .tk button i{width:1px;height:8px;background:rgba(131,161,197,.6);transition:height .35s var(--ease),background .3s,box-shadow .3s}
.rul .tk button:hover i{height:14px;background:var(--ice)}
.rul .tk button.on i{height:22px;background:var(--ice);box-shadow:0 0 10px rgba(230,238,251,.8)}
.rul .nm{display:flex;justify-content:space-between;margin-top:9px;color:var(--steel)}.rul .nm span{width:24px;margin:0 -11px;text-align:center;transition:color .3s}.rul .nm span.on{color:var(--ice)}
/* cursor */
.cur{position:fixed;left:0;top:0;width:0;height:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .3s}
.cur .x{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:1px solid var(--ice);border-radius:50%;transition:all .35s var(--ease)}
.cur .x::before,.cur .x::after{content:"";position:absolute;background:var(--ice);transition:opacity .3s}
.cur .x::before{left:50%;top:-8px;width:1px;height:8px}.cur .x::after{top:50%;left:-8px;width:8px;height:1px}
.cur .tg{position:absolute;left:26px;top:-36px;padding:8px 11px;border:1px solid rgba(131,161,197,.55);background:rgba(5,7,13,.72);white-space:nowrap;line-height:1.45;font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .35s var(--ease)}
.cur .tg:not(:empty){opacity:1;transform:none}
.cur .tg b{font-weight:500;color:var(--ice)}.cur .tg span{color:var(--mute)}
.cur.hover .x{left:-22px;top:-22px;width:44px;height:44px;background:rgba(230,238,251,.06)}.cur.hover .x::before,.cur.hover .x::after{opacity:0}
.cur.wipe .x{left:-38px;top:-38px;width:76px;height:76px;border-style:dashed;border-color:rgba(230,238,251,.7)}
.cur.wipe .tg{left:48px;top:-52px}
.cur.drag .x{left:-30px;top:-30px;width:60px;height:60px}
.cur.drag .x::before{left:-10px;top:50%;width:6px;height:1px}.cur.drag .x::after{left:auto;right:-10px;top:50%;width:6px}
.cur.hide{opacity:0!important}
body.touch .cur{display:none}
@media (hover:hover){html,body,a,button{cursor:none}}
/* loader */
#loader{position:fixed;inset:0;z-index:30;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity 1.1s .2s,filter 1.1s .2s,transform 1.3s .2s var(--ease)}
#loader.out{opacity:0;filter:blur(14px);transform:scale(1.04);pointer-events:none}
#loader .st{font-size:15px;letter-spacing:.5em;color:var(--ice)}
#loader .ln{width:220px;height:1px;background:rgba(131,161,197,.25)}#loader .ln i{display:block;width:0;height:1px;background:var(--ice);box-shadow:0 0 8px #fff;transition:width .2s}
#loader b{color:var(--ice);font-weight:500}
/* modal panel */
.modal{position:absolute;opacity:0;visibility:hidden;transform:translate3d(-14px,0,0);transition:opacity .5s,transform .7s var(--ease),visibility 0s .5s}
body.is-modal .modal{opacity:1;visibility:visible;transform:none;transition:opacity .7s .25s,transform .9s .25s var(--ease),visibility 0s;pointer-events:auto}
body.is-modal #cnt,body.is-modal #rail{opacity:.25}
/* mobile */
@media (max-width:760px){
 :root{--g:20px;--top:84px}
 .br,.hd nav,.ut .hide,#rail{display:none}
 .hd{top:22px}.lg{font-size:13px}
 .p{font-size:13px}
 #cnt{bottom:24px}#cnt b{font-size:16px}
 .scr{display:none}
 .lb .bx{width:170px}.lb .bx p{font-size:11px}
 .rul{width:calc(100vw - 40px)}.rul .nm span{font-size:9px}
 .cta{padding:11px 13px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){.ov,.ov.on{transition:opacity .3s,visibility 0s;transform:none;filter:none}.scr i{animation:none}}