/* tensors.vip look: near-black, green / blue / red accents, wide display type, lattice of wireframe cubes behind everything */
:root,:root:not([data-theme=light]){
  --paper:#020504; --surface:#06141c; --ink:#d8f5ff; --muted:#8fb0b8; --line:rgba(160,220,255,.22);
  --verified:#00ff66; --mask:#19a7ff; --bad:#ff2a4d; --good:#00ff66;
  --c0:#19a7ff; --c1:#ff2a4d; --c2:#00ff66; --c3:#ffd24a;
  --font:"Share Tech Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; --mono:"Share Tech Mono",ui-monospace,Consolas,monospace;
  --wide:"Michroma","Eurostile","Bahnschrift",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#020504; --surface:#06141c; --ink:#d8f5ff; --muted:#8fb0b8; --line:rgba(160,220,255,.22);
  --verified:#00ff66; --mask:#19a7ff; --bad:#ff2a4d; --good:#00ff66;
  --c0:#19a7ff; --c1:#ff2a4d; --c2:#00ff66; --c3:#ffd24a;}}
body{background:#020504;font-size:16px;position:relative}
#cubes{position:fixed;inset:0;width:100%;height:100%;z-index:-2;touch-action:none;display:block}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,rgba(2,5,4,.35),rgba(2,5,4,.82) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px)}
@media (prefers-reduced-motion:reduce){body::after{display:none}}
h1,h2,h3,.brand,.tile b,.card b{font-family:var(--wide);font-weight:400;letter-spacing:.06em}
h1{font-size:clamp(24px,4.4vw,48px);line-height:1.2;max-width:24ch;color:#fff;text-shadow:0 0 22px rgba(25,167,255,.55)}
h2{font-size:clamp(16px,2vw,22px);letter-spacing:.12em;text-transform:uppercase;color:#fff;line-height:1.4}
h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.lede{color:#a9c8d0}
/* top strip */
.bar{height:auto;background:linear-gradient(180deg,rgba(40,60,70,.55),rgba(10,20,26,.9));border-top:1px solid var(--line);border-bottom:1px solid var(--line);backdrop-filter:blur(6px);gap:22px;padding-top:8px;padding-bottom:8px}
.brand{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#fff}
.bar nav{gap:0}
.bar nav a{font-family:var(--wide);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#cfe;padding:8px 14px;border-left:1px solid var(--line);display:flex;align-items:center;gap:8px;transition:background .2s}
.bar nav a:last-child{border-right:1px solid var(--line)}
.bar nav a:hover{background:linear-gradient(180deg,rgba(0,255,102,.35),rgba(0,255,102,.08));color:#fff}
.bar nav a[aria-current=page]{color:#fff;background:linear-gradient(180deg,rgba(0,255,102,.2),rgba(0,255,102,.04))}
.bar nav a[aria-current=page]::before{content:"";width:5px;height:5px;background:var(--verified);box-shadow:0 0 6px var(--verified);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.conn{font-family:var(--wide);font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.conn.on i{box-shadow:0 0 8px var(--good)}
/* controls */
button,select,.btn{font-family:var(--wide);font-size:10px;letter-spacing:.2em;text-transform:uppercase;border-radius:0;background:rgba(6,20,28,.8);color:var(--ink);border:1px solid var(--line)}
select{letter-spacing:.08em;text-transform:none;font-family:var(--font);font-size:14px}
button:hover,.btn:hover{border-color:var(--verified);background:linear-gradient(180deg,rgba(0,255,102,.3),rgba(0,255,102,.06));color:#fff}
button.primary,.btn.primary{background:linear-gradient(180deg,rgba(0,255,102,.45),rgba(0,255,102,.12));color:#fff;border-color:var(--verified);box-shadow:0 0 14px rgba(0,255,102,.2)}
button.primary:hover,.btn.primary:hover{background:linear-gradient(180deg,rgba(0,255,102,.65),rgba(0,255,102,.2))}
/* panels sit on the lattice */
.panel,.chip,.mat,.diagram,.tile,.card,dialog#consent,.story.alt{background:rgba(4,14,20,.78);border-color:var(--line);border-radius:0;backdrop-filter:blur(3px)}
.story.alt{background:rgba(4,14,20,.6)}
.card:hover{border-color:var(--verified);box-shadow:0 0 18px rgba(0,255,102,.15)}
.panel,.mat,.diagram{position:relative}
.tile b{font-size:clamp(14px,1.8vw,20px);letter-spacing:.04em;color:#fff}
.tile span{color:var(--muted)}
.story p,.story li,.intro,.small,p,li{color:#a9c8d0}
.story b,.plain b,.steps3 b{color:#fff}
a{color:#7fe0ff}
.btn,.card,.bar a,.brand{color:inherit}
.bar nav a,.brand{color:#cfe}.brand{color:#fff}
.steps li::before{border-radius:0}
code{background:rgba(25,167,255,.12)}
table.est th,.est td{border-color:var(--line)}
dialog#consent::backdrop{background:rgba(2,5,4,.8)}
:focus-visible{outline-color:var(--verified)}
@media (max-width:760px){.bar{flex-wrap:wrap;gap:6px}.bar nav{order:3;width:100%;overflow-x:auto}.bar nav a{padding:8px 10px}}
