:root{
  --bg:#050806;
  --bg2:#08100b;
  --panel:#0b120e;
  --line:#1a2a20;
  --line2:#24392b;
  --text:#f2f5f1;
  --dim:#93a598;
  --mute:#5f7266;
  --accent:#3dff72;
  --accent-d:#1d8f3e;
  --glow:0 0 18px rgba(61,255,114,.35);
  --r:14px;
  --display:"Pixelify Sans",ui-monospace,monospace;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 16px/1.55 var(--body);overflow-x:hidden;
  background-image:radial-gradient(900px 520px at 75% 0%,rgba(61,255,114,.08),transparent 70%),
  radial-gradient(700px 500px at 0% 60%,rgba(61,255,114,.04),transparent 70%);}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
b{font-weight:600}
.g{color:var(--accent)}
.muted{color:var(--mute)}
.mono{font-family:var(--mono)}
.small{font-size:13px;color:var(--dim)}
.label{font:500 11.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* CRT scanlines over everything */
.crt{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}

/* NAV */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:24px;padding:12px clamp(16px,4vw,40px);
  background:rgba(5,8,6,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:700 21px var(--display);letter-spacing:.01em}
.brand-lock{width:16px;height:18px;position:relative;flex:none}
.brand-lock::before{content:"";position:absolute;left:3px;top:0;width:10px;height:9px;border:3px solid var(--accent);border-bottom:0;border-radius:6px 6px 0 0}
.brand-lock::after{content:"";position:absolute;left:0;bottom:0;width:16px;height:10px;background:var(--accent);border-radius:2px;box-shadow:var(--glow)}
.cursor{color:var(--accent);animation:blink 1.1s steps(1) infinite;margin-left:-6px}
@keyframes blink{50%{opacity:0}}
.links{display:flex;gap:22px;margin-left:12px}
.links a{text-decoration:none;color:var(--dim);font-size:14.5px;transition:color .2s}
.links a:hover{color:var(--text)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.status-pill{display:flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--dim);border:1px solid var(--line2);border-radius:99px;padding:6px 12px;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:var(--glow);display:inline-block;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid transparent;
  padding:12px 20px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .15s,background .2s,border-color .2s,box-shadow .2s,opacity .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#03130a;box-shadow:0 0 0 rgba(61,255,114,0)}
.btn.primary:hover{box-shadow:0 0 28px rgba(61,255,114,.4);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.sm{padding:7px 14px;font-size:13.5px}
.btn.wide{flex:1}
.btn:disabled,.btn.soon{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* HERO */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(22px,4vw,48px) clamp(16px,4vw,40px) 26px;max-width:1360px;margin:0 auto}
.hero-main{container-type:inline-size;min-width:0;animation:rise .7s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.eyebrow{font:500 12.5px var(--mono);color:var(--dim);letter-spacing:.06em;margin-bottom:14px}
h1{font:700 clamp(2.2rem,13cqi,7rem)/.92 var(--display);letter-spacing:-.01em;margin-bottom:18px}
h1 span{display:block}
h1 .g{text-shadow:0 0 30px rgba(61,255,114,.35)}
.lede{font-size:clamp(16px,1.35vw,18.5px);color:#cfd9d1;max-width:60ch;margin-bottom:22px}
.lede b{color:var(--text)}

.console{background:linear-gradient(180deg,#0c150f,#08100b);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;
  box-shadow:0 0 0 1px rgba(61,255,114,.06),0 20px 60px rgba(0,0,0,.5)}
.console-top{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font:500 12px var(--mono);color:var(--dim)}
.lights{display:flex;gap:5px}
.lights i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.lights i:first-child{background:var(--accent);box-shadow:var(--glow)}
.console-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.console-parser{color:var(--accent);white-space:nowrap}
.console-row{display:flex;align-items:center;gap:10px;padding:14px}
.prompt{font:700 24px var(--display);color:var(--accent);text-shadow:var(--glow)}
#cmd{flex:1;min-width:0;background:transparent;border:0;outline:0;font:500 clamp(16px,2vw,19px) var(--mono);color:var(--text);caret-color:var(--accent)}
#cmd::placeholder{color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px}
.chip{background:rgba(61,255,114,.05);border:1px solid var(--line2);border-radius:99px;padding:5px 12px;font:12.5px var(--mono);color:var(--dim);cursor:pointer;transition:.2s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.result-line{border-top:1px solid var(--line);padding:11px 14px;font:13.5px/1.45 var(--mono);color:var(--dim);min-height:44px;overflow-wrap:anywhere}
.result-line b{color:var(--accent);font-weight:600}
.result-line a{color:var(--accent)}

.meter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.meter div{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 14px;min-width:0}
.meter span{display:block;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meter b{font:700 22px var(--display);display:block;margin-top:2px}

.hero-art{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.hero-art .glow{position:absolute;inset:8% 6% 14%;background:radial-gradient(closest-side,rgba(61,255,114,.22),transparent);filter:blur(10px);pointer-events:none}
.hero-art img{position:relative;width:min(100%,520px)}
.art-tip{font:12px var(--mono);color:var(--mute);margin-top:4px;position:relative}

/* TICKER */
.ticker{display:flex;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#070c09;overflow:hidden}
.ticker-label{flex:none;display:flex;align-items:center;gap:8px;padding:11px 16px;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-right:1px solid var(--line);background:#070c09;z-index:1}
.ticker-window{flex:1;overflow:hidden;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:flex;width:max-content;gap:0;animation:scroll 70s linear infinite}
.ticker-track.still{animation:none}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tk{display:flex;align-items:center;gap:8px;padding:10px 18px;font:13px var(--mono);white-space:nowrap;border:0;background:none;cursor:pointer;color:var(--text)}
.tk img{width:18px;height:18px;border-radius:50%;object-fit:cover;background:var(--line)}
.tk .mc{color:var(--dim)}
.up{color:var(--accent)}
.down{color:#ff6b6b}
.tk:hover b{color:var(--accent)}

/* SECTIONS */
section{max-width:1360px;margin:0 auto;padding:clamp(48px,7vw,90px) clamp(16px,4vw,40px) 0}
.sec-head{margin-bottom:26px}
h2{font:700 clamp(1.7rem,4vw,2.9rem)/1.05 var(--display);margin-top:10px;max-width:22ch}

/* BUILDER GRID */
.builder{padding-top:clamp(36px,5vw,60px)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0;display:flex;flex-direction:column;gap:12px;transition:border-color .25s}
.panel:hover{border-color:var(--line2)}
.panel header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font:500 11px var(--mono);color:var(--dim);border:1px solid var(--line2);border-radius:99px;padding:3px 10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tag.g{color:var(--accent);border-color:rgba(61,255,114,.35)}
.p-intent{grid-column:span 3}
.p-match{grid-column:span 4}
.p-swap{grid-column:span 5;border-color:rgba(61,255,114,.28);box-shadow:0 0 40px rgba(61,255,114,.05)}
.p-model{grid-column:span 4}
.p-net{grid-column:span 5}
.p-trades{grid-column:span 3}

.json{font:13px/1.6 var(--mono);background:#060a07;border:1px solid var(--line);border-radius:10px;padding:12px 14px;white-space:pre-wrap;overflow-wrap:anywhere;flex:1;color:var(--dim)}
.json .k{color:#9fd8ff}
.json .s{color:var(--accent)}
.json .n{color:#ffd479}

.matches{list-style:none;display:flex;flex-direction:column;gap:6px;flex:1}
.matches li{min-width:0}
.match{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;background:#070c09;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;transition:.2s}
.match:hover{border-color:var(--line2)}
.match.on{border-color:var(--accent);background:rgba(61,255,114,.06)}
.match img,.match .ph{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--line);display:block}
.match .nm{min-width:0}
.match .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.match .nm span{display:block;font:11.5px var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match .st{text-align:right;font:12px var(--mono);color:var(--dim);white-space:nowrap}
.match .st b{display:block;color:var(--text);font-weight:500}

.swap{display:flex;flex-direction:column;gap:8px}
.leg{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:#070c09;border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.leg span{font-size:13px;color:var(--dim);white-space:nowrap}
.leg b{font:700 clamp(18px,2.2vw,24px) var(--display);text-align:right;overflow-wrap:anywhere;min-width:0}
.arrow{text-align:center;color:var(--accent);font-size:16px;line-height:1;margin:-2px 0}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:4px}
.facts div{min-width:0}
.facts dt{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.facts dd{font:13px var(--mono);overflow-wrap:anywhere}
.swap-actions{display:flex;gap:10px;flex-wrap:wrap}

.model-row{display:flex;gap:10px;flex-wrap:wrap}
select{flex:1;min-width:0;background:#070c09;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font:13px var(--mono)}
.bar{height:6px;background:#070c09;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:var(--glow);transition:width .3s}

.netlog,.trades{list-style:none;display:flex;flex-direction:column;gap:6px;flex:1;max-height:260px;overflow:auto}
.netlog li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;font:12px/1.4 var(--mono);border-bottom:1px dashed var(--line);padding-bottom:6px}
.netlog .t{color:var(--mute)}
.netlog .w{min-width:0;overflow-wrap:anywhere}
.netlog .w b{color:var(--text);font-weight:500}
.netlog .w span{color:var(--dim)}
.netlog .ok{color:var(--accent)}
.netlog .bad{color:#ff6b6b}
.trades li{font:12.5px/1.45 var(--mono);border:1px solid var(--line);border-radius:10px;padding:9px 11px;overflow-wrap:anywhere}
.trades li a{color:var(--accent)}
.trades .empty{border-style:dashed;color:var(--dim)}

/* HOW */
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative}
.node{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.node em{font:700 26px var(--display);font-style:normal;color:var(--mute)}
.node b{font-size:15px}
.node span{font-size:13px;color:var(--dim);flex:1}
.node i{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;padding:3px 8px;border-radius:99px;align-self:flex-start;border:1px solid var(--line2);color:var(--dim)}
.node.local{border-color:rgba(61,255,114,.35);background:linear-gradient(180deg,rgba(61,255,114,.07),var(--panel))}
.node.local em,.node.local i{color:var(--accent)}
.node.local i{border-color:rgba(61,255,114,.4)}
.node:not(:last-child)::after{content:"";position:absolute;top:50%;right:-12px;width:12px;height:2px;background:var(--line2)}
.node.active{border-color:var(--accent);box-shadow:0 0 24px rgba(61,255,114,.18)}
.node.active em{color:var(--accent)}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.cmp{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--panel)}
.cmp ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.cmp.bad li{padding-left:22px;position:relative;color:#d7ddd8}
.cmp.bad li::before{content:"×";position:absolute;left:0;color:#ff6b6b;font-weight:700}
.cmp.bad .label{color:#ff8a8a}
.cmp.good{border-color:rgba(61,255,114,.35)}
.cmp .big{font:700 clamp(2rem,5vw,3.2rem)/1 var(--display);color:var(--accent);margin:12px 0 10px;text-shadow:0 0 30px rgba(61,255,114,.3)}
.cmp.good p:last-child{color:#cfd9d1}

/* PHRASEBOOK */
.phrasebook{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.phrasebook button{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:.2s;min-width:0}
.phrasebook button:hover{border-color:var(--accent);transform:translateY(-2px)}
.phrasebook code{font:500 15px var(--mono);color:var(--text);overflow-wrap:anywhere}
.phrasebook code::before{content:"> ";color:var(--accent)}
.phrasebook span{font-size:13px;color:var(--dim)}

/* STORY */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.story-text p:not(.label){color:#cfd9d1;margin-top:14px;max-width:52ch}
.story-text .punch{font:700 22px/1.25 var(--display);color:var(--accent)!important}
.story-term{background:#060a07;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;min-width:0}
.term-top{display:flex;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);font:12px var(--mono);color:var(--dim)}
.story-term pre{padding:18px;font:13px/1.75 var(--mono);color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere}
.story-term pre b{color:var(--accent)}

/* TOKEN */
.token{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
.token-art{display:flex;justify-content:center}
.token-art img{width:min(100%,420px)}
.token-info{container-type:inline-size;min-width:0}
.ticker-name{font-size:clamp(2.2rem,12cqi,5.4rem);max-width:none;text-shadow:0 0 30px rgba(61,255,114,.25);margin-bottom:12px}
.ca-box{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);background:var(--panel);border-radius:12px;padding:10px 12px;margin:6px 0 16px;min-width:0}
.ca-label{font:700 13px var(--mono);color:#03130a;background:var(--accent);border-radius:6px;padding:3px 8px}
#ca{flex:1;min-width:0;font:14px var(--mono);overflow-wrap:anywhere;color:var(--dim)}
.token-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1360px;margin:clamp(56px,8vw,96px) auto 0;padding:22px clamp(16px,4vw,40px) 30px;border-top:1px solid var(--line);font:12px var(--mono);color:var(--mute)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#0d1a11;border:1px solid var(--accent);color:var(--text);padding:10px 16px;border-radius:10px;font:13px var(--mono);z-index:60;transition:.3s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* reveal: only hides when JS is running, always shown by 1.5 s */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

/* RESPONSIVE */
@media (max-width:1100px){
  .p-intent{grid-column:span 5}.p-match{grid-column:span 7}
  .p-swap{grid-column:span 7}.p-model{grid-column:span 5}
  .p-net{grid-column:span 7}.p-trades{grid-column:span 5}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .node:nth-child(3)::after{display:none}
  .phrasebook{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .links{display:none}
  .hero{grid-template-columns:1fr}
  .hero-art{order:-1;margin-bottom:-10px}
  .hero-art img{width:min(62vw,300px)}
  .art-tip{display:none}
  .grid{grid-template-columns:1fr}
  .grid>.panel{grid-column:auto}
  .story,.token,.compare{grid-template-columns:1fr}
  .token-art img{width:min(70vw,320px)}
}
@media (max-width:560px){
  .nav{gap:10px}
  .status-pill{display:none}
  .meter{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .meter div{padding:8px 10px}
  .meter span{font-size:9px;white-space:normal;line-height:1.25}
  .meter b{font-size:18px}
  .console-row{flex-wrap:wrap}
  #cmd{flex-basis:calc(100% - 40px)}
  #runBtn{width:100%}
  .console-parser{display:none}
  .flow{grid-template-columns:1fr 1fr}
  .node::after{display:none}
  .phrasebook{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .ticker-label{padding:11px 10px;font-size:10px}
  .ca-box{flex-wrap:wrap}
  #ca{flex-basis:100%;order:3}
  .token-actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .ticker-window{overflow-x:auto}
}