:root{--bg:#111;--fg:#fff;--mut:#b5b5b5;--ln:#333;--h:'Unbounded',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--fg)}
body{font:400 1.05rem/1.65 Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}
.mono{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.18em}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;color:#111;padding:.5rem}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
#loader{position:fixed;inset:0;z-index:50;background:#111;display:grid;place-items:center}
.ld-in{text-align:center}.ld-lines{color:var(--mut);min-height:1.4em}
.ld-count{font:800 clamp(3rem,10vw,7rem) var(--h)}.ld-logo{width:min(70vw,520px);opacity:0;margin-top:1rem}
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 4vw;background:linear-gradient(#111e,#1110)}
.nav-logo{height:22px;width:auto}.nav nav{display:flex;gap:1.6rem;align-items:center}.nav nav a{text-decoration:none;font-size:.9rem}
.btn{display:inline-block;border:1.5px solid #fff;background:#fff;color:#111;padding:.9rem 1.5rem;text-decoration:none;font:600 .8rem var(--h);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.btn.ghost{background:transparent;color:#fff}.btn.sm{padding:.5rem .9rem}
.btn:hover{background:#111;color:#fff}.btn.ghost:hover{background:#fff;color:#111}
.index{position:fixed;left:1.6vw;top:50%;transform:translateY(-50%);z-index:15}
.index ol{list-style:none;padding:0;display:grid;gap:.6rem}
.index a{font:400 .72rem 'JetBrains Mono',monospace;text-decoration:none;color:#8a8a8a;display:block;padding:.15rem .3rem}
.index a.on{color:#fff;border-left:2px solid #fff}
.hero{min-height:100svh;position:relative;display:flex;align-items:center;padding:0 8vw;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.hero-static{position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:42vw;opacity:.18;display:none}
.no-gl .hero-static{display:block}
.hero-copy{position:relative;max-width:900px;pointer-events:none}.hero-copy a{pointer-events:auto}
.big{font:800 clamp(3.2rem,11vw,10rem)/.9 var(--h);letter-spacing:-.02em;margin:1rem 0 1.5rem}.big .ln{display:block}
.lede{max-width:34rem;color:#ddd;font-size:1.15rem}.cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.kicker{color:var(--mut)}.drag-hint{position:absolute;bottom:2rem;right:4vw;color:#8a8a8a}
.ch{display:grid;grid-template-columns:minmax(120px,22vw) 1fr;padding:18vh 8vw 10vh;border-top:1px solid var(--ln)}
.num{font:800 clamp(4rem,10vw,9rem)/1 var(--h);color:transparent;-webkit-text-stroke:1px #777;position:sticky;top:18vh;align-self:start}
.body{max-width:900px}.body>p{max-width:40rem;color:#ddd;margin-bottom:1.2rem}
h2{font:800 clamp(2rem,5.2vw,4.4rem)/1.02 var(--h);letter-spacing:-.01em;margin:.8rem 0 1.6rem}
h3{font:600 1.3rem var(--h);margin:3rem 0 1rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln);border:1px solid var(--ln);margin-top:2rem}.split>div{background:#111;padding:1.6rem}.split span{color:var(--mut)}
.stats{display:flex;flex-wrap:wrap;gap:3rem;margin:2.5rem 0}.stat b{display:block;font:800 clamp(3.5rem,8vw,6.5rem)/1 var(--h)}.stat span{color:var(--mut);font-size:.95rem}
.stack{display:grid;gap:8px;margin:2rem 0;perspective:900px}
.layer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border:1px solid #fff;padding:1rem 1.3rem;background:#111}
.layer b{font:600 1rem var(--h);letter-spacing:.08em}.layer b::before{content:attr(data-l);}
.layer::before{content:attr(data-l);font:400 .75rem 'JetBrains Mono',monospace;color:var(--mut);margin-right:1rem}
.layer span{color:#ccc;font-size:.92rem;margin-left:auto}
.hw{border:1px dashed #777;padding:.8rem 1.3rem;color:var(--mut);text-align:center}
.seq{border:1px solid var(--ln);padding:1.5rem;margin:2.5rem 0;position:relative}
.tag{position:absolute;top:-.7rem;left:1rem;background:#111;padding:0 .5rem;color:#fff}
.term p{margin:.3rem 0;color:#aaa}.term .hl{color:#fff;font-weight:700}
figcaption{color:var(--mut);font-size:.9rem;margin-top:1rem}
.apps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln);margin-top:2rem}
.apps li{background:#111;padding:1.4rem 1.1rem;min-height:150px;position:relative;transition:background .25s,color .25s}
.apps svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.5}
.apps b{display:block;font:600 .85rem var(--h);margin-top:1rem;letter-spacing:.04em}
.apps small{display:block;color:var(--mut);font-size:.82rem;margin-top:.4rem;opacity:0;transform:translateY(6px);transition:.25s}
.apps li:hover,.apps li:focus-within,.apps li:focus{background:#fff;color:#111}.apps li:hover small,.apps li:focus small{opacity:1;transform:none;color:#333}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2rem 0}
.levels div{border:1px solid #fff;padding:1.4rem .8rem;font:600 clamp(.6rem,1.2vw,.9rem) var(--h);letter-spacing:.06em;text-align:center}
.levels .def{background:#fff;color:#111}.levels small{display:block;margin-top:.4rem}
.ab{display:flex;align-items:center;gap:1.5rem;margin:2rem 0}.slot{border:1px solid #fff;padding:1.5rem 2rem;flex:1}.slot b{display:block;font:600 1.1rem var(--h);margin-top:.4rem}.arrow{font-size:2rem}
.tablewrap{overflow-x:auto;border:1px solid var(--ln)}
table{border-collapse:collapse;width:100%;min-width:680px}th,td{text-align:left;padding:1rem;border-bottom:1px solid var(--ln);font-size:.92rem;vertical-align:top}
thead th{font:600 .75rem var(--h);letter-spacing:.08em;text-transform:uppercase}thead th:nth-child(2),tbody td:nth-child(2){background:#fff;color:#111}
tbody th{font-weight:500;color:#ddd}td{color:#bbb}
.access{border:1px solid #fff;padding:2rem;margin-top:3rem;display:grid;gap:1rem;max-width:560px}.access h3{margin:0 0 .5rem}
label{display:grid;gap:.35rem;font-size:.9rem}input{background:#111;color:#fff;border:1px solid #888;padding:.85rem;font:inherit}input:focus{border-color:#fff}
.err{color:#fff;font-size:.9rem;min-height:1.2em}.thanks b{font:800 1.6rem var(--h)}
footer{border-top:1px solid var(--ln);padding:12vh 8vw 4rem}footer img{height:32px;width:auto}
.ft-big{font:800 clamp(2.8rem,12vw,11rem)/.95 var(--h);margin:3rem 0;letter-spacing:-.02em}
footer nav{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}.legal{color:#9a9a9a;font-size:.82rem;max-width:44rem}
@media (max-width:800px){.index{display:none}.ch{grid-template-columns:1fr;padding:12vh 6vw 8vh}.num{position:static;font-size:3.5rem;margin-bottom:.5rem}
.nav nav a:not(.btn){display:none}.split{grid-template-columns:1fr}.stats{gap:1.6rem}.levels{grid-template-columns:1fr 1fr}.hero{padding:0 6vw;align-items:flex-end;padding-bottom:12vh}.layer span{margin-left:0}.drag-hint{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.access label{margin:.4rem 0 -.6rem}input[aria-invalid=true]{border-color:#fff;border-width:2px}
button[disabled]{opacity:.6;cursor:wait}
/* Mobile: 3D mark gets its own band above the copy so text never overlaps it */
@media (max-width:800px){.hero{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:calc(64px + 34svh) 6vw 10vh}#gl{top:64px!important;height:34svh!important;bottom:auto!important}.hero-static{top:calc(64px + 17svh);right:auto;left:50%;transform:translate(-50%,-50%);width:70vw}}
.ch h1{font:800 clamp(2rem,5.2vw,4.4rem)/1.02 var(--h);letter-spacing:-.01em;margin:.8rem 0 1.6rem}
.ch h2.sub{font:600 1.3rem var(--h);margin:3rem 0 1rem}
.access.done>:not(h3):not(.thanks){display:none!important}[hidden]{display:none!important}