:root{color-scheme:dark;--ink:#eaf2ff;--dim:#8fa3c2;--faint:#56698a;--line:rgba(170,200,245,.16);--acc:#9fe8ff;--glass:rgba(8,14,28,.42);
 --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
 --sans:"Avenir Next","Helvetica Neue","Segoe UI",system-ui,sans-serif;--pad:clamp(18px,3.2vw,44px)}
*{box-sizing:border-box;margin:0}
html,body{width:100%;height:100%;overflow:hidden;background:#02040a;color:var(--ink);font-family:var(--sans);overscroll-behavior:none;-webkit-font-smoothing:antialiased}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
canvas#gl.drag{cursor:grabbing}
.hud{position:fixed;inset:0;pointer-events:none;z-index:2;text-shadow:0 1px 14px rgba(0,0,0,.75);font-family:var(--mono);font-variant-numeric:tabular-nums;transition:opacity .6s ease}
.hud.off{opacity:0}.hud.off *{pointer-events:none!important}
.hud button,.hud a,.hud .scrub{pointer-events:auto}
.top{position:absolute;left:var(--pad);right:var(--pad);top:calc(var(--pad) * .8 + env(safe-area-inset-top));display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.34em;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand i{position:relative;width:22px;height:22px;border:1px solid var(--acc);border-radius:50%;flex:none;box-shadow:0 0 18px rgba(120,220,255,.25)}
.brand i::before,.brand i::after{content:"";position:absolute;border:1px solid var(--acc);border-radius:50%;inset:4px 0;transform:rotate(58deg);opacity:.8}
.brand i::after{inset:0 5px;transform:rotate(-46deg);opacity:.55}
/* BOUND keeps its cooler tone but the same weight as ATOMIC, and both words carry a tight dark halo, so the name
   stays legible over the brightest worlds */
.brand span{text-shadow:0 0 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.8),0 1px 14px rgba(0,0,0,.75)}
.brand span b{font-weight:600;color:#b4c9e8}
.sp{flex:1}
.pill{display:flex;padding:3px;border:1px solid var(--line);border-radius:99px;background:var(--glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.pill button{all:unset;cursor:pointer;font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--dim);padding:8px 14px;border-radius:99px;transition:color .25s,background .25s}
.pill button[aria-pressed=true]{color:#04121c;background:var(--acc)}
.pill button:focus-visible,.enter:focus-visible,.tick:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.enter{font:600 9.5px var(--mono);letter-spacing:.24em;color:var(--ink);text-decoration:none;padding:11px 16px;border:1px solid var(--line);border-radius:99px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .25s,color .25s}
.enter:hover{border-color:var(--acc);color:var(--acc)}
.read{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 104px + env(safe-area-inset-bottom));}
.idx{font-size:10px;letter-spacing:.3em;color:var(--acc);display:flex;align-items:center;gap:12px}
.idx::before{content:"";width:26px;height:1px;background:var(--acc)}
.title{font-family:var(--sans);font-weight:300;font-size:clamp(30px,4.6vw,64px);letter-spacing:-.035em;line-height:1;margin:14px 0 16px;min-height:1em;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.title span{display:inline-block;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.1,1),filter .45s}
.title span.out{opacity:0;transform:translateY(.18em);filter:blur(6px)}
.scale{display:flex;align-items:baseline;gap:14px;font-size:clamp(15px,1.5vw,19px);color:var(--ink)}
.scale sup{font-size:.72em;color:var(--acc);margin-left:1px;position:relative;top:-.15em;display:inline-block;min-width:4.6ch}
.scale em{font-style:normal;color:var(--dim);font-size:11px;letter-spacing:.14em}
.tele{position:absolute;right:var(--pad);bottom:calc(var(--pad) + 104px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto;gap:7px 18px;font-size:9.5px;letter-spacing:.16em;color:var(--faint);text-align:right}
.tele b{font-weight:500;color:var(--dim);min-width:8ch;display:inline-block}
.scrub{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) * .7 + env(safe-area-inset-bottom));height:66px;cursor:ew-resize;touch-action:none}
.rail{position:absolute;left:0;right:0;top:20px;height:1px;background:var(--line)}
.fill{position:absolute;left:0;top:20px;height:1px;width:0;background:linear-gradient(90deg,transparent,var(--acc))}
.knob{position:absolute;top:20px;left:0;width:1px;height:1px}
.knob::before{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;border:1px solid var(--acc);transform:rotate(45deg);background:#02040a;box-shadow:0 0 16px rgba(130,225,255,.7)}
.knob::after{content:"";position:absolute;left:0;top:-16px;width:1px;height:11px;background:var(--acc);opacity:.6}
.tick{all:unset;position:absolute;top:8px;transform:translateX(-50%);padding:12px 6px 0;cursor:pointer;text-align:center;color:var(--dim);font-size:11px;letter-spacing:.12em;white-space:nowrap;transition:color .3s}
.tick::before{content:"";position:absolute;left:50%;top:9px;width:1px;height:7px;background:currentColor;opacity:.7}
.tick span{display:block;margin-top:16px}
.tick small{display:block;margin-top:5px;font-size:8px;letter-spacing:.2em;opacity:0;transition:opacity .3s;text-transform:uppercase}
.tick:hover,.tick.on{color:var(--ink)}.tick.on small,.tick:hover small{opacity:.75}
.hint{position:absolute;left:50%;bottom:calc(var(--pad) * .7 + 70px);transform:translateX(-50%);font-size:9.5px;letter-spacing:.32em;color:var(--dim);white-space:nowrap;transition:opacity 1.2s;display:flex;align-items:center;gap:12px}
.hint::before{content:"";width:1px;height:12px;background:linear-gradient(var(--acc),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:translateY(-6px);opacity:0}50%{opacity:1}100%{transform:translateY(8px);opacity:0}}
.hint.gone{opacity:0}
.cap{position:absolute;left:50%;top:calc(var(--pad) * .8 + 86px + env(safe-area-inset-top));transform:translateX(-50%);width:min(860px,86vw);text-align:center;font-family:var(--sans);font-weight:300;font-size:clamp(17px,1.7vw,26px);line-height:1.45;color:var(--ink);text-shadow:0 2px 26px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.6);transition:opacity .5s ease,filter .5s ease;pointer-events:none;opacity:0}
.hud.flash .cap{text-shadow:0 1px 18px rgba(255,255,255,.7)}
#veil{position:fixed;inset:0;z-index:5;background:#02040a;display:grid;place-items:center;transition:opacity 1.6s ease;font:500 10px var(--mono);letter-spacing:.4em;color:var(--dim);text-align:center;padding:30px;line-height:2}
#veil.done{opacity:0;pointer-events:none}
@media(max-width:820px){.tele{display:none}.tick span{font-size:8px}.tick small{display:none}.hint{display:none}}
@media(max-width:520px){.enter{display:none}.tick:nth-child(even) span{visibility:hidden}.pill button{padding:8px 10px;letter-spacing:.14em}}
@media(prefers-reduced-motion:reduce){.hint::before{animation:none}}
button.enter{appearance:none;-webkit-appearance:none;cursor:pointer}
button.enter[aria-pressed=true]{color:var(--acc);border-color:var(--acc)}
.eq{margin-top:14px;font-size:11px;letter-spacing:.06em;color:var(--dim);min-height:1.3em;transition:opacity .45s;white-space:nowrap}
.eq.out{opacity:0}
.tick small{position:absolute;left:50%;transform:translateX(-50%)}
@media(max-width:1300px){.tick span{font-size:9px}}
@media(max-width:820px){.eq{font-size:9px;white-space:normal;max-width:86vw}#snd{display:none}.tick:nth-child(even) span{visibility:hidden}}
.hud::before{content:"";position:absolute;left:0;right:0;bottom:0;height:48vh;background:linear-gradient(to top,rgba(2,4,10,.62) 0,rgba(2,4,10,.34) 42%,rgba(2,4,10,0) 100%);pointer-events:none;transition:opacity .5s}
.hud.flash::before{opacity:0}
.hud{color:var(--ink)}
.hud.flash{--ink:#0b1424;--dim:#243049;--faint:#34415c;--acc:#06607f;--glass:rgba(255,255,255,.38);text-shadow:0 1px 12px rgba(255,255,255,.6)}
.hud.flash .pill button[aria-pressed=true]{color:#fff}
.help{position:fixed;inset:0;z-index:4;display:grid;place-items:center;background:rgba(2,4,10,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s ease;font-family:var(--mono)}
.help.on{opacity:1;pointer-events:auto}
.help div{max-width:min(560px,86vw);padding:28px 32px;border:1px solid var(--line);border-radius:18px;background:var(--glass);font-size:11px;letter-spacing:.12em;line-height:2.1;color:var(--dim)}
.help b{color:var(--acc);font-weight:600;display:inline-block;min-width:11ch}
.help h2{font:600 10px var(--mono);letter-spacing:.34em;color:var(--ink);margin-bottom:10px}
.contact{position:fixed;inset:0;z-index:4;display:grid;place-items:center;padding:16px;background:rgba(2,4,10,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s ease;font-family:var(--mono)}
.contact.on{opacity:1;pointer-events:auto}
.contact form{position:relative;width:min(520px,100%);padding:28px 30px 26px;border:1px solid var(--line);border-radius:18px;background:var(--glass);color:var(--dim);font-size:10px;letter-spacing:.2em;display:grid;gap:14px}
.contact h2{font:600 10px var(--mono);letter-spacing:.34em;color:var(--ink)}
.contact p{font:300 15px/1.5 var(--sans);letter-spacing:0;color:var(--ink);margin-top:-4px}
.contact label{display:grid;gap:7px;min-width:0}
.contact .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact input,.contact textarea{all:unset;box-sizing:border-box;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(2,4,10,.5);color:var(--ink);font:14px/1.45 var(--sans);letter-spacing:0;transition:border-color .25s}
.contact textarea{resize:vertical;min-height:110px;white-space:pre-wrap}
.contact input:focus,.contact textarea:focus{border-color:var(--acc)}
.contact .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.contact .row .enter{display:inline-block}
#contact-ts:empty{display:none}
.contact button[disabled]{opacity:.5;cursor:wait}
#contact-note{letter-spacing:.12em;color:var(--acc);font-size:10px;line-height:1.6}
.contact .x{all:unset;position:absolute;right:16px;top:12px;cursor:pointer;font:300 22px var(--sans);color:var(--dim);padding:2px 6px}
.contact .x:hover,.contact .x:focus-visible{color:var(--acc)}
@media(max-width:520px){.contact form{padding:24px 20px 20px}.contact .pair{grid-template-columns:1fr}}
/* phones: the name on the left, contact on the right, over a soft scrim at the top */
@media(max-width:520px){
 .top{gap:10px}
 .top .enter{display:inline-block;flex:none;white-space:nowrap;padding:9px 12px;letter-spacing:.18em}
 .hud::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(150px + env(safe-area-inset-top));background:linear-gradient(to bottom,rgba(2,4,10,.6) 0,rgba(2,4,10,.3) 55%,rgba(2,4,10,0) 100%);pointer-events:none;z-index:-1}
}