:root{ --void:#05080c;--sink:#03050a; --white:#e9f1f3;--ink:#c3ced6;--haze:#a9b6be;--steel:#8a97a3;--dim:#6e7d87; --hair:rgba(150,180,200,.11);--hair2:rgba(180,205,215,.30); --phos:#00ffd1;--mag:#ff2fb0;--amber:#ffb44a; --num:"Space Grotesk",sans-serif;--mono:"JetBrains Mono",monospace; /* four type steps, nothing between */ --t1:9px; /* labels */ --t2:11.5px; /* body */ --t3:17px; /* values */ --bloom:0 0 1px rgba(255,255,255,.9),0 0 7px rgba(238,242,248,.9),0 0 22px rgba(225,235,255,.55),0 0 55px rgba(200,215,255,.3); --bloomS:0 0 5px rgba(233,241,243,.75),0 0 16px rgba(215,232,235,.35); --ease:cubic-bezier(.25,.8,.25,1); --pad:22px; } @media(min-width:820px){:root{--pad:44px;--t1:9.5px;--t2:12px;--t3:19px}} *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%;overflow:hidden;overscroll-behavior:none;overscroll-behavior-x:none;touch-action:pan-y; user-select:none;-webkit-user-select:none} body{background:var(--void);color:var(--white);font-family:var(--mono);-webkit-font-smoothing:antialiased; background-image:radial-gradient(88vw 58vh at 70% -12%,rgba(0,255,209,.045),transparent 62%), radial-gradient(70vw 50vh at 6% 112%,rgba(0,255,209,.025),transparent 60%)} button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} input{background:none;border:0;color:inherit;font:inherit;outline:none} .num{font-family:var(--num);font-weight:300;font-variant-numeric:tabular-nums} .lab{font:var(--t1)/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--steel)} .dim{color:var(--dim)} /* ---------- atmosphere ---------- */ #grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")} #vig{position:fixed;inset:0;z-index:59;pointer-events:none; background:radial-gradient(120% 90% at 50% 45%,transparent 52%,rgba(0,0,0,.5) 100%)} /* ---------- chrome ---------- */ .hud{position:fixed;left:var(--pad);right:var(--pad);z-index:50;display:flex;justify-content:space-between; font:var(--t1)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);pointer-events:none} .hud.t{top:26px}.hud.b{bottom:22px} @media(max-width:819px){.hud.t{top:20px;left:16px;right:16px;font-size:8.5px;letter-spacing:.16em} .hud.b{bottom:18px;left:16px;right:16px;font-size:8.5px;letter-spacing:.16em}} .hud b{color:var(--haze);font-weight:400}.hud .on{color:var(--phos)} /* ---------- stages ---------- */ .stage{position:fixed;inset:0;z-index:10;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .6s ease,visibility 0s .6s} .stage.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s ease,visibility 0s 0s} /* ---------- lock ---------- */ #lock{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--pad)} /* ===== the name reveal ===== */ .nv{display:flex;flex-direction:column;align-items:center;gap:clamp(26px,6vh,58px);text-align:center} .nvq{font:9.5px var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--steel);min-height:12px} .nvq.hot{color:var(--phos);text-shadow:0 0 10px rgba(0,255,209,.5)} .nvslv{position:relative;display:flex;justify-content:center;gap:clamp(10px,3.2vw,26px);transition:opacity .5s} .nvslv.hold{opacity:0} .nvslv .cel{position:relative;font:300 clamp(30px,7.4vw,54px)/1 var(--mono);color:rgba(0,255,209,.62); transition:.3s var(--ease);padding:22px 0 14px} .nvslv .cel .ix{position:absolute;top:0;left:50%;transform:translateX(-50%); font:9px var(--mono);font-style:normal;color:rgba(150,180,200,.42);letter-spacing:.1em} .nvslv .cel:after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:2px; background:var(--phos);opacity:0;transform:scaleX(.3);transition:.3s var(--ease); box-shadow:0 0 10px rgba(0,255,209,.8)} .nvslv .cel.keep{color:#7ff5dd;text-shadow:0 0 12px rgba(0,255,209,.55)} .nvslv .cel.keep:after{opacity:1;transform:none} .nvslv .cel.drop{color:rgba(255,47,176,.5)} .nvslv .cel.drop:before{content:"";position:absolute;left:-14%;right:-14%;top:52%;height:1.5px; background:var(--mag);box-shadow:0 0 9px rgba(255,47,176,.8)} .nvslv .cel.cut{opacity:.32} .nvslv .cel.gone{opacity:0;transform:translateY(14px) scale(.86)} .nvslv .brk{position:absolute;top:6px;bottom:0;width:clamp(48px,11vw,88px);opacity:0;pointer-events:none; transition:left .16s linear,opacity .25s} .nvslv .brk.on{opacity:1} .nvslv .brk:before,.nvslv .brk:after{content:"";position:absolute;width:12px;height:12px} .nvslv .brk:before{left:0;top:0;border-left:1px solid rgba(150,180,200,.55);border-top:1px solid rgba(150,180,200,.55)} .nvslv .brk:after{right:0;bottom:0;border-right:1px solid rgba(150,180,200,.55);border-bottom:1px solid rgba(150,180,200,.55)} .nvslv .brk i{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px; background:rgba(0,255,209,.8);box-shadow:0 0 10px rgba(0,255,209,.7)} .nvslv.final{gap:clamp(4px,1.4vw,10px)} .nvslv.final .cel{padding:0;color:#fff;font-size:clamp(34px,9vw,64px); text-shadow:0 0 1px rgba(255,255,255,.9),0 0 12px rgba(238,242,248,.7)} .nvslv.final .cel:after{display:none} .nvslv .dsh{width:clamp(16px,3.6vw,28px);height:3px;align-self:center;background:var(--phos); box-shadow:0 0 12px rgba(0,255,209,.85)} .nvsay{min-height:6em} .nvsay .ln{display:block;font:300 clamp(16px,3.2vw,25px)/1.55 var(--num);color:var(--steel); opacity:0;transform:translateY(8px);transition:.6s var(--ease)} .nvsay .ln.in{opacity:1;transform:none} .nvsay .ln.b{color:#fff;font-weight:400;text-shadow:var(--bloomS)} /* the report boots first */ .rboot{display:flex;flex-direction:column;align-items:center;gap:18px;margin:auto} .rboot .b-logo{position:relative;width:min(112px,22vw);aspect-ratio:1} .rboot .b-logo svg{position:absolute;inset:0;width:100%;height:100%;color:var(--phos)} .rboot .stk{filter:drop-shadow(0 0 6px var(--phos-d,rgba(0,255,209,.55)))} .rboot .stk rect{fill:none;stroke:currentColor;stroke-width:2.6;stroke-dasharray:100;stroke-dashoffset:100} .rboot .fillv{opacity:0;filter:drop-shadow(0 0 13px var(--phos-d,rgba(0,255,209,.55)))} .rboot .fillv rect{fill:currentColor} .rboot.run .stk rect{animation:vpDraw 1.3s ease-out forwards} .rboot.run .fillv{animation:vpFlood 1.1s ease-out 1.25s forwards} @keyframes vpDraw{to{stroke-dashoffset:0}} @keyframes vpFlood{0%{opacity:0}55%{opacity:1;filter:brightness(2.3) drop-shadow(0 0 20px var(--phos))} 100%{opacity:1;filter:brightness(1) drop-shadow(0 0 13px rgba(0,255,209,.55))}} /* the label: small,ink-centered,decrypts after the flood,locks charged */ .rbt{font:300 12px var(--mono);letter-spacing:.5em;text-transform:uppercase;color:var(--white); min-height:20px;display:inline-block;margin-right:-.5em; filter:drop-shadow(0 0 7px rgba(0,255,209,.45))} .rbt .ch{display:inline-block;min-width:.62em} .rbt .ch.noise{color:#37665d} .rbt .ch.hot{color:var(--phos);text-shadow:0 0 10px var(--phos)} .rbt .ch.done{color:var(--white)} .rbt.lock{animation:rbtLock .9s ease-out both} @keyframes rbtLock{0%{filter:brightness(2.8) blur(1px) drop-shadow(0 0 22px var(--phos))} 100%{filter:brightness(1) blur(0) drop-shadow(0 0 7px rgba(0,255,209,.45))}} /* ===== arrival ===== */ #arrive{overflow:hidden;background:var(--void);z-index:26} body.arriving #lock{opacity:0!important;visibility:hidden!important} .arin{position:absolute;inset:0;display:flex;flex-direction:column; padding:calc(52px + env(safe-area-inset-top,0px)) var(--pad) 34px;max-width:820px;margin:0 auto} .areye{flex:none;font:9px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--phos)} .areye .dot{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--phos); box-shadow:0 0 8px rgba(0,255,209,.8);margin-right:9px;vertical-align:1px} .arbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center; overflow-y:auto;padding:20px 0} .arbody .nv{margin:auto} .arstep{display:none} .arstep.on{display:block;animation:arIn .55s var(--ease)} @keyframes arIn{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} .art{font:9px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--steel);margin-bottom:18px} .aru{margin-top:20px;font:10.5px/1.85 var(--mono);color:var(--dim)} .askstep{display:flex;flex-direction:column;justify-content:center;min-height:44vh} .arask{margin-top:26px} .askstep .arask{margin-top:18px} .askstep .aq{font-size:clamp(19px,4.4vw,30px)} .askstep .aw{margin-top:26px;flex-direction:column;align-items:flex-start} .askstep .ach{font-size:13px;padding:15px 20px;width:100%;max-width:420px;text-align:left} .arask .aq{font:300 clamp(14px,3vw,18px) var(--num);color:var(--phos);text-shadow:0 0 9px rgba(0,255,209,.35)} .arask .aw{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap} .arask .ach{font:11px var(--mono);letter-spacing:.06em;color:var(--haze);padding:11px 16px;border-radius:3px; box-shadow:inset 0 0 0 1px rgba(150,180,200,.2);transition:.22s} .arask .ach:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(180,205,215,.45)} .arask .ach.ok{color:#02110e;background:var(--phos);box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 22px -6px rgba(0,255,209,.6)} .arask .ach.no{color:var(--mag);box-shadow:inset 0 0 0 1px rgba(255,47,176,.6);animation:noShake .3s} @keyframes noShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .arh{font:300 clamp(26px,5.4vw,44px)/1.16 var(--mono);letter-spacing:-.01em;color:#fff; text-shadow:0 0 1px rgba(255,255,255,.85),0 0 10px rgba(238,242,248,.5)} .arh .dim{color:var(--steel);text-shadow:none} .arp{margin-top:20px;font:12.5px/1.9 var(--mono);color:var(--haze);max-width:52ch} .arp b{color:#fff;font-weight:400} .arkey{margin-top:26px;padding:20px 0 0;border-top:1px solid var(--hair2)} .arkey .k{font:8.5px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--steel)} .arkey .cpy{margin-top:10px;font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--dim);transition:.25s} .arkey .cpy.ok{color:var(--phos);text-shadow:0 0 9px rgba(0,255,209,.5)} .arkey .v.flash{animation:kFlash .42s} @keyframes kFlash{0%,100%{filter:none}45%{filter:brightness(2.4)}} .arkey .v{display:block;text-align:left;cursor:pointer;margin-top:12px;font:200 clamp(19px,5.2vw,30px) var(--mono);letter-spacing:.3em;color:#fff; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 10px rgba(238,242,248,.85),0 0 30px rgba(225,235,255,.4)} .arlist{margin-top:22px;border-top:1px solid var(--hair2)} .arrow{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair)} .arrow .t{font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--steel)} .arrow .v{margin-left:auto;font:300 13px var(--mono);letter-spacing:.1em;color:#fff;text-shadow:var(--bloomS)} .arrow .v.ph{color:var(--phos);text-shadow:0 0 9px rgba(0,255,209,.5)} .arfoot{flex:none;display:flex;align-items:center;justify-content:center;gap:18px; padding-top:16px;border-top:1px solid var(--hair)} .ardots{display:flex;gap:6px} .ardot{width:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.13);transition:.2s} .ardot.on{background:var(--phos);box-shadow:0 0 8px rgba(0,255,209,.6)} .arnext{font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#02110e; background:var(--phos);padding:13px 24px;box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 24px -6px rgba(0,255,209,.5)} #lockgrid{display:contents}/* ===== the name reveal ===== */ .nv{display:flex;flex-direction:column;gap:22px} .nvq{font:9px var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--steel);min-height:12px} .nvslv{position:relative;display:flex;flex-wrap:wrap;gap:5px;transition:opacity .5s} /* the report boots first */ .rboot{display:flex;flex-direction:column;align-items:center;gap:22px;margin:auto} .rmk{width:56px;height:56px;overflow:visible;animation:rmkIn 1.1s var(--ease)} .rmk rect{fill:#0affd8;filter:drop-shadow(0 0 6px rgba(0,255,209,.9)) drop-shadow(0 0 20px rgba(0,255,209,.5))} @keyframes rmkIn{ 0%{opacity:0;transform:scale(.82);filter:blur(9px) brightness(3)} 38%{opacity:1;filter:blur(2px) brightness(2.2)} 46%{opacity:.35;filter:blur(0) brightness(1)} 54%{opacity:1;filter:brightness(2.6)} 62%{opacity:.6} 70%,100%{opacity:1;transform:none;filter:none}} .rbt{font:10px var(--mono);letter-spacing:.42em;text-transform:uppercase;color:var(--haze)} #lockgrid{display:contents} #opsys{display:none} #lede{display:none} @media(min-width:900px){ #lock{justify-content:center} #lockgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:clamp(40px,7vw,110px);width:min(1180px,92vw)} #lockL{text-align:left;max-width:34em} #lockL *{text-align:left} #opsys{display:block;font:9px var(--mono);letter-spacing:.4em;text-transform:uppercase;color:var(--steel)} #creed{text-align:left!important;margin-top:22px;white-space:normal} #creed span,#creed b{display:block} #creed b{margin-top:2px} #lede{display:block;margin-top:24px;font:12.5px/1.95 var(--mono);color:var(--haze);max-width:55ch} #lockR{display:flex;flex-direction:column;align-items:center} #lockR .kcard{margin-top:0} #lockR #nokey{margin-top:26px} } #creed{text-align:center;color:var(--ink);white-space:nowrap;max-width:none; font:300 clamp(9px,2.45vw,17px)/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase} @media(min-width:820px){#creed{font-size:clamp(13px,1.5vw,19px);letter-spacing:.2em}} @media(min-width:900px){#creed{font-size:clamp(19px,2.35vw,32px);line-height:1.34;letter-spacing:.1em}} /* the headline loses lock now and then */ #creed{position:relative} #creed.gl{animation:hgl .5s steps(2,end) 1} #creed.gl b,#creed.gl span{animation:hrgb .5s linear 1} @keyframes hgl{ 0%{transform:translate(0,0)} 10%{transform:translate(-4px,1px);clip-path:inset(6% 0 66% 0)} 22%{transform:translate(5px,-1px);clip-path:inset(58% 0 12% 0)} 34%{transform:translate(-3px,0);clip-path:inset(28% 0 40% 0)} 46%{transform:translate(3px,0);clip-path:inset(80% 0 4% 0)} 58%{transform:translate(-2px,0);clip-path:inset(2% 0 90% 0)} 70%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0)}} @keyframes hrgb{ 0%,100%{text-shadow:var(--bloomS)} 20%{text-shadow:2px 0 rgba(255,47,176,.6),-2px 0 rgba(0,255,209,.6)} 50%{text-shadow:-3px 0 rgba(255,47,176,.5),3px 0 rgba(0,255,209,.5)} 80%{text-shadow:1px 0 rgba(255,47,176,.4),-1px 0 rgba(0,255,209,.4)}} #creed span{display:block} #creed b{display:block;color:var(--white);font-weight:300;text-shadow:var(--bloomS)} /* ===== the clearance card,as the door ===== */ .kcard{position:relative;margin-top:34px;width:min(292px,80vw);aspect-ratio:5/7.4;flex:none} @media(min-width:820px){.kcard{width:306px;margin-top:40px}} .kmatt{position:absolute;inset:0;overflow:hidden;background:#070b0f;border-radius:6px; box-shadow:0 36px 58px -26px #000,inset 0 1px 0 rgba(200,222,232,.24),inset 0 -1px 0 rgba(0,0,0,.98), inset 1px 0 0 rgba(200,222,232,.09),inset -1px 0 0 rgba(0,0,0,.85)} .kshape{position:absolute;inset:0;overflow:hidden;border-radius:6px;pointer-events:none} .kdark{position:absolute;left:0;right:0;top:146px;height:126px;background:#03060a; box-shadow:inset 0 3px 9px rgba(0,0,0,.9),inset 0 -1px 0 rgba(200,222,232,.08),0 1px 0 rgba(200,222,232,.07)} .knk{position:absolute;right:0;top:0;width:44px;height:44px;background:var(--void);z-index:3; clip-path:polygon(100% 0,100% 100%,0 0)} .knk:after{content:"";position:absolute;inset:0; background:linear-gradient(225deg,transparent calc(50% - .6px),rgba(214,236,244,.34) 50%,transparent calc(50% + .6px))} .khdz{position:absolute;left:24px;top:56px;z-index:2} .kcs{font:300 clamp(23px,6vw,29px) var(--mono);letter-spacing:.2em;color:#fff; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 6px rgba(238,242,248,.85),0 0 20px rgba(225,235,255,.45)} .kcs i{font-style:normal;display:inline-block} .kcs i.fk{animation:ktube 1.15s steps(1,end)} @keyframes ktube{0%,7%{opacity:.22}8%,11%{opacity:1}12%,15%{opacity:.28}16%,21%{opacity:1}22%,26%{opacity:.4}27%,100%{opacity:1}} .kcl{margin-top:9px;font:9px var(--mono);letter-spacing:.32em;color:var(--phos); text-shadow:0 0 8px rgba(0,255,209,.75),0 0 22px rgba(0,255,209,.35)} .kinc{position:absolute;left:24px;top:294px;z-index:2; font:8.5px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--steel); text-shadow:0 0 7px rgba(138,151,163,.4)} .kinc b{font-weight:400;color:#eef4f6;letter-spacing:.16em;text-shadow:0 0 6px rgba(238,242,248,.7)} .kcs,.kcl,.kinc{transition:opacity .5s ease,visibility 0s} .kcard.s2 .kcs,.kcard.s2 .kcl,.kcard.s2 .kinc{opacity:0;visibility:hidden} .kband{position:absolute;left:0;right:0;top:146px;height:126px;padding:0 24px;z-index:2; display:flex;flex-direction:column;justify-content:center} .kband>div{position:absolute;left:24px;right:24px;opacity:0;visibility:hidden;transition:opacity .38s ease} .kcard.s2 .kb2,.kcard.granted .kbg{opacity:1;visibility:visible} .klbl{font:8.5px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--steel); text-shadow:0 0 7px rgba(138,151,163,.4)} .kfield{margin-top:12px} #keyin{width:100%;background:none;border:0;outline:none; font:200 17px var(--mono);letter-spacing:.26em;color:#fff;caret-color:var(--phos);text-transform:uppercase; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 7px rgba(238,242,248,.85),0 0 22px rgba(225,235,255,.45)} #keyin::placeholder{color:#39434c;text-shadow:none;letter-spacing:.24em} .krail{margin-top:11px;height:1px;background:rgba(180,205,215,.26);position:relative;overflow:hidden} .krail i{position:absolute;top:0;bottom:0;width:32%;background:var(--phos); box-shadow:0 0 10px rgba(0,255,209,.85);animation:khunt 3.2s var(--ease) infinite} @keyframes khunt{0%{left:-32%}56%{left:100%}100%{left:100%}} .khint{margin-top:12px;font:8.5px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--dim)} .kcard.deny .krail i{background:var(--amber);box-shadow:0 0 10px rgba(255,180,74,.85)} .kcard.deny .khint{color:var(--amber)} .kbg{text-align:center;position:relative} .kbg.gl{animation:hgl .5s steps(2,end) 1} .kbg.gl .kg1,.kbg.gl .kg2{animation:kgrgb .5s linear 1} @keyframes kgrgb{ 0%,100%{text-shadow:0 0 10px rgba(0,255,209,.8),0 0 28px rgba(0,255,209,.35)} 20%{text-shadow:2px 0 rgba(255,47,176,.75),-2px 0 rgba(0,255,209,.75)} 50%{text-shadow:-3px 0 rgba(255,47,176,.6),3px 0 rgba(0,255,209,.6)} 80%{text-shadow:1px 0 rgba(255,47,176,.5),-1px 0 rgba(0,255,209,.5)}} .kg1{font:300 15px var(--mono);letter-spacing:.4em;color:var(--phos); text-shadow:0 0 10px rgba(0,255,209,.8),0 0 28px rgba(0,255,209,.35)} .kg2{margin-top:12px;font:8.5px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--steel)} .kchin{position:absolute;left:24px;right:24px;bottom:22px;z-index:2; display:flex;align-items:center;justify-content:space-between} .kwm{font:500 12.5px var(--mono);letter-spacing:.26em;line-height:1;color:var(--steel); text-shadow:0 0 8px rgba(169,182,190,.35)} .kwm .ksl{animation:kslf 9s steps(1,end) infinite} @keyframes kslf{0%,86%{color:var(--steel)}87%{color:var(--phos)}88%{color:var(--steel)} 90%,93%{color:var(--phos);text-shadow:0 0 12px rgba(0,255,209,.9)}94%,100%{color:var(--steel)}} .kchin svg{width:17.4px;height:17.4px;overflow:visible;display:block;shape-rendering:geometricPrecision; filter:drop-shadow(0 0 4px rgba(0,255,209,.85)) drop-shadow(0 0 13px rgba(0,255,209,.4))} .kchin svg rect{fill:#0affd8;stroke:#0affd8;stroke-width:.6} #nokey{position:relative;align-self:center;margin:34px auto 0;font:var(--t1)/1 var(--mono);letter-spacing:.28em; text-transform:uppercase;color:var(--haze);padding:12px 14px;transition:color .25s; animation:nkPulse 3.2s ease-in-out infinite} #nokey:hover{color:var(--phos);animation:none;text-shadow:0 0 10px rgba(0,255,209,.7)} @keyframes nkPulse{ 0%,100%{opacity:.62;text-shadow:none} 50%{opacity:1;text-shadow:0 0 9px rgba(0,255,209,.45),0 0 22px rgba(0,255,209,.2)}} /* the three doors */ #doors{touch-action:pan-y;overscroll-behavior-x:none;will-change:transform;position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center; justify-content:center;padding:76px var(--pad) 40px;background:var(--void); opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s} #doors.on{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s 0s} /* the back link rides a header row in the flow,so it lines up with the content */ .phead{position:absolute;left:var(--pad);right:var(--pad);top:0;height:56px;z-index:6; display:flex;align-items:center;justify-content:space-between;gap:14px; padding-top:env(safe-area-inset-top,0px)} .phead .pcrumb{font:10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} .phead .pcrumb b{color:var(--phos);font-weight:400} #dclose,#bxback{position:static;letter-spacing:.3em;text-transform:uppercase;color:var(--haze);padding:10px 0;transition:.2s} #dclose:hover,#bxback:hover{color:var(--phos)} #dclose.gl,#bxback.gl{color:var(--phos);text-shadow:1.5px 0 rgba(255,47,176,.7),-1.5px 0 rgba(0,255,209,.7)} #dhead{font:300 clamp(11px,2.6vw,14px) var(--mono);letter-spacing:.4em;text-transform:uppercase; color:var(--white);text-shadow:var(--bloomS);text-align:center} #dsub{margin-top:12px;font:10.5px/1.8 var(--mono);color:var(--dim);text-align:center;max-width:34ch} #dlist{margin-top:38px;width:min(480px,100%)} #doors .dr{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:6px; padding:20px 4px;border-top:1px solid var(--hair);transition:.28s var(--ease);cursor:default} #doors .dr:last-of-type{border-bottom:1px solid var(--hair)} #doors .dr:before{content:"";position:absolute;left:-14px;top:20px;bottom:20px;width:1px; background:var(--phos);opacity:0;box-shadow:0 0 9px rgba(0,255,209,.8);transition:.28s var(--ease)} #doors .dr:hover:before{opacity:1;top:14px;bottom:14px} #doors .n{grid-row:1/3;align-self:center;font:300 15px var(--num);color:var(--dim);transition:.28s} #doors .dr:hover .n{color:var(--phos);text-shadow:0 0 10px rgba(0,255,209,.6)} #doors .t{font:300 12px var(--mono);letter-spacing:.34em;color:var(--haze);transition:.28s} #doors .dr:hover .t{color:var(--white);text-shadow:var(--bloomS)} #doors .s{font:11px/1.7 var(--mono);color:var(--dim)} #doors .dr.act{cursor:pointer;text-align:left;width:100%} #doors .go{grid-column:2;margin-top:12px;font:8.5px var(--mono);letter-spacing:.3em; text-transform:uppercase;color:var(--phos);opacity:.75;transition:.25s} #doors .dr.act:hover .go{opacity:1;text-shadow:0 0 10px rgba(0,255,209,.6)} #bdout{width:min(480px,100%);margin-top:26px;opacity:0;visibility:hidden;transform:translateY(10px); transition:.45s var(--ease)} #bdout.on{opacity:1;visibility:visible;transform:none} #bstep{font:8.5px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--steel)} #bwal{margin-top:10px;font:10px var(--mono);letter-spacing:.12em;color:var(--dim);word-break:break-all} #bkey:empty{display:none} #bkey{margin-top:16px;font:200 clamp(15px,4.4vw,22px) var(--mono);letter-spacing:.3em;color:#fff; min-height:26px;text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(238,242,248,.85),0 0 24px rgba(225,235,255,.45)} #buse{margin-top:20px;display:none;font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase; color:#02110e;background:var(--phos);padding:13px 26px; box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 24px rgba(0,255,209,.38)} #buse.on{display:inline-block} #bnote{margin-top:8px;font:10px/1.75 var(--mono);color:var(--dim)} /* the quiet door out of the key page — a machine typing under dusty glass,feathered into the page so it reads as BENEATH it,not on it */ #bxlink{position:relative;margin-top:auto;align-self:center;display:block; width:min(100%,560px);height:170px;padding:0;border:0;background:none;cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 0 16%,rgba(0,0,0,.5) 56%,transparent 100%); mask-image:radial-gradient(50% 50% at 50% 50%,#000 0 16%,rgba(0,0,0,.5) 56%,transparent 100%); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} #bxlink>span{position:absolute;inset:0;pointer-events:none} #bxlink .bed{background:radial-gradient(46% 44% at 50% 50%,rgba(255,47,176,.07),transparent 74%);filter:blur(9px)} #bxlink .txt{display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:pre; font:300 12.5px/2.05 var(--mono);letter-spacing:.16em; /* the wipes are cut into THIS box — fixed width, so phone and desktop reveal exactly the same words */ width:344px;max-width:100%;margin:0 auto} #bxlink .txt i{font-style:normal;display:inline-block} #bxlink .txt i.fk{animation:ktube 1.15s steps(1,end)} #bxlink.gl .txt{animation:bxgl .5s steps(2,end) 1} #bxlink.gl .txt div{animation:bxrgb .5s linear 1} #bxlink.sag .txt{animation:bxsag 2.6s ease-in-out 1} @keyframes bxgl{0%{transform:translate(0,0);clip-path:none} 10%{transform:translate(-4px,1px);clip-path:inset(6% 0 66% 0)} 22%{transform:translate(5px,-1px);clip-path:inset(58% 0 12% 0)} 34%{transform:translate(-2px,0);clip-path:inset(28% 0 40% 0)} 46%,100%{transform:translate(0,0);clip-path:none}} @keyframes bxrgb{0%,100%{} 20%{text-shadow:2px 0 rgba(255,47,176,.65),-2px 0 rgba(0,255,209,.6)} 50%{text-shadow:-3px 0 rgba(255,47,176,.55),3px 0 rgba(0,255,209,.5)} 80%{text-shadow:1px 0 rgba(255,47,176,.4),-1px 0 rgba(0,255,209,.4)}} @keyframes bxsag{0%,100%{opacity:1}50%{opacity:.66}} /* the dusty copy: what you see through the grime */ #bxlink .txt.haze{color:rgba(255,150,214,.26);filter:blur(2.6px);text-shadow:0 0 22px rgba(255,47,176,.35)} /* the clean copy: visible only inside the two wiped windows */ #bxlink .txt.clear{color:rgba(255,220,240,.94);filter:blur(.2px); text-shadow:0 0 11px rgba(255,47,176,.7),0 0 32px rgba(255,47,176,.3); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} /* ── the four deals: where the glass is wiped,where the dust sits ── */ #bxlink.s0 .txt.clear{ -webkit-mask-image:radial-gradient(24% 17% at 57% 42%,#000 0 55%,transparent 97%),radial-gradient(9% 13% at 27% 58%,#000 0 40%,transparent 96%); mask-image:radial-gradient(24% 17% at 57% 42%,#000 0 55%,transparent 97%),radial-gradient(9% 13% at 27% 58%,#000 0 40%,transparent 96%)} #bxlink.s0 .bsmudge.a{left:6%;top:10%;width:110px;height:80px} #bxlink.s0 .bsmudge.b{left:70%;top:58%;width:110px;height:76px} #bxlink.s1 .txt.clear{ -webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 26% 78%,transparent 90%),radial-gradient(8% 12% at 30% 58%,#000 0 42%,transparent 96%),radial-gradient(8% 12% at 73% 58%,#000 0 42%,transparent 96%); mask-image:linear-gradient(90deg,transparent 12%,#000 26% 78%,transparent 90%),radial-gradient(8% 12% at 30% 58%,#000 0 42%,transparent 96%),radial-gradient(8% 12% at 73% 58%,#000 0 42%,transparent 96%); -webkit-mask-size:100% 26%,100% 100%,100% 100%;mask-size:100% 26%,100% 100%,100% 100%; -webkit-mask-position:0 34%,0 0,0 0;mask-position:0 34%,0 0,0 0} #bxlink.s1 .bsmudge.a{left:16%;top:52%;width:140px;height:70px} #bxlink.s1 .bsmudge.b{left:58%;top:12%;width:90px;height:56px} #bxlink.s2 .txt.clear{ -webkit-mask-image:linear-gradient(90deg,transparent 6%,rgba(0,0,0,.25) 20%,#000 36% 66%,rgba(0,0,0,.25) 82%,transparent 94%); mask-image:linear-gradient(90deg,transparent 6%,rgba(0,0,0,.25) 20%,#000 36% 66%,rgba(0,0,0,.25) 82%,transparent 94%)} #bxlink.s2 .bsmudge.a{left:2%;top:26%;width:120px;height:90px} #bxlink.s2 .bsmudge.b{left:76%;top:34%;width:120px;height:86px} #bxlink.s3 .txt.clear{ -webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 22% 82%,transparent 92%),radial-gradient(10% 14% at 32% 42%,#000 0 44%,transparent 96%); mask-image:linear-gradient(90deg,transparent 10%,#000 22% 82%,transparent 92%),radial-gradient(10% 14% at 32% 42%,#000 0 44%,transparent 96%); -webkit-mask-size:100% 26%,100% 100%;mask-size:100% 26%,100% 100%; -webkit-mask-position:0 62%,0 0;mask-position:0 62%,0 0} #bxlink.s3 .bsmudge.a{left:24%;top:8%;width:130px;height:66px} #bxlink.s3 .bsmudge.b{left:64%;top:16%;width:100px;height:60px} #bxlink .bscan{opacity:.14;background:repeating-linear-gradient(180deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px)} #bxlink .grille{opacity:.22;mix-blend-mode:screen; background:repeating-linear-gradient(90deg,rgba(255,0,64,.14) 0 1px,rgba(0,255,120,.12) 1px 2px,rgba(40,80,255,.14) 2px 3px)} #bxlink .bscan,#bxlink .grille{-webkit-mask-image:radial-gradient(46% 44% at 50% 50%,#000 0 18%,transparent 96%); mask-image:radial-gradient(46% 44% at 50% 50%,#000 0 18%,transparent 96%); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} #bxlink .bdust{mix-blend-mode:screen;opacity:.55; -webkit-mask-image:radial-gradient(48% 46% at 50% 50%,#000 0 14%,transparent 98%); mask-image:radial-gradient(48% 46% at 50% 50%,#000 0 14%,transparent 98%); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; background-image: radial-gradient(1.4px 1.4px at 12% 30%,rgba(220,230,235,.3),transparent 55%), radial-gradient(1px 1px at 26% 68%,rgba(220,230,235,.2),transparent 55%), radial-gradient(1.6px 1.6px at 44% 24%,rgba(220,230,235,.26),transparent 55%), radial-gradient(1px 1px at 55% 72%,rgba(220,230,235,.22),transparent 55%), radial-gradient(1.3px 1.3px at 74% 36%,rgba(220,230,235,.25),transparent 55%), radial-gradient(1px 1px at 86% 64%,rgba(220,230,235,.18),transparent 55%)} /* greasy fingerprints where the glass was wiped */ #bxlink .bsmudge{inset:auto;background:radial-gradient(closest-side,rgba(190,205,215,.06),transparent 74%);filter:blur(3px)} #bxlink.s1 .bdust{background-image: radial-gradient(1.4px 1.4px at 14% 60%,rgba(220,230,235,.3),transparent 55%), radial-gradient(1px 1px at 26% 72%,rgba(220,230,235,.24),transparent 55%), radial-gradient(1.5px 1.5px at 41% 58%,rgba(220,230,235,.3),transparent 55%), radial-gradient(1.1px 1.1px at 52% 78%,rgba(220,230,235,.26),transparent 55%), radial-gradient(1.4px 1.4px at 63% 60%,rgba(220,230,235,.28),transparent 55%), radial-gradient(1.6px 1.6px at 86% 62%,rgba(220,230,235,.3),transparent 55%)} #bxlink.s2 .bdust{background-image: radial-gradient(1.5px 1.5px at 6% 30%,rgba(220,230,235,.32),transparent 55%), radial-gradient(1.1px 1.1px at 12% 66%,rgba(220,230,235,.26),transparent 55%), radial-gradient(1.4px 1.4px at 18% 44%,rgba(220,230,235,.3),transparent 55%), radial-gradient(1.5px 1.5px at 82% 34%,rgba(220,230,235,.3),transparent 55%), radial-gradient(1.2px 1.2px at 88% 62%,rgba(220,230,235,.28),transparent 55%), radial-gradient(1.5px 1.5px at 94% 46%,rgba(220,230,235,.32),transparent 55%)} #bxlink.s3 .bdust{background-image: radial-gradient(1.4px 1.4px at 14% 20%,rgba(220,230,235,.3),transparent 55%), radial-gradient(1.2px 1.2px at 30% 30%,rgba(220,230,235,.26),transparent 55%), radial-gradient(1.5px 1.5px at 46% 18%,rgba(220,230,235,.3),transparent 55%), radial-gradient(1.2px 1.2px at 62% 28%,rgba(220,230,235,.26),transparent 55%), radial-gradient(1.4px 1.4px at 78% 20%,rgba(220,230,235,.28),transparent 55%)} /* 4 · TEAR-THROUGH — the panel arrives glitching,then settles */ #blackbox.on{animation:bxTear .62s steps(2,end)} #blackbox.on .bxin{animation:bxRgb .62s linear} @keyframes bxTear{0%{clip-path:inset(0 0 92% 0);transform:translateX(-9px)} 20%{clip-path:inset(24% 0 40% 0);transform:translateX(8px)} 40%{clip-path:inset(4% 0 66% 0);transform:translateX(-5px)} 60%{clip-path:inset(52% 0 6% 0);transform:translateX(4px)} 80%{clip-path:inset(0);transform:translateX(-2px)}100%{clip-path:inset(0);transform:none}} @keyframes bxRgb{0%,100%{text-shadow:none} 30%{text-shadow:3px 0 rgba(255,47,176,.7),-3px 0 rgba(0,255,209,.7)} 70%{text-shadow:-2px 0 rgba(255,47,176,.5),2px 0 rgba(0,255,209,.5)}} /* the blackbox : a page,not a dialog */ #blackbox{touch-action:pan-y;overscroll-behavior-x:none;will-change:transform;position:fixed;inset:0;z-index:32;background:var(--void);padding:76px var(--pad) 30px; overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s} #blackbox.on{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s 0s} #bxsweep{position:absolute;left:0;right:0;top:0;height:34%;z-index:3;pointer-events:none;opacity:0; background:linear-gradient(180deg,rgba(255,47,176,.22),transparent)} #blackbox.on #bxsweep{animation:bxsw .7s cubic-bezier(.3,0,.2,1) 1} @keyframes bxsw{0%{opacity:.95;top:-34%}100%{opacity:0;top:100%}} #blackbox.on .bxin>*{animation:bxup .55s var(--ease) backwards} #blackbox.on .bxin>*:nth-child(1){animation-delay:.05s} #blackbox.on .bxin>*:nth-child(2){animation-delay:.12s} #blackbox.on .bxin>*:nth-child(3){animation-delay:.19s} #blackbox.on .bxin>*:nth-child(4){animation-delay:.26s} #blackbox.on .bxin>*:nth-child(5){animation-delay:.33s} #blackbox.on .bxin>*:nth-child(6){animation-delay:.4s} #blackbox.on .bxin>*:nth-child(7){animation-delay:.47s} @keyframes bxup{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}} .bxin{max-width:640px;margin:0 auto} .bxh{margin-top:20px;font:300 clamp(28px,7vw,44px)/1.15 var(--mono);letter-spacing:.06em;color:#fff; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(238,242,248,.8),0 0 24px rgba(225,235,255,.4)} .bxh span{display:block;color:var(--haze);text-shadow:none} .bxm{margin-top:20px;font:12px/1.85 var(--mono);color:var(--haze);max-width:55ch} .bxm b{color:#fff;font-weight:400} .bxu{margin-top:18px;font:10px/1.8 var(--mono);color:var(--dim)} .bxtwo{margin-top:26px;display:flex;flex-direction:column;gap:10px} @media(min-width:820px){.bxtwo{flex-direction:row}.bxtwo .rc{flex:1}} .bxtwo .rc{position:relative;padding:17px 19px;background:#080c11;border-radius:4px;cursor:pointer; box-shadow:inset 0 1px 0 rgba(200,222,232,.14),inset 0 -1px 0 rgba(0,0,0,.9);transition:.3s var(--ease)} .bxtwo .rc:hover{background:#0a0f15} /* the edge runs light around the chosen plate */ .bxtwo .rc:before,.bxtwo .rc:after{content:"";position:absolute;border-radius:4px;pointer-events:none; opacity:0;transition:opacity .35s} /* the chosen plate breathes at its edge */ .bxtwo .rc:before{inset:0;box-shadow:inset 0 0 0 1px rgba(255,47,176,.5);animation:edgeB 3.6s ease-in-out infinite} .bxtwo .rc:after{inset:0;box-shadow:0 0 30px -12px rgba(255,47,176,.75);animation:edgeG 3.6s ease-in-out infinite} .bxtwo .rc.on:before,.bxtwo .rc.on:after{opacity:1} @keyframes edgeB{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,47,176,.3)} 50%{box-shadow:inset 0 0 0 1px rgba(255,47,176,.72)}} @keyframes edgeG{0%,100%{box-shadow:0 0 22px -14px rgba(255,47,176,.5)} 50%{box-shadow:0 0 34px -8px rgba(255,47,176,.8)}} .bxtwo .n{display:block;font:8.5px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--steel)} .bxtwo .v{display:block;margin-top:8px;font:300 26px var(--num);color:#fff;text-shadow:var(--bloomS)} .bxtwo .s{display:block;margin-top:8px;font:10.5px/1.7 var(--mono);color:var(--dim)} .bxgo{margin-top:24px;font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#1c0413; background:var(--mag);padding:14px 28px; box-shadow:0 0 0 1px rgba(255,47,176,.5),0 0 24px rgba(255,47,176,.38)} .bxf{margin-top:24px;font:10.5px var(--mono);color:var(--dim)} .bxf b{color:var(--haze);font-weight:400} /* ---------- recognition ---------- */ #recog{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:42px} #mark{width:72px;height:72px;overflow:visible;opacity:0;transition:opacity .5s} #recog.lit #mark{opacity:1} #mark rect{fill:var(--white);animation:mk .55s var(--ease) backwards} #mark g{filter:drop-shadow(0 0 8px rgba(233,241,243,.8)) drop-shadow(0 0 28px rgba(205,225,228,.45))} #mark rect:nth-of-type(1){animation-delay:.05s;transform-origin:26px 24px} #mark rect:nth-of-type(2){animation-delay:.15s;transform-origin:32px 18px} #mark rect:nth-of-type(3){animation-delay:.25s;transform-origin:67px 82px} #mark rect:nth-of-type(4){animation-delay:.35s;transform-origin:74px 75px} @keyframes mk{from{transform:scale(.08);opacity:0}} #callsign{font:200 clamp(13px,3.6vw,17px) var(--mono);letter-spacing:.36em;text-transform:uppercase; color:var(--white);min-height:24px;text-align:center;padding:0 var(--pad)} #callsign .p{text-shadow:var(--bloomS)}#callsign .d{color:var(--dim)} /* ===================== THE DESK — transplanted 1:1,scoped to #deck ===================== */ #deck{position:fixed;inset:0;z-index:12} #deck.rack #stage{filter:brightness(1.4) blur(.6px)} #deck.land #stage{animation:landing .32s ease-out} @keyframes landing{0%{filter:brightness(1.5)}100%{filter:none}} #deck:not(.on){opacity:0;visibility:hidden;pointer-events:none} #deck:not(.on) *{visibility:hidden!important} /* the desk carries its own hud — the shell's stands down */ body.ondesk>.hud.t:not(.dk),body.ondesk>.hud.b:not(.dk){opacity:0!important;visibility:hidden!important;pointer-events:none} #deck{--void:#05080c;--white:#e9f1f3;--haze:#a9b6be;--steel:#8a97a3;--dim:#6e7d87; --hair:rgba(150,180,200,.11);--hair2:rgba(180,205,215,.26); --phos:#00ffd1;--mag:#ff2fb0;--num:"Space Grotesk",sans-serif;--mono:"JetBrains Mono",monospace; --ease:cubic-bezier(.22,.9,.28,1);--pad:24px; --bloomS:0 0 5px rgba(233,241,243,.7),0 0 16px rgba(215,232,235,.3)} @media(min-width:900px){#deck{--pad:56px}} #deck *{margin:0;padding:0;box-sizing:border-box} #deck{background:var(--void);color:var(--white);font-family:var(--mono); -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none; background-image:radial-gradient(78vw 54vh at 74% -14%,rgba(0,255,209,.05),transparent 62%)} #deck button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} #deck .num{font-family:var(--num);font-weight:300;font-variant-numeric:tabular-nums} .hud{position:fixed;left:var(--pad);right:var(--pad);z-index:50;display:flex;justify-content:space-between; font:9px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);pointer-events:none} .hud.t{top:22px}.hud.b{bottom:20px} #deck .back,#deck #dwX,#deck #mkX,#deck #acX,#reg .pbk{top:22px!important;height:10px;line-height:10px!important}.hud b{color:var(--haze);font-weight:400}.hud .on{color:var(--phos)} /* ---------- the room ---------- */ #deck #stage{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center; padding:86px var(--pad) 88px;perspective:1500px;overflow-y:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:contain} @media(max-width:899px){ #deck #stage{align-items:flex-start;padding:96px var(--pad) 92px} .hud.t{top:18px}.hud.b{display:flex;bottom:16px} #deck .back,#deck #dwX,#deck #mkX,#deck #acX,#reg .pbk{top:18px!important;height:10px;line-height:10px!important} #deck #cap{display:none} #deck .rm{gap:26px} #deck .rm .idc{order:-1;width:100%;aspect-ratio:1.62/1;align-self:stretch} #deck .rm .idc .f{padding:16px 18px} #deck .rm .idc{aspect-ratio:1.72/1} #deck .rm .idc .band{left:auto;right:16px;top:14px;bottom:14px;width:44%;height:auto;padding:0 13px; border-radius:4px;justify-content:center} #deck .rm .idc .kv{white-space:nowrap;font-size:11.5px;letter-spacing:.14em} #deck .rm .idc .cs{font-size:17px} #deck .rm .idc .kv{font-size:12.5px;letter-spacing:.2em} #deck .rm .idc .inc{left:18px;top:auto;bottom:34%} #deck .rm .idc .chin{left:18px;right:auto;bottom:12px;width:auto;gap:10px} #deck .rm .idc .chin span{font-size:9px} #deck .dist{margin-top:12px} #deck .route{margin-top:24px} #deck .ev{margin-top:28px} } #deck .rm{display:flex;flex-direction:column;align-items:flex-start;gap:40px;width:100%;max-width:1080px} @media(min-width:900px){#deck .rm{flex-direction:row;align-items:flex-start;gap:clamp(50px,8vw,120px);justify-content:space-between}} #deck .col{flex:1 1 auto;min-width:0;width:100%;max-width:100%} /* the distance : the only large thing */ #deck .prize{font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--steel)} #deck .dist{margin-top:18px;font:300 clamp(52px,11vw,104px)/1 var(--num);color:#fff; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 14px rgba(238,242,248,.7),0 0 44px rgba(225,235,255,.3)} #deck .dist em{font-style:normal;font-size:.34em;color:var(--haze);letter-spacing:.04em;margin-left:.2em} #deck .route{margin-top:34px;font:10px var(--mono);letter-spacing:.34em;text-transform:uppercase; color:#02110e;background:var(--phos);padding:16px 38px; box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 32px -8px rgba(0,255,209,.55); animation:rt 3.4s ease-in-out infinite} @keyframes rt{0%,100%{box-shadow:0 0 0 1px rgba(0,255,209,.4),0 0 22px -10px rgba(0,255,209,.4)} 50%{box-shadow:0 0 0 1px rgba(0,255,209,.78),0 0 40px -6px rgba(0,255,209,.7)}} /* the two events : the only other thing */ #deck .ev{margin-top:44px;display:flex;flex-direction:column;gap:0} #deck .ev .e{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-top:1px solid var(--hair)} #deck .ev .e:last-child{border-bottom:1px solid var(--hair)} #deck .ev .e .d{width:5px;height:5px;border-radius:50%;background:var(--phos);flex:none;align-self:center; box-shadow:0 0 9px rgba(0,255,209,.8);animation:pl 2.8s ease-in-out infinite} @keyframes pl{50%{opacity:.35}} #deck .ev .e.quiet .d{background:rgba(150,180,200,.3);box-shadow:none;animation:none} #deck .ev .e p{font:11.5px/1.7 var(--mono);color:var(--haze);max-width:46ch} #deck .ev .e p b{color:#fff;font-weight:400;text-shadow:var(--bloomS)} #deck .ev .e p .v{color:var(--phos);text-shadow:0 0 9px rgba(0,255,209,.5)} /* ---------- the card : the one material object ---------- */ #deck .idc{position:relative;width:306px;aspect-ratio:5/7.4;flex:none;align-self:center; transform-style:preserve-3d;transition:transform .82s var(--ease)} #deck .idm{position:absolute;inset:0;border-radius:6px;background:#070b0f; box-shadow:inset 0 1px 0 rgba(200,222,232,.24),inset 0 -1px 0 rgba(0,0,0,.97), inset 1px 0 0 rgba(200,222,232,.08),inset -1px 0 0 rgba(0,0,0,.82)} #deck .idnk{position:absolute;right:0;top:0;width:44px;height:44px;background:var(--void); clip-path:polygon(100% 0,100% 100%,0 0);z-index:3} #deck .f{position:absolute;inset:0;backface-visibility:hidden;padding:9% 8%} #deck .cs{font:300 clamp(23px,6vw,29px) var(--mono);letter-spacing:.2em;color:#fff;text-shadow:var(--bloomS)} #deck .cl{margin-top:9px;font:9px var(--mono);letter-spacing:.32em;color:var(--phos)} #deck .band{position:absolute;left:0;right:0;top:146px;height:126px;background:#03060a;padding:0 24px; display:flex;flex-direction:column;justify-content:center; box-shadow:inset 0 3px 9px rgba(0,0,0,.9),inset 0 -1px 0 rgba(200,222,232,.08),0 1px 0 rgba(200,222,232,.07)} #deck .k{font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--steel)} #deck .kv{margin-top:11px;font:200 16px var(--mono);letter-spacing:.26em;color:var(--steel);transition:color .3s} #deck .kv.on{color:#fff;text-shadow:0 0 1px rgba(255,255,255,.9),0 0 9px rgba(238,242,248,.85)} #deck .krail{margin-top:10px;height:1px;background:rgba(180,205,215,.22);position:relative;overflow:hidden} #deck .krail i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--phos); box-shadow:0 0 9px rgba(0,255,209,.8)} #deck .khint{margin-top:9px;font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--dim)} #deck .inc{position:absolute;left:8%;top:76%;font:9px var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--steel)} #deck .inc b{font-weight:400;color:#eef4f6} #deck .chin{position:absolute;left:8%;right:8%;bottom:11%;display:flex;align-items:center; justify-content:space-between;font:500 10px var(--mono);letter-spacing:.22em;color:var(--steel);z-index:4} #deck .mk{width:14px;height:14px;overflow:visible;display:block} #deck .mk rect{fill:#0affd8;filter:drop-shadow(0 0 4px rgba(0,255,209,.9))} @media(min-width:900px){} /* the fire,in the card's screen and at the head on a phone */ #deck .band{cursor:pointer} #deck .band.cut,#deck .mfire.cut{animation:fcut .13s steps(2,end)} @keyframes fcut{0%{clip-path:inset(0 0 58% 0);transform:translateX(-5px)} 50%{clip-path:inset(44% 0 6% 0);transform:translateX(4px)}100%{clip-path:inset(0);transform:none}} #deck .fk{font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--steel)} #deck .fv{margin-top:9px;font:300 15px var(--mono);letter-spacing:.04em;color:#fff;text-shadow:0 0 7px rgba(238,242,248,.6)} #deck .fsb{margin-top:7px;font:9px var(--mono);color:var(--dim)} #deck .fs2{color:var(--phos);text-shadow:0 0 9px rgba(0,255,209,.5)} #deck .fm{color:var(--mag);text-shadow:0 0 9px rgba(255,47,176,.5)} #deck .feng,#reg #prof .feng{margin-top:11px;font:9px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim); padding-bottom:3px;border-bottom:1px solid var(--hair2);transition:.2s} #deck .feng:hover,#reg #prof .feng:hover{color:var(--phos);border-bottom-color:var(--phos)} #deck .mfire{display:block;cursor:pointer;padding-bottom:18px;border-bottom:1px solid var(--hair2)} @media(max-width:899px){#deck #stage{padding-top:62px;padding-bottom:104px} .hud.t.dk{background:linear-gradient(180deg,var(--void) 66%,transparent);padding-bottom:10px;z-index:58} #deck .rm{gap:0} #deck .mid2{margin-top:20px} #deck .prize{margin-top:22px} #deck .say{margin-top:20px;font-size:11.5px} #deck .acts{margin-top:20px;gap:18px} #deck .rows{margin-top:22px} #deck .track{margin-top:20px;gap:16px} #deck .track .d{font-size:9.5px;line-height:1.45}} @media(max-width:899px){#deck .idc{display:none}} #deck .mfire .fv{font-size:clamp(19px,4.6vw,26px)} #deck .mfire .fsb{font-size:10px} #deck .mid2{display:block;margin-top:22px;text-align:center} #deck .mid2 .h1{font:300 clamp(28px,7.6vw,38px) var(--mono);letter-spacing:.16em;color:#fff;text-shadow:var(--bloomS)} #deck .mid2 .h2{margin-top:9px;font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--phos)} @media(min-width:900px){#deck .mfire, #deck .mid2{display:none}} /* the column */ #deck .acts{margin-top:24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap} #deck .lnk{position:relative;font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--haze); padding:11px 20px;transition:.2s;background:none} #deck .lnk:before,#deck .lnk:after{content:"";position:absolute;top:0;bottom:0;width:7px; border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);transition:.2s} #deck .lnk:before{left:0;border-left:1px solid var(--hair2)} #deck .lnk:after{right:0;border-right:1px solid var(--hair2)} #deck .lnk:hover{color:var(--phos)} #deck .lnk.sm{font-size:8.5px;letter-spacing:.22em;padding:8px 13px;white-space:nowrap} #deck .lnk.sm:before,#deck .lnk.sm:after{width:5px} #deck .lnk.on{color:var(--phos)} #deck .lnk.on:before,#deck .lnk.on:after{border-color:rgba(0,255,209,.55)} #deck .lnk.kill{color:var(--mag)} #deck .lnk.kill:before,#deck .lnk.kill:after{border-color:rgba(255,47,176,.34)} #deck .lnk.kill:hover{color:var(--mag)} #deck .lnk.kill:hover:before,#deck .lnk.kill:hover:after{border-color:rgba(255,47,176,.7)} #deck .lnk:hover:before,#deck .lnk:hover:after{border-color:rgba(0,255,209,.5)} #deck .lnk:hover:before,#deck .lnk:hover:after{border-color:var(--phos);box-shadow:none} #deck .route{position:relative;font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase; color:#02110e;background:var(--phos);padding:11px 22px;margin-top:0; box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 24px rgba(0,255,209,.36)} #deck .acts{align-items:stretch} #deck .acts .route,#deck .acts .lnk{display:inline-flex;align-items:center;line-height:1} #deck .say{margin-top:24px;font:12px/1.9 var(--mono);color:var(--haze);max-width:54ch} #deck .say b{color:#fff;font-weight:400} #deck .rows{margin-top:26px} #deck .rw{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair)} #deck .rw:first-child{border-top:1px solid var(--hair2)} #deck .rw span{font:9px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--steel)} #deck .rw b{margin-left:auto;font:300 13px var(--num);color:#eef4f6} #deck .rw b.ph{color:var(--phos);text-shadow:0 0 8px rgba(0,255,209,.45)} #deck .rw.act{cursor:pointer} #deck .rw .ar{font-style:normal;color:var(--dim);margin-left:8px} #deck .track{margin-top:24px;display:flex;gap:24px} #deck .track>div{flex:1 1 0;min-width:0;padding-top:13px;border-top:1px solid var(--hair)} #deck .track>div.on{border-top-color:var(--phos);box-shadow:0 -2px 12px -6px rgba(0,255,209,.8)} #deck .track .m{font:9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--steel)} #deck .track>div.on .m{color:var(--phos)} #deck .track .d{margin-top:5px;font:10px var(--mono);color:var(--dim)} /* the cycle head */ #deck .clead{font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--steel)} #deck .cyc .dist{margin-top:14px} #deck .csub{margin-top:14px;font:11px var(--mono);color:var(--haze)} #deck .csub b{color:var(--phos);font-weight:400} /* the swipe hint,left edge */ #deck .swipe{position:fixed;right:10px;left:auto;top:50%;z-index:56;display:flex;cursor:pointer;background:none; align-items:center;gap:10px;pointer-events:auto;writing-mode:vertical-rl;text-orientation:mixed; transform:translateY(-50%);padding:8px 6px} #deck .swipe i{display:block;width:1px;height:52px;background:linear-gradient(180deg,transparent,var(--phos),transparent); opacity:.55;animation:dswp 3.4s ease-in-out infinite} @keyframes dswp{0%,100%{opacity:.28;transform:translateY(-6px)}50%{opacity:.85;transform:translateY(6px)}} #deck .swipe span{font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--dim);transition:.2s} #deck .swipe:hover span{color:var(--phos)} @media(min-width:900px){#deck .swipe{right:16px}} /* the callsign in the corner is the account */ #deck #hw{cursor:pointer;pointer-events:auto;transition:.2s; font:9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);padding:0} #deck #hw:hover{color:var(--phos)} .hud{pointer-events:none} #deck #dwin{position:fixed;inset:0;z-index:95;background:rgba(4,7,10,.985);opacity:0;visibility:hidden; transform:translateY(14px);transition:.38s var(--ease);overflow-y:auto} #deck #dwin.on{opacity:1;visibility:visible;transform:none} #deck .dwin-in{max-width:560px;margin:0 auto;padding:56px var(--pad) 44px} #deck .dwh{display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding-bottom:14px;box-shadow:inset 0 -1px 0 var(--hair)} #deck .dwh span{font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--phos)} #deck .dwh button{font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase; color:var(--haze);background:none;padding:6px 0} #deck .dwh button:hover{color:var(--phos)} #deck .lnrow{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:18px; align-items:baseline;width:100%;text-align:left;padding:16px 0 16px 14px;background:none; box-shadow:inset 0 -1px 0 var(--hair);cursor:pointer;transition:background .14s} #deck .lnrow:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px; background:transparent;transition:.15s} #deck .lnrow:hover{background:rgba(255,255,255,.018)} #deck .lnrow:hover:before{background:var(--phos);box-shadow:0 0 8px var(--phos)} #deck .lnrow .lh{font:13px var(--mono);color:#fff} #deck .lnrow .lv,#deck .lnrow .la{font:300 13px var(--num);color:#eef4f6;text-align:right;white-space:nowrap} #deck .lnrow i{display:block;margin-top:5px;font:8.5px var(--mono);letter-spacing:.22em; text-transform:uppercase;color:var(--dim);font-style:normal} #deck #dwBody .pdec{margin-top:4px} #deck #dwBody .pch:first-child{margin-top:22px} #deck #mask{position:fixed;inset:0;z-index:97;background:rgba(4,7,10,.985);opacity:0;visibility:hidden; transform:translateY(14px);transition:.38s var(--ease);overflow-y:auto} #deck #mask.on{opacity:1;visibility:visible;transform:none} #deck .mask-in{max-width:560px;margin:0 auto;padding:56px var(--pad) 44px} #deck .fld{margin-top:24px} #deck .fld label{display:block;font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--steel)} #deck .fld input,#deck .fld select{width:100%;margin-top:9px;background:none;border:0; box-shadow:inset 0 -1px 0 var(--hair);color:#fff;font:14px var(--mono);letter-spacing:.04em;padding:8px 0} #deck .fld input:focus,#deck .fld select:focus{outline:none;box-shadow:inset 0 -1px 0 var(--phos)} #deck .fld select{color-scheme:dark;cursor:pointer;-webkit-appearance:none;appearance:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9b6be' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center; padding-right:18px} #deck .fld select option{background:#070b0f;color:#e9f1f3} #deck .fld .hint{margin-top:8px;font:9.5px/1.6 var(--mono);color:var(--dim)} #deck .f2{display:grid;grid-template-columns:1fr 1fr;gap:20px} /* the mask's actions pair exactly as stage one does */ #deck .mkact{margin-top:34px;display:flex;gap:24px;align-items:stretch;flex-wrap:wrap} #deck .mkact .route,#deck .mkact .lnk{display:inline-flex;align-items:center;line-height:1;margin:0} #deck .route{position:relative;overflow:hidden} #deck .route .sweep{position:absolute;top:0;bottom:0;width:36%;left:-40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)} #deck .route.sending .sweep{animation:carrier .62s linear} @keyframes carrier{to{left:120%}} #deck .route.sent{background:none;color:var(--phos);box-shadow:inset 0 0 0 1px rgba(0,255,209,.5)} #deck #dwBody .pch{display:flex;align-items:center;justify-content:space-between;gap:12px} #deck #dwBody .sw{position:relative;width:38px;height:16px;border-radius:9px; background:none;box-shadow:inset 0 0 0 1px rgba(150,180,200,.35)} #deck #dwBody .sw i{position:absolute;top:3px;left:3px;width:10px;height:10px; background:rgba(180,205,215,.55);transition:.24s var(--ease)} #deck #dwBody .sw.on{box-shadow:inset 0 0 0 1px rgba(0,255,209,.6)} #deck #dwBody .sw.on i{left:21px;background:var(--phos);box-shadow:0 0 10px var(--phos)} /* the row head is a grid,so nothing can be squeezed into wrapping */ #deck .dwsay{margin-top:26px;font:12px/1.9 var(--mono);color:var(--haze)} #deck .dwact{margin-top:30px;display:flex;justify-content:flex-start;align-items:center} #deck #dwBody .dwact .lnk{flex:0 0 auto;margin:0} #deck #dwBody .pch .lnk.sm{margin:0} #deck #dwBody .drow2 .lnk.sm{margin:0} @media(max-width:899px){ #deck #dwBody .dwact .lnk,#deck #dwBody .pch .lnk.sm,#deck #dwBody .drow2 .lnk.sm{margin:0} } #deck #acct{position:fixed;inset:0;z-index:95;background:rgba(4,7,10,.985);opacity:0;visibility:hidden; transform:translateY(14px);transition:.38s var(--ease);overflow-y:auto} #deck #acct.on{opacity:1;visibility:visible;transform:none} #deck .ac{max-width:560px;margin:0 auto;padding:56px var(--pad) 44px} #deck .ach{display:flex;align-items:baseline;justify-content:space-between;gap:14px} #deck .ach span{font:9px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--steel)} #deck .ach button{letter-spacing:.3em;text-transform:uppercase;color:var(--haze);padding:8px 0} #deck .ach button:hover{color:var(--phos)} #deck .fld{margin-top:28px} #deck .fld .l{font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--steel)} #deck .fld .i{margin-top:11px;padding-bottom:11px;border-bottom:1px solid var(--hair2); font:300 15px var(--mono);letter-spacing:.08em;color:#fff} #deck .fld .i.mut{color:var(--dim)} #deck .fld .h{margin-top:9px;font:10px/1.7 var(--mono);color:var(--dim)} #deck #cap{position:fixed;left:var(--pad);right:var(--pad);bottom:44px;z-index:55;text-align:center; font:10px/1.7 var(--mono);color:var(--dim);pointer-events:none} #deck #cap b{color:var(--haze);font-weight:400} /* ===== the card,to the homepage's measurements ===== */ @media(min-width:900px){ #deck #idc{width:306px;aspect-ratio:5/7.4} #deck #idc .f>div:first-child{position:absolute;left:24px;top:56px;z-index:2} #deck #idc .cs{font:300 29px var(--mono);letter-spacing:.2em} #deck #idc .cl{margin-top:9px;font:9px var(--mono);letter-spacing:.32em} #deck #idc .band{position:absolute;left:0;right:0;top:146px;height:126px;padding:0 24px} #deck #idc .inc{position:absolute;left:24px;top:294px;bottom:auto;margin:0} #deck #idc .chin{position:absolute;left:24px;right:24px;bottom:22px;top:auto} #deck #idc .idnk{width:44px;height:44px} #deck } /* ===== the lower block,five treatments ===== */ #deck .lw{margin-top:28px} #deck .secl i{margin-left:26px;font-style:normal;color:var(--steel);opacity:1} #deck .secl b{margin-left:14px;font:500 13px var(--num);letter-spacing:.04em;color:#fff;opacity:1;text-shadow:none} #deck .secl{margin-top:26px;font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--phos);opacity:.72} #deck .pr{display:grid;grid-template-columns:1fr 1fr;gap:18px} #deck .pi{text-align:left;padding:14px 0;border-top:1px solid var(--hair2);background:none} #deck .pi span{display:block;font:9px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--steel)} #deck .pi b{display:block;margin-top:7px;font:300 14px var(--num);color:#eef4f6} #deck button.pi{cursor:pointer}#deck button.pi:hover b{color:var(--phos)} /* N1 · VAULT */ #deck .m1 .vault{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(min-width:900px){#deck .m1 .vault{grid-template-columns:repeat(4,1fr)}} #deck .m1 .vp{position:relative;padding:15px 13px 13px;background:rgba(255,255,255,.016); box-shadow:inset 0 0 0 1px rgba(150,180,200,.13)} #deck .m1 .vp .seal{position:absolute;left:13px;right:13px;top:0;height:1px;background:rgba(150,180,200,.26)} #deck .m1 .vp.next{box-shadow:inset 0 0 0 1px rgba(0,255,209,.5)} #deck .m1 .vp.next .seal{background:var(--phos);box-shadow:0 0 10px rgba(0,255,209,.9)} #deck .m1 .vp.open{background:rgba(0,255,209,.045)} #deck .m1 .vp.open .seal{background:rgba(0,255,209,.5)} #deck .m1 .vm{font:300 15px var(--num);color:#eef4f6} #deck .m1 .vp.next .vm{color:var(--phos);text-shadow:0 0 8px rgba(0,255,209,.5)} #deck .m1 .vd{margin-top:5px;font:9px/1.45 var(--mono);color:var(--dim)} #deck .m1 .vs{margin-top:9px;font:9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--steel)} #deck .m1 .vp.open .vs{color:rgba(0,255,209,.72)}#deck .m1 .vp.next .vs{color:var(--phos)} /* ===== mobile head · A · LEFT ===== */ @media(max-width:899px){ #deck .mh{text-align:left} #deck .mh .fireline{cursor:pointer;padding-bottom:16px;border-bottom:1px solid var(--hair2);margin-bottom:26px} #deck .mh .fk{font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--steel)} #deck .mh .fv{margin-top:9px;font:300 19px var(--mono);color:#fff;text-shadow:0 0 8px rgba(238,242,248,.55)} #deck .mh .fsb{margin-top:6px;font:9.5px var(--mono);color:var(--dim)} #deck .mh .clead{font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--steel)} #deck .mh .dist{margin-top:13px;font-size:clamp(44px,12vw,58px)} #deck .mh .csub{margin-top:13px;font:11px var(--mono);color:var(--haze)} #deck } @media(min-width:900px){.mh{display:none}#deck } @media(max-width:899px){ #deck .deskcyc{display:none} #deck #stage{padding-bottom:40px} #deck .col{text-align:left} #deck .col .acts{justify-content:flex-start;margin-top:24px;gap:22px} #deck .col .say{margin-top:24px;max-width:none;text-align:left} #deck .m1 .vault{grid-template-columns:1fr 1fr;gap:10px} /* the registry door,horizontal,clear of the state switcher */ #deck .swipe{position:fixed;left:0;right:0;bottom:68px;top:auto;z-index:57; writing-mode:horizontal-tb;transform:none;flex-direction:row;gap:9px; padding:10px var(--pad);display:flex;justify-content:flex-end; background:linear-gradient(0deg,var(--void) 62%,rgba(5,8,12,.92))} #deck .swipe i{width:20px;height:1px;background:linear-gradient(90deg,transparent,var(--phos))} } /* ---------- the four stages ---------- */ #deck #sw{position:fixed;top:20px;left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none} #deck #sw button{pointer-events:auto;font:9px var(--mono);letter-spacing:.24em;color:var(--dim); padding:8px 11px;border-bottom:1px solid transparent;transition:.2s} #deck #sw button.on{color:var(--white);border-bottom-color:var(--phos)} @media(max-width:899px){#deck #sw{top:auto;bottom:16px; background:linear-gradient(0deg,var(--void) 74%,rgba(5,8,12,.9) 92%,transparent);padding:14px 0 6px} #deck #sw button{padding:8px 7px;letter-spacing:.18em}} /* ---------- corner text : matches the doors page ---------- */ .hud{font:10px/1 var(--mono);letter-spacing:.22em} #deck #hw{font:10px/1 var(--mono);letter-spacing:.22em} body.ondesk>.hud:not(.dk){opacity:0!important;visibility:hidden!important;pointer-events:none} /* ---------- the milestone window : the sheet,as the desk file styles it ---------- */ /* ===================== THE REGISTRY — the floor right of the desk ===================== */ #deck #marks{position:fixed;left:0;right:0;bottom:52px;z-index:45;display:flex; justify-content:center;gap:16px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease)} #deck.on #marks{opacity:1;visibility:visible} #deck #marks button{position:relative;width:30px;height:30px;display:flex; align-items:center;justify-content:center;background:none} #deck #marks i{width:5px;height:5px;border-radius:50%;background:rgba(138,151,163,.4); transition:.3s var(--ease)} #deck #marks button[aria-pressed="true"] i{background:var(--white);transform:scale(1.5); box-shadow:0 0 10px rgba(233,241,243,.8)} #deck.rack #stage,#deck.rack #reg{filter:brightness(1.35) blur(.6px)} #deck.land #stage,#deck.land #reg{animation:landing .32s ease-out} @media(max-width:899px){#deck #marks{bottom:112px}} #deck #reg{position:fixed;inset:0;z-index:14;opacity:0;visibility:hidden;transform:translateX(26px); transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s;overflow:hidden} #deck.reg #reg{opacity:1;visibility:visible;transform:none; transition:opacity .5s var(--ease),transform .5s var(--ease)} #deck.reg #stage{opacity:0!important;transform:translateX(-22px);pointer-events:none} /* a profile opened from the desk: the registry carries it,but stays unseen */ #deck.dprof #reg{opacity:1;visibility:visible;transform:none;z-index:96} #deck.dprof #reg #field,#deck.dprof #reg #hud,#deck.dprof #reg #lvl{opacity:0;visibility:hidden} #deck #reg #hud{display:none} body.prof .hud,body.prof #deck #sw{opacity:0;pointer-events:none} #deck #reg .pbk{position:fixed;right:var(--pad);top:18px;z-index:96; font:10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--haze);cursor:pointer} #deck #reg .pbk:hover{color:var(--phos)} #deck.reg #sw{opacity:0;pointer-events:none} #deck.reg .swipe{display:none} #deck #sw{transition:opacity .4s var(--ease)} .hud{transition:opacity .4s var(--ease)} #deck.reg .swipe{opacity:0;pointer-events:none} #deck #reg .rback{position:fixed;left:10px;top:50%;z-index:95;display:flex;cursor:pointer; align-items:center;gap:10px;writing-mode:vertical-rl;text-orientation:mixed; transform:translateY(-50%) rotate(180deg);background:none;padding:8px 6px} #deck #reg .rback i{display:block;width:1px;height:52px; background:linear-gradient(180deg,transparent,var(--phos),transparent);opacity:.55} #deck #reg .rback span{font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase; color:var(--dim);transition:.2s} #deck #reg .rback:hover span{color:var(--phos)} @media(min-width:900px){#deck #reg .rback{left:16px}} @media(max-width:899px){ #reg .rback{position:fixed;left:0;right:0;bottom:68px;top:auto;z-index:95; writing-mode:horizontal-tb;transform:none;flex-direction:row;gap:9px; padding:10px var(--pad);justify-content:flex-start; background:linear-gradient(0deg,var(--void) 62%,rgba(5,8,12,.92))} #reg .rback i{width:20px;height:1px;background:linear-gradient(90deg,var(--phos),transparent)} } :root{ --void:#05080c;--sink:#03050a;--white:#e9f1f3;--ink:#c3ced6;--haze:#a9b6be;--steel:#8a97a3;--dim:#6e7d87; --line:rgba(150,180,200,.10);--num:'Space Grotesk',sans-serif;--phos:#00ffd1;--phos-d:rgba(0,255,209,.55);--mag:#ff2fb0;--amber:#ffb44a; --hair:rgba(150,180,200,.11);--hair2:rgba(180,205,215,.30); --display:'Space Grotesk',-apple-system,sans-serif;--mono:'JetBrains Mono',Consolas,monospace; --bloomW:0 0 1px rgba(255,255,255,.7),0 0 14px rgba(0,255,209,.28); --bloomS:0 0 5px rgba(233,241,243,.75),0 0 16px rgba(215,232,235,.35); --pad:20px;--ro:152px;--ease:cubic-bezier(.2,.8,.2,1)} @media(min-width:820px){:root{--pad:44px;--ro:190px}} *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} #reg,#reg{height:100%;background:var(--void);color:var(--white);font-family:var(--mono);overflow:hidden} #reg #field{position:fixed;inset:0;z-index:0;background:var(--void)} /* ---------- HUD chrome ---------- */ #reg #hud{position:fixed;left:var(--pad);right:var(--pad);top:16px;z-index:40;display:flex; justify-content:flex-end;align-items:baseline;font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase} #reg #hud .l{color:var(--haze)}#hud .r{color:var(--dim)}#hud .r b{color:var(--phos);font-weight:400} /* ---------- the filter rail (ported from the lens mock) ---------- */ #reg #lvl{position:fixed;inset:46px 0 0 0;z-index:10} #reg #ctl{position:absolute;top:24px;left:0;right:0;z-index:40;display:flex;justify-content:center; flex-wrap:wrap;gap:0;align-items:center} #reg #ctl button{background:none;border:0;cursor:pointer;font:9px/1 var(--mono);letter-spacing:.2em; text-transform:uppercase;color:var(--dim);padding:9px 11px;transition:color .25s;align-self:center} #reg #ctl button:hover{color:var(--haze)} #reg #ctl button.on{color:var(--phos);text-shadow:0 0 9px rgba(0,255,209,.5)} #reg #ctl .sep{width:1px;height:12px;background:var(--hair2);align-self:center;margin:0 6px} @media(max-width:819px){ #reg #ctl{flex-wrap:nowrap} #reg #ctl button{padding:9px 6px;letter-spacing:.11em} #reg #ctl .sep{margin:0 3px}} #reg #ctl button.find{color:var(--haze)} #reg #ctl button.find:hover{color:var(--phos)} /* ================= REGISTRY · ARCHIVE READER (real) ================= */ #reg #arwrap{position:absolute;top:52px;bottom:16px;left:0;right:10px} @media(min-width:820px){#reg #arwrap{top:56px;bottom:18px;left:50%;right:auto;width:min(940px,92%);transform:translateX(-50%)}}#reg #arShaft{position:absolute;left:var(--pad);right:calc(var(--pad) + var(--ro) + 30px);top:14px;bottom:34px;overflow:hidden;cursor:grab;z-index:5} #reg #arShaft.drag{cursor:grabbing} #reg #arStrip{position:absolute;left:0;right:0;top:0;will-change:transform} #reg .arRow{position:absolute;left:0;right:0;height:22px;display:flex;align-items:center;gap:12px; font:9px var(--mono);letter-spacing:.14em;color:rgba(138,151,163,.62);white-space:nowrap;overflow:hidden} #reg .arRow .rk{width:26px;color:rgba(138,151,163,.85);flex:none} #reg .arRow .hd{width:104px;flex:none;color:rgba(195,206,214,.9);letter-spacing:.1em} #reg .arRow .dt{flex:1;overflow:hidden;color:rgba(138,151,163,.72);font-size:9px;letter-spacing:.06em} #reg .arRow .vb{width:70px;height:2px;background:rgba(150,180,200,.1);position:relative;flex:none} #reg .arRow .vb i{position:absolute;left:0;top:0;bottom:0;background:rgba(0,255,209,.45)} #reg .arRow.main.hot .hd{color:rgba(220,250,245,.9)} #reg .arRow.main.hot .vb i{background:rgba(0,255,209,.7);box-shadow:0 0 6px rgba(0,255,209,.35)} #reg .arRow.main.cool .hd{color:rgba(255,180,74,.72)} #reg .arRow.main.cool .vb i{background:rgba(255,180,74,.55)} #reg .arRow.main.cool{animation:arCoolrow 2.3s steps(2) infinite} @keyframes arCoolrow{0%,100%{opacity:1}46%{opacity:1}52%{opacity:.5}58%{opacity:1}} #reg .arRow.main.dark .hd{color:rgba(138,151,163,.6)} #reg .arRow.main.dark .vb i{background:rgba(138,151,163,.42)} #reg .arRow.sub{color:rgba(96,110,120,.26);font-size:8px} #reg .arRow.sub .dt{color:rgba(96,110,120,.26);font-size:8px} #reg .arRow .youtab{position:absolute;left:-24px;width:14px;height:12px;background:var(--phos); box-shadow:0 0 10px rgba(0,255,209,.6)} #reg .arRow.fresh .hd:after{content:"· NEW";color:var(--amber);font-size:7px;letter-spacing:.2em;margin-left:8px; animation:blink 1.6s steps(1) infinite} @keyframes blink{50%{opacity:.25}} /* the reader scan band across the middle — the lens */ #reg #arReader{position:absolute;left:calc(var(--pad) - 6px);right:calc(var(--pad) + var(--ro) + 30px);top:50%;height:76px; transform:translateY(-50%);z-index:8;pointer-events:none} #reg #arReader .bz{position:absolute;left:0;right:0;height:1px;background:rgba(190,225,235,.42); box-shadow:0 0 12px rgba(150,220,235,.25)} #reg #arReader .bz.t{top:0}#arReader .bz.b{bottom:0} #reg #arReader .nt{position:absolute;width:1px;height:6px;background:rgba(190,225,235,.5)} #reg #arReader .lbl{position:absolute;right:6px;top:-15px;font:8px var(--mono);letter-spacing:.3em;color:var(--haze)} #reg #arReader:before{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(150,180,200,.03),rgba(170,200,215,.055) 50%,rgba(150,180,200,.03))} #reg #arLens{position:absolute;left:var(--pad);right:calc(var(--pad) + var(--ro) + 30px);top:50%;height:38px;transform:translateY(-50%); overflow:hidden;z-index:9;touch-action:pan-y; background:linear-gradient(180deg,rgba(5,8,12,.95),rgba(7,11,15,.99) 50%,rgba(5,8,12,.95))} #reg #arLensStrip{position:absolute;left:0;right:0;top:0;transform-origin:0 0;will-change:transform} #reg #arLens .arRow .hd{color:rgba(205,242,237,.96);font-size:11px} @media(max-width:819px){#reg #arLens .arRow .hd{font-size:9.5px;width:auto;max-width:56%}} @media(min-width:820px){ #reg #arLens{height:52px} #reg #arReader{height:104px} } #reg #arLens .arRow .dt{color:rgba(169,182,190,.78)} #reg #arLens .arRow.main .rk{color:rgba(150,180,200,.9)} #reg #arLens .arRow.sub{display:none} /* the readout — live panel for whoever is in the lens. mobile: shaft is a narrow left rail,readout takes the right column */ #reg #arReadout{position:absolute;right:var(--pad);top:8%;width:var(--ro);z-index:10} @media(min-width:820px){#reg #arReadout{top:12%}} #reg #arRoH{font:500 clamp(20px,5.5vw,30px)/1.05 var(--display);letter-spacing:-.01em;min-height:32px;color:var(--white);text-shadow:var(--bloomW)} #reg #arRoSt{font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--phos);margin:8px 0 16px} #reg .arRoL{font:8.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-top:11px} #reg .arRoV{font:300 clamp(16px,4.4vw,24px)/1.1 var(--display);letter-spacing:-.01em;margin-top:3px;color:var(--ink)} #reg .arRoV b{font-weight:500;color:var(--phos)}/* rank gauge rail */ #reg #arGauge{position:absolute;right:calc(var(--pad) + var(--ro) + 14px);top:8%;bottom:12%;width:1px;background:rgba(150,180,200,.14);z-index:7} #reg #arGauge .gn{position:absolute;left:-2px;width:5px;height:1px;background:rgba(125,138,148,.5)} #reg #arGauge .gn.you{left:-4px;width:9px;height:2px;background:var(--phos);box-shadow:0 0 8px rgba(0,255,209,.6)} #reg #arGauge .gn.cool{background:rgba(255,180,74,.6)} #reg #arGauge #arGpos{position:absolute;left:-5px;width:11px;height:1px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.5);transition:top .05s linear} #reg #arGauge .glbl{display:none;position:absolute;font:9px var(--mono);letter-spacing:.24em;color:var(--steel);left:9px} @media(min-width:820px){#reg #arGauge .glbl{display:block}} /* pull drawer — full record */ #reg #arRoClick{cursor:pointer} #reg #arRoClick:hover #arRoH{text-shadow:0 0 1px #fff,0 0 22px rgba(0,255,209,.4)} #reg #arOpen{margin-top:20px;font:8.5px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--phos);opacity:.78;transition:opacity .3s} #reg #arRoClick:hover #arOpen{opacity:1} /* ===== PROFILE — clean · dark · neon-white,a whisper of green ===== */ #reg #prof{position:fixed;inset:0;z-index:90;background:#04070a;opacity:0;visibility:hidden;transform:translateY(16px);transition:.45s var(--ease);overflow-y:auto} #reg #prof.on{opacity:1;visibility:visible;transform:none} #reg .pfw{width:min(500px,100%);margin:0 auto;padding:64px var(--pad) 90px;text-align:center} #reg .pbk{position:fixed;top:16px;right:var(--pad);z-index:95;font:9px/1 var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--dim);cursor:pointer;padding:8px 0;transition:color .25s} #reg .pbk:hover{color:var(--phos)} #reg .pname{padding-top:8px;font:300 clamp(26px,7.4vw,36px) var(--mono);letter-spacing:.3em; color:var(--white);text-shadow:var(--bloomS)} #reg .pclr{margin-top:9px;font:9px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--dim)} #reg .pline{margin-top:26px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;font:12px var(--mono);letter-spacing:.06em;color:var(--white)} #reg .pline i{font-style:normal;color:var(--dim);letter-spacing:.16em;text-transform:uppercase;font-size:8.5px;margin-left:6px} #reg .pline i.pre{margin-left:0;margin-right:7px} #reg .pline .cp{color:var(--phos);text-transform:uppercase;font-size:9px;letter-spacing:.24em} #reg .pline .dimline{color:var(--dim);text-transform:uppercase;font-size:9px;letter-spacing:.24em} #reg .pch,#deck #dwBody .pch{margin:48px 0 4px;font:9px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--steel);padding-bottom:14px;border-bottom:1px solid var(--hair)} #reg .pdec,#deck #dwBody .pdec{text-align:left} #reg .pa{margin-top:30px} #reg .route{position:relative;display:inline-flex;align-items:center;line-height:1;cursor:pointer; font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase; color:#02110e;background:var(--phos);padding:11px 22px; box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 24px rgba(0,255,209,.36);transition:.2s} #reg .route:hover{box-shadow:0 0 0 1px rgba(0,255,209,.7),0 0 30px rgba(0,255,209,.5)} /* shared spec grid (clean,dark) */ #reg .spec,#deck #dwBody .spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);margin-top:14px} #reg .spec .sp,#deck #dwBody .spec .sp{background:#04070a;padding:11px 13px;display:flex;flex-direction:column} /* CORE and STRONG LONG sit on the ticker's own left edge */ #deck #dwBody .spec .sp:nth-child(odd),#reg #prof .spec .sp:nth-child(odd){padding-left:0} #reg .spec .sp .l,#deck #dwBody .spec .sp .l{font:8.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--steel)} #reg .spec .sp .v,#deck #dwBody .spec .sp .v{margin-top:6px;font:300 14px var(--display);letter-spacing:.04em;color:#eef4f6} #reg .spec .sp .v.p,#deck #dwBody .spec .sp .v.p{color:var(--phos)} /* --- V1 · HAIRLINE (editorial ledger) --- */ #reg #prof .drow,#deck #dwBody .drow{border-bottom:1px solid var(--hair)} #reg #prof .dhead,#deck #dwBody .dhead{display:flex;align-items:baseline;gap:14px;padding:18px 0;cursor:pointer} #reg #prof .dpair,#deck #dwBody .dpair{font:300 15px var(--display);letter-spacing:.08em;color:#fff} #reg #prof .dpair i,#deck #dwBody .dpair i{color:var(--dim);font-style:normal;margin:0 3px} #reg #prof .dtf,#deck #dwBody .dtf{font:8.5px var(--mono);letter-spacing:.16em;color:var(--steel)} #reg #prof .cnt,#deck #dwBody .cnt{margin-left:auto;font:9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--steel);white-space:nowrap} #reg #prof .cnt b,#deck #dwBody .cnt b{color:var(--white);font-weight:400;letter-spacing:.06em} #reg #prof .cnt b.tick,#deck #dwBody .cnt b.tick{display:inline-block;animation:talTick .34s var(--ease)} @keyframes talTick{0%{transform:translateY(-4px);opacity:.3}100%{transform:none;opacity:1}} #reg #prof .lnk,#deck #dwBody .lnk{position:relative;flex:none;margin-left:26px;cursor:pointer;background:none; font:9px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--haze); padding:11px 20px;transition:.2s;white-space:nowrap} #reg #prof .lnk:before,#reg #prof .lnk:after,#deck #dwBody .lnk:before,#deck #dwBody .lnk:after{content:"";position:absolute;top:0;bottom:0;width:7px; border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);transition:.2s} #reg #prof .lnk:before,#deck #dwBody .lnk:before{left:0;border-left:1px solid var(--hair2)} #reg #prof .lnk:after,#deck #dwBody .lnk:after{right:0;border-right:1px solid var(--hair2)} #reg #prof .lnk:hover,#deck #dwBody .lnk:hover{color:var(--phos)} #reg #prof .lnk:hover:before,#reg #prof .lnk:hover:after,#deck #dwBody .lnk:hover:before,#deck #dwBody .lnk:hover:after{border-color:var(--phos)} #reg #prof .lnk.on,#deck #dwBody .lnk.on{color:var(--phos)} #reg #prof .lnk.on:before,#reg #prof .lnk.on:after,#deck #dwBody .lnk.on:before,#deck #dwBody .lnk.on:after{border-color:var(--phos-d)} @media(max-width:819px){ #reg #prof .dhead,#deck #dwBody .dhead{flex-wrap:wrap} #reg #prof .cnt,#deck #dwBody .cnt{margin-left:auto} #reg #prof .lnk,#deck #dwBody .lnk{margin-left:auto;margin-top:2px;padding:11px 18px}} #reg #prof .dbody,#deck #dwBody .dbody{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)} #reg #prof .drow.open .dbody,#deck #dwBody .drow.open .dbody{max-height:240px} #reg #prof .ddesc,#deck #dwBody .ddesc{padding:2px 0 4px;font:10.5px/1.6 var(--mono);color:var(--dim)} /* F · one line — pair up,everything else beneath it */ #deck #dwBody .drow,#reg #prof .drow{padding:17px 0;box-shadow:inset 0 -1px 0 var(--hair);cursor:pointer} #deck #dwBody .dhead,#reg #prof .dhead{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center} /* coin and side get their own tracks,so sides line up and braces hang right */ #deck #dwBody .dpr,#reg #prof .dpr{display:block;white-space:nowrap} #deck #dwBody .dpr>span+span,#reg #prof .dpr>span+span{margin-left:.45em} #deck #dwBody .dhead>.lnk,#reg #prof .dhead>.lnk{justify-self:end;margin:0} @media(max-width:899px){ #deck #dwBody .dhead>.lnk,#reg #prof .dhead>.lnk{margin:0} } #deck #dwBody .dpair,#reg #prof .dpair{white-space:nowrap;font:15px var(--mono);color:#fff;letter-spacing:.01em} #deck #dwBody .dpair .s,#reg #prof .dpair .s{color:var(--phos)} #deck #dwBody .dpair .s.dsh,#reg #prof .dpair .s.dsh{color:var(--mag)} #deck #dwBody .dmeta,#reg #prof .dmeta{margin-top:7px;font:9px var(--mono);letter-spacing:.06em; color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #deck #dwBody .dmeta b,#reg #prof .dmeta b{color:var(--haze);font-weight:400} @media(max-width:819px){ /* one boundary: shaft | gauge | readout,in that order,nothing overlapping */ #reg #arShaft,#reg #arLens,#reg #arReader{right:calc(38% + 26px)} #reg #arGauge{right:calc(38% + 14px)} #reg #arReadout{left:62%;right:12px;width:auto} } /* ===================== THE ENGINE — the floor left of the desk ===================== */ #deck #eng{position:fixed;inset:0;z-index:14;overflow-x:hidden;opacity:0;visibility:hidden;transform:translateX(-26px); transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s; overflow-y:auto;-webkit-overflow-scrolling:touch;padding:52px 0 72px} #deck.eng #eng{opacity:1;visibility:visible;transform:none; transition:opacity .5s var(--ease),transform .5s var(--ease)} #deck.eng #stage{opacity:0!important;transform:translateX(22px);pointer-events:none} #deck.eng #sw,#deck.eng .swipe{opacity:0;pointer-events:none} /* ---------- the engine page ---------- */ #deck #eng{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:52px 0 72px;transition:opacity .4s var(--ease),transform .4s var(--ease)} #deck body.deep #eng{opacity:0;transform:translateX(-18px);pointer-events:none} #deck .ehead{display:flex;align-items:baseline;gap:14px;padding:0 var(--pad)} #deck .ehead .t{font:10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#fff} #deck .ehead .s{font:9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} #deck .ehead .s b{color:var(--phos);font-weight:400} #deck .etf{margin-left:auto;display:flex;gap:2px} #deck .etf button{font:8.5px var(--mono);letter-spacing:.22em;color:var(--dim);padding:6px 10px;transition:.2s} #deck .etf button.on{color:#fff;box-shadow:inset 0 -1px 0 var(--phos)} #eng .crow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:34px var(--pad) 0} #eng .modes{display:flex;align-items:center;gap:16px} #eng .mode{display:flex;align-items:center;gap:7px;font:400 9px var(--mono);letter-spacing:.22em; padding:6px 0;color:var(--dim);transition:.18s;text-transform:uppercase} #eng .mode i{width:5px;height:5px;border-radius:50%;flex:none;background:transparent; box-shadow:inset 0 0 0 1px rgba(150,180,200,.3);transition:.18s} #eng .mode.on{color:#fff} #eng .mode.on i{background:var(--phos);box-shadow:0 0 8px var(--phos)} #eng .periods{margin-left:auto;display:flex;align-items:flex-end;overflow-x:auto;scrollbar-width:none} #eng .per{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none; font:400 9px var(--mono);letter-spacing:.16em;padding:6px 9px;color:var(--dim);transition:.18s} #eng .per span{display:block;width:1px;height:5px;background:rgba(150,180,200,.26);transition:.18s} #eng .per.on{color:var(--phos)} #eng .per.on span{height:9px;background:var(--phos);box-shadow:0 0 7px var(--phos)} body.y1986 #eng .mode.on i,body.y1986 #eng .per.on span{background:#ffc46e!important;box-shadow:0 0 8px rgba(255,196,110,.7)!important} body.y1986 #eng .per.on{color:#ffc46e!important} #deck .keys{display:flex;flex-wrap:wrap;gap:8px 20px;padding:16px var(--pad) 0} #deck .keys span{display:flex;align-items:center;gap:8px;font:8.5px var(--mono);letter-spacing:.22em; text-transform:uppercase;color:var(--dim);white-space:nowrap} #deck .keys i{width:9px;height:3px;border-radius:2px;flex:none} #deck .keys .sig i{background:var(--phos);box-shadow:0 0 8px var(--phos)} #deck .keys .cal i{background:var(--amber);box-shadow:0 0 8px rgba(232,213,160,.7)} #deck .keys .smf i{background:var(--mag);box-shadow:0 0 8px rgba(255,47,176,.7)} #deck .chart{position:relative;height:46vh;min-height:280px;margin:0 var(--pad)} #deck .glance{position:absolute;z-index:6;pointer-events:none;opacity:0;transform:translate(-50%,-118%); padding:8px 11px;background:rgba(4,7,10,.94);box-shadow:inset 0 0 0 1px var(--hair2); white-space:nowrap;transition:opacity .16s} #deck .glance.on{opacity:1} #deck .glance .r1{display:flex;align-items:baseline;gap:9px} #deck .glance .px{font:12px var(--mono);color:#fff} #deck .glance .r2{margin-top:5px;font:8.5px var(--mono);letter-spacing:.06em;color:var(--dim)} #deck .ty{font:8.5px var(--mono);letter-spacing:.22em;text-transform:uppercase} #deck .ty.sig{color:var(--phos)}.ty.cal{color:var(--amber)}.ty.smf{color:var(--mag)} #deck .sd.sig{color:var(--phos)}#deck .sd.cal{color:var(--amber)}#deck .sd.smf{color:var(--mag)} #deck .sd{font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase} #deck .sd.l,#deck .sd.s{color:inherit} /* ---------- the ledger ---------- */ #deck .led{padding:26px var(--pad) 40px} #deck .ledh{display:flex;align-items:baseline;justify-content:space-between;padding:20px 0 12px; box-shadow:inset 0 -1px 0 var(--hair)} #deck .ledh span{font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--phos)} #deck .ledh i{font-style:normal;font:8.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} #deck .frow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;width:100%; padding:15px 0;box-shadow:inset 0 -1px 0 var(--hair);text-align:left;transition:background .14s; position:relative;padding-left:0} #deck .frow:before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:2px;background:transparent;transition:.15s} #deck .frow:hover{background:rgba(255,255,255,.017)} #deck .frow:hover:before{background:var(--phos);box-shadow:0 0 9px var(--phos)} #deck .frow .l1{display:flex;align-items:baseline;gap:9px} #deck .frow .sy{font:14px var(--mono);color:#fff} #deck .frow .meta{margin-top:6px;font:9px var(--mono);letter-spacing:.05em;color:var(--dim)} #deck .frow .meta b{color:var(--haze);font-weight:400} #deck .frow .res{font:300 15px var(--num);color:var(--phos);text-align:right;white-space:nowrap} #deck .frow .res.live{font:8.5px var(--mono);letter-spacing:.22em;display:flex;align-items:center;gap:7px; justify-content:flex-end} #deck .frow .res.live i{width:5px;height:5px;border-radius:50%;background:var(--phos); box-shadow:0 0 8px var(--phos);animation:lp 1.8s var(--ease) infinite} @keyframes lp{0%,100%{opacity:1}50%{opacity:.3}} /* ---------- one fire ---------- */ #deck #fire{position:fixed;inset:0;z-index:60;overflow-x:hidden;background:var(--void);overflow-y:auto; padding:52px var(--pad) 46px;opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .38s var(--ease),transform .38s var(--ease),visibility 0s linear .38s} #deck #fire.on{opacity:1;visibility:visible;transform:none;transition:opacity .38s var(--ease),transform .38s var(--ease)} #deck .back,#deck #dwX,#deck #mkX,#deck #acX,#reg .pbk{ position:fixed;right:var(--pad);top:18px;z-index:96; letter-spacing:.3em;text-transform:uppercase; color:var(--haze);background:none;padding:10px 0;transition:.2s;white-space:nowrap} #deck .back:hover{color:var(--phos)} #deck .back.gl{color:var(--phos);text-shadow:1.5px 0 rgba(255,47,176,.7),-1.5px 0 rgba(0,255,209,.7)} #deck .back:hover,#deck #dwX:hover,#deck #mkX:hover,#deck #acX:hover,#reg .pbk:hover{color:var(--phos)}#deck.eng #hw{opacity:0;pointer-events:none} /* ===== SIGNAL · ambient player ===== */ #sigWrap{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;transition:color .3s} #sigWrap:hover{color:var(--haze)} #sigWrap.on{color:var(--phos)} #sigWrap.on #sigSt{color:var(--phos)} #sigBars{display:inline-flex;align-items:flex-end;gap:2px;height:9px;margin:0 2px} #sigBars i{width:2px;height:2px;background:currentColor;opacity:.55;transition:height .3s} #sigWrap.on #sigBars i{animation:sigb 1.6s ease-in-out infinite} #sigWrap.on #sigBars i:nth-child(1){animation-delay:0s} #sigWrap.on #sigBars i:nth-child(2){animation-delay:.25s} #sigWrap.on #sigBars i:nth-child(3){animation-delay:.5s} #sigWrap.on #sigBars i:nth-child(4){animation-delay:.18s} #sigWrap.on #sigBars i:nth-child(5){animation-delay:.38s} @keyframes sigb{0%,100%{height:2px}50%{height:9px}} #deck .thsw{display:flex;gap:0;margin-top:8px;width:max-content;box-shadow:inset 0 0 0 1px var(--hair2)} #deck .thsw button{background:none;border:0;cursor:pointer;font:9px var(--mono);letter-spacing:.28em; color:var(--dim);padding:11px 20px;transition:.2s} #deck .thsw button.on{color:#02110e;background:var(--phos);box-shadow:0 0 20px rgba(0,255,209,.3)} #deck .thsw button:not(.on):hover{color:var(--haze)} #deck #engclose{cursor:pointer;pointer-events:auto;transition:color .2s} #deck #engclose:hover{color:var(--phos)} .hud .sw{font-style:normal;color:var(--phos);letter-spacing:.06em;margin:0 6px; text-shadow:0 0 8px rgba(0,255,209,.55)} #deck #dwX.gl,#deck #mkX.gl,#reg .pbk.gl{color:var(--phos); text-shadow:1.5px 0 rgba(255,47,176,.7),-1.5px 0 rgba(0,255,209,.7)} #deck .fin{max-width:900px;margin:0 auto} #deck .fhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} #deck .fpair{font:500 clamp(15px,3.6vw,18px) var(--mono);letter-spacing:.02em;color:#fff;white-space:nowrap} #deck .fpair b{font-weight:500} #deck .fkind{font:clamp(9px,2.2vw,11px) var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap} #deck .fkind.sig{color:var(--phos)}.fkind.cal{color:var(--amber)}.fkind.smf{color:var(--mag)} #deck .fstamp{margin-left:auto;font:clamp(8px,1.9vw,10px) var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--dim);white-space:nowrap} #deck .flab{margin-top:20px;font:clamp(8px,2vw,10px) var(--mono);letter-spacing:.26em; text-transform:uppercase;color:var(--steel)} #deck .fbig{margin-top:9px;font:400 clamp(34px,9vw,46px)/1 var(--num);color:#fff; text-shadow:0 0 3px rgba(255,255,255,1),0 0 12px rgba(255,255,255,.95), 0 0 30px rgba(238,242,248,.85),0 0 64px rgba(225,235,255,.55)} #deck .fref{margin-top:12px;font:clamp(8px,2vw,10px)/1.7 var(--mono);letter-spacing:.2em; text-transform:uppercase;color:var(--steel)} #deck .win{margin-top:20px;height:clamp(150px,26vh,210px)} #deck .ftrk{position:relative;height:2px;margin-top:30px;background:rgba(150,180,200,.18)} #deck .ftrk .fil{position:absolute;left:0;right:0;top:0;height:2px;background:var(--phos); box-shadow:0 0 10px var(--phos)} #deck .ftrk .nd.off{background:rgba(150,180,200,.22);box-shadow:none} #deck .ftrk .nd{position:absolute;top:-4px;width:10px;height:10px;margin-left:-5px;background:var(--phos); box-shadow:0 0 10px var(--phos)} #deck .ftrl{position:relative;margin-top:16px;height:52px} #deck .ftrl>div{position:absolute;top:0} #deck .ftrl .k{font:clamp(7.5px,1.8vw,9px) var(--mono);letter-spacing:.2em;text-transform:uppercase; color:var(--steel);white-space:nowrap} #deck .ftrl b{display:block;margin-top:8px;font:300 clamp(12px,3vw,15px) var(--num);color:#fff;white-space:nowrap} #deck .funder{margin-top:30px;white-space:pre-wrap;font:clamp(8.5px,2vw,10px)/1.9 var(--mono);color:var(--dim)} #deck .acts{margin-top:30px;display:flex;gap:22px;align-items:stretch;flex-wrap:wrap} #deck .lnk{position:relative;font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--haze); padding:13px 22px;display:inline-flex;align-items:center;line-height:1;transition:.2s} #deck .lnk:before,#deck .lnk:after{content:"";position:absolute;top:0;bottom:0;width:8px; border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);transition:.2s} #deck .lnk:hover:before,#deck .lnk:hover:after{border-color:var(--phos)} #deck .route{position:relative;overflow:hidden;font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase; color:#02110e;background:var(--phos);padding:13px 24px;display:inline-flex;align-items:center;line-height:1; box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 24px rgba(0,255,209,.36)} #deck .route .sweep{position:absolute;top:0;bottom:0;width:36%;left:-40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)} @keyframes carrier{to{left:120%}} /* the key card */ #deck #cardv{position:fixed;inset:0;z-index:70;overflow-x:hidden;background:var(--void);overflow-y:auto; padding:52px var(--pad) 46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; opacity:0;visibility:hidden;transition:opacity .38s var(--ease),visibility 0s linear .38s} #deck #cardv.on{opacity:1;visibility:visible;transition:opacity .38s var(--ease)} #deck .holder,#cardp .holder{position:relative;width:min(380px,88vw);flex:none;container-type:inline-size} #deck .slotbar{height:3px;background:linear-gradient(90deg,transparent,rgba(0,255,209,.75),transparent); box-shadow:0 0 16px rgba(0,255,209,.5)} #deck .cardwrap{overflow:hidden;height:0;transition:height 1.05s var(--ease);will-change:height} #deck #cardv.out .cardwrap{height:var(--ch)} #deck .share,#cardp .share{position:relative;width:100%;max-width:520px;aspect-ratio:5/6.1;overflow:hidden;flex:none; display:flex;flex-direction:column;background:#070b0f; box-shadow:inset 0 0 0 1px rgba(200,222,232,.08)} #deck .share:before,#cardp .share:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:4; background:linear-gradient(90deg,transparent,rgba(0,255,209,.85),transparent); box-shadow:0 0 16px rgba(0,255,209,.5)} #deck .share .top,#cardp .share .top{flex:none;padding:7% 8% 0} #deck .share .mid,#cardp .share .mid{flex:1 1 auto;min-height:30px;position:relative} #deck .share .mid,#cardp .share .mid{overflow:hidden} #deck .share .mid .ch,#cardp .share .mid .ch{position:absolute;inset:0; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)} #deck .share .ch svg,#cardp .share .ch svg{width:100%;height:100%;display:block} #deck .share .pad,#cardp .share .pad{padding:0 8%} #deck .rule{height:1px;background:rgba(150,180,200,.13)} #deck .rule.hard{background:rgba(180,205,215,.26)} #deck .hd,#deck .share .hd,#cardp .share .hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} #deck .share .sy,#cardp .share .sy{font:500 clamp(15px,4.4cqw,21px) var(--mono);color:#fff;white-space:nowrap; text-shadow:var(--bloom)} #deck .share .kind,#cardp .share .kind{font:clamp(9px,2.4cqw,12px) var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--phos);white-space:nowrap} #deck .share .kind2,#cardp .share .kind2{font:clamp(9px,2.4cqw,12px) var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--steel);white-space:nowrap} #deck .share .cstamp,#cardp .share .cstamp{margin-top:5.5cqw;font:clamp(8px,2cqw,10px) var(--mono);letter-spacing:.18em; text-transform:uppercase;color:var(--steel)} #deck .share .kind.s,#cardp .share .kind.s{color:var(--mag)} #deck .share .lab,#cardp .share .lab{font:clamp(8px,2.1cqw,11px) var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--steel)} #deck .share .hero,#cardp .share .hero{margin-top:2.4cqw;font:400 clamp(38px,11.5cqw,58px)/1 var(--num);color:#fff; white-space:nowrap; text-shadow:0 0 3px rgba(255,255,255,1),0 0 12px rgba(255,255,255,.95), 0 0 30px rgba(238,242,248,.85),0 0 64px rgba(225,235,255,.6), 0 0 110px rgba(225,235,255,.4)} #deck .share .ref,#cardp .share .ref{margin-top:3cqw;font:clamp(9px,2.3cqw,12px) var(--mono);letter-spacing:.04em; color:var(--steel);white-space:nowrap} #deck .share .akl,#cardp .share .akl{font:clamp(8px,2.1cqw,11px) var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--steel);white-space:nowrap} #deck .share .akv,#cardp .share .akv{margin-top:2.6cqw;font:500 clamp(16px,4.6cqw,23px) var(--mono);letter-spacing:.06em; color:#fff;white-space:nowrap;text-shadow:var(--bloom)} #deck .share .akv.wait,#cardp .share .akv.wait{color:var(--dim);text-shadow:none;letter-spacing:.24em} #deck .share .wm,#cardp .share .wm{font:700 clamp(13px,3.6cqw,18px) var(--mono);letter-spacing:.1em;color:#fff; white-space:nowrap;flex:none;text-shadow:var(--bloom)} #deck .share .wm i,#cardp .share .wm i{font-style:normal;color:var(--phos)} #deck .share .sm,#cardp .share .sm{width:15px;height:15px;overflow:visible;flex:none} #deck .cnote{max-width:520px;font:10px/1.8 var(--mono);color:var(--dim);text-align:center}#deck .back:hover,#deck #dwX:hover,#deck #mkX:hover,#deck #acX:hover,#reg .pbk:hover{color:var(--phos)} /* the bars have no edge — the page dissolves into them */ .hud{z-index:40;pointer-events:none} .hud:before{content:"";position:fixed;left:0;right:0;height:110px;z-index:-1;pointer-events:none} .hud.dk.t:before{top:0;background:linear-gradient(180deg,var(--void) 42%,rgba(5,8,12,0))} .hud.dk.b:before{bottom:0;background:linear-gradient(0deg,var(--void) 42%,rgba(5,8,12,0))} .hud span{pointer-events:auto}@media(min-width:820px){} /* ===================== 1986 · PHOSPHOR — a single-gun amber CRT ===================== */ body.y1986 #deck,body.y1986 #reg,body.y1986 #eng,body.y1986 #fire,body.y1986 #cardv,body.y1986 #dwin,body.y1986 #mask,body.y1986 #acc,body.y1986 #prof{ --phos:#ffb43c!important;--mag:#ffb43c!important;--ice:#ffb43c!important;--amber:#ffb43c!important; --white:#ffcf7a!important;--haze:#d9954a!important;--steel:#a8712a!important;--dim:#8a5c21!important; --hair:rgba(255,180,60,.16)!important;--hair2:rgba(255,180,60,.34)!important; --void:#0a0703!important;--sink:#070502!important; --mono:"IBM Plex Mono",monospace!important;--num:"IBM Plex Mono",monospace!important} /* one gun: every surface is the same warm black */ body.y1986 #deck,body.y1986 #reg,body.y1986 #eng,body.y1986 #fire,body.y1986 #cardv,body.y1986 #dwin,body.y1986 #mask,body.y1986 #acc{background:#0a0703!important} body.y1986 #deck,body.y1986 #reg,body.y1986 #eng{color:#ffb43c} /* one typeface — the terminal's */ body.y1986 #deck *,body.y1986 #reg *,body.y1986 #eng *{ font-family:"IBM Plex Mono",monospace!important} /* the phosphor itself: lit ink glows,labels do not */ body.y1986 #deck *,body.y1986 #reg *,body.y1986 #eng *{ text-shadow:0 0 5px rgba(255,150,30,.5)!important} body.y1986 .lab,body.y1986 .k,body.y1986 .cl,body.y1986 .hud,body.y1986 .hud *,body.y1986 .akl,body.y1986 .clab,body.y1986 .cref,body.y1986 .ftrl .k,body.y1986 .fref,body.y1986 .flab,body.y1986 .funder,body.y1986 .meta,body.y1986 .h{ color:#a8712a!important;text-shadow:none!important} /* headlines are filled amber and bloom — not outlined */ body.y1986 #deck .dist.num,body.y1986 .fbig,body.y1986 #share .hero,body.y1986 #deck .fm{ color:#ffb43c!important;-webkit-text-stroke:0!important;font-weight:500!important; text-shadow:0 0 6px rgba(255,160,40,.75),0 0 26px rgba(255,140,20,.4)!important} /* the one filled control,as on the panel */ body.y1986 .route{background:#ffb43c!important;color:#0a0703!important; box-shadow:0 0 24px rgba(255,160,40,.32)!important;text-shadow:none!important} body.y1986 .lnk{color:#ffb43c!important} body.y1986 .lnk:before,body.y1986 .lnk:after{border-color:rgba(255,180,60,.55)!important} /* boxes are ruled,never filled */ body.y1986 #deck .tile,body.y1986 #deck .card,body.y1986 .share,body.y1986 #reg .arRow{ background:none!important;box-shadow:inset 0 0 0 1px rgba(255,180,60,.26)!important} body.y1986 .share:before{background:linear-gradient(90deg,transparent,rgba(255,180,60,.9),transparent)!important; box-shadow:0 0 16px rgba(255,160,40,.5)!important} body.y1986 .band,body.y1986 .keybox{background:rgba(255,180,60,.05)!important} /* the bars dissolve into the same warm black */ body.y1986 .hud.dk.t:before{background:linear-gradient(180deg,#0a0703 42%,rgba(10,7,3,0))!important} body.y1986 .hud.dk.b:before{background:linear-gradient(0deg,#0a0703 42%,rgba(10,7,3,0))!important} /* nothing may stay white or teal — one gun only */ body.y1986 #deck b,body.y1986 #deck strong,body.y1986 #deck .cv,body.y1986 #deck .tv,body.y1986 #deck .num,body.y1986 #deck .val,body.y1986 #deck .v,body.y1986 #reg .v,body.y1986 #eng .sy,body.y1986 #eng .res,body.y1986 .ftrl b,body.y1986 .akv,body.y1986 #deck .tile *,body.y1986 #deck .body,body.y1986 #deck .body *,body.y1986 #deck .vm,body.y1986 #reg .vm,body.y1986 #deck .fv,body.y1986 #deck .fk{ color:#ffcf7a!important} body.y1986 #deck .tile.on,body.y1986 #deck .tile[class*=next],body.y1986 #deck .tile.act{ box-shadow:inset 0 0 0 1px rgba(255,180,60,.75)!important} body.y1986 #deck .tile.on *,body.y1986 #deck .tile.act *{color:#ffb43c!important} body.y1986 .on,body.y1986 .lit,body.y1986 #deck .sd,body.y1986 #deck .ty,body.y1986 #eng .sd,body.y1986 #eng .ty{color:#ffb43c!important} /* borders and rules cannot stay cool either */ body.y1986 #deck [class*=tile],body.y1986 #deck [class*=tile]:before,body.y1986 #deck [class*=tile]:after{border-color:rgba(255,180,60,.7)!important} body.y1986 #deck .tile.on,body.y1986 #deck .tile.next,body.y1986 #deck .on[class*=tile]{ box-shadow:inset 0 0 0 1px rgba(255,180,60,.8),0 0 22px -8px rgba(255,160,40,.5)!important; border-color:rgba(255,180,60,.8)!important} body.y1986 #deck hr,body.y1986 #deck .rule,body.y1986 #deck .sep{ background:rgba(255,180,60,.28)!important;border-color:rgba(255,180,60,.28)!important} /* the vault tiles and their seals carry the same ink */ body.y1986 #deck .vp,body.y1986 #deck .vp.sealed,body.y1986 #deck .idm,body.y1986 #deck .band{ box-shadow:inset 0 0 0 1px rgba(255,180,60,.24)!important;border-color:rgba(255,180,60,.24)!important; background:none!important} body.y1986 #deck .vp.next{ box-shadow:inset 0 0 0 1px rgba(255,180,60,.8),0 0 26px -10px rgba(255,160,40,.55)!important; border-color:rgba(255,180,60,.8)!important} body.y1986 #deck .seal,body.y1986 #deck .vp.sealed *{color:#8a5c21!important;text-shadow:none!important} /* the mark and any inline SVG carry the same gun */ body.y1986 svg.sm,body.y1986 #deck svg.sm{filter:hue-rotate(-140deg) saturate(1.35) brightness(1.05)} body.y1986 .wm i,body.y1986 #deck .wm i{color:#ffb43c!important} body.y1986 .share:before{background:linear-gradient(90deg,transparent,rgba(255,180,60,.95),transparent)!important; box-shadow:0 0 18px rgba(255,160,40,.55)!important} body.y1986 #deck .bank,body.y1986 #deck .banked,body.y1986 #deck .vp .bk,body.y1986 #deck [class*=bank]{color:#ffb43c!important;text-shadow:none!important} /* the wider face needs the stations to breathe */ body.y1986 #deck .ftrl .k{font-size:8px!important;letter-spacing:.14em!important} body.y1986 #deck .ftrl b{font-size:clamp(9.5px,2.3vw,14px)!important;letter-spacing:-.01em!important} body.y1986 #deck .slotbar{background:linear-gradient(90deg,transparent,rgba(255,180,60,.8),transparent)!important; box-shadow:0 0 18px rgba(255,160,40,.5)!important} /* the registry,the milestones and the desk card carry the same gun */ body.y1986 #reg *,body.y1986 #reg{color:inherit} body.y1986 #reg .arBar,body.y1986 #reg .arFill,body.y1986 #reg .fil{ background:#ffb43c!important;box-shadow:0 0 8px rgba(255,160,40,.45)!important} /* a label is type,never a bar */ body.y1986 #reg i,body.y1986 #reg #prof i,body.y1986 #deck #prof i{ background:none!important;box-shadow:none!important;color:#a8712a!important; font-style:normal;text-shadow:none!important} body.y1986 #reg .arVal,body.y1986 #reg .big,body.y1986 #reg .num,body.y1986 #reg b,body.y1986 #reg .arName,body.y1986 #reg strong{color:#ffcf7a!important} body.y1986 #reg .on,body.y1986 #reg .hot,body.y1986 #reg .open{color:#ffb43c!important} body.y1986 #deck .kcs i,body.y1986 #deck .kcs i.fk,body.y1986 #deck [class*=mile] i{ background:#ffb43c!important;box-shadow:0 0 7px rgba(255,160,40,.5)!important} body.y1986 #deck .kcard,body.y1986 #deck .kcard *,body.y1986 #deck #kcard *{color:#ffb43c!important} body.y1986 #deck .kcard svg.sm,body.y1986 #deck #kcard svg{filter:hue-rotate(-140deg) saturate(1.35)} /* the pair on the record and the card is the page's own white */ body.y1986 .fpair,body.y1986 #share .sy,body.y1986 #deck .fpair{ color:#ffe9c2!important;text-shadow:0 0 6px rgba(255,180,60,.7),0 0 20px rgba(255,150,30,.35)!important} /* nothing stays pure white under a single amber gun */ body.y1986 #deck *,body.y1986 #reg *{--white:#ffe9c2!important} body.y1986 #deck .cs,body.y1986 #deck .keyf,body.y1986 #deck .inp,body.y1986 #deck span,body.y1986 #reg span,body.y1986 #deck i,body.y1986 #reg i{ color:inherit} body.y1986 #deck .keyf,body.y1986 #deck .inp,body.y1986 #deck .hcap{color:#ffe9c2!important} /* the card's mark sits bottom right,the wordmark bottom left */ #deck .share .cmk,#cardp .share .cmk{flex:none;display:inline-flex;align-items:center;line-height:0} #deck .share .wm,#cardp .share .wm{display:inline-flex;align-items:center;line-height:1} #deck .share .cmk .sm,#cardp .share .cmk .sm{width:clamp(15px,4cqw,21px);height:clamp(15px,4cqw,21px)} /* only these carry the glow */ #deck .share .lab,#cardp .share .lab,#deck .share .cstamp,#cardp .share .cstamp,#deck .share .ref,#cardp .share .ref,#deck .share .akl,#cardp .share .akl{text-shadow:none!important} /* the wordmark is set,not lit */ #deck .share .wm,#cardp .share .wm{color:var(--haze)!important;font-weight:500!important;letter-spacing:.24em!important; text-shadow:none!important} #deck .share .wm i,#cardp .share .wm i{color:var(--phos)!important} /* the mark carries a soft lamp */ #deck .share .cmk .sm,#cardp .share .cmk .sm{filter:drop-shadow(0 0 5px rgba(0,255,209,.55))} body.y1986 .share .cmk svg.sm{filter:hue-rotate(-140deg) saturate(1.35) brightness(1.05) drop-shadow(0 0 5px rgba(255,180,60,.5))} /* amber: the hero and the key burn like the reference */ body.y1986 #share .hero{color:#ffd48a!important; text-shadow:0 0 3px rgba(255,232,190,1),0 0 12px rgba(255,200,110,.95), 0 0 32px rgba(255,170,50,.85),0 0 68px rgba(255,150,30,.6), 0 0 116px rgba(255,140,20,.4)!important} body.y1986 #share .akv{color:#ffd48a!important; text-shadow:0 0 2px rgba(255,200,110,.9),0 0 14px rgba(255,160,40,.8), 0 0 34px rgba(255,140,20,.4)!important} body.y1986 #share .sy{color:#ffe9c2!important; text-shadow:0 0 8px rgba(255,180,60,.75),0 0 24px rgba(255,150,30,.35)!important} /* 1 · the banked tiles have no green left at any stage */ body.y1986 #deck .vp *,body.y1986 #deck .vp b,body.y1986 #deck .vp .bk,body.y1986 #deck .vp span,body.y1986 #deck .vp div{color:#ffb43c!important} body.y1986 #deck .vp .td,body.y1986 #deck .vp .sub{color:#a8712a!important} /* 2 · the desk card's mark */ body.y1986 svg.sm,body.y1986 #deck #kcard svg.sm,body.y1986 #deck .kcard svg.sm{ filter:hue-rotate(-140deg) saturate(1.35) brightness(1.05)} body.y1986 #deck .ch svg,body.y1986 #deck .win svg,body.y1986 #share .ch svg{filter:none!important} /* 3 · the profile's marks and its stat labels */ body.y1986 #reg #prof svg:not(.ch svg),body.y1986 #deck #prof svg:not(.ch svg){filter:hue-rotate(-140deg) saturate(1.35)} body.y1986 #reg #prof .sub,body.y1986 #reg #prof .cl,body.y1986 #reg #prof small,body.y1986 #deck #prof .sub{color:#d9954a!important} /* the desk card's mark is svg.mk,not svg.sm */ body.y1986 svg.mk,body.y1986 #deck svg.mk{filter:hue-rotate(-140deg) saturate(1.35) brightness(1.05)} /* every white left in the windows */ body.y1986 #dwin *,body.y1986 #dwin span,body.y1986 #dwin b,body.y1986 #dwin .sy,body.y1986 #reg #prof *,body.y1986 #reg #prof span,body.y1986 #reg #prof b{color:#ffcf7a!important} body.y1986 #dwin .k,body.y1986 #dwin .cl,body.y1986 #dwin .lab,body.y1986 #dwin .meta,body.y1986 #reg #prof .k,body.y1986 #reg #prof .cl,body.y1986 #reg #prof .lab{color:#a8712a!important} /* the profile's own figures must read,never sit as a colour bar */ body.y1986 #reg #prof .pv,body.y1986 #reg #prof .pnum,body.y1986 #reg #prof .stat b,body.y1986 #reg #prof [class*=val]{color:#ffe9c2!important;background:none!important} /* the legend swatches carry the rail's own three intensities */ body.y1986 #deck .keys .sig i{background:#fff0d0!important;box-shadow:0 0 9px rgba(255,240,208,.85)!important} body.y1986 #deck .keys .cal i{background:#a8671a!important;box-shadow:0 0 6px rgba(168,103,26,.5)!important} body.y1986 #deck .keys .smf i{background:#d99a3c!important;box-shadow:0 0 7px rgba(217,154,60,.6)!important} body.y1986 #deck .keys .sig span,body.y1986 #deck .keys .sig{color:#ffe9c2!important} /* the seal bar on every vault state — background,not just colour */ body.y1986 #deck .seal,body.y1986 #deck .vp .seal,body.y1986 #deck .vp.open .seal,body.y1986 #deck .vp.next .seal,body.y1986 #deck .vp.sealed .seal,body.y1986 #deck [class*=vp] [class*=seal]{ background:rgba(255,180,60,.5)!important;box-shadow:0 0 8px rgba(255,160,40,.35)!important} body.y1986 #deck .vp.sealed .seal{background:rgba(255,180,60,.16)!important;box-shadow:none!important} /* the record's figure burns like the card's */ body.y1986 .fbig{color:#ffd48a!important; text-shadow:0 0 3px rgba(255,232,190,1),0 0 12px rgba(255,200,110,.95), 0 0 32px rgba(255,170,50,.85),0 0 68px rgba(255,150,30,.6)!important} /* the profile's action reads like the desk's route button */ body.y1986 #reg #prof .route,body.y1986 #reg #prof button.cpy,body.y1986 #deck #prof .route,body.y1986 #reg #prof [class*=copy],body.y1986 #reg #prof button{ color:#0a0703!important;text-shadow:none!important} body.y1986 #reg #prof .route,body.y1986 #deck #prof .route{ background:#ffb43c!important;box-shadow:0 0 24px rgba(255,160,40,.32)!important} body.y1986 #reg #prof .lnk,body.y1986 #reg #prof .pbk{color:#ffb43c!important;background:none!important} /* the bracket controls carry the gun,not the violet accent */ body.y1986 #reg .lnk,body.y1986 #reg #prof .lnk,body.y1986 #deck .lnk,body.y1986 #reg .lnk.on,body.y1986 #reg [class*=use]{color:#ffb43c!important} body.y1986 .lnk:before,body.y1986 .lnk:after{border-color:rgba(255,180,60,.7)!important} body.y1986 #reg .lnk.using,body.y1986 #reg .using{color:#a8712a!important} /* the raster */ body.y1986 #deck:after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px)} body.y1986 .thsw button.on{color:#0a0703!important;background:#ffb43c!important; box-shadow:0 0 20px rgba(255,160,40,.35)!important;text-shadow:none!important} /* the card's foot: wordmark left,mark right,on one line */ #deck .share .cfoot,#cardp .share .cfoot{display:flex!important;align-items:center!important; justify-content:space-between!important;gap:12px; flex:none!important;padding-top:4%!important;padding-bottom:8%!important} #deck .share .mid,#cardp .share .mid{flex:1 1 auto!important;min-height:24px!important} /* the record's figure keeps its own burn */ body.y1986 #fire .fbig,body.y1986 .fbig{color:#ffd48a!important; text-shadow:0 0 3px rgba(255,232,190,1),0 0 12px rgba(255,200,110,.95), 0 0 32px rgba(255,170,50,.85),0 0 68px rgba(255,150,30,.6)!important} /* the bracket control's glow and brackets carry the gun too */ body.y1986 .lnk,body.y1986 .lnk.sm,body.y1986 #reg .lnk.sm,body.y1986 #reg #prof .lnk{ color:#ffb43c!important; text-shadow:0 0 7px rgba(255,160,40,.55)!important} body.y1986 .lnk:before,body.y1986 .lnk:after,body.y1986 .lnk.sm:before,body.y1986 .lnk.sm:after{ border-color:rgba(255,180,60,.75)!important;box-shadow:none!important} body.y1986 *:not(svg):not(svg *){filter:none} body.y1986 svg.sm,body.y1986 svg.mk{filter:hue-rotate(-140deg) saturate(1.35) brightness(1.05)!important} #deck #hint{position:fixed;inset:0;z-index:98;pointer-events:none; opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility 0s linear .55s} #deck #hint.on{opacity:1;visibility:visible;transition:opacity .55s var(--ease)} #deck #hint .hv{position:absolute;inset:0;background:rgba(3,6,9,.74)} #deck #hint .hs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:0 var(--pad)} #deck #hint .hstep{position:absolute;display:flex;flex-direction:column;align-items:center;gap:24px; opacity:0;transform:translateY(8px); transition:opacity .45s var(--ease),transform .45s var(--ease)} #deck #hint .hstep.live{opacity:1;transform:none} #deck #hint .hcap{color:#fff;font:300 clamp(14px,2.4vw,17px)/1.5 var(--num);letter-spacing:.05em; text-align:center;text-shadow:0 0 1px rgba(255,255,255,.9),0 0 12px rgba(238,242,248,.75), 0 0 40px rgba(225,235,255,.3)} #deck #hint .chev{display:flex;align-items:center;gap:30px} #deck #hint .chev svg{width:15px;height:22px;fill:none;stroke:#fff;stroke-width:1.3; stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(255,255,255,.7))} #deck #hint .chev .l,#deck #hint .chev .r{opacity:0} #deck #hint .dotline{width:52px;height:1px;background:rgba(180,205,215,.2)} #deck #hint .s1.live .chev .l{animation:hcL 1.6s var(--ease) infinite} #deck #hint .s1.live .chev .r{animation:hcR 1.6s var(--ease) infinite} #deck #hint .s2.live .chev .r{animation:hcR 1.4s var(--ease) infinite} @keyframes hcL{0%{opacity:0;transform:translateX(10px)}30%{opacity:1} 60%{opacity:1;transform:translateX(-4px)}100%{opacity:0;transform:translateX(-4px)}} @keyframes hcR{0%{opacity:0;transform:translateX(-10px)}30%{opacity:1} 60%{opacity:1;transform:translateX(4px)}100%{opacity:0;transform:translateX(4px)}} #deck.hinting #stage{opacity:.32;filter:blur(.4px)} #deck #stage{transition:opacity .55s var(--ease),filter .55s var(--ease)} #deck #mil{position:fixed;inset:0;z-index:96;background:#04070a;opacity:0;visibility:hidden; display:flex;align-items:center;justify-content:center;padding:var(--pad); transition:opacity .42s var(--ease),visibility 0s linear .42s} #deck #mil.on{opacity:1;visibility:visible;transition:opacity .42s var(--ease)} #deck #mil:before{content:"";position:absolute;inset:0; background:radial-gradient(70vw 46vh at 50% 38%,rgba(0,255,209,.05),transparent 64%)} #deck #mil .gdin{position:relative;z-index:2;max-width:520px;text-align:center; transform:translateY(16px) scale(.97);transition:transform .5s var(--ease)} #deck #mil.on .gdin{transform:none} #deck #mil .gdmark{font:300 clamp(52px,14vw,92px)/1 var(--num);color:#fff; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 16px rgba(238,242,248,.8),0 0 52px rgba(225,235,255,.35); animation:gdIn .7s var(--ease)} @keyframes gdIn{0%{opacity:0;filter:blur(10px);transform:scale(.9)} 45%{opacity:1;filter:blur(2px)}55%{opacity:.4}70%,100%{opacity:1;filter:none;transform:none}} #deck #mil .gdname{margin-top:16px;font:11px/1.7 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--haze)} #deck #mil .gdstate{margin-top:18px;display:inline-block;font:9px var(--mono);letter-spacing:.3em; text-transform:uppercase;padding:8px 16px} #deck #mil .gdstate.b{color:#02110e;background:var(--phos)} #deck #mil .gdstate.n{color:var(--phos);box-shadow:inset 0 0 0 1px rgba(0,255,209,.5)} #deck #mil .gdstate.s{color:var(--steel);box-shadow:inset 0 0 0 1px rgba(150,180,200,.28)} #deck #mil .gdsay{margin-top:24px;font:12px/1.95 var(--mono);color:var(--haze)} #deck #mil .gdhint{margin-top:30px;font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--dim)} #deck .vp{cursor:pointer;transition:box-shadow .25s} #deck .vp:hover{box-shadow:inset 0 0 0 1px rgba(0,255,209,.45)} /* ---------- editable settings ---------- */ #deck .fld .inp{width:100%;display:block;margin-top:11px;padding-bottom:11px;background:none;border:0; border-bottom:1px solid var(--hair2);border-radius:0;font:300 15px var(--mono);letter-spacing:.08em; color:#fff;outline:none;transition:border-color .2s} #deck .fld .inp::placeholder{color:var(--dim)} #deck .fld .inp:focus{border-bottom-color:var(--phos)} #deck .fld .keyf{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none} #deck .fld .keyf.lit{color:#fff;text-shadow:0 0 1px rgba(255,255,255,.9),0 0 9px rgba(238,242,248,.85)} #deck #akrail{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(180,205,215,.22);overflow:hidden} #deck #akrail i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--phos);box-shadow:0 0 9px rgba(0,255,209,.8)} #deck .acsave{margin-top:34px;display:flex;align-items:center;gap:16px} #deck .acsave button{position:relative;font:9px var(--mono);letter-spacing:.3em; text-transform:uppercase;color:var(--haze);background:none;padding:11px 20px;transition:.2s} #deck .acsave button:before,#deck .acsave button:after{content:"";position:absolute; top:0;bottom:0;width:7px;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2); transition:.2s} #deck .acsave button:before{left:0;border-left:1px solid var(--hair2)} #deck .acsave button:after{right:0;border-right:1px solid var(--hair2)} #deck .acsave button:hover{color:var(--phos)} #deck .acsave button .sweep{display:none} #deck #acMsg{font:10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--phos);opacity:0;transition:opacity .3s} #deck #acMsg.on{opacity:1} /* THE HEATMAP toggle — ghost chip in the legend row,default off */ /* the distance card: the prize with a number on it */ #dwin .rgBig{font:200 26px/1.3 var(--mono);letter-spacing:.06em;color:var(--white); text-shadow:0 0 14px rgba(0,255,209,.55),0 0 44px rgba(0,255,209,.25);margin:2px 0 12px} #dwin .rgBig span{display:block;font-size:11px;letter-spacing:.24em;color:var(--dim);text-shadow:none;margin-top:8px} body.y1986 #dwin .rgBig{color:#ffd9a0;text-shadow:0 0 14px rgba(255,196,110,.55),0 0 44px rgba(255,170,60,.25)} body.y1986 #dwin .rgBig span{color:#8a5f22} /* ══ LEGACY ACCESS · the readout the backdoor takes over with ══ */ #legacy{position:fixed;inset:0;z-index:60;background:var(--void); opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s} #legacy.on{opacity:1;visibility:visible} #legacy::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(125% 95% at 50% 45%,transparent 44%,rgba(0,0,0,.7) 100%)} #lgback{position:static;font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase; color:var(--haze);padding:10px 0} #legacy .tlink{font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase; color:var(--haze);padding:12px 4px;transition:color .25s} #legacy .tlink:hover{color:var(--white)} /* the button language is scoped to #deck upstream — restate it here so the legacy slab is identical to every other primary action in the product */ #legacy .route{position:relative;overflow:hidden;margin-top:0; font:10px var(--mono);letter-spacing:.34em;text-transform:uppercase; color:#02110e;background:var(--phos);padding:16px 38px; box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 32px -8px rgba(0,255,209,.55)} #legacy .route .sweep{position:absolute;top:0;bottom:0;width:36%;left:-40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)} #legacy .route:hover .sweep{animation:carrier .62s linear} /* ══ THE READ-IN · THE READOUT. Every panel is a row on a dot-leader manifest,the way the legacy terminal reads. The open row expands in place. He sees the whole shape at once and can step into any part. ══ */ #deck .readin{width:100%;min-width:0;max-width:100%;overflow:hidden} #deck .say{min-width:0;max-width:100%} #deck .rinx,#deck .rinb,#deck .rinmil{min-width:0;overflow-wrap:anywhere} #deck .rinrows{border-top:1px solid var(--hair)} #deck .rinr{display:flex;align-items:baseline;width:100%;text-align:left; padding:11px 0;border-bottom:1px solid var(--hair);background:none;border-left:0; border-right:0;border-top:0;cursor:pointer; font:var(--t2)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:#3a4550;transition:color .3s ease} #deck .rinr:hover{color:var(--steel)} #deck .rinr.on{color:var(--white);text-shadow:var(--bloomS)} #deck .rinr .n{min-width:28px;color:#26313c;transition:color .3s ease} #deck .rinr.on .n{color:var(--phos);text-shadow:0 0 12px rgba(0,255,209,.5)} #deck .rinr .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #deck .rinr .ld{flex:1;margin:0 9px;overflow:hidden;white-space:nowrap; color:#1d2731;letter-spacing:.3em} #deck .rinr .go{color:var(--phos);opacity:0;transition:opacity .3s ease} #deck .rinr.on .go{opacity:1} #deck .rinx{padding:14px 0 6px;animation:rinIn .3s var(--ease)} @keyframes rinIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} #deck .rinx>*{margin-top:13px} #deck .rinx>*:first-child{margin-top:0} #deck .rinb{font:var(--t2)/1.85 var(--mono);color:var(--haze)} #deck .rinb b{color:var(--white);font-weight:400} #deck .rinf{font:var(--t2)/1.85 var(--mono);color:var(--haze);overflow-wrap:anywhere} #deck .rinkey .rkv{display:inline-block;font:200 clamp(14px,4vw,19px) var(--mono); letter-spacing:.3em;color:var(--steel);cursor:pointer;user-select:none; transition:color .2s,text-shadow .2s} #deck .rinkey .rkv.lit{color:#fff;text-shadow:var(--bloom)} #deck .rinkey .rkh{display:block;margin-top:9px;font:9px var(--mono); letter-spacing:.3em;text-transform:uppercase;color:var(--dim)} #deck .rinmil .rm1{display:flex;align-items:baseline;gap:14px;padding:9px 0; border-bottom:1px solid var(--hair);font:var(--t2)/1.5 var(--mono);letter-spacing:.16em} #deck .rinmil .rm1:first-child{border-top:1px solid var(--hair)} #deck .rinmil .a{min-width:46px;color:var(--phos);text-shadow:0 0 12px rgba(0,255,209,.4)} #deck .rinmil .b{color:var(--steel);font-size:10px;letter-spacing:.18em; min-width:0;overflow-wrap:anywhere} #deck .rinmil .a{flex:0 0 auto} /* the exchange modal: the second door that is not open yet,and what to do once the account exists */ #deck .dwsoon{margin-top:14px;font:9px var(--mono);letter-spacing:.28em; text-transform:uppercase;color:var(--white)} /* the closing instruction reads at the same weight as the opening line */ #deck .dwafter{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair); font:12px/1.9 var(--mono);color:var(--haze);max-width:52ch} /* the renewal stamp under BACK ONLINE — a fact,not a sentence */ #evm .evMeta{margin-top:16px;padding-top:13px;border-top:1px solid var(--hair); font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--phos); text-shadow:0 0 12px rgba(0,255,209,.4)} /* the desk column must never clip its own tail — the upgrade tiles are the last thing in it,and the floor rail is fixed over the bottom */ #deck .col,#deck .lw,#deck .m1{overflow:visible} #deck .m1 .vault{padding-bottom:2px} #deck .col{padding-bottom:16px} @media(min-width:900px){#deck .col{padding-bottom:120px}} /* a horizontal flick must never become browser back/forward */ #eng,#deck,#reg,#out,#res,#stage,#fire,#cardv,#mask,#dwin,#acct,#prof,#mil,html,body{overscroll-behavior-x:none} /* ── mobile browser chrome ── Safari and DuckDuckGo overlay their own bars top and bottom,and 100vh measures the window WITHOUT them,so fixed full-height screens lose their first and last lines. dvh follows the visible viewport instead,and the safe-area insets keep clear of the notch and the home indicator. */ @supports (height:100svh){ html,body{height:100svh} #lock,#doors,#blackbox,#deck,#deck #stage,#eng,#reg,#legacy,#deck #fire,#deck #cardv{ height:100svh!important;max-height:100svh} } @media(max-width:820px){ /* the creed and the footer line must clear the browser's own furniture */ #lock{padding-top:calc(26px + env(safe-area-inset-top,0px)); padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))} /* the card gives way before the creed or the door link ever do — but it is scaled as ONE finished object,never re-laid-out: every fixed placement inside (band,incept,chin,the reveal) keeps its exact geometry */ #lock .kcard{--ks:min(1,calc((100svh - 200px)/432px)); transform:scale(var(--ks));transform-origin:top center; margin-bottom:calc((var(--ks) - 1)*432px)} #lockR{display:flex;flex-direction:column;align-items:center} #lock #nokey{margin-top:24px} /* the door reads from the top on a phone — a centred column taller than the visible area clips its own title into the header row */ #doors{justify-content:flex-start;overflow-y:auto; padding-top:0; padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))} /* the crumb row is pinned to the surface — content scrolls beneath it */ #doors>.phead,#blackbox>.phead{position:sticky;left:auto;right:auto;top:0; width:100%;flex:none;height:auto;min-height:42px;z-index:9; padding:calc(14px + env(safe-area-inset-top,0px)) 0 12px; margin:0 0 28px; background:linear-gradient(180deg,var(--void) 74%,rgba(5,8,12,0))} #blackbox{padding-top:0} #blackbox>.phead{margin-bottom:20px} /* a signal card opened on a phone browser sat hard against the top bar */ #deck #fire{padding-top:calc(64px + env(safe-area-inset-top,0px))} /* the key card view starts below the back link and scrolls,instead of centring itself up into it */ #deck #cardv{justify-content:flex-start; padding-top:calc(88px + env(safe-area-inset-top,0px))} } /* the profile back sits above the profile body,and takes clicks */ /* the profile back must sit above the profile body and take its own taps. It is already positioned by its own rules — only the stacking and the hit area were missing. */ #reg .pbk,.pbk{z-index:200;pointer-events:auto;cursor:pointer; padding:12px 10px;margin:-12px -10px} /* ── DESKTOP DESK: two independent halves ── The clearance card is a fixed object; only the reading column moves. The card therefore centres on the viewport and never drifts with the column's length,and the column scrolls inside its own height instead of pushing the whole stage. */ @media(min-width:900px){ #deck #stage{align-items:center;overflow:hidden;padding-bottom:96px} #deck .rm{align-items:center;width:100%} #deck .col{align-self:stretch;max-height:calc(100svh - 190px); overflow-y:auto;overscroll-behavior:contain;padding-right:14px; padding-bottom:28px;scrollbar-width:none} #deck .col::-webkit-scrollbar{display:none} #deck .idc{align-self:center;flex:0 0 auto} } /* ── ONE HUD FOR EVERY FLOOR ── It lives outside the floors,so no floor's stacking context can bury it,and it stands down whenever a sheet with its own back button is open. */ /* the floor HUD belongs to the floors: hidden through the lock and the arrival,present on desk / engine / registry,and standing down whenever a sheet with its own back button is open */ .hud.dk{opacity:0;visibility:hidden;pointer-events:none; transition:opacity .4s var(--ease),visibility .4s} body.inside .hud.dk{opacity:1;visibility:visible;pointer-events:auto} body.arriving .hud.dk{opacity:0!important;visibility:hidden!important;pointer-events:none!important} .hud.dk #hw{pointer-events:auto;cursor:pointer} /* ═══════════ CHROME ═══════════ A floor shows the navi: floor name + SETTINGS on top,floor rail below. Anything opened ON a floor is a sheet: the navi goes,and the sheet's own back button is the only control on screen. Declared with :has(),so no close path can ever forget to put the navi back. */ body:has(#evm.on,#acct.on,#prof.on,#dwin.on,#fire.on,#cardv.on,#mask.on,#mil.on) .hud.dk{opacity:0!important;visibility:hidden!important;pointer-events:none!important} /* SETTINGS reads at exactly the weight of the floor name beside it */ .hud.dk #hw{font:inherit!important;letter-spacing:inherit;color:var(--haze); background:none;border:0;padding:0;pointer-events:auto;cursor:pointer; text-transform:uppercase} .hud.dk #hw:hover{color:var(--phos)} /* every back button: same place,same weight,above its own sheet */ #deck .back,#dwX,#mkX,#acX,#fback,#cback,.pbk{ position:fixed;right:var(--pad);top:20px;z-index:200; font:10px/1 var(--mono)!important;letter-spacing:.24em; text-transform:uppercase;color:var(--haze);background:none;border:0; padding:12px 10px;margin:-12px -10px;cursor:pointer; height:auto!important;line-height:1!important;pointer-events:auto} #deck .back:hover,#dwX:hover,#mkX:hover,#acX:hover,#fback:hover,#cback:hover,.pbk:hover{ color:var(--phos)} @media(max-width:899px){ #deck .back,#dwX,#mkX,#acX,#fback,#cback,.pbk{right:16px;top:18px} } /* the lock's own bars belong to the lock: gone through recognition and the whole arrival,so nothing sits over CONTINUE */ /* the machine under the glass keeps its place low on the page */ #bxlink{margin-left:auto;margin-right:auto;margin-bottom:64px} /* the lock keeps its furniture: the wordmark and the instruction read before a key exists; the session/signal readouts light up on entry */ body:not(.inside)>.hud:not(.dk){opacity:1!important;visibility:visible!important} /* a door or the blackbox owns the whole screen — the lock's bars stand down so its own crumb and back button are the only chrome */ body:has(#doors.on,#blackbox.on,#legacy.on)>.hud:not(.dk){ opacity:0!important;visibility:hidden!important;pointer-events:none!important} /* the boot readouts must never sit on the CONTINUE button */ body.arriving .arfoot{padding-bottom:34px} /* a horizontal flick anywhere on these pages is ours,never the browser's */ #doors,#blackbox,#legacy{overscroll-behavior-x:none;touch-action:pan-y} /* ── ONE SIZE FOR ALL CHROME ── Settings,the floor labels and every back button read at the same weight. Declared last so no earlier !important can pull them apart. */ .hud,.hud.dk,.hud.dk #hw,#deck .back,#dwX,#mkX,#acX,#fback,#cback,.pbk,#dclose,#bxback{ font-size:10px!important;letter-spacing:.24em!important; font-family:var(--mono)!important;line-height:1!important} @media(max-width:899px){ .hud,.hud.dk,.hud.dk #hw,#deck .back,#dwX,#mkX,#acX,#fback,#cback,.pbk,#dclose,#bxback{ font-size:9px!important;letter-spacing:.2em!important} } /* the boot sequence keeps its top readout; the bottom bar would sit on the CONTINUE button,so it stands down until the desk takes over */ body.arriving .hud.b{opacity:0!important;visibility:hidden!important} /* ── SCROLLABLE SHEETS ── #blackbox scrolls vertically,so the browser hands it the wheel event and a page-level guard never sees the horizontal component — the flick became a history navigation. Containing overscroll on BOTH axes keeps the gesture inside the sheet,where our own handler can act on it. */ #blackbox,#legacy,#deck #fire,#deck #cardv,#eng,#reg,#deck #stage,#prof,#dwin,#acct{ overscroll-behavior:contain} /* ── ONE BACK BUTTON PER SHEET ── The account card carried its own header back AND was being pulled out to the fixed corner by the shared rule,so two appeared at two sizes. The fixed corner wins; the header keeps only its title. */ #acct .ach{justify-content:flex-start} /* ── THE BLACKBOX SCROLLS INSIDE,NOT AT ITS ROOT ── As a root scroll container the browser claimed its wheel events and a sideways flick became history navigation — which is exactly why the non-scrolling doors page never had the problem. The sheet is now fixed like doors,and its content scrolls in a child. */ /* mirror the signal window exactly — it is the sheet that already behaves: it scrolls itself,and CONTAINS the overscroll,which is what stops a sideways flick becoming browser history. Making it non-scrolling (as I first tried) removes the very mechanism that fixes it. */ #blackbox,#doors,#legacy{overflow-x:hidden;overflow-y:auto; overscroll-behavior:contain} #blackbox{scrollbar-width:none} #blackbox::-webkit-scrollbar{display:none} /* wide tracking leaves a trailing letter-space after the last character,so a right-aligned label reads as if it were nudged off the edge. Pull it back by exactly one space — the same compensation used elsewhere. */ #deck .back,#dwX,#mkX,#acX,#fback,#cback,.pbk,#dclose,#bxback{margin-right:-.24em} /* on the blackbox page even the OS accent runs lilac */ #blackbox .pcrumb b{color:var(--mag)} #blackbox #bxback:hover{color:var(--mag)} /* ================= THE FLOOR BELOW THE LOCK ================= the old terminal that kept running between the fragments — reached by swiping up on the lock,left by swiping down. it lives behind the same dusty glass as the blackbox pane: dark,glowing,partly buried. */ #lhint{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%); font:9px var(--mono);letter-spacing:.3em;color:var(--ghost,#3f4b54);pointer-events:none; animation:lhb 2.8s ease-in-out infinite} @keyframes lhb{0%,100%{opacity:.3;transform:translate(-50%,0)}50%{opacity:.8;transform:translate(-50%,5px)}} #under{position:fixed;inset:0;z-index:6;background:var(--void);display:none; flex-direction:column;align-items:center;justify-content:center; padding:calc(64px + env(safe-area-inset-top,0px)) var(--pad) calc(54px + env(safe-area-inset-bottom,0px))} #under.on{display:flex} #lock.veiled{display:none!important} #under .uin{position:relative;z-index:2;width:380px;max-width:100%} /* the grime patches are cut into the LOG box - fixed width,so phone and desktop bury exactly the same words (the blackbox rule). the routes row needs the extra 36px to hold one line on desktop. */ #ulogwrap{width:344px;max-width:100%} #ulogwrap{position:relative} #ulog,#ulogH{font:300 11px/2.2 var(--mono);letter-spacing:.06em;white-space:pre-wrap;min-height:16em} #ulog{position:relative;z-index:2;color:var(--dim);text-shadow:0 0 8px rgba(160,230,215,.14)} #ulogH{position:absolute;inset:0;z-index:1;color:rgba(190,255,240,.30);filter:blur(2.6px); text-shadow:0 0 18px rgba(0,255,209,.5),0 0 40px rgba(0,255,209,.22)} #ulog b{color:var(--haze);font-weight:400} #ulog .uok{color:var(--phos)} #ulog .udt,#uroutes .udt{color:#3f4b54} #ulogH b,#ulogH .uok,#ulogH .udt,#ulogH .uslot{color:inherit;text-shadow:inherit} /* dark grime lying on the glass,burying parts of the words */ #ulogwrap .upat,#uroutes .upat{position:absolute;z-index:3;pointer-events:none; background:radial-gradient(closest-side,rgba(5,8,12,.92),rgba(5,8,12,.55) 58%,transparent 78%)} #ulogwrap .upat.a{left:56%;top:6%;width:180px;height:56px} #ulogwrap .upat.b{left:-6%;top:38%;width:150px;height:52px} #ulogwrap .upat.c{left:62%;top:64%;width:170px;height:60px} /* the routes carry a lighter film of it — covered,but only just */ #uroutes{position:relative;margin-top:6px;font:300 11px/2.2 var(--mono);letter-spacing:.06em;color:var(--haze); text-shadow:0 0 12px rgba(0,255,209,.18)} #uroutes a{color:inherit;text-decoration:none;transition:color .22s,text-shadow .22s} #uroutes a:hover{color:var(--phos);text-shadow:0 0 9px rgba(0,255,209,.5)} #uroutes .upat.r{left:34%;top:-20%;width:110px;height:34px;opacity:.55} /* on a phone the routes stand as their own rows under the prompt */ @media(max-width:560px){ #uroutes a{display:block;margin-top:2px} #uroutes .usep{display:none} #uroutes .upat.r{left:8%;top:22%;width:120px;height:40px;opacity:.5} } #ucp{margin-top:14px;font:9px var(--mono);letter-spacing:.26em;color:#3f4b54} .ucur{display:inline-block;width:.62em;height:1em;vertical-align:-.18em;background:var(--phos); box-shadow:0 0 8px rgba(0,255,209,.6);animation:ucb 1s steps(1,end) infinite} @keyframes ucb{50%{opacity:.15}} .ufade{opacity:0;transition:opacity .8s;pointer-events:none} .ufade.uin2{opacity:1;pointer-events:auto} /* the constant: bright middle,dead zeros on the flanks */ .uslot{display:inline-block;width:.72em;text-align:center;color:#eef4f6; text-shadow:0 0 1px rgba(255,255,255,.6),0 0 10px rgba(230,240,245,.22)} .uslot.zz{color:var(--steel);text-shadow:0 0 6px rgba(120,140,155,.3)} @keyframes uklf{0%{text-shadow:0 0 2px #fff,0 0 24px rgba(0,255,209,.95)}100%{}} .uklanded.uflash .uslot:not(.zz){animation:uklf 1s ease-out} /* the glass: dark,never milky */ #under .uglass{position:absolute;inset:0;z-index:1;pointer-events:none} #under .uglass>span{position:absolute;inset:0} #under .ufog{backdrop-filter:blur(1.8px);-webkit-backdrop-filter:blur(1.8px); -webkit-mask-image:radial-gradient(46% 40% at 50% 46%,transparent 0 42%,rgba(0,0,0,.55) 68%,#000 96%); mask-image:radial-gradient(46% 40% at 50% 46%,transparent 0 42%,rgba(0,0,0,.55) 68%,#000 96%)} #under .ufilm{background:radial-gradient(46% 40% at 50% 46%,transparent 0 44%,rgba(0,0,0,.28) 100%)} #under .uscan{opacity:.14;background:repeating-linear-gradient(180deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px)} #under .ugrille{opacity:.18;mix-blend-mode:screen; background:repeating-linear-gradient(90deg,rgba(255,0,64,.14) 0 1px,rgba(0,255,120,.12) 1px 2px,rgba(40,80,255,.14) 2px 3px); -webkit-mask-image:radial-gradient(60% 55% at 50% 46%,rgba(0,0,0,.35) 0 30%,#000 90%); mask-image:radial-gradient(60% 55% at 50% 46%,rgba(0,0,0,.35) 0 30%,#000 90%)} #under .udst{mix-blend-mode:screen;opacity:.5;background-image: radial-gradient(1.4px 1.4px at 6% 18%,rgba(220,230,235,.32),transparent 55%), radial-gradient(1px 1px at 14% 64%,rgba(220,230,235,.24),transparent 55%), radial-gradient(1.6px 1.6px at 21% 33%,rgba(220,230,235,.28),transparent 55%), radial-gradient(1.1px 1.1px at 9% 87%,rgba(220,230,235,.24),transparent 55%), radial-gradient(1.3px 1.3px at 31% 9%,rgba(220,230,235,.26),transparent 55%), radial-gradient(1px 1px at 44% 93%,rgba(220,230,235,.22),transparent 55%), radial-gradient(1.5px 1.5px at 58% 6%,rgba(220,230,235,.28),transparent 55%), radial-gradient(1px 1px at 69% 90%,rgba(220,230,235,.22),transparent 55%), radial-gradient(1.4px 1.4px at 79% 14%,rgba(220,230,235,.28),transparent 55%), radial-gradient(1.1px 1.1px at 88% 70%,rgba(220,230,235,.24),transparent 55%), radial-gradient(1.6px 1.6px at 95% 34%,rgba(220,230,235,.3),transparent 55%), radial-gradient(1.2px 1.2px at 3% 46%,rgba(220,230,235,.26),transparent 55%)} #under .usmg{inset:auto;background:radial-gradient(closest-side,rgba(190,205,215,.045),transparent 74%);filter:blur(4px)} #under .usmg.a{left:4%;top:8%;width:220px;height:160px} #under .usmg.b{left:66%;top:60%;width:260px;height:180px} @media(max-width:560px){#ulogwrap .upat.b{left:-10%}} /* ═══ THE STACK · the indicator picker ═══ */ #stkm{position:fixed;inset:0;z-index:88;background:rgba(3,5,8,.55);opacity:0;visibility:hidden;transition:.25s} body.y1986 #stkm{background:rgba(6,4,1,.6)} #stkm.on{opacity:1;visibility:visible} #stk{position:fixed;z-index:89;background:#060a0f; box-shadow:inset 0 1px 0 rgba(200,222,232,.09),inset 0 -1px 0 rgba(0,0,0,.9),0 24px 70px rgba(0,0,0,.75); opacity:0;visibility:hidden;transition:transform .28s var(--ease,cubic-bezier(.25,.8,.25,1)),opacity .28s,visibility .28s} body.y1986 #stk{background:#0d0904;box-shadow:inset 0 1px 0 rgba(255,220,160,.08),inset 0 -1px 0 rgba(0,0,0,.9),0 24px 70px rgba(0,0,0,.8)} @media(min-width:700px){ #stk{width:320px;transform:translateY(-6px)} #stk.on{opacity:1;visibility:visible;transform:translateY(0)} } @media(max-width:699.9px){ #stk{left:0!important;right:0;top:auto!important;bottom:0;width:100%; padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(14px)} #stk.on{opacity:1;visibility:visible;transform:translateY(0)} } #stk .sh{display:flex;justify-content:space-between;align-items:baseline;padding:15px 18px 9px} #stk .st{font:400 9px var(--mono);letter-spacing:.4em;color:var(--dim)} #stk .sx{font:9px var(--mono);letter-spacing:.22em;color:#454f5a;padding:4px;background:none;border:0;cursor:pointer;font-family:var(--mono)} #stk .sx:hover{color:var(--haze)} .srow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;width:100%;text-align:left; padding:11px 18px;transition:background .15s;background:none;border:0;cursor:pointer;font-family:var(--mono)} .srow+.srow{box-shadow:inset 0 1px 0 rgba(150,180,200,.05)} .srow .nm{font:400 10px var(--mono);letter-spacing:.22em;color:var(--haze);white-space:nowrap;text-transform:uppercase} .srow .ds{font:300 9px var(--mono);letter-spacing:.05em;color:#454f5a;text-align:right} .srow:hover{background:rgba(233,241,243,.03)} .srow.on .nm{color:var(--phos)} .srow.clr{justify-content:center} .srow.clr .nm{color:#454f5a;letter-spacing:.3em;font-size:9px} .srow.clr:hover .nm{color:var(--haze)} body.y1986 .srow .nm{color:#c99d54} body.y1986 .srow .ds{color:#6e4c1c} body.y1986 .srow.on .nm,body.y1986 .srow.tao.on .nm{color:#ffc46e} body.y1986 .srow:hover{background:rgba(255,196,110,.04)} body.y1986 #stk .st{color:#8a5f26} body.y1986 #stk .sx:hover{color:#d9b06a} /* variant clocks ride the rail */ #eng .pgap{display:inline-block;width:12px} /* ── the indicator readout · follows the crosshair ── */ #eng #itip{position:absolute;z-index:6;pointer-events:none;min-width:150px; background:rgba(5,9,13,.94);box-shadow:inset 0 1px 0 rgba(200,222,232,.09),inset 0 -1px 0 rgba(0,0,0,.9),0 10px 30px rgba(0,0,0,.6); padding:9px 12px 10px;opacity:0;transition:opacity .12s;left:0;top:0} #eng #itip.on{opacity:1} #eng #itip,#eng #itip *{text-transform:none} #eng #itip .td{font:400 9px var(--mono);letter-spacing:.26em;color:#6e7d87;padding-bottom:6px} #eng #itip .tr{display:flex;justify-content:space-between;gap:16px;padding:2px 0} #eng #itip .tl{font:300 9.5px var(--mono);letter-spacing:.18em;color:#8a94ad} #eng #itip .tv{font:400 10.5px var(--mono);letter-spacing:.06em;color:var(--white)} #eng #itip .tv.k{color:var(--phos)} body.y1986 #eng #itip{background:rgba(10,7,3,.94);box-shadow:inset 0 1px 0 rgba(255,220,160,.08),inset 0 -1px 0 rgba(0,0,0,.9),0 10px 30px rgba(0,0,0,.7)} body.y1986 #eng #itip .td{color:#8a5f26} body.y1986 #eng #itip .tl{color:#a8712a} body.y1986 #eng #itip .tv{color:#fff0d0} body.y1986 #eng #itip .tv.k{color:#ffc46e} /* ═══ THE TRANSMISSION · receive on the lock ═══ */ #rxlink{margin-top:26px;font:10px var(--mono);letter-spacing:.3em;color:var(--dim);cursor:pointer; display:none;position:relative;width:max-content;text-transform:uppercase;animation:rxg 4s infinite} @media(min-width:721px){#rxlink{display:block}} #rxlink b{color:var(--phos);font-weight:400;text-shadow:0 0 12px rgba(0,255,209,.5)} #rxlink::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px; background:linear-gradient(90deg,rgba(0,255,209,.5),transparent)} @keyframes rxg{0%,92%,100%{transform:none;opacity:1}93%{transform:translateX(-2px);opacity:.6}95%{transform:translateX(1px)}97%{opacity:.85}} #lockL{position:relative} #rxstage{display:none;width:100%;max-width:560px} #rxstage video{display:block;width:100%;background:#000;border:0; -webkit-mask:radial-gradient(92% 92% at 50% 50%,#000 55%,rgba(0,0,0,.55) 76%,transparent 96%); mask:radial-gradient(92% 92% at 50% 50%,#000 55%,rgba(0,0,0,.55) 76%,transparent 96%)} #rxstage .rxl{margin-top:10px;font:8.5px var(--mono);letter-spacing:.4em;color:var(--dim)} #lockL.rx #opsys,#lockL.rx #creed,#lockL.rx #lede,#lockL.rx #rxlink{display:none} #lockL.rx #rxstage{display:block} /* G4 · BLOCK DECAY — the page corrupts,the transmission decodes out of it */ #lockL.g4out #opsys,#lockL.g4out #creed,#lockL.g4out #lede,#lockL.g4out #rxlink{animation:g4o .6s steps(6) both} @keyframes g4o{0%{filter:none;transform:none} 20%{filter:contrast(1.6) saturate(2);transform:translate(2px,-1px)} 40%{filter:contrast(3) saturate(0) blur(1px);clip-path:polygon(0 0,100% 0,100% 20%,60% 20%,60% 44%,100% 44%,100% 100%,0 100%,0 70%,30% 70%,30% 30%,0 30%)} 60%{filter:contrast(5) blur(2px) brightness(1.6);transform:translate(-6px,2px) scale(1.02)} 80%{opacity:.4;filter:blur(6px) brightness(2.4);transform:scale(1.06)} 100%{opacity:0;filter:blur(12px)}} #lockL.g4in #rxstage video{animation:g4i .5s steps(4) both} #lockL.g4back #opsys,#lockL.g4back #creed,#lockL.g4back #lede,#lockL.g4back #rxlink{animation:g4i .5s steps(4) both} @keyframes g4i{0%{opacity:0;filter:blur(10px) brightness(2)}40%{opacity:1;filter:blur(4px) contrast(2)} 70%{filter:blur(1px) contrast(1.3);transform:translate(3px,-2px)}100%{opacity:1;filter:none;transform:none}} .rxbk{position:absolute;background:rgba(0,255,209,.16);mix-blend-mode:screen;opacity:0;pointer-events:none} .rxbk.m{background:rgba(255,47,176,.18)} .rxbk:nth-of-type(1){left:10%;top:18%;width:20%;height:11%} .rxbk:nth-of-type(2){left:58%;top:52%;width:26%;height:8%} .rxbk:nth-of-type(3){left:32%;top:74%;width:13%;height:13%} #lockL.g4blk .rxbk{animation:g4b .6s steps(2) both} @keyframes g4b{0%,100%{opacity:0}30%,70%{opacity:1}} /* ── the chin S leaks the signal (mobile) ── */ .kchin .smk{position:relative;display:inline-flex} .kchin .smk .pg{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-style:normal} .kchin .smk .pg::after{content:'';border-left:11px solid #0affd8;border-top:7px solid transparent;border-bottom:7px solid transparent; filter:drop-shadow(0 0 8px rgba(0,255,209,.8));margin-left:2px} @media(max-width:720px){.kchin .smk .pg{display:flex;opacity:0}} .smk.gsw{animation:gswm .26s steps(2) both} @keyframes gswm{0%{transform:translate(-2px,1px)}30%{transform:translate(2px,-1px)}60%{transform:translate(-1px,0)}100%{transform:none}} .smk.gsw svg,.smk.gsw .pg{animation:gswf .26s steps(3) both} @keyframes gswf{0%{filter:drop-shadow(2px 0 rgba(255,47,176,.9)) drop-shadow(-2px 0 rgba(0,255,209,.9));opacity:.4} 50%{opacity:1;filter:none}70%{opacity:.3}100%{opacity:1;filter:none}} .smk.showpg svg{opacity:0!important} .smk.showpg .pg{opacity:1!important} /* ── fullscreen receive (mobile) · G4 in/out ── */ #fsrx{position:fixed;inset:0;background:#000;z-index:2000;display:none;align-items:center;justify-content:center} #fsrx.on{display:flex} #fsrx video{width:100%;max-height:100%} #fsrx.gin video{animation:g4i .55s steps(4) both} #fsrx.gout video{animation:g4x .45s steps(5) both} @keyframes g4x{0%{opacity:1;filter:none}25%{filter:contrast(2.4) saturate(0) blur(1px);transform:translate(4px,-2px)} 55%{opacity:.5;filter:blur(4px) brightness(2);clip-path:polygon(0 0,100% 0,100% 34%,52% 36%,52% 66%,100% 62%,100% 100%,0 100%)} 100%{opacity:0;filter:blur(10px)}} /* ================= THE OUTPOST — floor 04 ================= */ #deck #out{position:fixed;inset:0;z-index:14;opacity:0;visibility:hidden;transform:translateX(26px); transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s; height:100%;background:var(--void);color:var(--white);font-family:var(--mono);overflow:hidden auto; -webkit-overflow-scrolling:touch;touch-action:pan-y} #deck #res{position:fixed;inset:0;z-index:14;opacity:0;visibility:hidden;transform:translateX(26px); transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s; height:100%;background:var(--void);color:var(--white);font-family:var(--mono);overflow:hidden auto; -webkit-overflow-scrolling:touch;touch-action:pan-y} #deck.out #out{opacity:1;visibility:visible;transform:none; transition:opacity .5s var(--ease),transform .5s var(--ease)} #deck.res #res{opacity:1;visibility:visible;transform:none; transition:opacity .5s var(--ease),transform .5s var(--ease)} #deck.out #stage{opacity:0!important;transform:translateX(-22px);pointer-events:none} #deck.out #reg{opacity:0;visibility:hidden} #deck.rack #out{filter:brightness(1.35) blur(.6px)} #deck.rack #res{filter:brightness(1.35) blur(.6px)} #deck.land #out{animation:landing .32s ease-out} #deck.land #res{animation:landing .32s ease-out} #deck.out #sw{opacity:0;pointer-events:none} #deck.out .swipe{opacity:0;pointer-events:none} @media(max-width:899px){} #deck .dwact.dwset{margin-top:22px;padding-top:16px;border-top:1px solid rgba(233,241,243,.06)} /* ── the hero holds a word now,not a figure ── .dist was sized for '39K' at clamp(52px,11vw,104px); a twelve-character clearance at that step wraps and swallows the column. These are the sizes from the approved mockup,on its own .word modifier,so anything still showing a figure keeps the original scale. */ #deck .dist.word{font-size:clamp(38px,6.4vw,68px);letter-spacing:.01em;white-space:nowrap} @media(max-width:899px){#deck .dist.word{font-size:clamp(32px,9vw,44px)}} /* ══ UPGRADE CYPHER · the till,inside the desk window ══ The .bxtwo cards were written for the blackbox page,where the accent is lilac and the surrounding page is its own screen. Opened from the desk they inherited that lilac and none of the classes the desk's own markup uses,so the screen arrived half-styled. This is the desk's copy: phos,and every class the buy body actually renders. */ #dwin .bxm{margin-top:6px;font:12px/1.85 var(--mono);color:var(--haze);max-width:52ch} #dwin .bxm b{color:#fff;font-weight:400} #dwin .thsw{display:flex;margin:22px 0 0;width:100%;max-width:420px; box-shadow:inset 0 0 0 1px var(--hair2)} #dwin .thsw button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px; background:none;border:0;cursor:pointer;font:9px var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--dim);padding:13px 10px;transition:.22s} #dwin .thsw button.on{color:#02110e;background:var(--phos);box-shadow:0 0 22px rgba(0,255,209,.32)} #dwin .thsw button:not(.on):hover{color:var(--haze)} #dwin .thsw .sv{font:9px var(--mono);letter-spacing:.14em;color:var(--phos)} #dwin .thsw button.on .sv{color:#02110e;opacity:.72} #dwin .bxtwo{margin-top:12px;display:flex;flex-direction:column;gap:10px} @media(min-width:820px){#dwin .bxtwo{flex-direction:row}#dwin .bxtwo .rc{flex:1}} /* the desk's accent is phos — the lilac edge animation belongs to the blackbox */ #dwin .bxtwo .rc{position:relative;padding:18px 19px;background:#080c11;border-radius:4px; cursor:pointer;text-align:left;width:100%; box-shadow:inset 0 1px 0 rgba(200,222,232,.14),inset 0 -1px 0 rgba(0,0,0,.9);transition:.26s} #dwin .bxtwo .rc:before,#dwin .bxtwo .rc:after{display:none} #dwin .bxtwo .rc:hover{background:#0a1015} #dwin .bxtwo .rc.on{box-shadow:inset 0 0 0 1px rgba(0,255,209,.55),0 0 34px -14px rgba(0,255,209,.7)} #dwin .bxtwo .rc .n{display:block;font:9px var(--mono);letter-spacing:.28em; text-transform:uppercase;color:var(--steel)} #dwin .bxtwo .rc.on .n{color:var(--phos)} #dwin .bxtwo .rc .v{display:block;margin-top:8px;font:300 26px var(--num);color:#fff; text-shadow:var(--bloomS)} #dwin .bxtwo .rc .pm2{display:block;margin-top:7px;font:11px var(--mono);letter-spacing:.08em; color:var(--steel)} #dwin .bxtwo .rc.on .pm2{color:var(--phos)} #dwin .bxtwo .rc .s{display:block;margin-top:9px;font:10.5px/1.7 var(--mono);color:var(--dim)} #dwin .bxtwo .rc .tag{position:absolute;right:19px;top:18px;font:9px var(--mono); letter-spacing:.2em;text-transform:uppercase;color:var(--phos)} #dwin .bxu{margin-top:18px;font:10px/1.8 var(--mono);color:var(--dim)} /* ══ THE LOCK · the two ways in,and the last decode ══ The teaser used to sit here behind a "press play to receive" line. It is replaced by the two doors — which used to be buried a page deeper — and by the decode itself,which does the arguing the copy used to do. */ #lockL .lkbt{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;align-items:stretch} #lockL .lkbt button{position:relative;display:flex;align-items:center;justify-content:center; min-height:46px;padding:0 28px;box-sizing:border-box;overflow:hidden;cursor:pointer;border:0; font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;transition:.3s var(--ease)} #lockL .lkbt button i{font-style:normal;position:relative;display:block;z-index:2} #lockL .lkbt button i:before,#lockL .lkbt button i:after{content:attr(data-t);position:absolute; left:0;top:0;width:100%;opacity:0;pointer-events:none} /* the box never moves — the tear happens inside it */ #lockL .lkbt button .gx{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 2px,transparent 2px 5px, rgba(255,255,255,.16) 5px 6px,transparent 6px 11px)} #lockL .lkbt button:hover .gx{animation:lkBands .44s steps(4,end) 1} #lockL .lkbt button:hover i{animation:lkSlice .44s steps(4,end) 1} #lockL .lkbt button:hover i:before{animation:lkL .44s steps(4,end) 1} #lockL .lkbt button:hover i:after{animation:lkR .44s steps(4,end) 1} @keyframes lkBands{0%,100%{opacity:0;clip-path:none;transform:none} 18%{opacity:.9;clip-path:inset(8% 0 58% 0);transform:translateX(-4px)} 36%{opacity:.75;clip-path:inset(52% 0 14% 0);transform:translateX(5px)} 54%{opacity:.85;clip-path:inset(30% 0 42% 0);transform:translateX(-3px)} 72%{opacity:.5;clip-path:inset(0 0 76% 0);transform:translateX(2px)}} @keyframes lkSlice{0%,100%{clip-path:none;transform:none} 18%{clip-path:inset(14% 0 52% 0);transform:translateX(-2px)} 36%{clip-path:inset(56% 0 16% 0);transform:translateX(2px)} 54%{clip-path:inset(34% 0 38% 0);transform:translateX(-1px)} 72%{clip-path:inset(4% 0 74% 0);transform:translateX(1px)}} @keyframes lkL{0%,100%{opacity:0;transform:none}18%{opacity:.9;transform:translate(-3px,-1px)} 36%{opacity:.75;transform:translate(2px,1px)}54%{opacity:.85;transform:translate(-2px,0)} 72%{opacity:.5;transform:translate(1px,-1px)}} @keyframes lkR{0%,100%{opacity:0;transform:none}18%{opacity:.85;transform:translate(3px,1px)} 36%{opacity:.7;transform:translate(-2px,-1px)}54%{opacity:.8;transform:translate(2px,0)} 72%{opacity:.45;transform:translate(-1px,1px)}} #lockL .lkbt .b1{color:#02110e;background:var(--phos); box-shadow:inset 0 0 0 1px rgba(0,255,209,.5),0 0 24px rgba(0,255,209,.38)} #lockL .lkbt .b1 i:before{color:#0b3a34}#lockL .lkbt .b1 i:after{color:#12040c} #lockL .lkbt .b2{color:var(--haze);background:none;box-shadow:inset 0 0 0 1px rgba(150,180,200,.3)} #lockL .lkbt .b2 i:before{color:var(--phos)}#lockL .lkbt .b2 i:after{color:var(--mag)} #lockL .lkbt .b2:hover{color:var(--mag);box-shadow:inset 0 0 0 1px rgba(255,47,176,.6)} /* the decode. Two lines resolving out of noise,and the state under them. */ #lockL .lktx{position:relative;display:flex;align-items:center;justify-content:flex-start; width:min(100%,520px);height:126px;margin-top:30px;padding:0;border:0;background:none; cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent} #lockL .lktx>span{position:absolute;inset:0;pointer-events:none} #lockL .lktx .bed2{background:radial-gradient(40% 46% at 32% 50%,rgba(0,255,209,.07),transparent 74%); filter:blur(10px)} #lockL .lktx .lines{position:relative;z-index:2;inset:auto;white-space:pre; font:300 12.5px/2.05 var(--mono);letter-spacing:.16em} #lockL .lktx .ch{display:inline-block;min-width:.62em;color:#2e5f57;transition:color .12s} #lockL .lktx .ch.hot{color:var(--phos);text-shadow:0 0 12px rgba(0,255,209,.9)} #lockL .lktx .ch.done{color:rgba(226,255,249,.94);text-shadow:0 0 9px rgba(0,255,209,.45)} #lockL .lktx .rulez{left:0;right:auto;top:auto;bottom:20px;width:min(330px,86%);height:1px; background:linear-gradient(90deg,rgba(0,255,209,.5),transparent)} #lockL .lktx .lk{left:0;right:auto;top:auto;bottom:0;font:10px var(--mono);letter-spacing:.3em} #lockL .lktx .lk i{font-style:normal;position:absolute;left:0;bottom:0;white-space:nowrap;transition:.32s} #lockL .lktx .lk .w{color:var(--dim)} #lockL .lktx .lk .r{color:var(--phos);opacity:0;text-shadow:0 0 12px rgba(0,255,209,.5)} #lockL .lktx.locked .lk .w{opacity:0} #lockL .lktx.locked .lk .r{opacity:1} @media(max-width:899px){ #lockL .lkbt{margin-top:22px} #lockL .lkbt button{flex:1 1 0;padding:0 10px;min-height:48px} #lockL .lktx{margin-top:26px;height:118px;width:100%} } /* ══ panels: the blackbox entry,verbatim ══ */ #vpnl{position:fixed;inset:0;z-index:34;background:var(--void);overflow-y:auto; opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s; padding:76px var(--pad) 40px} #vpnl.on{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s 0s; animation:bxTear .62s steps(2,end)} #vpnl.on .in{animation:bxRgb .62s linear} #vpnl.on .in>*{animation:bxup .55s var(--ease) backwards} #vpnl.on .in>*:nth-child(1){animation-delay:.05s} #vpnl.on .in>*:nth-child(2){animation-delay:.12s} #vpnl.on .in>*:nth-child(3){animation-delay:.19s} #vpnl .sw{position:absolute;left:0;right:0;top:0;height:34%;z-index:3;pointer-events:none; opacity:0;background:linear-gradient(180deg,rgba(0,255,209,.2),transparent)} #vpnl.on .sw{animation:bxsw .7s cubic-bezier(.3,0,.2,1) 1} #vpnl .in{max-width:640px;margin:0 auto;position:relative;z-index:4} .phd{position:absolute;left:var(--pad);right:var(--pad);top:0;height:56px;display:flex; align-items:center;justify-content:space-between;gap:14px;z-index:6} .phd .pc{font:10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} .phd .pc b{color:var(--phos);font-weight:400} /* the back links scramble themselves,same as the live ones */ .pbk2{font:9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--haze); white-space:nowrap} .pbk2:hover{color:var(--phos)} .pbk2.gl{color:var(--phos);text-shadow:0 0 10px rgba(0,255,209,.7)} /* HEADERS ARE CAPITALS,DESKTOP AND PHONE */ .ph{margin-top:20px;font:300 clamp(28px,7vw,44px)/1.15 var(--mono);letter-spacing:.06em;color:#fff; text-transform:uppercase; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(238,242,248,.8),0 0 24px rgba(225,235,255,.4)} .ph span{display:block;color:var(--haze);text-shadow:none} .pm{margin-top:20px;font:12px/1.85 var(--mono);color:var(--haze);max-width:55ch} .pm b{color:#fff;font-weight:400} .pu{margin-top:18px;font:10px/1.8 var(--mono);color:var(--dim)} /* ══ VIDEO · RECEIVER ══ */ #vpnl .well{margin-top:22px;padding:16px;background:#050810; box-shadow:inset 0 0 0 1px rgba(150,180,200,.14),inset 0 22px 44px -22px #000} .vfr{position:relative;width:100%;aspect-ratio:16/9;background:#03060a; box-shadow:inset 0 0 0 1px rgba(200,222,232,.07)} .vfr iframe{position:absolute;inset:0;width:100%;height:100%;border:0} #vpnl .scanbar{position:relative;height:2px;margin-bottom:14px;background:rgba(180,205,215,.12);overflow:hidden} #vpnl .scanbar i{position:absolute;top:0;bottom:0;width:26%;background:var(--phos); box-shadow:0 0 12px rgba(0,255,209,.9);animation:khunt 3.2s var(--ease) infinite} #vpnl .rdout{margin-top:14px;display:flex;font:9px var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--dim)} #vpnl .rdout b{margin-left:auto;color:var(--phos);font-weight:400} /* ══ the two pages the lock opens ══ These arrived styled in the mockup but the rules for #card and the video well sat outside the block I copied,so the proof card had NO positioning at all and rendered inline,straight through the lock. Everything the two panels actually use is here. */ #cardp{position:fixed;inset:0;z-index:44;background:var(--void);overflow-y:auto; padding:76px var(--pad) 40px;opacity:0;visibility:hidden; transition:opacity .4s ease,visibility 0s .4s} #cardp.on{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s 0s; animation:bxTear .62s steps(2,end)} #cardp .in{max-width:640px;margin:0 auto} #cardp .holder{margin-top:24px} #cardp.on .in>*{animation:bxup .55s var(--ease) backwards} #cardp.on .in>*:nth-child(1){animation-delay:.05s} #cardp.on .in>*:nth-child(2){animation-delay:.12s} #cardp.on .in>*:nth-child(3){animation-delay:.19s} /* the recording's own well */ #vpnl .well{margin-top:22px;padding:16px;background:#050810; box-shadow:inset 0 0 0 1px rgba(150,180,200,.14),inset 0 22px 44px -22px #000} #vpnl .well .vfr{box-shadow:inset 0 0 0 1px rgba(200,222,232,.07)} #vpnl .vfr{position:relative;width:100%;aspect-ratio:16/9;background:#03060a} #vpnl .vfr iframe{position:absolute;inset:0;width:100%;height:100%;border:0} #vpnl .scanbar{position:relative;height:2px;margin-bottom:14px;background:rgba(180,205,215,.12); overflow:hidden} #vpnl .scanbar i{position:absolute;top:0;bottom:0;width:26%;background:var(--phos); box-shadow:0 0 12px rgba(0,255,209,.9);animation:khunt 3.2s var(--ease) infinite} #vpnl .rdout{margin-top:14px;display:flex;font:9px var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--dim)} #vpnl .rdout b{margin-left:auto;color:var(--phos);font-weight:400} /* the header row on both pages rides the top of the PAGE,not the document */ #vpnl .phd,#cardp .phd{position:absolute;left:var(--pad);right:var(--pad);top:0;height:56px; display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:6} #vpnl .phd .pc,#cardp .phd .pc{font:10px var(--mono);letter-spacing:.22em;text-transform:uppercase; color:var(--dim)} #vpnl .phd .pc b,#cardp .phd .pc b{color:var(--phos);font-weight:400} #vpnl .pbk2,#cardp .pbk2{font:9px var(--mono);letter-spacing:.2em;text-transform:uppercase; color:var(--haze);white-space:nowrap;cursor:pointer} #vpnl .pbk2:hover,#cardp .pbk2:hover{color:var(--phos)} #vpnl .pbk2.gl,#cardp .pbk2.gl{color:var(--phos);text-shadow:0 0 10px rgba(0,255,209,.7)} #vpnl .ph,#cardp .ph{margin-top:20px;font:300 clamp(28px,7vw,44px)/1.15 var(--mono); letter-spacing:.06em;color:#fff;text-transform:uppercase; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(238,242,248,.8),0 0 24px rgba(225,235,255,.4)} #vpnl .ph span,#cardp .ph span{display:block;color:var(--haze);text-shadow:none} #vpnl .pm,#cardp .pm{margin-top:20px;font:12px/1.85 var(--mono);color:var(--haze);max-width:55ch} #vpnl .pm b,#cardp .pm b{color:#fff;font-weight:400} @media(max-width:899px){#vpnl,#cardp{padding:58px var(--pad) 34px} #vpnl .phd,#cardp .phd{height:44px}} /* ══ THE LOCK ON A PHONE ══ The old lock centred a tiny creed,hid the lede and stood the key card up at full height — it was built for a page whose only job was the card. The doors and the decode live here now,so the phone gets the blackbox page's own scale,the key inline,and no card at all. */ .mobonly{display:none} @media(min-width:900px){.mobonly{display:none!important}} @media(max-width:899px){ #lock{padding:calc(52px + env(safe-area-inset-top,0px)) var(--pad) calc(40px + env(safe-area-inset-bottom,0px));justify-content:flex-start;align-items:stretch} #lockgrid{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto; gap:0;min-height:100%} #lockL{max-width:none;flex:1 1 auto;display:flex;flex-direction:column;text-align:left} #lockL *{text-align:left} #lockR{display:contents} /* the card costs half a screen and says nothing the key line doesn't */ #lockR .kcard{display:none} #opsys{display:block;font:9px var(--mono);letter-spacing:.34em;text-transform:uppercase; color:var(--steel)} #creed{text-align:left!important;white-space:normal;margin-top:18px;max-width:none; font:300 clamp(28px,7vw,44px)/1.15 var(--mono);letter-spacing:.06em;color:#fff; text-transform:none; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(238,242,248,.8),0 0 24px rgba(225,235,255,.4)} #creed span{display:block} #creed b{display:block;margin-top:0;color:var(--haze);text-shadow:none;font-weight:300} #lede{display:block;margin-top:20px;font:12px/1.85 var(--mono);color:var(--haze);max-width:none} /* the key,inline: same rail the card carries,none of its housing */ .mobonly{display:block} #lockL .kk{margin-top:28px;padding:22px 0 20px; border-top:1px solid rgba(200,222,232,.12);border-bottom:1px solid rgba(200,222,232,.12)} #lockL .kk .l{display:block;font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase; color:var(--steel)} #lockL .kk input{display:block;width:100%;margin-top:15px;background:none;border:0;outline:none; color:#fff;font:200 clamp(25px,7.6vw,32px) var(--mono);letter-spacing:.2em;padding:0} #lockL .kk input::placeholder{color:rgba(150,180,200,.24)} #lockL .kk .rl{display:block;margin-top:16px;width:100%;height:2px; background:rgba(180,205,215,.14);position:relative;overflow:hidden} #lockL .kk .rl i{position:absolute;top:0;bottom:0;width:32%;background:var(--phos); box-shadow:0 0 12px rgba(0,255,209,.9);animation:khunt 3.2s var(--ease) infinite} #lockL .kk .h{display:flex;margin-top:14px;font:10px/1.8 var(--mono);color:var(--dim)} #lockL .kk .h b{margin-left:auto;color:var(--phos);font-weight:400} #lockL .lkbt{margin-top:22px} #lockL .lkbt button{flex:1 1 0;padding:0 10px;min-height:48px} /* the decode closes the column,taking whatever space is left */ #lockL .lktx{margin-top:auto;padding-top:30px;height:auto;min-height:118px;width:100%} #lhint{display:none} } /* the till needs room: the desk window was sized for a list,not two cards */ #dwin .bxact{margin-top:26px} #dwin .bxgo2{font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#02110e; background:var(--phos);padding:15px 30px;border:0;cursor:pointer; box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 26px rgba(0,255,209,.38);transition:.26s} #dwin .bxgo2:hover{box-shadow:0 0 0 1px rgba(0,255,209,.8),0 0 38px rgba(0,255,209,.55)} @media(max-width:899px){#dwin .bxgo2{width:100%;text-align:center;padding:16px 10px}} /* the blackbox ladder: same switch and cards as the desk,in lilac */ #blackbox .thsw{display:flex;margin:24px 0 0;width:100%;max-width:420px; box-shadow:inset 0 0 0 1px var(--hair2)} #blackbox .thsw button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px; background:none;border:0;cursor:pointer;font:9px var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--dim);padding:13px 10px;transition:.22s} #blackbox .thsw button.on{color:#12040c;background:var(--mag);box-shadow:0 0 22px rgba(255,47,176,.3)} #blackbox .thsw .sv{font:9px var(--mono);letter-spacing:.14em;color:var(--mag)} #blackbox .thsw button.on .sv{color:#12040c;opacity:.75} #blackbox .bxtwo{margin-top:12px} #blackbox .bxtwo .rc .pm2{display:block;margin-top:7px;font:11px var(--mono);letter-spacing:.08em; color:var(--steel)} #blackbox .bxtwo .rc.on .pm2{color:var(--mag)} #blackbox .bxtwo .rc .tag{position:absolute;right:19px;top:17px;font:9px var(--mono); letter-spacing:.2em;text-transform:uppercase;color:var(--mag)} /* the page headings read as headings,like every other page */ #blackbox .bxh,#dhead{text-transform:uppercase} /* ══ THE DOOR · the mockup's page ══ The live door centred a small heading over a centred list. The approved page is a left-aligned column: the heading at the blackbox scale with its second line in haze,the two rows on hairlines,and the lit bar sliding in at the left edge on approach. */ #doors{justify-content:flex-start;align-items:stretch} #doors .din{width:100%;max-width:640px;margin:0 auto;text-align:left} #doors #dhead,#doors #dsub{display:none} #doors .din .ph{margin-top:20px;text-align:left; font:300 clamp(28px,7vw,44px)/1.15 var(--mono);letter-spacing:.06em;color:#fff; text-transform:uppercase; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(238,242,248,.8),0 0 24px rgba(225,235,255,.4)} #doors .din .ph span{display:block;color:var(--haze);text-shadow:none} #doors .din .pm{margin-top:20px;text-align:left;font:12px/1.85 var(--mono); color:var(--haze);max-width:55ch} #doors #dlist{margin-top:26px;width:100%;max-width:none} #doors .dr{position:relative;display:grid;grid-template-columns:auto 1fr; column-gap:20px;row-gap:6px;width:100%;text-align:left;padding:20px 4px; border-top:1px solid var(--hair);transition:.28s var(--ease);cursor:pointer; background:none;border-left:0;border-right:0;border-bottom:0} #doors .dr:last-of-type{border-bottom:1px solid var(--hair)} #doors .dr:before{content:"";position:absolute;left:-14px;top:20px;bottom:20px;width:1px; background:var(--phos);opacity:0;box-shadow:0 0 9px rgba(0,255,209,.8); transition:.28s var(--ease)} #doors .dr:hover:before{opacity:1;top:12px;bottom:12px} #doors #bdoor:before{background:var(--mag);box-shadow:0 0 9px rgba(255,47,176,.8)} #doors .dr .n{grid-row:1/3;align-self:center;font:300 17px var(--num);color:var(--dim); transition:.28s} #doors .dr:hover .n{color:var(--phos)} #doors #bdoor:hover .n{color:var(--mag)} #doors .dr .t{grid-column:2;font:300 14px var(--mono);letter-spacing:.3em;color:var(--haze); transition:.28s} #doors .dr:hover .t{color:#fff;text-shadow:var(--bloomS)} #doors #bdoor:hover .t{color:var(--mag)} #doors .dr .s{grid-column:2;font:11px/1.8 var(--mono);color:var(--dim)} #doors .dr .go{grid-column:2;margin-top:6px;font:9px var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--mag)} #doors #bdout,#doors #bxlink{max-width:640px;margin-left:auto;margin-right:auto} @media(max-width:899px){#doors .din{max-width:none}} /* ══════════════ THE ROUND OF FIXES ══════════════ */ /* the lede is 60 characters wide,not the live 55 */ #lede{max-width:60ch} /* the phone's headline is a headline: capitals,like every other page */ @media(max-width:899px){ #creed{text-transform:uppercase} /* the decode keeps its fixed height — going auto collapsed the gap between the second line and the rule under it,because both are placed from the bottom of the box */ #lockL .lktx{margin-top:auto;height:126px;min-height:126px;width:100%} } /* GET A KEY arrives the way the blackbox does,instead of just appearing */ #doors.on{animation:bxTear .62s steps(2,end)} #doors.on .din{animation:bxRgb .62s linear} #doors.on .din>*{animation:bxup .55s var(--ease) backwards} #doors.on .din>*:nth-child(1){animation-delay:.05s} #doors.on .din>*:nth-child(2){animation-delay:.12s} #doors.on .din>*:nth-child(3){animation-delay:.19s} /* ══ THE TILL · the approved layout ══ 560px column,the switch full width across the top,and the two cards STACKED — they were side by side,which is not what the mockup does. */ #dwin .bxtwo{margin-top:22px;display:flex;flex-direction:column;gap:10px} #dwin .bxtwo .rc{width:100%;flex:none;text-align:left} #dwin .thsw{margin:22px 0 0;width:100%;max-width:none} #dwin .thsw button{flex:1;padding:13px 10px;letter-spacing:.22em} #blackbox .bxin{max-width:560px} #blackbox .thsw{margin:22px 0 0;width:100%;max-width:none} #blackbox .thsw button{flex:1;padding:13px 10px;letter-spacing:.22em} #blackbox .bxtwo{margin-top:22px;display:flex;flex-direction:column;gap:10px} #blackbox .bxtwo .rc{width:100%;flex:none;text-align:left} /* the phone column ran ~30px past the fold,so the decode's rule and its state line were clipped. Reclaimed from the gaps,not from the type. */ @media(max-width:899px){ #lock{padding-top:calc(44px + env(safe-area-inset-top,0px)); padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))} #creed{margin-top:14px} #lede{margin-top:16px} #lockL .kk{margin-top:22px;padding:18px 0 16px} #lockL .lkbt{margin-top:18px} #lockL .lktx{height:118px;min-height:118px;padding-top:0} } /* ══ the back link IS the blackbox's back button ══ Measured against #bxback rather than guessed at: BUTTON,10px,.24em,padding 10px 0. My own !important was forcing it to 9px,which is why it kept coming out smaller than the one it was supposed to match. */ #vpnl .pbk2,#cardp .pbk2{background:none;border:0;cursor:pointer; font:10px var(--mono);letter-spacing:.24em;text-transform:uppercase; color:var(--haze);padding:10px 0;white-space:nowrap} #vpnl .pbk2:hover,#cardp .pbk2:hover{color:var(--phos)} /* the chain readout hangs off the same left edge as the rows above it */ #doors #bdout{width:100%;max-width:640px;margin:22px auto 0;text-align:left} #doors #bdout > *{text-align:left;margin-left:0;margin-right:0} #doors #bstep,#doors #bwal,#doors #bkey,#doors #bnote{padding-left:0} #doors #buse{margin-left:0} /* ══ the work feed,as designed ══ */ #deck .fd,#reg #prof .fd{margin-top:36px} #deck #dwBody .fdsay,#reg #prof .fdsay{margin:22px 0 10px;font:12px/1.9 var(--mono);color:var(--haze)} #deck #dwBody .fdsay b,#reg #prof .fdsay b{color:#fff;font-weight:400} #deck .fdh,#reg #prof .fdh{display:flex;align-items:baseline;gap:14px;padding-bottom:12px; border-bottom:1px solid var(--hair2)} #deck .fdh h4,#reg #prof .fdh h4{font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase; color:var(--phos);opacity:.75} #deck .fdh .add,#reg #prof .fdh .add{margin-left:auto;background:none;border:0;cursor:pointer;font:9px var(--mono); letter-spacing:.26em;text-transform:uppercase;color:var(--phos)} #deck .fe,#reg #prof .fe{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair); width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0; cursor:pointer;transition:.22s} #deck .fe,#reg #prof .fe{position:relative} #deck .fe:before,#reg #prof .fe:before{content:"";position:absolute;left:-14px;top:20px;bottom:20px;width:1px; background:var(--phos);opacity:0;box-shadow:0 0 9px rgba(0,255,209,.8);transition:.28s var(--ease)} #deck .fe:hover:before,#reg #prof .fe:hover:before{opacity:1;top:12px;bottom:12px} #deck .fe:hover .sy,#reg #prof .fe:hover .sy{text-shadow:var(--bloomS)} #deck .fe .bd,#reg #prof .fe .bd{flex:1 1 auto;min-width:0} #deck .fe .t,#reg #prof .fe .t{display:flex;align-items:baseline;gap:10px} #deck .fe .sy,#reg #prof .fe .sy{font:300 15px var(--mono);letter-spacing:.13em;color:#fff} #deck .fe .tf,#reg #prof .fe .tf{font:9px var(--mono);letter-spacing:.2em;color:var(--phos)} #deck .fe .sd,#reg #prof .fe .sd{font:9px var(--mono);letter-spacing:.2em;color:var(--haze)} #deck .fe .sd.mkshort,#reg #prof .fe .sd.mkshort{color:var(--mag)} #deck .fe .sd.both,#reg #prof .fe .sd.both{color:var(--steel)} #deck .fe .n,#reg #prof .fe .n{margin-left:auto;font:9px var(--mono);color:var(--steel)} #deck .fe:hover .gv,#reg #prof .fe:hover .gv{color:var(--phos);transform:translateX(3px)} #deck .fe .d,#reg #prof .fe .d{margin-top:8px;font:11px/1.7 var(--mono);color:var(--haze)} #deck .fe .sp2,#reg #prof .fe .sp2{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:11px 14px} @media(min-width:900px){#deck .fe .sp2,#reg #prof .fe .sp2{grid-template-columns:repeat(6,1fr)}} #deck .fe .sp2 .l,#reg #prof .fe .sp2 .l{display:block;font:9px var(--mono);letter-spacing:.16em;color:var(--dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #deck .fe .sp2 .v,#reg #prof .fe .sp2 .v{display:block;margin-top:5px;font:300 14px var(--num);color:#eef4f6} #deck .fe .sp2 .bst .v,#reg #prof .fe .sp2 .bst .v{color:var(--phos)} @media(max-width:899px){#deck .fe,#reg #prof .fe{gap:11px}} /* at CL-01 there are no configs,so ideas take the whole row */ #deck .pr.solo{grid-template-columns:1fr;display:grid} /* ══ the work window matches the mockup's measure ══ The list opened at the desk window's default width,which is wider than the feed was drawn for,so the six spec cells stretched and the row read as a stripe. 560px,same as the till. */ #dwin .dwin-in{max-width:calc(624px + 2*var(--pad))} #dwin .fd{margin-top:8px} /* the sheets that can be dragged shut need a surface to grab */ #mask,#dwin{touch-action:pan-y} /* the two ways to hand a key were touching each other */ #dwin .dwact{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch} #dwin .dwact .lnk{margin:0} /* the clearance row in settings: what he holds,when it goes,where to change it */ #acct .subrow{display:flex;align-items:baseline;gap:14px;margin-top:10px;flex-wrap:wrap} #acct .subrow #subNow{font:300 15px var(--mono);letter-spacing:.2em;color:var(--phos); text-shadow:0 0 10px rgba(0,255,209,.5)} #acct .subrow #subEnds{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--haze)} #acct .subrow #subMng{margin-left:auto;font:9px var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--haze);text-decoration:none;transition:.22s} #acct .subrow #subMng:hover{color:var(--phos)} /* the two ways to hand a key must not touch */ #deck .dwact{gap:12px;flex-wrap:wrap} /* ══ TRADES + REGISTRY ══ */ /* the profile column is the desk's list measure; a list is never centred */ #reg #prof .pfw{width:min(calc(624px + 2*var(--pad)),100%);text-align:left} #reg #prof .pname,#reg #prof .pclr,#reg #prof .pline{text-align:center} #reg #prof .fd{margin-top:22px} #reg #prof .pch.sw{display:flex;align-items:baseline;gap:22px} #reg #prof .pch.sw button{background:none;border:0;cursor:pointer;font:inherit; letter-spacing:inherit;text-transform:inherit;color:rgba(150,180,200,.4);padding:0;transition:.2s} #reg #prof .pch.sw button.on{color:var(--phos)} #reg #prof .pch.sw .ct{margin-left:auto;font:8.5px var(--mono);letter-spacing:.18em;color:var(--dim)} /* NOD sits at the row's right,where a config's button sat; the chip in .t */ #reg .vk,#deck .vk{display:inline-block;line-height:1;font:8.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:5px 8px; white-space:nowrap;color:var(--haze);box-shadow:inset 0 0 0 1px rgba(150,180,200,.28)} #reg .vk.be,#deck .vk.be{color:var(--phos);box-shadow:inset 0 0 0 1px rgba(0,255,209,.42)} #reg .vk.tp,#deck .vk.tp{color:#02110e;background:var(--phos);box-shadow:none} #reg .vk.st,#deck .vk.st{color:#12040c;background:var(--mag);box-shadow:none} #reg .vk.iv,#deck .vk.iv{color:var(--dim)} #reg .fe .t .vk,#deck .fe .t .vk{margin-left:2px} /* the thread spine — profile/03_OPEN_THREAD.html,production */ #prof .spinewrap{width:100%;padding:0} #prof .spinewrap .en{border-top:0;margin-top:6px} #prof .sym{font:300 16px var(--mono);letter-spacing:.13em;color:#fff} #prof .side{font:9px var(--mono);letter-spacing:.22em;color:var(--haze)} #prof .side.s{color:var(--mag)} #prof .tfr{font:9px var(--mono);letter-spacing:.2em;color:var(--phos)} #prof .by{font:9px var(--mono);letter-spacing:.18em;color:var(--steel)} #prof .when{font:9px var(--mono);letter-spacing:.18em;color:var(--dim)} #prof .nods{font:9px var(--mono);letter-spacing:.18em;color:var(--dim)} #prof .nods b{color:var(--phos);font-weight:400} #prof .hd{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap} #prof .hd .when{margin-left:auto} #prof .up{font:11px/1.7 var(--mono);color:var(--haze)} #prof .lvl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 16px} @media(max-width:640px){#prof .lvl{grid-template-columns:repeat(2,1fr)}} #prof .lvl .l{display:block;font:9px var(--mono);letter-spacing:.16em;color:var(--dim)} #prof .lvl .v{display:block;margin-top:4px;font:300 14px var(--num);color:#eef4f6} #prof .frozen{margin-top:12px;font:9px var(--mono);letter-spacing:.16em;color:var(--dim)} #prof .nod{font:9px var(--mono);letter-spacing:.24em;text-transform:uppercase;cursor:pointer; background:none;border:0;color:var(--phos);padding:8px 15px; box-shadow:inset 0 0 0 1px rgba(0,255,209,.4);transition:.24s;white-space:nowrap} #prof .nod:hover,#prof .nod.on{background:var(--phos);color:#02110e} #prof .en{margin-top:20px;position:relative;padding:22px 0 22px 30px; border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair)} #prof .en:before{content:"";position:absolute;left:5px;top:30px;bottom:30px;width:1px; background:rgba(150,180,200,.22)} #prof .nd{position:relative;padding:13px 0} #prof .nd .dot{position:absolute;left:-30px;top:19px;width:9px;height:9px;border-radius:50%; background:var(--void);box-shadow:inset 0 0 0 1px rgba(150,180,200,.45)} #prof .nd.live .dot{background:var(--phos);box-shadow:0 0 12px rgba(0,255,209,.9)} #prof .nd .rw{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} #prof .nd .rw .when{margin-left:auto} #prof .nd .up{margin-top:7px} #prof .base{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)} #prof .act{margin-top:20px;display:flex;align-items:center;gap:14px} #prof .act .nods{margin-left:auto} /* the drawer on a thread — registry/04_DRAWER.html */ /* the rail: lanes,then sort; OPERATORS takes no sort */ #reg #ctl button.off{color:rgba(150,180,200,.32);cursor:default} #reg .lgd{flex-basis:100%;width:100%;margin-top:10px; font:8.5px var(--mono);letter-spacing:.16em;color:var(--dim);text-align:center;pointer-events:none} @media(max-width:819px){ /* six words and a rail on 390px: the legend is a desktop aside; nothing wraps */ #reg .lgd{display:none} #reg #ctl{padding:0 6px} #reg #ctl button{white-space:nowrap;padding:9px 4px;letter-spacing:.06em;font-size:9px} } /* the gauge as a leaderboard on CONFIGS */ #reg #arGauge .gnm{position:absolute;right:14px;transform:translateY(-50%); font:8px var(--mono);letter-spacing:.18em;color:var(--dim);white-space:nowrap;text-align:right} #reg #arGauge .gnm b{color:var(--phos);font-weight:400} #reg #arGauge .gnm.on{color:#eef4f6} #reg #arGauge .gnm.on b{text-shadow:0 0 8px rgba(0,255,209,.8)} /* the mask on a thread: the lock,and the window it counts down */ #mask .mkact{align-items:center} #mask .lockline{margin-left:auto;font:8.5px var(--mono);letter-spacing:.18em;color:var(--phos)} /* the surge: one flash layer the corporation floors share */ #surge{position:fixed;inset:0;z-index:56;pointer-events:none;opacity:0} #surge.go{animation:sg .46s steps(3,end) 1} @keyframes sg{0%{opacity:0}20%{opacity:1;background:var(--accglow);transform:translateX(-5px)} 45%{opacity:1;background:rgba(0,255,209,.1);transform:translateX(6px)} 70%{opacity:.5;background:transparent}100%{opacity:0}} /* ══ THE OUTPOST ══ */ #out{ --acc:var(--phos); --accsoft:rgba(0,255,209,.5); --accglow:rgba(0,255,209,.42); --band:rgba(210,235,240,.78); --bandm:rgba(140,175,190,.5); --bandl:rgba(110,125,135,.34); --amb:rgba(0,70,74,.13); --ink3:var(--white); --sub3:var(--haze); } #out.held{--band:rgba(190,215,225,.62);--bandm:rgba(125,155,170,.44);--bandl:rgba(100,115,128,.3); --amb:rgba(12,34,44,.24)} #out.burn{--acc:var(--phos); --accsoft:rgba(0,255,209,.55); --accglow:rgba(0,255,209,.42); --band:rgba(150,235,220,.7);--bandm:rgba(70,180,160,.46);--bandl:rgba(50,120,108,.3); --amb:rgba(0,80,68,.22)} #out .o-flr{position:absolute;inset:0;display:flex;flex-direction:column; padding:calc(74px + env(safe-area-inset-top,0px)) var(--pad) calc(64px + env(safe-area-inset-bottom,0px)); background:radial-gradient(140% 80% at 50% 42%,var(--amb),transparent 72%);transition:background .5s} #out .o-flr *{box-sizing:border-box} #out.shake .o-flr{animation:shk .4s steps(2,end) 1} @keyframes shk{0%,100%{transform:none}30%{transform:translateX(-4px)}70%{transform:translateX(4px)}} #out .o-corp{position:relative;flex:none} #out .o-corp .o-co{display:none;font:9px var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--steel)} #out .o-corp .o-ttl{margin-top:11px;font:300 clamp(20px,2.6vw,31px)/1.2 var(--mono);letter-spacing:.07em; text-transform:uppercase;color:var(--white);text-shadow:var(--bloomS)} #out .o-corp .o-ttl i{display:block!important;font-style:normal;color:var(--haze);text-shadow:none; margin-top:4px;transition:color .4s} #out.burn .o-corp .o-ttl i{color:var(--phos)} #out .o-corp .o-rt{display:none;position:absolute;right:0;top:0;font:9px var(--mono);letter-spacing:.28em; text-transform:uppercase;color:var(--steel);transition:color .4s;white-space:nowrap} @media(max-width:860px){ #out .o-corp .o-co{display:none;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; padding-right:0} #out .o-corp .o-rt{display:none;position:static;display:block;margin-top:7px;text-align:left} } #out.burn .o-corp .o-rt{color:var(--phos)} #out .o-corp:after{content:"";display:block;margin-top:15px;height:1px; background:linear-gradient(90deg,var(--hair2),transparent)} #out .o-hint2{display:none;flex:none;margin-top:12px;font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase; color:var(--steel)} #out .o-fz{position:relative;flex:1 1 auto;margin-top:14px;min-height:0;display:flex; flex-direction:column} #out .o-left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center; gap:clamp(10px,2vh,22px)} #out .o-row3{position:relative;display:flex;align-items:center;gap:clamp(12px,2.4vw,40px);cursor:pointer} #out .o-gh{font:500 clamp(15px,2.2vw,29px)/1 var(--mono);letter-spacing:.02em;text-transform:uppercase; color:var(--band);opacity:.3;white-space:nowrap;transition:color .5s,opacity .3s} #out .o-row3:hover .o-gh,#out .o-row3.on .o-gh{opacity:.55} #out .o-row3 .a{animation:gA 2.4s steps(2,end) infinite} #out .o-row3 .c{animation:gC 2.4s steps(2,end) infinite} @keyframes gA{0%,100%{transform:translateX(0)}44%{transform:translateX(-7px) skewX(-3deg)} 62%{transform:translateX(4px)}} @keyframes gC{0%,100%{transform:translateX(0)}38%{transform:translateX(8px)} 68%{transform:translateX(-5px) skewX(2deg)}} #out .o-lit3{position:relative;padding:clamp(7px,1vw,12px) clamp(14px,2vw,25px); background:var(--band);color:var(--void);transition:background .5s,box-shadow .3s; clip-path:polygon(0 0,100% 0,100% 72%,95% 100%,0 100%)} #out .o-row3:hover .o-lit3,#out .o-row3.on .o-lit3{box-shadow:0 0 56px -14px var(--band)} #out .o-lit3 .o-t3{font:500 clamp(15px,2.2vw,29px)/1 var(--mono);letter-spacing:.02em; text-transform:uppercase;white-space:nowrap} #out .o-lit3 .o-tg3{display:none;position:absolute;right:clamp(14px,2vw,25px);top:5px;font:9px var(--mono); letter-spacing:.2em} #out .o-bar3{position:absolute;left:-10px;top:12%;bottom:12%;width:6px;background:var(--band); transition:background .5s;clip-path:polygon(0 0,100% 0,100% 26%,0 34%,0 62%,100% 70%,100% 100%,0 100%)} #out .o-row3 .o-kd{margin-left:auto;font:10px var(--mono);letter-spacing:.22em;text-transform:uppercase; color:var(--steel);transition:color .4s;flex:none} #out .o-row3.on{--band:var(--phos)} #out .o-row3.on .o-lit3{background:var(--phos);color:#02110e} #out .o-row3.on .o-gh{color:var(--phos)} #out .o-row3.on .o-bar3{background:var(--phos)} #out .o-row3.on .o-kd{color:var(--white)} .o-dos{flex:none;padding-top:18px;margin-top:20px;border-top:1px solid var(--hair2); min-height:118px} #out .o-dos{flex:none;padding-top:18px;margin-top:20px;border-top:1px solid var(--hair2);min-height:118px} #out .o-dos .o-lbl4{font:10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--steel); transition:color .4s} #out .o-dos.on .o-lbl4{color:var(--phos)} #out .o-dos .o-why{margin-top:11px;font:12px/1.9 var(--mono);color:var(--haze);max-width:80ch} #out .o-dos .o-go2{display:inline-block;margin-top:14px;font:10px var(--mono);letter-spacing:.24em; text-transform:uppercase;color:var(--steel);text-decoration:none;transition:color .3s} #out .o-dos.on .o-go2{color:var(--phos)} #out .o-dos .o-rest{color:var(--haze)} @media(max-width:860px){ #out .o-left{justify-content:flex-start;gap:9px} #out .o-row3 .o-gh{display:none} #out .o-row3{gap:12px} #out .o-dos{min-height:0} } #out .o-oins{flex:none;margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap; font:10px var(--mono);letter-spacing:.3em;border-top:1px solid var(--hair)} #out .o-oik{color:var(--steel);text-decoration:none;transition:color .25s;text-transform:uppercase} #out a.o-oik:hover{color:var(--phos)} #out .o-osep{color:var(--dim)} #out .o-owp{display:inline-flex;gap:12px;align-items:center;color:var(--steel)} #out .o-owp a{color:var(--steel);text-decoration:none;font-size:9px;letter-spacing:.24em;transition:color .25s} #out .o-owp a:hover{color:var(--phos)} /* ══ THE RESERVE ══ */ #res{ --acc:var(--phos); --accsoft:rgba(0,255,209,.5); --accglow:rgba(0,255,209,.42); --band:rgba(210,235,240,.78); --bandm:rgba(140,175,190,.5); --bandl:rgba(110,125,135,.34); --amb:rgba(0,70,74,.13); --ink3:var(--white); --sub3:var(--haze); } #res.held{--band:rgba(190,215,225,.62);--bandm:rgba(125,155,170,.44);--bandl:rgba(100,115,128,.3); --amb:rgba(12,34,44,.24)} #res.burn{--acc:var(--mag); --accsoft:rgba(255,47,176,.55); --accglow:rgba(255,47,176,.42); --band:rgba(255,120,200,.7);--bandm:rgba(200,70,150,.46);--bandl:rgba(140,60,105,.3); --amb:rgba(120,10,80,.26)} #res .r-flr{position:absolute;inset:0;display:flex;flex-direction:column; padding:calc(74px + env(safe-area-inset-top,0px)) var(--pad) calc(64px + env(safe-area-inset-bottom,0px)); background:radial-gradient(140% 80% at 50% 42%,var(--amb),transparent 72%);transition:background .5s} #res .r-flr *{box-sizing:border-box} #res.shake .r-flr{animation:shk .4s steps(2,end) 1} #res .r-corp{position:relative;flex:none} #res .r-corp .r-co{display:none;font:9px var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--steel)} #res .r-corp .r-ttl{margin-top:11px;font:300 clamp(20px,2.6vw,31px)/1.2 var(--mono);letter-spacing:.07em; text-transform:uppercase;color:var(--white);text-shadow:var(--bloomS)} #res .r-corp .r-ttl i{display:block!important;font-style:normal;color:var(--haze);text-shadow:none; margin-top:4px;transition:color .4s} #res.burn .r-corp .r-ttl i{color:#ffa8dc} #res .r-corp .r-rt{display:none;position:absolute;right:0;top:0;font:9px var(--mono);letter-spacing:.28em; text-transform:uppercase;color:var(--steel);transition:color .4s;white-space:nowrap} @media(max-width:860px){ #res .r-corp .r-co{display:none;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; padding-right:0} #res .r-corp .r-rt{display:none;position:static;display:block;margin-top:7px;text-align:left} } #res.burn .r-corp .r-rt{color:var(--mag)} #res .r-corp:after{content:"";display:block;margin-top:15px;height:1px; background:linear-gradient(90deg,var(--hair2),transparent)} #res .r-hint2{display:none;flex:none;margin-top:12px;font:9px var(--mono);letter-spacing:.28em;text-transform:uppercase; color:var(--steel)} #res .r-boot{position:absolute;inset:0;z-index:70;background:#05080c;display:flex; align-items:center;justify-content:center; transition:opacity .55s var(--ease),visibility 0s .55s} #res .r-boot.off{opacity:0;visibility:hidden;pointer-events:none} #res .r-boot .r-plate{position:relative;display:flex;align-items:center;gap:clamp(16px,4vw,60px)} #res .r-boot .r-ghost{font:500 clamp(19px,3.2vw,42px)/1.04 var(--mono);letter-spacing:.02em; text-transform:uppercase;color:var(--phos);opacity:.4;white-space:pre;text-align:left} #res .r-boot .r-ghost.a{animation:bgA 2.1s steps(2,end) infinite} #res .r-boot .r-ghost.c{opacity:.3;animation:bgC 2.1s steps(2,end) infinite} @keyframes bgA{0%,100%{transform:translateX(0)}42%{transform:translateX(-6px) skewX(-3deg)} 60%{transform:translateX(3px)}} @keyframes bgC{0%,100%{transform:translateX(0)}38%{transform:translateX(7px)} 66%{transform:translateX(-4px) skewX(2deg)}} #res .r-boot .r-lit{position:relative;padding:clamp(10px,1.6vw,20px) clamp(18px,2.4vw,34px); background:var(--phos);color:#02110e;box-shadow:0 0 90px -20px rgba(0,255,209,.55); clip-path:polygon(0 0,100% 0,100% 74%,96% 100%,0 100%)} #res .r-boot .r-lit .r-t2{font:500 clamp(19px,3.2vw,42px)/1.04 var(--mono);letter-spacing:.02em; text-transform:uppercase;white-space:pre} #res .r-boot .r-lit .r-tag2{position:absolute;right:clamp(18px,2.4vw,34px);top:9px; font:9px var(--mono);letter-spacing:.22em} #res .r-boot .r-bar2{position:absolute;left:-14px;top:14%;bottom:14%;width:7px;background:var(--phos); clip-path:polygon(0 0,100% 0,100% 26%,0 34%,0 62%,100% 70%,100% 100%,0 100%)} #res .r-boot .r-ln{position:absolute;left:0;right:0;bottom:-40px;text-align:center; font:10px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--haze)} #res .r-boot .r-ln b{color:var(--phos);font-weight:400} @media(max-width:860px){ #res .r-boot .r-ghost{display:block}.r-boot .r-ln{bottom:-34px;letter-spacing:.24em}} #res .r-fz{position:relative;flex:1 1 auto;margin-top:14px;min-height:0;display:flex; gap:clamp(16px,2.6vw,40px)} #res .r-dl{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} #res .r-dr{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;cursor:ns-resize;touch-action:pan-x; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} #res .r-dr.drag{cursor:grabbing} #res .r-st2{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center; gap:4px;transform-origin:50% 50%;will-change:transform,opacity} #res .r-b3{width:100%;height:8px;border-radius:4px;background:var(--band);transition:background .5s} #res .r-b3.m{background:var(--bandm)}.r-b3.l{background:var(--bandl)} #res .r-b3.r-gap{background:none!important;box-shadow:inset 0 0 0 1px var(--accsoft)} #res .r-b3.r-gl{background:var(--phos)!important;box-shadow:0 0 10px rgba(0,255,209,.7)} #res .r-cr3{position:absolute;left:0;right:0;top:50%;height:1px; background:linear-gradient(90deg,transparent,var(--hair2),transparent)} #res .r-hd3{position:absolute;left:50%;top:6%;bottom:6%;width:1px;z-index:6;background:var(--acc); box-shadow:0 0 15px var(--accglow);opacity:.75;transition:background .4s} #res .r-cut{position:absolute;left:0;right:0;top:50%;z-index:9;text-align:center; transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .22s} #res .r-cut.on{opacity:1;animation:cutin .34s steps(2,end) 1} @keyframes cutin{0%{transform:translateY(-50%) scaleX(.2)} 45%{transform:translateY(-50%) scaleX(1.04) translateX(6px)} 100%{transform:translateY(-50%) scaleX(1)}} #res .r-cut span{display:inline-block;background:var(--mag);color:#12040c;padding:7px 22px; font:10px var(--mono);letter-spacing:.36em;box-shadow:0 0 44px var(--accglow)} .r-dos{flex:0 0 clamp(300px,32vw,430px);display:flex;flex-direction:column;justify-content:center; gap:0;padding-left:clamp(16px,2.4vw,32px)} #res .r-dos{flex:0 0 clamp(300px,32vw,430px);display:flex;flex-direction:column;justify-content:center; gap:0;padding-left:clamp(16px,2.4vw,32px)} #res .r-rail{display:flex;flex-direction:column;margin-bottom:22px} #res .r-rail .r-rr{position:relative;display:flex;align-items:baseline;gap:12px;padding:11px 0; cursor:pointer;border-bottom:1px solid var(--hair)} #res .r-rail .r-rr.x:before{content:"";position:absolute;left:calc(-1*clamp(16px,2.4vw,32px) - 1px); top:50%;width:0;height:1px;background:var(--acc);transform:translateY(-50%);transition:.3s} #res .r-rail .r-rr.on:before{width:clamp(16px,2.4vw,32px);box-shadow:0 0 10px var(--accglow)} #res .r-rail .r-rr .r-cd{font:300 19px var(--num);color:var(--steel);transition:color .3s;min-width:62px} #res .r-rail .r-rr .r-nm{font:10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--steel); transition:color .3s} #res .r-rail .r-rr .r-pc{margin-left:auto;font:11px var(--mono);letter-spacing:.16em;color:var(--steel); transition:color .3s} #res .r-rail .r-rr.on .r-cd,#res .r-rail .r-rr.on .r-nm,#res .r-rail .r-rr.on .r-pc{color:var(--white)} #res .r-rail .r-rr.on .r-cd{text-shadow:var(--bloomS)} #res .r-dos .r-lbl4{font:10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--steel); transition:color .4s} #res.burn .r-dos .r-lbl4{color:var(--mag)} #res .r-dos .r-why{margin-top:12px;font:12px/1.85 var(--mono);color:var(--haze)} #res .r-dos .r-why b{color:var(--white);font-weight:400} #res .r-dos .r-sps{margin-top:16px;display:flex;flex-direction:column;gap:9px; font:10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--steel)} #res .r-dos .r-sps b{color:var(--white);font-weight:400} #res .r-dos .r-sps .g{color:var(--phos)} #res .r-idx{display:none} @media(max-width:860px){ #res .r-fz{flex-direction:column;gap:0} #res .r-dos{flex:none;padding-left:0;border-left:0;justify-content:flex-start} #res .r-rail{display:none} #res .r-idx{display:grid;grid-template-columns:repeat(4,1fr);flex:none;margin-top:16px; border-top:1px solid var(--hair2)} #res .r-idx .r-as{position:relative;padding:13px 0 0;cursor:pointer} #res .r-idx .r-as:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px; background:transparent;transition:.3s} #res .r-idx .r-as.on:before{background:var(--acc);box-shadow:0 0 11px var(--accglow)} #res .r-idx .r-as .r-cd{font:300 17px var(--num);color:var(--dim);transition:color .3s} #res .r-idx .r-as .r-pc{margin-top:4px;font:10px var(--mono);letter-spacing:.18em;color:var(--dim); transition:color .3s} #res .r-idx .r-as.on .r-cd,#res .r-idx .r-as.on .r-pc{color:var(--white)} #res .r-dos{margin-top:18px} #res .r-dos .r-why{font-size:12px} #res .r-dos .r-sps{gap:8px} #res .r-cut span{letter-spacing:.24em;padding:6px 14px;font-size:9px} } /* the corp line,the state label and the hints are off both floors,every size */ #res .r-corp .r-rt,#out .o-corp .o-rt,#res .r-corp .r-co,#out .o-corp .o-co,#res .r-hint2,#out .o-hint2{display:none!important} #res .r-boot .r-tag2{display:none} #res .r-boot .r-ln{white-space:nowrap} /* the desk's last rungs clear the footer fade on a phone */ @media(max-width:899px){#deck #stage{padding-bottom:115px}} /* #out · the page's own weather,under its content */ #out .o-gl{position:absolute;inset:0;z-index:60;pointer-events:none;opacity:.42; background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)} #out .o-dust{position:absolute;inset:0;z-index:59;pointer-events:none;mix-blend-mode:screen;opacity:.32; background-image:radial-gradient(1.5px 1.5px at 12% 22%,rgba(233,241,243,.45),transparent 60%), radial-gradient(1px 1px at 34% 71%,rgba(233,241,243,.35),transparent 60%), radial-gradient(2px 2px at 58% 18%,rgba(233,241,243,.26),transparent 60%), radial-gradient(1.2px 1.2px at 77% 62%,rgba(233,241,243,.4),transparent 60%), radial-gradient(1.8px 1.8px at 89% 33%,rgba(233,241,243,.24),transparent 60%)} #out .o-scr{position:absolute;inset:0;z-index:58;pointer-events:none;opacity:.12; background-image:linear-gradient(74deg,transparent 0 39.7%,rgba(233,241,243,.45) 39.85%,transparent 40%), linear-gradient(-58deg,transparent 0 61.4%,rgba(233,241,243,.3) 61.5%,transparent 61.6%)} #out .o-vg2{position:absolute;inset:0;z-index:57;pointer-events:none; background:radial-gradient(120% 90% at 50% 45%,transparent 32%,rgba(5,8,12,.82) 100%)} #out{background-image:radial-gradient(88vw 58vh at 70% -12%,rgba(0,255,209,.045),transparent 62%),radial-gradient(70vw 50vh at 6% 112%,rgba(0,255,209,.025),transparent 60%)} #out .o-flr{z-index:5} /* #res · the page's own weather,under its content */ #res .r-gl{position:absolute;inset:0;z-index:60;pointer-events:none;opacity:.42; background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)} #res .r-dust{position:absolute;inset:0;z-index:59;pointer-events:none;mix-blend-mode:screen;opacity:.32; background-image:radial-gradient(1.5px 1.5px at 12% 22%,rgba(233,241,243,.45),transparent 60%), radial-gradient(1px 1px at 34% 71%,rgba(233,241,243,.35),transparent 60%), radial-gradient(2px 2px at 58% 18%,rgba(233,241,243,.26),transparent 60%), radial-gradient(1.2px 1.2px at 77% 62%,rgba(233,241,243,.4),transparent 60%), radial-gradient(1.8px 1.8px at 89% 33%,rgba(233,241,243,.24),transparent 60%)} #res .r-scr{position:absolute;inset:0;z-index:58;pointer-events:none;opacity:.12; background-image:linear-gradient(74deg,transparent 0 39.7%,rgba(233,241,243,.45) 39.85%,transparent 40%), linear-gradient(-58deg,transparent 0 61.4%,rgba(233,241,243,.3) 61.5%,transparent 61.6%)} #res .r-vg2{position:absolute;inset:0;z-index:57;pointer-events:none; background:radial-gradient(120% 90% at 50% 45%,transparent 32%,rgba(5,8,12,.82) 100%)} #res{background-image:radial-gradient(88vw 58vh at 70% -12%,rgba(0,255,209,.045),transparent 62%),radial-gradient(70vw 50vh at 6% 112%,rgba(0,255,209,.025),transparent 60%)} #res .r-flr{z-index:5} #res .r-boot.snap{transition:none} /* ══ 1986 · PHOSPHOR — the newer surfaces follow the amber like everything else ══ */ body.y1986 #reg .vk,body.y1986 #deck .vk{color:#ffcf7a!important;box-shadow:inset 0 0 0 1px rgba(255,180,60,.4)!important;text-shadow:none!important} body.y1986 #reg .vk.be,body.y1986 #deck .vk.be{color:#ffb43c!important;box-shadow:inset 0 0 0 1px rgba(255,180,60,.7)!important} body.y1986 #reg .vk.tp,body.y1986 #deck .vk.tp,body.y1986 #reg .vk.st,body.y1986 #deck .vk.st{background:#ffb43c!important;color:#0a0703!important;box-shadow:none!important} body.y1986 #reg .vk.iv,body.y1986 #deck .vk.iv{color:#a8712a!important} body.y1986 #prof .nd.live .dot{background:#ffb43c!important;box-shadow:0 0 12px rgba(255,160,40,.8)!important} body.y1986 #prof .nd .dot{box-shadow:inset 0 0 0 1px rgba(255,180,60,.5)!important} body.y1986 #prof .en:before{background:rgba(255,180,60,.28)!important} body.y1986 #prof .en,body.y1986 #prof .base{border-color:rgba(255,180,60,.22)!important} body.y1986 #prof .lvl .v,body.y1986 #prof .sym{color:#ffcf7a!important} body.y1986 #prof .side.s{color:#ffb43c!important} body.y1986 #reg #prof .pch.sw button.on{color:#ffb43c!important} body.y1986 #reg #arGauge .gnm b,body.y1986 #reg #arGauge .gnm.on b{color:#ffb43c!important;text-shadow:0 0 8px rgba(255,160,40,.7)!important} body.y1986 #deck .fe:before{background:#ffb43c!important;box-shadow:0 0 9px rgba(255,160,40,.8)!important} body.y1986 #mask .lockline{color:#ffb43c!important} body.y1986 #surge.go{animation:sg86 .46s steps(3,end) 1} @keyframes sg86{0%{opacity:0}20%{opacity:1;background:rgba(255,180,60,.42);transform:translateX(-5px)} 45%{opacity:1;background:rgba(255,180,60,.1);transform:translateX(6px)}70%{opacity:.5;background:transparent}100%{opacity:0}} /* the outpost and the reserve on amber: accent,bands,glows */ body.y1986 #out,body.y1986 #out.burn,body.y1986 #res,body.y1986 #res.held,body.y1986 #res.burn{ --acc:#ffb43c;--accsoft:rgba(255,180,60,.55);--accglow:rgba(255,180,60,.42); --band:rgba(255,196,110,.7);--bandm:rgba(180,130,70,.46);--bandl:rgba(120,88,50,.32);--amb:rgba(120,70,10,.18)} body.y1986 #out .o-row3.on .o-lit3,body.y1986 #res .r-cut span,body.y1986 #res .r-boot .r-lit{background:#ffb43c!important;color:#0a0703!important} body.y1986 #out .o-row3.on .o-gh,body.y1986 #out .o-row3.on .o-bar3,body.y1986 #res .r-boot .r-ghost,body.y1986 #res .r-boot .r-bar2{color:#ffb43c!important;background-color:#ffb43c} body.y1986 #out .o-row3.on .o-gh{background:none!important} body.y1986 #res .r-boot .r-ghost{background:none!important} body.y1986 #res .r-boot{background:#0a0703!important} body.y1986 #res .r-b3.gl{background:#ffb43c!important;box-shadow:0 0 10px rgba(255,160,40,.7)!important} body.y1986 #out .o-lit3 *,body.y1986 #res .r-boot .r-lit *,body.y1986 #res .r-cut span{text-shadow:none!important} body.y1986 #out .o-gl,body.y1986 #res .r-gl{opacity:.3} body.y1986 #out .o-scr,body.y1986 #res .r-scr,body.y1986 #out .o-dust,body.y1986 #res .r-dust{filter:sepia(1) saturate(2)} body.y1986 #prof .nod:not(:hover):not(.on),body.y1986 #reg #prof .act .nod:not(:hover):not(.on){color:#ffb43c!important;background:none!important} body.y1986 #res.burn .r-corp .r-ttl i,body.y1986 #out.burn .o-corp .o-ttl i{color:#ffb43c!important} /* #reg #prof * is painted by the theme with two ids — these outrank it */ body.y1986 #reg #prof .vk.tp,body.y1986 #reg #prof .vk.st,body.y1986 #reg #prof .vk.tp *,body.y1986 #reg #prof .vk.st *{color:#0a0703!important;background:#ffb43c!important} body.y1986 #reg #prof .vk.be{color:#ffb43c!important} body.y1986 #reg #prof .pch.sw button{color:#a8712a!important} body.y1986 #reg #prof .pch.sw button.on{color:#ffb43c!important} #reg .fe .t .n,#deck .fe .t .n{white-space:nowrap} /* ══ 1986 · the till (UPGRADE CYPHER) ══ */ body.y1986 #dwin .thsw{box-shadow:inset 0 0 0 1px rgba(255,180,60,.4)!important} body.y1986 #dwin .thsw button{color:#a8712a!important;text-shadow:none!important} body.y1986 #dwin .thsw button.on,body.y1986 #dwin .thsw button.on *{color:#0a0703!important;background:#ffb43c!important; box-shadow:0 0 22px rgba(255,160,40,.32)!important;text-shadow:none!important;opacity:1!important} body.y1986 #dwin .thsw button.on .sv{background:none!important} body.y1986 #dwin .thsw .sv{color:#ffb43c!important} body.y1986 #dwin .bxtwo .rc{background:#0d0904!important;box-shadow:inset 0 0 0 1px rgba(255,180,60,.22)!important} body.y1986 #dwin .bxtwo .rc:hover{background:#110c05!important} body.y1986 #dwin .bxtwo .rc.on{box-shadow:inset 0 0 0 1px rgba(255,180,60,.8),0 0 34px -14px rgba(255,160,40,.7)!important} body.y1986 #dwin .bxtwo .rc .v{color:#ffcf7a!important} body.y1986 #dwin .bxtwo .rc .n,body.y1986 #dwin .bxtwo .rc .pm2,body.y1986 #dwin .bxtwo .rc .s{color:#a8712a!important} body.y1986 #dwin .bxtwo .rc.on .n,body.y1986 #dwin .bxtwo .rc.on .pm2,body.y1986 #dwin .bxtwo .rc .tag{color:#ffb43c!important} body.y1986 #dwin .bxtwo .rc .s{color:#c9985a!important} body.y1986 #dwin .bxgo2,body.y1986 #dwin .bxgo2 *{color:#0a0703!important;background:#ffb43c!important;text-shadow:none!important; box-shadow:0 0 0 1px rgba(255,180,60,.6),0 0 30px rgba(255,160,40,.35)!important} body.y1986 #dwin .bxu{color:#a8712a!important} body.y1986 .route,body.y1986 .route *{text-shadow:none!important} /* ══ THE TERMINAL — the lock's under-scene,holding a readout: LEGACY ACCESS on the door,the wallet at the till ══ */ .term{position:fixed;inset:0;z-index:98;background:var(--void);display:none;flex-direction:column;align-items:center;justify-content:center; padding:calc(64px + env(safe-area-inset-top,0px)) var(--pad) calc(48px + env(safe-area-inset-bottom,0px))} .term.on{display:flex} #deck #cyterm{z-index:98} .term .tin{position:relative;z-index:2;width:420px;max-width:100%} .term .tlogwrap{position:relative} .term .tlog,.term .tlogH{font:300 11px/2.2 var(--mono);letter-spacing:.06em;white-space:pre-wrap;min-height:11em} .term .tlog{position:relative;z-index:2;color:var(--dim);text-shadow:0 0 8px rgba(160,230,215,.14)} .term .tlogH{position:absolute;inset:0;z-index:1;color:rgba(190,255,240,.30);filter:blur(2.6px);text-shadow:0 0 18px rgba(0,255,209,.5),0 0 40px rgba(0,255,209,.22)} .term .tlog b{color:var(--haze);font-weight:400} .term .tlog .uok{color:var(--phos)} .term .tlog .udt{color:#3f4b54} .term .tlogH b,.term .tlogH .uok,.term .tlogH .udt{color:inherit;text-shadow:inherit} .term .tlogwrap .upat{position:absolute;z-index:3;pointer-events:none;background:radial-gradient(closest-side,rgba(5,8,12,.92),rgba(5,8,12,.55) 58%,transparent 78%)} .term .tlogwrap .upat.a{left:56%;top:6%;width:180px;height:56px} .term .tlogwrap .upat.b{left:-10%;top:38%;width:150px;height:52px} .term .tlogwrap .upat.c{left:62%;top:64%;width:170px;height:60px} .term .uglass{position:absolute;inset:0;z-index:1;pointer-events:none} .term .uglass>span{position:absolute;inset:0} .term .tkey{margin-top:22px;opacity:0;transition:opacity .6s} .term .tkey.in{opacity:1} .term .tkey .kl{font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--steel)} .term .tkey .kv{margin-top:8px;font:200 clamp(18px,5vw,26px) var(--mono);letter-spacing:.3em;color:#fff; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(238,242,248,.85),0 0 24px rgba(225,235,255,.45)} .term .tkey .kv.px{font-size:clamp(14px,3.6vw,18px);letter-spacing:.2em} .term .tkey .kn{margin-top:10px;font:10px/1.75 var(--mono);color:var(--haze)} .term .tkey .kn b{color:var(--white);font-weight:400} .term .tact{margin-top:18px;display:flex;gap:14px;align-items:center} .term .tact .route{font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#02110e;background:var(--phos); padding:14px 26px;border:0;cursor:pointer;box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 24px rgba(0,255,209,.28)} .term .tact .tlink{background:none;border:0;cursor:pointer;font:9px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--dim)} /* the wallet line on the till,and the legacy price beside the struck standard */ .wal{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap; font:9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--steel)} .wal b{color:var(--phos);font-weight:400} .wal .ad{color:var(--haze);letter-spacing:.08em;text-transform:none} .wal .dot{width:6px;height:6px;border-radius:50%;background:var(--phos);box-shadow:0 0 10px var(--phos);flex:none} .wal button{background:none;border:0;cursor:pointer;font:9.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--phos); padding:9px 14px;box-shadow:inset 0 0 0 1px rgba(0,255,209,.4);transition:.22s} .wal button:hover{background:var(--phos);color:#02110e} .wal .why{color:var(--haze);letter-spacing:.06em;text-transform:none;font-size:10.5px} .bxtwo .rc .was{display:inline-block;margin-left:12px;font:300 15px var(--num);color:var(--dim); text-decoration:line-through;text-decoration-color:rgba(150,180,200,.5);vertical-align:8px;text-shadow:none} .bxtwo .rc .sv2{display:block;margin-top:6px;font:9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--phos)} body.y1986 .term{background:#0a0703!important} body.y1986 .term .tlog .uok,body.y1986 .wal b,body.y1986 .wal button,body.y1986 .bxtwo .rc .sv2{color:#ffb43c!important} body.y1986 .term .tlogH{color:rgba(255,200,120,.3)!important;text-shadow:0 0 18px rgba(255,160,40,.5)!important} body.y1986 .term .tact .route{background:#ffb43c!important;color:#0a0703!important;text-shadow:none!important;box-shadow:0 0 0 1px rgba(255,180,60,.5)!important} body.y1986 .wal .dot{background:#ffb43c!important;box-shadow:0 0 10px rgba(255,160,40,.8)!important} body.y1986 .wal button{box-shadow:inset 0 0 0 1px rgba(255,180,60,.5)!important} #legacy{display:flex} #legacy.term{opacity:0;visibility:hidden;z-index:60} #legacy.term.on{opacity:1;visibility:visible} #legacy .route{font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#02110e;background:var(--phos); padding:14px 26px;border:0;cursor:pointer;box-shadow:0 0 0 1px rgba(0,255,209,.5),0 0 24px rgba(0,255,209,.28)} #legacy .tlink{padding:0} /* the terminal's back button: the same weight as every back button */ .term .phead button{position:static;background:none;border:0;cursor:pointer;font:9px/1 var(--mono)!important;letter-spacing:.2em!important; text-transform:uppercase;color:var(--haze);padding:10px 0;white-space:nowrap;text-shadow:none} .term .phead button:hover{color:var(--phos)} .term .phead{position:absolute;left:var(--pad);right:var(--pad);top:0;height:56px;z-index:6;display:flex;align-items:center;justify-content:space-between} /* CYOP on the billing switch — the third position; read,it holds the address */ #dwin .thsw button.cy,#blackbox .thsw button.cy{color:var(--phos)} #dwin .thsw button.cy .sv,#blackbox .thsw button.cy .sv{color:var(--phos);opacity:.7} /* read: the position holds the address as an outline — the filled button stays the billing choice */ #dwin .thsw button.cy.on,#blackbox .thsw button.cy.on{color:var(--phos);background:none;box-shadow:inset 0 0 0 1px rgba(0,255,209,.45);opacity:1;cursor:default} #dwin .thsw button.cy.on .sv,#blackbox .thsw button.cy.on .sv{color:var(--haze);opacity:1;letter-spacing:.06em;text-transform:none} #blackbox .thsw button.cy{color:var(--mag)} #blackbox .thsw button.cy .sv{color:var(--mag)} #blackbox .thsw button.cy.on{color:var(--mag);box-shadow:inset 0 0 0 1px rgba(255,47,176,.45)} body.y1986 #dwin .thsw button.cy,body.y1986 #dwin .thsw button.cy .sv,body.y1986 #dwin .thsw button.cy.on{color:#ffb43c!important;background:none!important} body.y1986 #dwin .thsw button.cy.on{box-shadow:inset 0 0 0 1px rgba(255,180,60,.5)!important} @media(max-width:640px){#dwin .thsw button,#blackbox .thsw button{padding:13px 4px;letter-spacing:.14em;gap:6px;flex-wrap:wrap}} /* ══ NOTIFICATIONS · THE SLAM — one card,the column running behind,the desk dark under it ══ */ #evm{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center; background:rgba(5,8,12,.94);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s; --acc:var(--phos);--accglow:rgba(0,255,209,.4);overflow:hidden;padding:0 var(--pad)} #evm.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease)} #evm.alert{--acc:var(--mag);--accglow:rgba(255,47,176,.42)} #evm .evbg{position:absolute;inset:0;z-index:1;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent)} #evm .evcols{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;gap:clamp(10px,2vw,30px);will-change:transform} #evm .evcols .cc{font:9px/1.7 var(--mono);letter-spacing:.1em;color:var(--dim);white-space:pre;text-align:center} #evm .evcols .cc b{color:var(--haze);font-weight:400} #evm .evcols .cc em{font-style:normal;color:var(--acc);opacity:.7} #evm .evcm{position:absolute;z-index:2;pointer-events:none} #evm .evcm i{position:absolute;background:var(--accglow)} #evm .evcm .v2{width:1px;height:28px}#evm .evcm .h2b{width:28px;height:1px} #evm .evgl{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.42;background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)} #evm .evvg{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(5,8,12,.86) 100%)} #evm .ev-in{position:relative;z-index:5;width:100%;display:flex;justify-content:center} #evm .wrap{position:relative;text-align:center;opacity:0;transform:scale(.94);padding:34px clamp(20px,5vw,70px) 30px;max-width:100%} #evm .wrap:before{content:"";position:absolute;inset:-14px -26px;z-index:-1; background:radial-gradient(78% 82% at 50% 50%,rgba(5,8,12,.97) 46%,rgba(5,8,12,.82) 72%,rgba(5,8,12,0) 100%)} #evm.lit .wrap{opacity:1;transform:none;animation:evslam .4s steps(2,end) 1} @keyframes evslam{0%{transform:scaleX(.3) translateX(-14px)}45%{transform:scaleX(1.05) translateX(8px)}75%{transform:scaleX(.99) translateX(-4px)}100%{transform:none}} /* ══ the plate,the product's stencil ══ */ #evm .plate{position:relative;display:inline-flex;align-items:center;gap:clamp(10px,2vw,34px)} #evm .plate .gh{font:500 clamp(13px,1.9vw,25px)/1.05 var(--mono);letter-spacing:.02em; text-transform:uppercase;color:var(--acc);opacity:.34;white-space:pre;transition:color .4s} #evm .plate .gh.a{animation:gA 2.2s steps(2,end) infinite} #evm .plate .gh.c{opacity:.26;animation:gC 2.2s steps(2,end) infinite} @keyframes gA{0%,100%{transform:translateX(0)}44%{transform:translateX(-6px) skewX(-3deg)} 62%{transform:translateX(3px)}} @keyframes gC{0%,100%{transform:translateX(0)}38%{transform:translateX(7px)} 66%{transform:translateX(-4px) skewX(2deg)}} #evm .plate .lit{position:relative;padding:clamp(9px,1.3vw,15px) clamp(15px,2.1vw,28px); background:var(--acc);color:#02110e;transition:background .4s; clip-path:polygon(0 0,100% 0,100% 73%,95.5% 100%,0 100%)} #evm.alert .plate .lit{color:#12040c} #evm .plate .lit .t2{font:500 clamp(13px,1.9vw,25px)/1.05 var(--mono);letter-spacing:.02em; text-transform:uppercase;white-space:pre} #evm .plate .bar2{position:absolute;left:-11px;top:14%;bottom:14%;width:6px;background:var(--acc); transition:background .4s; clip-path:polygon(0 0,100% 0,100% 26%,0 34%,0 62%,100% 70%,100% 100%,0 100%)} #evm .sub2{margin-top:11px;font:10px var(--mono);letter-spacing:.3em;text-transform:uppercase; color:var(--haze)} #evm .sub2 b{color:var(--acc);font-weight:400;transition:color .4s} #evm .body2{margin-top:10px;font:12px/1.8 var(--mono);color:var(--haze);max-width:66ch} #evm .body2 b{color:var(--white);font-weight:400} #evm .sub2,#evm .body2{margin-left:auto;margin-right:auto;text-align:center} #evm .evA{margin-top:20px;display:flex;justify-content:center} #evm .evA .route{font:9px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#02110e;background:var(--acc); padding:13px 24px;border:0;cursor:pointer;box-shadow:0 0 0 1px var(--accglow),0 0 24px var(--accglow);transition:background .4s} #evm.alert .evA .route{color:#12040c} @media(max-width:760px){ #evm .wrap{padding:26px 0 24px;width:100%} #evm .plate{display:block;width:100%} #evm .plate .gh{display:none} #evm .plate .lit{display:block;width:100%;padding:12px 16px 13px 18px} #evm .plate .lit .t2{white-space:normal;font-size:clamp(15px,5.2vw,21px);line-height:1.16;letter-spacing:.03em} #evm .plate .bar2{left:-8px;width:5px} #evm .body2{max-width:100%} #evm .wrap:before{inset:-16px -12px;background:linear-gradient(180deg,rgba(5,8,12,0),rgba(5,8,12,.96) 9%,rgba(5,8,12,.96) 91%,rgba(5,8,12,0))} } body.y1986 #evm{--acc:#ffb43c;--accglow:rgba(255,180,60,.4);background:rgba(10,7,3,.94)!important} body.y1986 #evm .plate .lit,body.y1986 #evm .plate .lit *,body.y1986 #evm .evA .route{color:#0a0703!important;text-shadow:none!important} body.y1986 #evm .evcols .cc{color:#8a5f22!important} /* the way past a card that asks for something: small,magenta,under the button */ #evm .evskip{display:none;margin:14px auto 0;background:none;border:0;cursor:pointer; font:9px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mag);opacity:.85;padding:6px 10px} #evm .evskip:hover{opacity:1} body.y1986 #evm .evskip{color:#ffb43c!important} /* the phone's key line answers: amber when the chain says no,the rail stops hunting */ #lockL .kk .h{letter-spacing:.06em;text-transform:uppercase;color:var(--haze)} #lockL .kk .h.deny{color:var(--amber)} #lockL .kk.deny .rl i{background:var(--amber);box-shadow:0 0 12px rgba(255,180,74,.8);animation:none;left:0;width:100%} /* the contract under the backdoor: plain,breakable on a phone,the link goes to basescan and not through the door */ #doors .dr .ca{grid-column:2;margin-top:8px;font:9px var(--mono);letter-spacing:.08em;color:var(--steel); text-transform:none;word-break:break-all} #doors .dr .ca a{color:var(--haze);text-decoration:none;border-bottom:1px solid rgba(150,180,200,.28)} #doors .dr .ca a:hover{color:var(--phos);border-color:rgba(0,255,209,.5)} /* the phone's key line, granted: the callsign in phos where the key was, the rail solid, the line lit */ #lockL .kk.granted input{color:var(--phos);text-shadow:0 0 12px rgba(0,255,209,.55)} #lockL .kk.granted .rl i{background:var(--phos);box-shadow:0 0 14px rgba(0,255,209,.9);animation:none;left:0;width:100%} #lockL .kk.granted .h{color:var(--phos);letter-spacing:.3em} #lockL .kk.granted .h b{color:var(--haze);text-transform:none;letter-spacing:.06em} /* the read and the line grow with what is typed — never a one-line field to scroll */ #deck .fld textarea{width:100%;margin-top:9px;background:none;border:0;border-bottom:1px solid var(--hair); color:#eef4f6;font:300 15px/1.75 var(--mono);letter-spacing:.02em;padding:6px 0 10px;resize:none;overflow:hidden;min-height:2.6em} #deck .fld textarea:focus{outline:none;box-shadow:inset 0 -1px 0 var(--phos)} #deck .fld .cnt{float:right;font:9px var(--mono);letter-spacing:.2em;color:var(--dim);text-transform:none} body.y1986 #deck .fld textarea{color:#ffcf7a!important} /* ══ THE GUTTER · the nod lives in the row's left edge ══ */ #deck .fe.hasgut,#reg #prof .fe.hasgut{padding-left:0} #deck .fe.hasgut:before,#reg #prof .fe.hasgut:before{display:none} /* the gutter IS the hairline now */ #deck .fe .gut,#reg #prof .fe .gut{flex:none;width:36px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;cursor:pointer;align-self:stretch; box-shadow:inset 1px 0 0 rgba(150,180,200,.18);transition:box-shadow .22s,background .22s} #deck .fe .gut i,#reg #prof .fe .gut i{font-style:normal;font-size:11px;line-height:1;color:rgba(150,180,200,.35);transition:.22s} #deck .fe .gut b,#reg #prof .fe .gut b{font:9px var(--mono);letter-spacing:.06em;font-weight:400;color:var(--steel);transition:.22s} #deck .fe .gut:hover,#reg #prof .fe .gut:hover{box-shadow:inset 2px 0 0 var(--phos);background:rgba(0,255,209,.04)} #deck .fe .gut:hover i,#deck .fe .gut:hover b,#reg #prof .fe .gut:hover i,#reg #prof .fe .gut:hover b{color:var(--phos)} #deck .fe .gut.on,#reg #prof .fe .gut.on{box-shadow:inset 2px 0 0 var(--phos);cursor:default} #deck .fe .gut.on i,#deck .fe .gut.on b,#reg #prof .fe .gut.on i,#reg #prof .fe .gut.on b{color:var(--phos)} /* the same column on a thread, beside the act row */ #prof .act .gut{flex:none;width:36px;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:4px; cursor:pointer;box-shadow:inset 1px 0 0 rgba(150,180,200,.18);transition:.22s} #prof .act .gut i{font-style:normal;font-size:12px;line-height:1;color:rgba(150,180,200,.35)} #prof .act .gut b{font:10px var(--mono);font-weight:400;color:var(--steel)} #prof .act .gut:hover{box-shadow:inset 2px 0 0 var(--phos)} #prof .act .gut:hover i,#prof .act .gut:hover b{color:var(--phos)} #prof .act .gut.on{box-shadow:inset 2px 0 0 var(--phos);cursor:default} #prof .act .gut.on i,#prof .act .gut.on b{color:var(--phos)} #prof .act .nods{margin-left:14px} body.y1986 #deck .fe .gut:hover,body.y1986 #reg #prof .fe .gut:hover,body.y1986 #deck .fe .gut.on, body.y1986 #reg #prof .fe .gut.on,body.y1986 #prof .act .gut:hover,body.y1986 #prof .act .gut.on{box-shadow:inset 2px 0 0 #ffb43c!important;background:rgba(255,180,60,.05)!important} body.y1986 #deck .fe .gut.on i,body.y1986 #deck .fe .gut.on b,body.y1986 #reg #prof .fe .gut.on i, body.y1986 #reg #prof .fe .gut.on b,body.y1986 #prof .act .gut.on i,body.y1986 #prof .act .gut.on b, body.y1986 #reg #prof .fe .gut:hover i,body.y1986 #reg #prof .fe .gut:hover b{color:#ffb43c!important} /* the thread's act row keeps its own button; the gutter is the list's */ #prof .act .gut{display:none} /* ══ THE RENDERER'S PAGE · body.cardonly ══ /syn/card/:id — the worker's headless Chromium screenshots #pshare. The page is the card alone on its own black, the holder at 480 (the card's print width; the worker doubles it to a 960 image). The card's rules stay #cardp's own — only the page around it changes. */ html:has(body.cardonly),body.cardonly{height:auto!important;max-height:none!important;overflow:visible!important; background:#070b0f!important;background-image:none!important} /* #cardp lives inside #lock (the door's card page), so the lock stays as a bare frame and everything else on the page is off */ body.cardonly>*:not(#lock){display:none!important} body.cardonly #lock{display:block!important;position:static!important;height:auto!important;max-height:none!important; overflow:visible!important;padding:0!important;margin:0!important;opacity:1!important;visibility:visible!important; transform:none!important;animation:none!important;transition:none!important;background:#070b0f!important} body.cardonly #lock>*:not(#cardp){display:none!important} body.cardonly #lock:before,body.cardonly #lock:after,body.cardonly #cardp:before,body.cardonly #cardp:after{display:none!important} body.cardonly #cardp{position:static!important;opacity:1!important;visibility:visible!important;animation:none!important; transition:none!important;padding:0!important;margin:0!important;height:auto!important;max-height:none!important; overflow:visible!important;background:#070b0f!important} body.cardonly #cardp .phd,body.cardonly #cardp .ph,body.cardonly #cardp .pm{display:none!important} body.cardonly #cardp .in{max-width:none!important;margin:0!important;width:480px} body.cardonly #cardp .in>*{animation:none!important} body.cardonly #cardp .holder{width:480px!important;margin:0!important} body.cardonly #cardp .share{max-width:none!important} /* the ledger's pager: thirty fires a page, newest first — set like the floor's own timeframe switch (.etf): quiet mono, lit on approach */ #deck .lpg{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 0;width:100%} #deck .lpg:empty{display:none} #deck .lpg button{display:inline-flex;align-items:center;width:auto;font:9px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);padding:8px 0;transition:.2s;box-shadow:inset 0 -1px 0 transparent} #deck .lpg button:hover{color:#fff;box-shadow:inset 0 -1px 0 var(--phos)} #deck .lpg button:disabled{opacity:.28;pointer-events:none} #deck .lpg span{font:8.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}