/* Upstream, glass and neon. Black glass, a cream body, a teal-green glow: the look of the logo.
   The four platforms keep their own colours. One shape language: a pointed end on everything you can press. */
:root{
  /* names kept from the first design so every page and widget still works: paper = the dark ground, ink = the cream text */
  --paper:#030809; --paper-2:#071311; --paper-3:#0d211e; --ink:#f3efe1; --ink-2:#c3cfc7; --ink-3:#8da39b; --line:rgba(120,255,220,.16);
  --river:#3df2c4; --night:#020607; --night-2:#071210; --moss:#c8d3c4;
  --edge:rgba(120,255,225,.24); --edge-2:rgba(120,255,225,.5); --glass:rgba(10,28,25,.55); --glass-2:rgba(16,42,38,.72);
  --teal:#3df2c4; --emerald:#19e38a; --teal-deep:#0c8f78; --cream:#f3efe1; --glow:0 0 40px rgba(61,242,196,.28);
  --gh:#f0f6fc; --yt:#ff0000; --tw:#9146ff; --kk:#53fc18;
  --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --rail:56px; --gut:72px; --max:1180px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--paper)}
body{margin:0;color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-right:var(--rail);
  background:radial-gradient(1100px 640px at 72% -8%,rgba(40,210,170,.13),transparent 62%),radial-gradient(900px 600px at -5% 105%,rgba(25,200,130,.09),transparent 58%),var(--paper);background-attachment:fixed}
/* the contour lines of the first design, now a faint teal etching */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--teal);opacity:.07;-webkit-mask:url(../img/topo.svg) center/cover no-repeat;mask:url(../img/topo.svg) center/cover no-repeat;pointer-events:none}
img,svg,canvas,video{max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
::selection{background:var(--teal);color:#021311}
.skip{position:absolute;left:-999px;top:8px;background:var(--teal);color:#021311;padding:8px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.ic{display:inline-block;vertical-align:middle;flex:none}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,3vw,40px)}

/* ---------- wordmark (top left) ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 20px/1 var(--sans);letter-spacing:-.02em}
.brand .glass{width:46px;height:46px;object-fit:cover;border-radius:50%;mix-blend-mode:screen;flex:none;filter:saturate(1.1)}
.brand b{color:var(--cream)}
.brand em{font:italic 400 25px/1 var(--serif);letter-spacing:-.01em;color:var(--teal)}
.top{position:absolute;left:0;right:var(--rail);top:0;z-index:20;padding:16px clamp(18px,3vw,40px) 0 calc(var(--gut) + 14px);display:flex;align-items:center;justify-content:space-between}
.top--flat{position:relative;right:auto;padding-left:clamp(18px,3vw,40px)}

/* ---------- rail (right edge, vertical text) ---------- */
.rail{position:fixed;top:0;right:0;bottom:0;width:var(--rail);z-index:50;background:rgba(3,10,10,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:1px solid var(--edge);display:flex;flex-direction:column;align-items:stretch}
.rail a{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink-2);font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line);transition:background .2s,color .2s,text-shadow .2s}
.rail a.t{writing-mode:vertical-rl;padding:22px 0}
.rail a:hover{color:var(--teal);background:rgba(61,242,196,.07);text-shadow:0 0 14px rgba(61,242,196,.7)}
.rail a[aria-current="page"]{background:linear-gradient(180deg,rgba(61,242,196,.22),rgba(61,242,196,.06));color:var(--cream);box-shadow:inset 2px 0 0 var(--teal)}
.rail .sp{flex:1;border-bottom:1px solid var(--line)}
.rail a.i{height:56px}
.rail .tk{color:var(--teal);font-weight:600}

/* ---------- river (left gutter, home only) ---------- */
.river{position:fixed;left:0;top:0;bottom:0;width:var(--gut);z-index:30;pointer-events:none;background:rgba(3,10,10,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-right:1px solid var(--edge)}
.river canvas{position:absolute;inset:0;width:100%;height:100%}
.river a{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:30px;height:30px;display:grid;place-items:center;font:500 10px/1 var(--mono);letter-spacing:.04em;text-decoration:none;color:var(--ink-3);background:#041211;border:1px solid var(--edge);border-radius:50%;transition:all .25s}
.river a span{color:var(--cream);position:absolute;left:40px;top:50%;transform:translateY(-50%);z-index:5;white-space:nowrap;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:0;pointer-events:none;background:rgba(5,20,18,.95);padding:5px 8px;border:1px solid var(--edge);transition:opacity .15s}
.river a:hover span,.river a.on span{opacity:1}
.river a.on{background:var(--teal);color:#021311;border-color:var(--teal);box-shadow:0 0 22px rgba(61,242,196,.7);transform:translate(-50%,-50%) scale(1.15)}
.river a.done{color:var(--teal);border-color:var(--edge-2)}
.has-river .wrap,.has-river .hero-in{padding-left:calc(var(--gut) + clamp(8px,2vw,24px))}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;margin:0 0 .4em;line-height:1.02;color:var(--cream)}
h1{font-size:clamp(52px,8.6vw,132px);line-height:.92;letter-spacing:-.035em}
h2{font-size:clamp(36px,5.2vw,68px);line-height:.98}
h3{font-size:clamp(23px,2.2vw,30px);line-height:1.1;letter-spacing:-.015em}
h4{font:600 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .9em;color:var(--ink-3)}
h1 em,h2 em,h3 em{font-style:italic;color:var(--teal);text-shadow:0 0 38px rgba(61,242,196,.45)}
.lede{font-size:clamp(18px,1.55vw,22px);line-height:1.5;color:var(--ink-2);max-width:34em}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow b{font-weight:600;color:#021311;background:linear-gradient(180deg,#6ef7d6,#2fdcae);padding:5px 8px;letter-spacing:.06em;box-shadow:0 0 18px rgba(61,242,196,.4)}
.eyebrow::after{content:"";height:1px;width:56px;background:linear-gradient(90deg,var(--edge-2),transparent)}
small,.small{font-size:13.5px;color:var(--ink-3)}
.note{font:400 12.5px/1.5 var(--mono);color:var(--ink-3)}

/* ---------- buttons: a pointed end, glossy like the logo ---------- */
.btn{--bg:linear-gradient(180deg,#72f8d8 0%,#35e0b2 55%,#1fc895 100%);--fg:#021311;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 38px 0 24px;border:0;background:var(--bg);color:var(--fg);font:600 14.5px/1 var(--sans);letter-spacing:.005em;text-decoration:none;cursor:pointer;clip-path:polygon(0 0,calc(100% - 17px) 0,100% 50%,calc(100% - 17px) 100%,0 100%);transition:filter .2s,padding .2s,transform .2s;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.btn:hover{filter:brightness(1.12) saturate(1.1);padding-right:44px}
.btn:focus-visible{clip-path:none;outline:2px solid var(--teal);outline-offset:3px}
.btn--sm{height:38px;padding:0 30px 0 16px;font-size:13px;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%)}
.btn--sm:hover{padding-right:34px}
.btn--paper{--bg:linear-gradient(180deg,#fbf8ee,#d9d3be);--fg:#0b1412}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn--ghost{--bg:transparent;--fg:var(--cream);clip-path:none;padding:0 2px;height:auto;border-bottom:1.5px solid var(--edge-2);padding-bottom:3px;gap:8px;box-shadow:none}
.btn--ghost::after{content:"\2192";transition:transform .18s;color:var(--teal)}
.btn--ghost:hover{--fg:var(--teal);border-color:var(--teal);padding-right:2px;filter:none}
.btn--ghost:hover::after{transform:translateX(4px)}
.btn--ghost.btn--sm{height:auto;clip-path:none}
.row{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--edge);font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:rgba(8,24,21,.6)}
.tag--ink{background:linear-gradient(180deg,#6ef7d6,#2fdcae);color:#021311;border-color:transparent}
.tag--live{border-color:var(--edge-2);color:var(--cream)}
.tag--live::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff5a4d;box-shadow:0 0 10px #ff5a4d;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.3}}

/* ---------- cards: dark glass with survey crop marks ---------- */
.card{position:relative;background:linear-gradient(180deg,var(--glass-2),var(--glass));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--edge);padding:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px -34px rgba(0,0,0,.9)}
.card::before{content:"";position:absolute;inset:-7px;pointer-events:none;--c:var(--teal);background:
 linear-gradient(var(--c),var(--c)) top left/12px 1.5px,linear-gradient(var(--c),var(--c)) top left/1.5px 12px,
 linear-gradient(var(--c),var(--c)) top right/12px 1.5px,linear-gradient(var(--c),var(--c)) top right/1.5px 12px,
 linear-gradient(var(--c),var(--c)) bottom left/12px 1.5px,linear-gradient(var(--c),var(--c)) bottom left/1.5px 12px,
 linear-gradient(var(--c),var(--c)) bottom right/12px 1.5px,linear-gradient(var(--c),var(--c)) bottom right/1.5px 12px;background-repeat:no-repeat;opacity:.6}
.card h3{margin-bottom:.5em}
.card p:last-child{margin-bottom:0}
.card--dark{background:var(--night)}
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,10vw,150px) 0;position:relative;scroll-margin-top:0}
.sec--ink{background:linear-gradient(180deg,rgba(2,7,7,.0),rgba(2,9,8,.85) 12%,rgba(2,9,8,.85) 88%,rgba(2,7,7,0)),radial-gradient(900px 500px at 85% 20%,rgba(40,210,170,.12),transparent 65%);color:var(--cream)}
.sec--ink::before{content:none}
.sec--ink .lede,.sec--ink p{color:var(--ink-2)}
.sec--paper2{background:linear-gradient(180deg,transparent,rgba(12,36,32,.55) 14%,rgba(12,36,32,.55) 86%,transparent)}
.sec-head{max-width:760px;margin-bottom:clamp(34px,5vw,64px)}
.sec-head p{color:var(--ink-2);font-size:19px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:210px 0 90px}
.hero canvas.flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-in{pointer-events:none;position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(18px,3vw,40px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-in>*{pointer-events:auto}
.springs{position:absolute;z-index:1;left:0;right:0;top:0;height:132px;display:flex;justify-content:center;gap:clamp(22px,6vw,90px);padding:0 var(--gut);pointer-events:none}
.spring{pointer-events:auto;cursor:pointer;position:relative;margin-top:92px;width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:var(--brand);color:var(--on);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 0 6px rgba(3,8,9,.9),0 0 0 7.5px var(--edge-2),0 0 34px color-mix(in srgb,var(--brand) 55%,transparent);transition:transform .25s}
.spring::after{content:attr(data-name);position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.spring.pop{transform:scale(1.14)}
.hero h1{margin-bottom:.28em}
.hero .lede{margin-bottom:30px}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.hero .lede,.hero h1,.hero .eyebrow{text-shadow:0 0 22px rgba(3,8,9,.95),0 0 8px rgba(3,8,9,.9)}
.hero h1 em{text-shadow:0 0 38px rgba(61,242,196,.55)}

/* the banner: coins flowing through the logo, like a river seen from the side */
.banner{position:relative;margin:0 0 -2px;overflow:hidden;line-height:0}
.banner img{width:100%;height:auto;display:block;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 74%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 74%,transparent)}

/* terminal widget */
.term{background:linear-gradient(180deg,rgba(4,14,13,.92),rgba(3,10,10,.94));color:#e7e3d6;border:1px solid var(--edge-2);position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 30px 90px -20px rgba(61,242,196,.28),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.term-tabs{display:flex;border-bottom:1px solid var(--edge)}
.term-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;background:transparent;border:0;border-right:1px solid var(--edge);color:#7f9a92;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.term-tabs button:last-child{border-right:0}
.term-tabs button.on{background:var(--brand);color:var(--on);box-shadow:0 0 28px color-mix(in srgb,var(--brand) 60%,transparent)}
.term-tabs button:not(.on):hover{color:#fff}
.term-body{padding:20px 22px;min-height:352px;font:400 13px/1.75 var(--mono);white-space:pre-wrap;word-break:break-word;overflow:hidden}
.term-body .d{color:#6f8b83}.term-body .g{color:#7ef0a8}.term-body .y{color:#f3d36b}.term-body .r{color:#ff8a80}.term-body .c{color:#8ee0d6}.term-body .b{color:#fff;font-weight:600}
.term-body .cur{display:inline-block;width:8px;height:15px;background:var(--teal);vertical-align:-2px;animation:blink 1s steps(1) infinite;box-shadow:0 0 10px var(--teal)}
@keyframes blink{50%{opacity:0}}
.term-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 22px;border-top:1px solid var(--edge);font:400 11px/1.4 var(--mono);color:#6f8b83}
.term-foot b{color:#a9c4bb;font-weight:500}

/* ---------- widgets ---------- */
.lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:start}
.panel{background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--edge);position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 70px -40px rgba(0,0,0,.95)}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--edge);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:rgba(61,242,196,.06);color:var(--ink-2)}
.panel-b{padding:20px}
.ctl{display:grid;gap:6px;margin-bottom:18px}
.ctl label{display:flex;justify-content:space-between;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ctl label output{color:var(--cream);font-weight:600}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--teal),rgba(61,242,196,.25));border-radius:2px}
input[type=range]::-moz-range-track{height:3px;background:linear-gradient(90deg,var(--teal),rgba(61,242,196,.25));border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6.5px;background:var(--cream);border:0;border-radius:0;transform:rotate(45deg);cursor:grab;box-shadow:0 0 14px rgba(61,242,196,.8)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--cream);border:0;border-radius:0;transform:rotate(45deg);cursor:grab;box-shadow:0 0 14px rgba(61,242,196,.8)}
.big{font:400 clamp(44px,6vw,76px)/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--cream);text-shadow:0 0 40px rgba(61,242,196,.25)}
.big small{font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-left:8px}
.kv{display:grid;gap:0;margin:0;padding:0;list-style:none;font:400 13px/1 var(--mono)}
.kv li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(120,255,225,.2)}
.kv li:last-child{border-bottom:0}
.kv b{font-weight:600;color:var(--cream)}
.bar{display:flex;height:30px;border:1px solid var(--edge-2);background:rgba(3,10,10,.7)}
.bar i{display:block;height:100%;transition:flex-basis .25s,width .25s}
.bar .s{background:linear-gradient(180deg,var(--cream),#cfc9b4)}.bar .l{background:linear-gradient(180deg,#5ef5d0,#1fc895);box-shadow:0 0 16px rgba(61,242,196,.6)}.bar .b{background:repeating-linear-gradient(45deg,#6b8a82 0 3px,transparent 3px 7px)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px;background:var(--c)}
.ptabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ptabs button{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px 0 12px;background:rgba(8,24,21,.7);border:1px solid var(--edge);color:var(--cream);font:600 13px/1 var(--sans);cursor:pointer;transition:background .15s,color .15s,box-shadow .2s}
.ptabs button:hover{border-color:var(--edge-2)}
.ptabs button.on{background:var(--brand);color:var(--on);border-color:transparent;box-shadow:0 0 26px color-mix(in srgb,var(--brand) 55%,transparent)}
.tl{position:relative;height:96px;margin:6px 0 4px}
.tl .axis{position:absolute;left:0;right:0;top:56px;height:2px;background:var(--edge-2)}
.tl .seg{position:absolute;top:40px;height:34px}
.tl .seg.wait{background:repeating-linear-gradient(45deg,var(--cream) 0 3px,transparent 3px 7px);border:1px solid var(--cream)}
.tl .seg.paid{background:linear-gradient(180deg,#5ef5d0,#1fc895);border:1px solid var(--teal);box-shadow:0 0 22px rgba(61,242,196,.5)}
.tl .seg.rot{background:transparent;border:1.5px dashed var(--teal)}
.tl .mk{position:absolute;top:8px;bottom:0;width:0;border-left:1.5px dashed var(--ink-3)}
.tl .mk em{position:absolute;top:-2px;left:6px;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--ink-2);font-style:normal;text-shadow:none}
.tl .ticks{position:absolute;left:0;right:0;top:78px;display:flex;justify-content:space-between;font:400 10px/1 var(--mono);color:var(--ink-3)}
.att{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.att button{display:grid;gap:8px;justify-items:start;text-align:left;padding:14px;background:rgba(8,24,21,.7);border:1px solid var(--edge);color:var(--cream);font:inherit;cursor:pointer;transition:background .15s,box-shadow .2s}
.att button b{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.att button code{font:400 11.5px var(--mono);color:var(--ink-3)}
.att button.on{background:linear-gradient(180deg,rgba(61,242,196,.28),rgba(61,242,196,.1));border-color:var(--teal);box-shadow:0 0 24px rgba(61,242,196,.28)}
.att button.on code{color:var(--ink-2)}
.att button .st{font:500 11px/1 var(--mono)}
.verdict{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--edge);background:rgba(8,24,21,.7);font:500 14px/1.3 var(--sans);color:var(--cream)}
.verdict.ok{background:linear-gradient(180deg,rgba(61,242,196,.3),rgba(61,242,196,.12));border-color:var(--teal);box-shadow:0 0 30px rgba(61,242,196,.25)}
.verdict b{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:rgba(2,8,8,.85);color:#fff;border:1px solid var(--edge-2);font:600 clamp(18px,2.4vw,26px)/1 var(--mono);letter-spacing:.04em;box-shadow:inset 0 0 30px rgba(61,242,196,.07)}
.codebox button{flex:none;background:transparent;border:1px solid var(--edge-2);color:var(--ink-2);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;cursor:pointer}
.codebox button:hover{background:var(--teal);color:#021311}
.fld{display:grid;gap:6px;margin-bottom:14px}
.fld label{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fld input,.fld select{width:100%;height:50px;padding:0 14px;background:rgba(3,12,11,.85);border:1px solid var(--edge);border-radius:0;color:var(--cream);font:500 15px/1 var(--mono);outline:none}
.fld input:focus,.fld select:focus{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 24px rgba(61,242,196,.25)}
.fld select option{background:#06100f;color:var(--cream)}
.find{display:flex;gap:0;align-items:stretch}
.find input{flex:1;min-width:0;height:56px;padding:0 16px;background:rgba(3,12,11,.85);border:1px solid var(--edge-2);border-right:0;border-radius:0;color:var(--cream);font:500 16px/1 var(--mono);outline:none}
.find input:focus{box-shadow:0 0 24px rgba(61,242,196,.28)}
.find input::placeholder{color:var(--ink-3)}
.find .btn{height:56px}
.profile{display:grid;grid-template-columns:84px 1fr;gap:18px;align-items:center;padding:18px;border:1px solid var(--edge);background:linear-gradient(180deg,var(--glass-2),var(--glass));margin-top:18px}
.profile .av{width:84px;height:84px;border-radius:50%;background:var(--paper-3) center/cover;border:1px solid var(--edge-2);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 28px rgba(61,242,196,.2)}
.profile h3{margin:0 0 6px}
.profile .meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font:500 12px/1 var(--mono);color:var(--ink-2)}
.err{margin-top:14px;padding:12px 14px;border:1px solid rgba(255,107,94,.6);color:#ffc2bb;background:rgba(255,80,70,.1);font:500 13.5px/1.4 var(--mono)}
.okmsg{margin-top:14px;padding:12px 14px;border:1px solid var(--teal);color:#bff9e9;background:rgba(61,242,196,.1);font:500 13.5px/1.4 var(--mono)}

/* platform mocks (stylised, official glyphs only) */
.mocks{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.mock{overflow:hidden;font-size:13px;line-height:1.5;border:1px solid var(--edge-2);box-shadow:0 20px 60px -24px rgba(0,0,0,.9),0 0 40px -10px rgba(61,242,196,.18)}
.mock-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;font:400 11px/1 var(--mono);opacity:.85;border-bottom:1px solid rgba(127,127,127,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-body{padding:16px 16px 18px}
.mock .hl{background:#fff1a0;color:#12171a;padding:1px 4px;font-family:var(--mono);font-size:.95em;box-decoration-break:clone}
.mock--gh{background:#0d1117;color:#e6edf3}
.mock--gh .mock-bar{background:#161b22}
.mock--gh pre{margin:0;font:400 12.5px/1.7 var(--mono);display:grid;grid-template-columns:28px 1fr}
.mock--gh pre i{color:#6e7681;font-style:normal;text-align:right;padding-right:12px;user-select:none}
.mock--yt{background:#fff;color:#0f0f0f}
.mock--yt .mock-bar{background:#f2f2f2;color:#606060}
.mock--yt .who{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.mock--yt .av{width:44px;height:44px;border-radius:50%;background:#cc0000;display:grid;place-items:center;color:#fff}
.mock--yt b{display:block;font-size:15px;color:#0f0f0f}.mock--yt small{color:#606060}
.mock--yt .about{background:#f2f2f2;border-radius:12px;padding:12px 14px}
.mock--tw{background:#18181b;color:#efeff1}
.mock--tw .mock-bar{background:#0e0e10;color:#adadb8}
.mock--tw .head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:700}
.mock--tw .pan{background:#1f1f23;border-left:3px solid #9146ff;padding:12px 14px}
.mock--kk{background:#0b0e0f;color:#fff}
.mock--kk .mock-bar{background:#141a1b;color:#9aa5a6}
.mock--kk .head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:700}
.mock--kk .head .ic{color:#53fc18}
.mock--kk .pan{border:1px solid #2b3a3c;padding:12px 14px}
.mock cite{display:block;margin-top:10px;font:400 11px var(--mono);font-style:normal;opacity:.65}

/* source cards */
.src{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.src .card{display:flex;flex-direction:column;gap:12px;padding:0;overflow:hidden}
.src .card .hd{display:flex;align-items:center;gap:12px;padding:18px 20px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 100%,#fff 8%),var(--brand));color:var(--on);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 40px -10px color-mix(in srgb,var(--brand) 60%,transparent)}
.src .card .hd h3{margin:0;color:inherit;font:600 20px var(--sans);letter-spacing:-.01em}
.src .card .bd{padding:4px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.src .card dl{margin:0;display:grid;gap:10px;font-size:14.5px}
.src .card dt{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.src .card dd{margin:0;color:var(--ink-2)}
.yes{color:var(--teal)!important;font-weight:600}.no{color:#ff9a8c;font-weight:600}
.scene{position:relative;max-width:640px;margin:0 auto clamp(40px,6vw,80px);line-height:0}
.scene img{width:100%;height:auto;display:block;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent);mask-image:radial-gradient(closest-side,#000 74%,transparent)}

/* ---------- misc blocks ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--edge);background:linear-gradient(180deg,var(--glass-2),var(--glass))}
.stat{padding:22px 18px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font:400 clamp(34px,4vw,54px)/1 var(--serif);letter-spacing:-.03em;color:var(--cream);text-shadow:0 0 36px rgba(61,242,196,.3)}
.stat span{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:rgba(61,242,196,.06);border-bottom:1px solid var(--edge-2)}
.film{position:relative;border:1px solid var(--edge-2);background:#000;box-shadow:0 30px 100px -30px rgba(61,242,196,.35)}
.film video{display:block;width:100%;aspect-ratio:16/9}
.honest{border-left:1px solid var(--edge-2);padding-left:22px;display:grid;gap:14px}
.honest p{margin:0}
.honest b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--edge);padding:56px 0 44px;background:rgba(2,7,7,.7)}
.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}
.foot a{display:block;text-decoration:none;padding:5px 0;color:var(--ink-2);font-size:15px}
.foot a:hover{color:var(--teal);text-decoration:underline}
.foot p{color:var(--ink-3);font-size:14.5px;max-width:30em;margin-top:14px}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font:400 12px/1.6 var(--mono);color:var(--ink-3)}
body.has-river footer .wrap{padding-left:calc(var(--gut) + clamp(8px,2vw,24px))}

/* ---------- docs ---------- */
.docs{display:grid;grid-template-columns:250px minmax(0,1fr) 210px;gap:clamp(24px,3.4vw,52px);padding-top:30px;padding-bottom:90px;align-items:start}
.dnav{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding-right:6px}
.dnav a{display:block;padding:6px 10px;text-decoration:none;color:var(--ink-3);font-size:14.5px;border-left:2px solid var(--line)}
.dnav a:hover{color:var(--cream);border-color:var(--teal)}
.dnav a[aria-current="page"]{color:var(--cream);font-weight:600;border-color:var(--teal);background:linear-gradient(90deg,rgba(61,242,196,.14),transparent)}
.dnav h4{margin-top:22px}
.docs-search{width:100%;height:40px;padding:0 12px;border:1px solid var(--edge);background:rgba(3,12,11,.85);color:var(--cream);font:400 13px var(--mono);margin-bottom:6px;border-radius:0;outline:none}
.docs-search:focus{border-color:var(--teal)}
.doc{min-width:0;max-width:760px}
.doc h1{font-size:clamp(40px,5.4vw,72px);margin-bottom:.2em}
.doc .sub{font-size:20px;color:var(--ink-2);margin-bottom:2em;max-width:32em;line-height:1.45}
.doc h2{font-size:clamp(28px,3.2vw,40px);margin:1.7em 0 .5em;padding-top:.3em;border-top:1px solid var(--line)}
.doc h3{font:600 18px/1.3 var(--sans);letter-spacing:-.005em;margin:1.6em 0 .4em}
.doc p,.doc li{color:var(--ink-2);font-size:17px}
.doc strong,.doc b{color:var(--cream)}
.doc li{margin:.3em 0}
.doc a{color:var(--teal);text-underline-offset:3px}
.doc code{font:500 .88em var(--mono);background:rgba(61,242,196,.1);color:#c9fbee;padding:2px 6px}
.doc pre{margin:1.2em 0;padding:18px 20px;background:rgba(2,8,8,.9);color:#e7e3d6;font:400 13px/1.7 var(--mono);overflow:auto;border:1px solid var(--edge)}
.doc pre code{background:none;padding:0;color:inherit;font-size:inherit}
.doc pre .d{color:#6f8b83}.doc pre .g{color:#7ef0a8}.doc pre .y{color:#f3d36b}.doc pre .r{color:#ff8a80}.doc pre .c{color:#8ee0d6}
.doc table{margin:1.2em 0;font-size:15px}
.doc table td{color:var(--ink-2)}
.doc table code{font-size:.9em}
.callout{margin:1.5em 0;padding:16px 20px;border:1px solid var(--edge);background:rgba(10,28,25,.6)}
.callout b{display:block;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:var(--cream)}
.callout p{margin:0;font-size:16px}
.callout.warn{background:rgba(255,184,77,.08);border-color:rgba(255,184,77,.5)}
.callout.warn b{color:#ffcf85}
.callout.ok{background:rgba(61,242,196,.09);border-color:var(--teal)}
.callout.ok b{color:var(--teal)}
.dtoc{position:sticky;top:20px;font-size:14px}
.dtoc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--line);color:var(--ink-3);text-decoration:none}
.dtoc a:hover{color:var(--cream);border-color:var(--teal)}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--edge)}

/* ---------- app / token pages ---------- */
.page-top{padding-top:130px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--edge);margin-bottom:34px;background:rgba(8,24,21,.5)}
.steps button{display:flex;align-items:center;gap:12px;padding:16px 18px;background:transparent;border:0;border-right:1px solid var(--edge);font:600 14px var(--sans);color:var(--ink-2);cursor:pointer;text-align:left}
.steps button:last-child{border-right:0}
.steps button b{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--edge-2);font:600 12px var(--mono)}
.steps button.on{background:linear-gradient(180deg,rgba(61,242,196,.28),rgba(61,242,196,.08));color:var(--cream);box-shadow:inset 0 -2px 0 var(--teal)}.steps button.on b{border-color:var(--teal);background:var(--teal);color:#021311}
.ledger{font:400 12.5px/1.8 var(--mono);max-height:300px;overflow:auto}
.ledger div{display:grid;grid-template-columns:78px 1fr auto;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(120,255,225,.2)}
.ledger div span:first-child{color:var(--ink-3)}
.ca-box{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px;border:1px solid var(--edge-2);background:linear-gradient(180deg,var(--glass-2),var(--glass))}
.ca-box .mono{font-size:16px;word-break:break-all}
.proof-log{margin:18px 0;padding:18px 20px;background:rgba(2,8,8,.9);color:#e7e3d6;font:400 13px/1.8 var(--mono);overflow:auto;border:1px solid var(--edge);white-space:pre-wrap;word-break:break-word}
.ctl label.chk{justify-content:flex-start;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font:400 14.5px/1.3 var(--sans);color:var(--ink-2);cursor:pointer}
.ctl label.chk input{accent-color:var(--teal);width:17px;height:17px;margin:0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .docs{grid-template-columns:230px minmax(0,1fr)}
  .dtoc{display:none}
  .g4,.src{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr}
  .hero{padding-top:200px}
  .lab{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  body{padding-right:0;padding-bottom:58px}
  .rail{top:auto;left:0;right:0;bottom:0;width:auto;height:58px;flex-direction:row;border-left:0;border-top:1px solid var(--edge)}
  .rail a{flex:1;border-bottom:0;border-right:1px solid var(--line);font-size:11px;letter-spacing:.08em}
  .rail a.t{writing-mode:horizontal-tb;padding:0}
  .rail a[aria-current="page"]{box-shadow:inset 0 2px 0 var(--teal)}
  .rail .sp{display:none}
  .rail a.i{height:auto;flex:0 0 52px}
  .top{right:0;padding-left:clamp(18px,4vw,28px)}
  .river{display:none}
  .has-river .wrap,.has-river .hero-in,body.has-river footer .wrap{padding-left:clamp(18px,4vw,28px)}
  .springs{padding:0 18px;gap:14px;top:56px}
  .spring{width:46px;height:46px;margin-top:70px;border-radius:14px}
  .spring .ic{width:22px;height:22px}
  .docs{grid-template-columns:1fr}
  .dnav{position:static;max-height:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .g2,.src,.mocks,.att{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.steps button{border-right:0;border-bottom:1px solid var(--edge)}.steps button:last-child{border-bottom:0}
  .find{flex-direction:column}.find input{border-right:1px solid var(--edge-2);border-bottom:0}.find .btn{clip-path:none;width:100%;justify-content:center;padding:0}
  .term-body{min-height:300px;font-size:12px}
  .term-tabs button{font-size:0;gap:0}.term-tabs button .ic{width:20px;height:20px}
  .profile{grid-template-columns:60px 1fr}.profile .av{width:60px;height:60px}
  .foot{grid-template-columns:1fr}
  .pager{flex-direction:column}
  .hero-in{padding-top:30px}
  .spring::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}