/* mixpad · premium dark: graphite page, an aluminium console lit like a product shot, one accent (signal orange) */
:root{--bg:#0a0b0d;--bg2:#101114;--card:#14151a;--card2:#1a1b21;--line:#24252c;--line2:#30313a;--tx:#f3f2ee;--tx2:#c9c8c2;--dim:#8a8984;--or:#ff5a1f;--or2:#ff7a45;--glow:rgba(255,90,31,.35);--green:#4ade80;--red:#f87171;
  --alu1:#f3f3f0;--alu2:#d9d9d4;--desk:#15161a;--desk2:#1e1f24;--ub:'Unbounded',system-ui,sans-serif;--hd:'Inter Tight','Inter',system-ui,sans-serif;--in:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--dot:'Doto','JetBrains Mono',monospace;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg)}
body{background:var(--bg);color:var(--tx);font:15px/1.55 var(--in);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(1200px 600px at 50% -10%,rgba(255,90,31,.10),transparent 60%),radial-gradient(900px 500px at 100% 40%,rgba(120,120,160,.06),transparent 60%)}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}input,textarea{font:inherit;color:var(--tx)}code{font-family:var(--mono)}
::selection{background:var(--or);color:#fff}
/* header */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:30px;padding:14px 34px;background:rgba(10,11,13,.72);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.top.scrolled{border-bottom-color:var(--line);background:rgba(10,11,13,.86)}
.logo{display:flex;align-items:center;gap:10px;font:800 23px var(--ub);letter-spacing:-.03em}.logo canvas{width:30px;height:30px}.logo.small{font-size:16px}.logo.small canvas{width:22px;height:22px}
.top nav{display:flex;gap:4px}.top nav a{padding:7px 12px;border-radius:999px;font:500 14px var(--in);color:var(--tx2);transition:background .2s,color .2s}.top nav a:hover{background:var(--card);color:var(--tx)}
.top nav b{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--or);color:#fff;font-size:10px;padding:0 5px;margin-left:5px}
.top-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.x-link{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--line2);background:var(--card);border-radius:999px;color:var(--ink,#fff);transition:border-color .2s}.x-link:hover{border-color:var(--dim)}
.ca-chip{display:flex;gap:8px;align-items:center;border:1px solid var(--line2);background:var(--card);border-radius:999px;padding:8px 14px;font-weight:600;transition:border-color .2s}.ca-chip:hover{border-color:var(--dim)}.ca-chip span{color:var(--dim);font-size:12px}.ca-chip b{font:600 13px var(--mono)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:10px 18px;font:600 14px var(--in);border:1px solid var(--line2);background:var(--card);color:var(--tx);white-space:nowrap;transition:transform .15s var(--ease),background .2s,border-color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);border-color:var(--dim)}.btn.small{padding:7px 13px;font-size:13px}
.btn.dark{background:var(--tx);color:#0a0b0d;border-color:var(--tx)}.btn.dark:hover{box-shadow:0 8px 24px rgba(255,255,255,.12)}
.btn.or{background:linear-gradient(var(--or2),var(--or));border-color:var(--or);color:#fff;box-shadow:0 8px 24px var(--glow)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
main{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 32px}
/* hero */
.hero{text-align:center;padding:64px 0 34px;display:flex;flex-direction:column;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 13px var(--in);color:var(--tx2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 10px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(74,222,128,.15);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
h1{font:800 clamp(46px,8vw,96px)/.98 var(--hd);letter-spacing:-.04em;margin:22px 0 18px}
h1 em{font-style:normal;background:linear-gradient(100deg,#ff8a50,#ff5a1f 45%,#ffb38a 70%,#ff5a1f);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.lede{font-size:19px;color:var(--tx2);max-width:620px}
.hero-stats{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.hero-stats div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 18px;min-width:120px}.hero-stats b{display:block;font:700 26px/1.1 var(--hd);letter-spacing:-.03em}.hero-stats span{font-size:12px;color:var(--dim)}
.hero-ca{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px 8px 8px 16px;margin-top:14px;max-width:100%}
.hero-ca span{font:700 13px var(--ub)}.hero-ca code{font-size:13px;color:var(--dim)}
/* stage: the console lit on a dark set */
.stage-wrap{position:relative;perspective:1600px;padding:20px 0 10px}
.spot{position:absolute;left:50%;top:-60px;width:1200px;height:700px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.10),transparent 60%);pointer-events:none}
/* ===== the device ===== */
.device{position:relative;border-radius:34px;padding:22px 24px 16px;background:linear-gradient(180deg,var(--alu1),var(--alu2));color:#0e0f12;transform-style:preserve-3d;transition:transform .5s var(--ease);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.08),0 2px 0 #9d9c96,0 60px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04),0 30px 80px rgba(255,90,31,.08)}
.device:before{content:'';position:absolute;inset:0;border-radius:34px;pointer-events:none;opacity:.45;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 2px,rgba(255,255,255,.4) 2px 3px)}
.device:after{content:'';position:absolute;inset:0;border-radius:34px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);background-size:250% 100%;animation:glint 9s ease-in-out infinite;mix-blend-mode:soft-light}
@keyframes glint{0%,60%{background-position:150% 0}100%{background-position:-100% 0}}
.screws i{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fdfdfb,#b0afa8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.screws i:after{content:'';position:absolute;left:2px;right:2px;top:5px;height:2px;background:rgba(0,0,0,.28);transform:rotate(35deg)}
.screws i:nth-child(1){top:12px;left:12px}.screws i:nth-child(2){top:12px;right:12px}.screws i:nth-child(3){bottom:12px;left:12px}.screws i:nth-child(4){bottom:12px;right:12px}
.dev-top{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;margin:0 6px 18px}
.dev-brand{display:flex;gap:10px;align-items:center}.dev-brand canvas{width:30px;height:30px}.dev-brand b{display:block;font:800 18px var(--ub);letter-spacing:-.03em}.dev-brand span{font:600 10px var(--mono);color:#7a7974;letter-spacing:.1em}
.lcd{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#140b06;border-radius:12px;padding:10px 16px;box-shadow:inset 0 2px 10px rgba(0,0,0,.8),0 1px 0 #fff;color:#ff8a4a;overflow:hidden;position:relative}
.lcd:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);pointer-events:none}
.lcd-l{display:flex;gap:12px;align-items:baseline;min-width:0;overflow:hidden}.lcd-k{font:700 10px var(--mono);color:#8a4a26;letter-spacing:.1em}
.lcd-v{font:900 22px/1 var(--dot);letter-spacing:.06em;white-space:nowrap;text-shadow:0 0 10px rgba(255,120,50,.7)}
.lcd-r{display:flex;gap:10px;align-items:baseline}.lcd.bad .lcd-r .lcd-v{color:#ff4d4d;text-shadow:0 0 10px rgba(255,60,60,.7)}
.dev-leds{display:flex;gap:14px;font:600 10px var(--mono);color:#7a7974;letter-spacing:.08em}.dev-leds span{display:flex;gap:6px;align-items:center}
.led{width:9px;height:9px;border-radius:50%;background:#bdbcb5;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}.led.on{background:#4ade80;box-shadow:0 0 8px #4ade80}.led.or{background:var(--or);box-shadow:0 0 8px var(--or)}
.dev-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:18px}
.deck{background:rgba(255,255,255,.4);border-radius:22px;padding:14px;box-shadow:inset 0 1px 3px rgba(0,0,0,.1);min-width:0}
.banks{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:4px}
.bank{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 10px 6px;border-radius:10px;background:linear-gradient(#fdfdfb,#ebeae5);box-shadow:0 2px 0 #c2c1ba,inset 0 1px 0 #fff;font:700 10.5px var(--mono);letter-spacing:.04em;color:#3b3b38;transition:transform .08s}
.bank i{width:16px;height:4px;border-radius:2px;background:#cfcec7;transition:background .2s,box-shadow .2s}.bank.on{transform:translateY(2px);box-shadow:inset 0 1px 3px rgba(0,0,0,.15);background:#e5e4de}.bank.on i{background:var(--c);box-shadow:0 0 8px var(--c)}
.bank b{background:var(--or);color:#fff;border-radius:6px;padding:0 4px;font-size:9px;margin-left:2px}
.bank-meta{display:flex;gap:10px;align-items:baseline;margin:12px 4px 10px}.bank-meta b{font:700 17px var(--hd);letter-spacing:-.02em}.bank-meta span{font-size:13px;color:#77766f}
.pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:10px}
.pad{position:relative;min-width:0;aspect-ratio:1/.92;border-radius:16px;background:linear-gradient(180deg,#ffffff,#f0efeb);box-shadow:0 4px 0 #c9c8c1,0 6px 12px rgba(0,0,0,.08),inset 0 1px 0 #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px;transition:transform .1s var(--ease),box-shadow .15s;animation:padin .5s var(--ease) both;animation-delay:calc(var(--k,0) * 25ms)}
@keyframes padin{from{opacity:0;transform:translateY(8px) scale(.96)}}
.pad:hover{box-shadow:0 4px 0 #c9c8c1,0 12px 22px rgba(0,0,0,.12),inset 0 1px 0 #fff}.pad:hover .glyph{transform:scale(1.08)}
.pad:active,.pad.on{transform:translateY(3px)}
.pad.on{background:linear-gradient(180deg,#fff,#f6f5f1);box-shadow:0 1px 0 #c9c8c1,0 0 0 2px var(--c),0 0 24px color-mix(in srgb,var(--c) 45%,transparent)}
.glyph,.gi{display:block;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:var(--c)}
.pad .glyph{width:34px;height:34px;transition:transform .2s var(--ease)}
.pad .nm{font:600 11.5px var(--in);color:#3b3b38;text-align:center;line-height:1.15;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.pad .lamp{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:#d6d5ce;box-shadow:inset 0 1px 1px rgba(0,0,0,.2);transition:background .2s,box-shadow .2s}
.pad.on .lamp{background:var(--c);box-shadow:0 0 8px var(--c)}
.pad .pc{position:absolute;top:7px;left:9px;font:700 11px var(--mono);color:#0e0f12}
.desk{background:linear-gradient(180deg,var(--desk2),var(--desk));border-radius:22px;padding:14px 14px 12px;color:#e9e8e3;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 rgba(0,0,0,.25);display:flex;flex-direction:column;min-width:0}
.desk-h{display:flex;justify-content:space-between;font:600 10.5px var(--mono);letter-spacing:.12em;color:#8b8a84;margin:0 4px 10px}
.strips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;flex:1;scrollbar-width:thin;scrollbar-color:#3a3b40 transparent}
.ch{flex:0 0 84px;min-width:0;max-width:84px;background:linear-gradient(180deg,#25262b,#1c1d21);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);animation:padin .45s var(--ease) both}
.ch .cap-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#0f1013;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.ch .cap-ic .gi{width:17px;height:17px}
.ch .read{font:900 19px/1 var(--dot);color:#ff8a4a;text-shadow:0 0 8px rgba(255,110,50,.6);background:#0c0705;border-radius:6px;padding:5px 6px;width:100%;text-align:center;letter-spacing:.04em}
.ch .rail{position:relative;display:flex;gap:7px;height:200px;align-items:stretch;justify-content:center;width:100%;cursor:ns-resize;touch-action:none}
.ch .vu{display:flex;flex-direction:column-reverse;gap:3px;padding:4px 0}.ch .vu i{width:6px;flex:1;border-radius:2px;background:#2b2c31}
.ch .vu i.on{background:#4ade80;box-shadow:0 0 5px #4ade80}.ch .vu i.on.y{background:#facc15;box-shadow:0 0 5px #facc15}.ch .vu i.on.r{background:#f87171;box-shadow:0 0 5px #f87171}
.ch .slot{position:relative;width:12px;border-radius:6px;background:#0a0b0d;box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.ch .ticks{position:absolute;left:-12px;right:-12px;top:0;bottom:0;background:repeating-linear-gradient(0deg,transparent 0 9.5%,rgba(255,255,255,.1) 9.5% 10%);pointer-events:none}
.ch .knob{position:absolute;left:50%;width:44px;height:26px;margin-left:-22px;border-radius:7px;background:linear-gradient(180deg,#fafaf7,#cfcec8);box-shadow:0 3px 0 #8f8e88,0 8px 14px rgba(0,0,0,.55);transform:translateY(50%);transition:bottom .3s var(--ease)}
.ch .knob:after{content:'';position:absolute;left:7px;right:7px;top:12px;height:2px;background:var(--c);border-radius:1px;box-shadow:0 0 6px var(--c)}
.ch.drag .knob{transition:none}
.ch .pm{display:flex;gap:4px}.ch .pm button{width:26px;height:22px;border-radius:6px;background:#2c2d32;color:#cfcec8;font-weight:700;line-height:1;box-shadow:0 2px 0 #111}.ch .pm button:active{transform:translateY(2px);box-shadow:none}
.ch .tape{display:block;width:100%;background:#0f1013;color:#d8d7d1;font:600 10px/1.2 var(--mono);text-align:center;padding:5px 4px;border-radius:5px;border:1px solid #2c2d32;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.03em}
.ch .rm{font:600 9.5px var(--mono);color:#6d6c67;letter-spacing:.08em}.ch .rm:hover{color:#f87171}
.ch.empty{opacity:.5}.ch.empty .rail{cursor:default}.ch.empty .read{color:#3a3b40;text-shadow:none}.ch.empty .tape{color:#5b5a56}
.master{display:flex;justify-content:space-between;gap:12px;align-items:end;border-top:1px solid #2c2d32;padding-top:12px;flex-wrap:wrap}
.presets>span{display:block;font:600 10px var(--mono);letter-spacing:.12em;color:#8b8a84;margin-bottom:6px}#presets{display:flex;gap:5px;flex-wrap:wrap;max-width:330px}
#presets button{background:#2a2b30;color:#d6d5cf;border-radius:7px;padding:5px 9px;font:600 11px var(--in);box-shadow:0 2px 0 #111;transition:background .15s}#presets button:hover{background:#35363c}#presets button:active{transform:translateY(2px);box-shadow:none}
.master-r{display:flex;gap:6px}
.key{display:inline-grid;place-items:center;height:40px;padding:0 14px;border-radius:10px;background:linear-gradient(#3a3b40,#2a2b30);color:#e9e8e3;font:700 11px var(--mono);letter-spacing:.08em;box-shadow:0 3px 0 #0a0b0d,inset 0 1px 0 rgba(255,255,255,.08)}
.key:active{transform:translateY(3px);box-shadow:none}.key.go{background:linear-gradient(var(--or2),var(--or));color:#fff;box-shadow:0 3px 0 #b8380b,0 0 20px var(--glow)}
.dev-foot{display:flex;justify-content:space-between;gap:12px;font:600 10.5px var(--mono);color:#7a7974;letter-spacing:.04em;margin:14px 8px 0;flex-wrap:wrap}
/* marquee of every route */
.marquee{position:relative;z-index:1;overflow:hidden;padding:30px 0;margin:30px 0 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;gap:10px;width:max-content;animation:mq 80s linear infinite}.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-i{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 9px;font:500 14px var(--in);color:var(--tx2);white-space:nowrap}
.mq-i span{width:26px;height:26px;border-radius:50%;background:#1f2026;display:grid;place-items:center}.mq-i .gi{width:14px;height:14px}
/* sections */
.sec-h{margin:10px 0 28px}.sec-h.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.sec-h h2{font:800 clamp(30px,4.4vw,52px)/1.04 var(--hd);letter-spacing:-.032em;margin-top:12px}.sec-h p{color:var(--dim);margin-top:10px;max-width:620px;font-size:16px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 11px var(--mono);letter-spacing:.16em;color:var(--or)}.kicker:before{content:'';width:18px;height:2px;background:var(--or);box-shadow:0 0 8px var(--or)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.rv.in{opacity:1;transform:none}
/* 3 steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:50px 0 30px}
.st{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:24px;padding:22px;position:relative;overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.st:hover{transform:translateY(-4px);border-color:var(--line2)}
.st>b{font:600 12px var(--mono);color:var(--or);letter-spacing:.1em}.st h4{font:700 22px var(--hd);letter-spacing:-.03em;margin:4px 0 8px}.st p{color:var(--dim);font-size:14.5px}
.st-art.a2{gap:40px}.st-art{height:120px;border-radius:16px;background:#0e0f12;border:1px solid var(--line);margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:12px}
.mini-pad{width:46px;height:46px;border-radius:12px;background:linear-gradient(#fff,#e9e8e3);box-shadow:0 4px 0 #9d9c96;position:relative;animation:press 2.4s ease-in-out infinite}
.mini-pad i{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#cfcec7}
.mini-pad:nth-child(1){animation-delay:0s}.mini-pad:nth-child(2){animation-delay:.8s}.mini-pad:nth-child(3){animation-delay:1.6s}
@keyframes press{0%,30%,100%{transform:none;box-shadow:0 4px 0 #9d9c96}10%,20%{transform:translateY(3px);box-shadow:0 1px 0 #9d9c96,0 0 0 2px var(--or),0 0 20px var(--glow)}}
.mini-pad:nth-child(1) i{animation:lamp 2.4s infinite}.mini-pad:nth-child(2) i{animation:lamp 2.4s .8s infinite}.mini-pad:nth-child(3) i{animation:lamp 2.4s 1.6s infinite}
@keyframes lamp{0%,8%{background:#cfcec7}10%,95%{background:var(--or);box-shadow:0 0 6px var(--or)}}
.mini-fd{position:relative;width:10px;height:90px;border-radius:5px;background:#000;box-shadow:inset 0 2px 4px rgba(0,0,0,.9)}
.mini-fd i{position:absolute;left:50%;bottom:20%;width:34px;height:16px;margin-left:-17px;border-radius:5px;background:linear-gradient(#fafaf7,#cfcec8);box-shadow:0 3px 0 #8f8e88;transform:translateY(50%);animation:slide 3.2s ease-in-out infinite}
.mini-fd i:after{content:'';position:absolute;left:6px;right:6px;top:7px;height:2px;background:var(--or)}
.mini-fd.d2 i{animation-delay:-1s}.mini-fd.d3 i{animation-delay:-2.1s}
@keyframes slide{0%,100%{bottom:20%}50%{bottom:78%}}
.st-art.a3{flex-direction:column;gap:10px}
.mini-go{font:800 13px var(--hd);letter-spacing:.08em;color:#fff;background:linear-gradient(var(--or2),var(--or));padding:10px 22px;border-radius:12px;box-shadow:0 4px 0 #b8380b,0 0 24px var(--glow);animation:go 2.8s ease-in-out infinite}
@keyframes go{0%,40%,100%{transform:none}45%,52%{transform:translateY(3px);box-shadow:0 1px 0 #b8380b,0 0 40px rgba(255,90,31,.7)}}
.mini-live{font:700 11px var(--mono);color:var(--green);letter-spacing:.12em;animation:live 2.8s infinite}
@keyframes live{0%,50%{opacity:0;transform:translateY(4px)}58%,95%{opacity:1;transform:none}100%{opacity:0}}
/* signal flow */
.flow{padding:60px 0 40px}
.flow-box{background:radial-gradient(ellipse at 50% 50%,#15161b,#0d0e11);border:1px solid var(--line);border-radius:28px;padding:20px;overflow:hidden}
#flowSvg{width:100%;height:auto;display:block}
.fl-path{fill:none;stroke-linecap:round;opacity:.28}
.fl-node rect{fill:#17181d;stroke:#2c2d34}.fl-node text{fill:#f3f2ee;font:600 15px var(--in)}.fl-node .sub{fill:#8a8984;font:500 12px var(--mono)}.fl-node .pct{font:800 22px var(--hd)}
.fl-src rect{fill:#1a1b21}.fl-mix rect{fill:url(#alu);stroke:#fff;stroke-opacity:.4}
/* build */
.build{padding:60px 0 60px}.build-grid{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start}
.coin-card{display:flex;gap:16px;align-items:center;padding:16px}
.img-drop{width:84px;height:84px;border-radius:20px;background:var(--card2);border:1.5px dashed var(--line2);color:var(--dim);display:grid;place-items:center;font:600 12px var(--mono);cursor:pointer;overflow:hidden;flex:none;transition:border-color .2s}.img-drop:hover{border-color:var(--or)}.img-drop img{width:100%;height:100%;object-fit:cover}
.coin-f{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.coin-f label{font:600 11px var(--mono);letter-spacing:.1em;color:var(--dim);display:flex;flex-direction:column;gap:6px}
.coin-f input,.more textarea,.row2 input,.rt input{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:15px;outline:none;width:100%;transition:border-color .2s,box-shadow .2s}
.coin-f input:focus,.more textarea:focus,.row2 input:focus,.rt input:focus{border-color:var(--or);box-shadow:0 0 0 4px rgba(255,90,31,.12)}
.tick{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px}.tick span{padding-left:12px;color:var(--dim);font-weight:700}.tick input{background:none;border:0}.tick input:focus{box-shadow:none}
.more{margin-top:10px;padding:0 16px}.more summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between}.more summary:after{content:'⌄';color:var(--dim)}
.more textarea{resize:vertical;margin-bottom:10px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.buy-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-bottom:16px}.buy-row span{font-size:13px;color:var(--dim);margin-right:6px}
.buy-row button{border:1px solid var(--line2);background:var(--bg2);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--tx2)}.buy-row button.on{background:var(--tx);color:#0a0b0d;border-color:var(--tx)}
.routes-card{margin-top:10px;padding:16px}.rc-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.rc-h b{font:700 17px var(--hd)}.rc-h span{font:600 12px var(--mono);color:var(--dim)}
.rt{display:grid;grid-template-columns:36px 1fr 1.4fr 56px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.rt .ic{width:36px;height:36px;border-radius:11px;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center}.rt .ic .gi{width:18px;height:18px}
.rt b{display:block;font-size:14px}.rt span{font:600 10.5px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.04em}.rt .p{font:800 17px var(--hd);text-align:right}
.rt input{font-size:13px;padding:9px 11px}.rt input.bad{border-color:var(--red);box-shadow:0 0 0 4px rgba(248,113,113,.12)}.rt .none{font-size:12px;color:var(--dim)}
.rc-empty{border:1.5px dashed var(--line2);border-radius:14px;padding:20px;text-align:center;color:var(--dim);font-size:14px}
.ticket{position:sticky;top:90px;background:linear-gradient(180deg,#17181d,#111215);border:1px solid var(--line);border-radius:26px;padding:20px;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.tk-h{display:flex;justify-content:space-between;font:600 10.5px var(--mono);letter-spacing:.12em;color:var(--dim)}
.tk-coin{display:flex;gap:12px;align-items:center;margin:14px 0}.tk-coin img{width:52px;height:52px;border-radius:16px;background:var(--card2);object-fit:cover}.tk-coin b{display:block;font:800 21px var(--hd);letter-spacing:-.03em}.tk-coin span{font-size:12px;color:var(--dim)}
.tk-mix{font:900 22px/1.2 var(--dot);color:#ff8a4a;background:#140b06;border-radius:12px;padding:12px 14px;text-shadow:0 0 10px rgba(255,120,50,.6);min-height:50px;word-break:break-word;box-shadow:inset 0 2px 10px rgba(0,0,0,.7)}
.meter{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#24252c;margin:12px 0}.meter i{display:block;height:100%;transition:width .4s var(--ease)}
.tk-rows{display:grid;gap:6px;margin-bottom:14px}.tk-rows div{display:flex;justify-content:space-between;font-size:13px;color:var(--tx2)}.tk-rows b{font:700 13px var(--mono);color:var(--tx)}
.launch{width:100%;padding:16px;border-radius:14px;font:800 16px var(--hd);letter-spacing:-.01em;color:#fff;background:linear-gradient(var(--or2),var(--or));box-shadow:0 4px 0 #b8380b,0 0 30px var(--glow);transition:transform .1s,box-shadow .2s;position:relative;overflow:hidden}
.launch:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-100%);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.launch:active{transform:translateY(3px);box-shadow:0 1px 0 #b8380b}.launch:disabled{opacity:.6;cursor:wait}
.steps{display:flex;gap:6px;list-style:none;margin:14px 0 0}.steps li{flex:1;text-align:center;font:600 10.5px var(--mono);color:#6d6c67;border-top:3px solid #2a2b31;padding-top:5px;transition:all .3s}
.steps li.on{border-color:var(--or);color:var(--tx)}.steps li.done{border-color:var(--green);color:var(--green)}
.tk-note{text-align:center;font-size:12px;color:var(--dim);margin-top:8px}.tk-note.err{color:#fca5a5}
/* live, claim, token, how */
.live,.claim,.token,.how{padding:60px 0}
.coins{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.coin{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:8px;text-align:left;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.coin:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.coin .r{display:flex;justify-content:space-between;align-items:start}.coin img{width:52px;height:52px;border-radius:14px;object-fit:cover;background:var(--card2)}
.coin .onair{font:700 10px var(--mono);color:#fff;background:#dc2626;border-radius:6px;padding:3px 7px;letter-spacing:.06em;box-shadow:0 0 12px rgba(220,38,38,.5)}
.coin h4{font:800 20px var(--hd);letter-spacing:-.03em;margin-top:12px}.coin .nm{font-size:12px;color:var(--dim)}
.coin .bars{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--card2)}.coin .bars i{height:100%}
.coin .mx{font:700 12px var(--mono);color:var(--tx2)}
.coin .f{display:flex;justify-content:space-between;font:600 13px var(--mono);border-top:1px solid var(--line);padding-top:8px}.up{color:var(--green)}.down{color:var(--red)}
.coin.slot{border:1.5px dashed var(--line2);background:transparent;align-items:center;justify-content:center;min-height:210px;color:var(--dim);font-size:13px;text-align:center}
.coin.slot b{font:900 30px var(--dot);color:#34353d}.coin.slot:hover{border-color:var(--or);color:var(--tx2)}.coin.slot:hover b{color:var(--or);text-shadow:0 0 12px var(--glow)}
.claim-card{padding:28px;max-width:780px;margin:0 auto}
.claim-icons{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:18px}
.claim-icons button{aspect-ratio:1;border-radius:12px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;transition:border-color .2s,transform .15s}
.claim-icons button:hover{transform:translateY(-2px)}.claim-icons button .gi{width:20px;height:20px}.claim-icons button.on{border-color:var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 40%,transparent)}
.claim-f{display:flex;gap:8px}.claim-f input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);border-radius:999px;padding:12px 18px;font-size:15px;outline:none}.claim-f input:focus{border-color:var(--or)}
.cl-res{margin-top:16px;display:grid;gap:8px}.cl-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.cl-row img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--card2)}.cl-row .mono{font:600 12px var(--mono);color:var(--dim)}.cl-row .sh{margin-left:auto;text-align:right}
.cl-note{color:var(--dim);font-size:13px;margin-top:12px;text-align:center}.cl-req{display:flex;gap:8px;margin-top:12px}.cl-req input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);border-radius:999px;padding:10px 16px;font:13px var(--mono);outline:none}
.tok{display:grid;grid-template-columns:300px 1fr;gap:16px}
.tok-art{background:linear-gradient(160deg,#ff7a45,#e8440c);border-radius:26px;display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:#fff;font:800 16px var(--ub);min-height:330px;box-shadow:0 30px 60px rgba(255,90,31,.2)}.tok-art canvas{width:100%;height:auto}
.tok-r{padding:16px;display:flex;flex-direction:column;gap:12px}
.tok-ca{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tok-ca code{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
.tok-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tok-stats div{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.tok-stats span{font-size:12px;color:var(--dim)}.tok-stats b{display:block;font:700 21px var(--hd);letter-spacing:-.03em}
.tok-chart{flex:1;min-height:300px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;display:grid;place-items:center;color:var(--dim);font-size:13px;overflow:hidden}.tok-chart iframe{width:100%;height:100%;min-height:360px;border:0}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.how-grid .card{padding:20px;transition:transform .3s var(--ease),border-color .3s}.how-grid .card:hover{transform:translateY(-3px);border-color:var(--line2)}
.how-grid span{font:600 11px var(--mono);letter-spacing:.1em;color:var(--or)}.how-grid h4{font:700 18px var(--hd);letter-spacing:-.02em;margin:8px 0 6px}.how-grid p{font-size:14px;color:var(--dim)}
.foot{position:relative;z-index:1;max-width:1320px;margin:40px auto 0;padding:28px 32px 40px;border-top:1px solid var(--line);display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.foot p{color:var(--dim);font-size:13px;flex:1}.foot-r{display:flex;gap:16px;font-weight:600;font-size:13px;color:var(--tx2)}.foot-r a{cursor:pointer}.foot-r a:hover{color:var(--tx)}
/* modal + toast */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.sheet{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:26px;padding:26px;width:min(620px,100%);max-height:88vh;overflow-y:auto;box-shadow:0 40px 90px rgba(0,0,0,.6);animation:padin .35s var(--ease)}
.sheet .x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--card2);color:var(--tx2)}
.sheet h3{font:800 28px var(--hd);letter-spacing:-.03em}.sheet .sub{color:var(--dim);margin:4px 0 14px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.kv div{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:9px 12px}.kv span{font-size:11px;color:var(--dim)}.kv b{display:block;font:700 17px var(--hd)}
.routes{display:grid;gap:6px;margin:12px 0}.route{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.route .ic{width:30px;height:30px;border-radius:9px;background:var(--bg2);display:grid;place-items:center}.route .ic .gi{width:16px;height:16px}
.route b{font-size:14px}.route span{font-size:12px;color:var(--dim)}.route .p{margin-left:auto;font:700 14px var(--mono)}
.sweep{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.sweep h5{font:700 16px var(--hd)}.sweep .row{display:flex;gap:8px;margin-top:8px}
.sweep input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);border-radius:999px;padding:10px 16px;font:14px var(--mono);outline:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,90px);background:var(--tx);color:#0a0b0d;font-weight:600;padding:11px 18px;border-radius:999px;transition:.3s var(--ease);z-index:90;opacity:0}.toast.on{transform:translate(-50%,0);opacity:1}
/* responsive */
@media (max-width:1240px){.dev-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1100px){.top nav{display:none}.build-grid{grid-template-columns:1fr}.ticket{position:static}.tok{grid-template-columns:1fr}.how-grid{grid-template-columns:1fr 1fr}.dev-top{grid-template-columns:1fr}.dev-leds{display:none}.steps3{grid-template-columns:1fr}}
@media (max-width:680px){
  .top{padding:10px 16px;gap:10px}.ca-chip{display:none}main{padding:0 12px}
  .lede{font-size:16px}.hero{padding-top:36px}.hero-ca code{display:none}.hero-stats div{min-width:0;flex:1 1 40%}
  .device{border-radius:24px;padding:16px 12px 12px}.device:before,.device:after{border-radius:24px}.screws{display:none}
  .banks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.pads{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pad .glyph{width:28px;height:28px}
  .ch{flex-basis:76px;max-width:76px}.ch .rail{height:170px}.master{flex-direction:column;align-items:stretch}.master-r .key{flex:1}
  .lcd{padding:9px 12px}.lcd-v{font-size:16px}.lcd-k{display:none}
  .coin-f{grid-template-columns:1fr}.row2{grid-template-columns:1fr}.rt{grid-template-columns:36px 1fr 52px}.rt .tg{grid-column:1/-1}
  .claim-icons{grid-template-columns:repeat(6,1fr)}.claim-card{padding:18px}.claim-f,.cl-req{flex-direction:column}.tok-stats{grid-template-columns:1fr 1fr}.how-grid{grid-template-columns:1fr}.kv{grid-template-columns:1fr 1fr}
  .flow-box{padding:8px;border-radius:20px}
}
@media (max-width:400px){.top .btn{padding:8px 12px;font-size:13px}.logo{font-size:20px;gap:8px}.logo canvas{width:26px;height:26px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===== reveal ===== */
html.intro-on,html.intro-on body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:200;background:#0a0b0d;display:flex;align-items:center;justify-content:center;gap:22px;transition:opacity .55s cubic-bezier(.6,0,.2,1),transform .7s cubic-bezier(.6,0,.2,1)}
.intro:before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 50%,rgba(255,90,31,.14),transparent 70%);opacity:0;animation:rvglow 1.1s .25s ease-out forwards}
@keyframes rvglow{to{opacity:1}}
.intro.out{opacity:0;transform:translateY(-2%);pointer-events:none}
.rv-mark{position:relative;display:flex;gap:14px;height:84px}
.rv-mark .trk{position:relative;width:13px;height:84px;border-radius:7px;background:#f3f2ee;transform:scaleY(0);transform-origin:50% 100%;animation:rvtrk .45s cubic-bezier(.2,.8,.2,1) forwards}
.rv-mark .trk:nth-child(2){animation-delay:.06s}.rv-mark .trk:nth-child(3){animation-delay:.12s}
@keyframes rvtrk{to{transform:scaleY(1)}}
.rv-mark .cap{position:absolute;left:50%;width:36px;height:17px;margin-left:-18px;border-radius:5px;background:#ff5a1f;box-shadow:0 0 18px rgba(255,90,31,.55);bottom:-6px;opacity:0;animation:rvcap .55s cubic-bezier(.2,1.25,.3,1) forwards}
.rv-mark .cap:after{content:'';position:absolute;left:7px;right:7px;top:7px;height:3px;border-radius:2px;background:rgba(0,0,0,.35)}
.rv-mark .c1{--to:62px;animation-delay:.35s}.rv-mark .c2{--to:12px;animation-delay:.45s}.rv-mark .c3{--to:62px;animation-delay:.55s}
@keyframes rvcap{0%{opacity:0;bottom:-6px}20%{opacity:1}100%{opacity:1;bottom:var(--to)}}
.rv-word{font:800 52px/1 var(--ub);letter-spacing:-.03em;color:#f3f2ee;opacity:0;transform:translateX(-10px);animation:rvword .5s .62s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rvword{to{opacity:1;transform:none}}
html.intro-on main,html.intro-on .top{opacity:0}
main,.top{transition:opacity .6s ease}
@media (max-width:680px){.rv-mark{transform:scale(.8)}.rv-word{font-size:40px}}