:root{
--bg:#050306; --deep:#170625; --violet:#A020F0; --lav:#C45AFF; --soft:#D995FF; --mute:#98909F;
--ink:#ece3f5; --ink2:#c9bfd6; --faint:#4b3f58;
--line:rgba(196,90,255,.16); --line2:rgba(196,90,255,.32); --glass:rgba(23,6,37,.55); --glass2:rgba(23,6,37,.82); --well:rgba(5,3,6,.7);
--up:#5fdc95; --down:#ff5f7e; --warn:#f1b65a;
--f-ui:"Chakra Petch","IBM Plex Mono",system-ui,sans-serif;
--f-data:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
--f-term:"VT323","IBM Plex Mono",monospace;
--f-pix:"Silkscreen","VT323",monospace;
color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;
background-image:radial-gradient(1200px 600px at 50% -10%,rgba(160,32,240,.10),transparent 60%),radial-gradient(900px 500px at 100% 100%,rgba(23,6,37,.9),transparent 70%)}
a{color:var(--soft);text-decoration:none}
a:hover{color:#fff}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--lav);outline-offset:2px}
::selection{background:rgba(160,32,240,.55);color:#fff}
code,.mono{font-family:var(--f-data);font-size:.86em}
.mute{color:var(--mute)}
.up{color:var(--up)} .down{color:var(--down)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cur{display:inline-block;width:.55em;height:1em;background:currentColor;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
#light{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;z-index:0;
background:radial-gradient(circle,rgba(160,32,240,.09),transparent 62%);transform:translate(-999px,-999px);transition:opacity .4s}
#crt{position:fixed;inset:0;pointer-events:none;z-index:80;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
#app.arrive{animation:arrive 1.1s cubic-bezier(.2,.75,.2,1) both}
@keyframes arrive{0%{transform:scale(1.05);filter:blur(10px) brightness(1.7) saturate(1.4)}60%{filter:blur(1px) brightness(1.1)}100%{transform:none;filter:none}}
.wash{position:fixed;inset:0;z-index:99;pointer-events:none;background:radial-gradient(ellipse at center,#4a1890,#1d0745 70%,#0b021c);transition:opacity 1s ease}
.wash::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(5,3,6,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--bg)}
.topin{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:14px;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img.pc{width:38px;height:38px;object-fit:contain}
.brand img.wm{height:26px;width:auto;display:block;filter:brightness(1.25) saturate(1.1)}
.tspace{flex:1}
.ubar{display:flex;align-items:center;gap:6px}
.ub{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;background:#060308;border:1px solid rgba(196,90,255,.28);color:var(--ink2);cursor:pointer;
font:500 11px/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:border-color .35s,box-shadow .35s,color .25s,text-shadow .25s,background .35s}
.ub:hover,.ub:focus-visible{border-color:var(--lav);color:#fff;text-shadow:0 0 8px rgba(217,149,255,.6);box-shadow:0 0 14px rgba(160,32,240,.35),inset 0 0 12px rgba(160,32,240,.12);background:#0c0512;outline:none}
.ub:active{transform:translateY(1px)}
.ub svg{width:13px;height:13px;flex:none;fill:currentColor}
.ub .st{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--faint)}
.ub.on .st{background:var(--up);box-shadow:0 0 6px var(--up)}
.ub.unset{color:var(--faint)}
.wallet{height:34px;font:600 12px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;padding:0 14px;border:1px solid var(--lav);background:linear-gradient(180deg,rgba(160,32,240,.34),rgba(160,32,240,.14));color:#fff;cursor:pointer;
box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 0 16px rgba(160,32,240,.25);transition:box-shadow .3s,transform .1s;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.wallet:hover{box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 0 26px rgba(196,90,255,.55)}
.wallet:active{transform:translateY(1px)}
.wallet.on{background:var(--well);border-color:var(--line2);font:500 12px/1 var(--f-data);letter-spacing:0;text-transform:none;color:var(--ink2);box-shadow:none}
.wallet.on::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up)}
.wallet .bal{color:var(--soft)}
.ub.menu{display:none}
[hidden]{display:none!important}
@media (max-width:520px){ #t-sol,#t-clock{display:none!important} .task .tasks button{max-width:96px} }
.navrow{border-top:1px solid rgba(196,90,255,.08)}
.navin{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:10px;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nav{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:13px 12px;white-space:nowrap;transition:color .3s,text-shadow .3s}
.nav a:hover{color:var(--soft);text-shadow:0 0 12px rgba(196,90,255,.7)}
.nav a.on{color:#fff}
.nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--lav);box-shadow:0 0 10px var(--lav)}
.sysdot{flex:none;display:flex;align-items:center;gap:7px;font:11.5px var(--f-data);color:var(--mute);background:none;border:1px solid transparent;padding:6px 8px;cursor:pointer}
.sysdot i{width:7px;height:7px;border-radius:50%;background:var(--mute)}
.sysdot.ok i{background:var(--up);box-shadow:0 0 8px var(--up);animation:pulse 2.4s infinite}
.sysdot.warn i{background:var(--warn)} .sysdot.bad i{background:var(--down)}
.sysdot:hover{border-color:var(--line2);color:var(--ink2)}
.sysdot .wl{color:var(--faint)}
@media (max-width:1100px){ .ub .lbl-l{display:none} }
@media (max-width:900px){
.ubar .ub:not(.menu){display:none} .ub.menu{display:inline-flex}
.brand img.wm{height:20px} .sysdot span{display:none}
}
@media (max-width:480px){ .brand img.wm{display:none} .wallet{padding:0 11px} .wallet .bal{display:none} }
#sweep{position:fixed;left:0;right:0;top:0;height:120px;z-index:25;pointer-events:none;opacity:0;
background:linear-gradient(180deg,transparent,rgba(196,90,255,.10) 45%,rgba(217,149,255,.35) 50%,rgba(196,90,255,.10) 55%,transparent)}
#sweep.go{animation:sweep .55s cubic-bezier(.3,.6,.3,1)}
@keyframes sweep{0%{opacity:1;transform:translateY(60px)}100%{opacity:0;transform:translateY(100vh)}}
main{flex:1;width:100%;max-width:1320px;margin:0 auto;padding-block:26px 90px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.view{animation:vin .45s ease both}
@keyframes vin{from{opacity:0;transform:translateY(6px);filter:blur(2px) hue-rotate(-12deg)}}
.win{position:relative;background:var(--glass);border:1px solid var(--line);min-width:0;
box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -24px rgba(0,0,0,.9);transition:border-color .3s}
.win::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity .3s;
background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(196,90,255,.22),transparent 60%);
-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.win:hover{border-color:var(--line2)}
.win:hover::before{opacity:1}
.wt{display:flex;align-items:center;gap:10px;padding:0 6px 0 12px;height:36px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(23,6,37,.95),rgba(15,4,24,.9))}
.wt .dots{display:flex;gap:5px;flex:none}
.wt .dots i{width:8px;height:8px;border:1px solid var(--line2);background:rgba(160,32,240,.12)}
.wt .dots i:first-child{background:var(--violet);border-color:var(--lav)}
.wt b{font:20px/1 var(--f-term);letter-spacing:.06em;color:var(--soft);font-weight:400;flex:none;text-transform:uppercase}
.wt .meta{flex:1;min-width:0;font:11.5px var(--f-data);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.wt .tog{flex:none;width:26px;height:24px;background:none;border:1px solid transparent;color:var(--mute);cursor:pointer;font:16px/1 var(--f-data)}
.wt .tog:hover{border-color:var(--line2);color:var(--soft)}
.win.min .wb{display:none}
.wb{padding:14px;min-width:0}
.wb.flush{padding:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 13px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;padding:12px 18px;border:1px solid var(--line2);background:var(--well);color:var(--ink);cursor:pointer;transition:all .2s}
.btn:hover{border-color:var(--lav);color:#fff;box-shadow:0 0 18px rgba(160,32,240,.25)}
.btn:active{transform:translateY(1px)}
.btn.pri{border-color:var(--lav);background:linear-gradient(180deg,#a92cf3,#7a12c4);color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 22px rgba(160,32,240,.35)}
.btn.pri:hover{box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 32px rgba(196,90,255,.6)}
.btn:disabled{opacity:.4;cursor:default;box-shadow:none;transform:none}
.btn.sm{padding:6px 10px;font-size:11px;letter-spacing:.08em}
.btn.ghost{border-color:transparent;background:none;color:var(--mute)}
.btn.ghost:hover{color:var(--soft);border-color:var(--line)}
.note{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);background:var(--well);padding:10px 12px;font:12.5px/1.5 var(--f-data);color:var(--ink2)}
.note.warn{border-color:rgba(241,182,90,.35);color:#f4d9ab}
.note.bad{border-color:rgba(255,95,126,.35);color:#ffc1cd}
.note.sample{border-color:rgba(196,90,255,.35);color:var(--soft)}
.note b{color:#fff;font-weight:600}
.note .g{flex:1;min-width:0}
.tag{display:inline-block;font:10px/1 var(--f-pix);letter-spacing:.08em;padding:3px 5px;border:1px solid var(--line2);color:var(--soft);vertical-align:1px}
.tag.s{border-color:rgba(196,90,255,.45);background:rgba(160,32,240,.15)}
.hero{position:relative;overflow:hidden;border:1px solid var(--line);background:#000;margin-bottom:22px}
.hero canvas.bgterm{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero .art{position:relative;display:block;width:100%;aspect-ratio:3/1;max-height:440px;overflow:hidden}
.hero .art img{position:absolute;left:50%;top:50%;width:min(100%,1320px);height:auto;transform:translate(-50%,-50%) translate(var(--px,0),var(--py,0));
mix-blend-mode:screen;-webkit-mask:radial-gradient(ellipse 62% 90% at 50% 50%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 62% 90% at 50% 50%,#000 55%,transparent 100%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hero h1{margin:0}
.herocopy{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:end;padding:6px 28px 28px;border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(23,6,37,.6),rgba(5,3,6,.9))}
.tagline{margin:18px 0 6px;font:700 clamp(28px,4.4vw,52px)/1.02 var(--f-ui);letter-spacing:-.01em;text-transform:uppercase;color:#fff;text-wrap:balance}
.tagline span{color:var(--lav);text-shadow:0 0 24px rgba(160,32,240,.55)}
.herop{margin:0;max-width:52ch;color:var(--ink2);font-size:16px}
.heroact{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.heroact .btn{padding:16px 22px;font-size:14px}
.prompt{font:18px/1.2 var(--f-term);color:var(--mute);margin-top:12px}
.prompt b{color:var(--soft);font-weight:400}
@media (max-width:820px){ .herocopy{grid-template-columns:1fr;padding:6px 18px 22px} .heroact{justify-content:flex-start} .hero .art{aspect-ratio:2/1} .hero .art img{width:150%} }
.hgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
.hcol{display:grid;gap:16px;align-content:start;min-width:0}
@media (max-width:980px){ .hgrid{grid-template-columns:1fr} }
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:16px}
.stats div{background:rgba(10,3,16,.9);padding:12px 14px;min-width:0}
.stats small{display:block;font:11px var(--f-data);color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.stats b{display:block;font:500 20px/1.3 var(--f-data);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}