/* ============================================================
   AGENT 404 // system stylesheet
   palette: green · black · white
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  --bg:#050705;
  --bg-1:#080c08;
  --bg-2:#0b110b;
  --bg-3:#0e150e;
  --line:#173a23;
  --line-soft:#102818;
  --green:#3dff97;
  --green-2:#23c673;
  --green-dim:#1c6b43;
  --white:#eafff2;
  --muted:#83a892;
  --muted-2:#577a64;
  --glow:0 0 18px rgba(61,255,151,.35);
  --glow-soft:0 0 8px rgba(61,255,151,.25);
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.55;
  letter-spacing:.2px;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--green);color:#021006}

/* ---------- background layers ---------- */
#rain{position:fixed;inset:0;z-index:0;opacity:.16;pointer-events:none}
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(61,255,151,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,255,151,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 75%);
}
.bg-scan{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:multiply;opacity:.5;
}
.bg-vignette{
  position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,transparent 55%,rgba(0,0,0,.65) 100%);
  animation:flicker 7s infinite steps(60);
}
@keyframes flicker{0%,100%{opacity:.85}50%{opacity:.95}97%{opacity:.78}}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
main.screen{position:relative;z-index:2;padding:120px 0 80px;min-height:100vh}

/* ---------- top status bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(5,7,5,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:56px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:1px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:var(--glow);animation:blink 1.6s infinite}
.brand b{color:var(--green)}
.statline{display:flex;gap:18px;margin-left:auto;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.statline .k{color:var(--green-2)}
.statline span.live::before{content:"● ";color:var(--green);animation:blink 1.6s infinite}

/* nav */
.nav{position:fixed;top:56px;left:0;right:0;z-index:39;border-bottom:1px solid var(--line-soft);background:rgba(5,7,5,.7);backdrop-filter:blur(6px)}
.nav .wrap{display:flex;align-items:center;gap:4px;height:46px;overflow-x:auto}
.nav a{
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  padding:8px 14px;border:1px solid transparent;border-radius:4px;white-space:nowrap;transition:.15s;
}
.nav a:hover{color:var(--white);border-color:var(--line)}
.nav a.active{color:var(--green);border-color:var(--green-dim);box-shadow:var(--glow-soft)}
.nav .navtoggle{display:none}

/* ---------- type ---------- */
h1,h2,h3{font-weight:800;letter-spacing:.5px;line-height:1.05}
.kicker{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--green-2)}
.kicker::before{content:"// "}
h1{font-size:clamp(40px,9vw,92px);text-transform:uppercase}
h2{font-size:clamp(24px,4vw,40px);text-transform:uppercase;margin-bottom:6px}
h3{font-size:18px;text-transform:uppercase;color:var(--green)}
.lead{color:var(--muted);font-size:15px;max-width:54ch}
.mono-sm{font-size:12px;color:var(--muted-2);letter-spacing:1px}
.gx{color:var(--green)}
.wt{color:var(--white)}

/* glitch text */
[data-glitch]{position:relative;display:inline-block}
[data-glitch]::before,[data-glitch]::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;clip-path:inset(0 0 0 0)
}
[data-glitch]::before{color:var(--green);transform:translate(-2px,0);opacity:.0}
[data-glitch]::after{color:var(--white);transform:translate(2px,0);opacity:.0}
[data-glitch].glx::before{animation:gl1 .5s steps(2) 1;opacity:.9}
[data-glitch].glx::after{animation:gl2 .5s steps(2) 1;opacity:.9}
@keyframes gl1{0%{clip-path:inset(10% 0 80% 0);transform:translate(-3px,0)}50%{clip-path:inset(60% 0 10% 0);transform:translate(3px,0)}100%{transform:translate(0)}}
@keyframes gl2{0%{clip-path:inset(70% 0 5% 0);transform:translate(3px,0)}50%{clip-path:inset(20% 0 50% 0);transform:translate(-3px,0)}100%{transform:translate(0)}}

/* cursor */
.cur::after{content:"_";color:var(--green);animation:blink 1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--green-dim);color:var(--green);background:transparent;border-radius:5px;
  position:relative;overflow:hidden;transition:.18s
}
.btn::before{content:"";position:absolute;inset:0;background:var(--green);transform:translateX(-101%);transition:.25s;z-index:-1}
.btn:hover{color:#021006;border-color:var(--green);box-shadow:var(--glow)}
.btn:hover::before{transform:translateX(0)}
.btn.solid{background:var(--green);color:#021006;border-color:var(--green)}
.btn.solid:hover{box-shadow:var(--glow)}
.btn.ghost{border-color:var(--line);color:var(--muted)}
.btn.ghost:hover{color:var(--green);border-color:var(--green-dim)}
.btn.ghost::before{display:none}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- panels / cards ---------- */
.panel{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);border-radius:10px;padding:24px;position:relative
}
.panel::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--green);box-shadow:var(--glow)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.tag{display:inline-block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--green-2);border:1px solid var(--line);border-radius:3px;padding:3px 8px}

/* key/value rows */
.kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed var(--line-soft);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{color:var(--green)}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;gap:18px;padding-top:18px}
.hero h1{margin:4px 0}
.hero .sub{color:var(--muted);font-size:16px;max-width:52ch}
.errline{font-size:13px;color:var(--muted-2);letter-spacing:1px}
.errline b{color:var(--green)}
.heroface{position:absolute;right:0;top:90px;width:min(40vw,420px);opacity:.9;z-index:1;filter:drop-shadow(0 0 40px rgba(61,255,151,.25))}

/* live ticker chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chip{border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:var(--bg-1);min-width:130px}
.chip .lab{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2)}
.chip .num{font-size:20px;font-weight:800;color:var(--green)}

/* ---------- agent tiles ---------- */
.agentgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.atile{
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-1);position:relative;transition:.2s
}
.atile:hover{border-color:var(--green-dim);transform:translateY(-3px);box-shadow:var(--glow-soft)}
.atile .face{aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#0f1a12,#050805);display:flex;align-items:center;justify-content:center;position:relative}
.atile .face svg{width:72%}
.atile .meta{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:11px}
.atile .id{color:var(--white);letter-spacing:1px}
.atile.null{border-color:#2f6b48}
.atile.null .face{animation:nullflick 2.4s infinite}
@keyframes nullflick{0%,92%,100%{filter:none}94%{filter:hue-rotate(60deg) contrast(1.6)}96%{filter:invert(.1) saturate(2)}}
.rank{font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid var(--line)}
.rank.script{color:var(--muted)}
.rank.daemon{color:#8fe6b2;border-color:#1f5e3c}
.rank.operator{color:var(--green);border-color:var(--green-dim)}
.rank.root{color:#021006;background:var(--green);border-color:var(--green)}
.rank.null{color:var(--white);border-color:#3a7a52;box-shadow:var(--glow-soft)}

/* rarity ladder */
.ladder{display:flex;flex-direction:column;gap:8px}
.ladder .row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:7px;padding:12px 16px;background:var(--bg-1)}
.ladder .bar{height:8px;border-radius:4px;background:var(--green);box-shadow:var(--glow-soft)}
.ladder .ct{margin-left:auto;color:var(--green);font-weight:700}

/* ---------- terminal / chat ---------- */
.term{border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden;box-shadow:var(--glow-soft)}
.term .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-2);font-size:11px;color:var(--muted);letter-spacing:1px}
.term .bar .d{width:10px;height:10px;border-radius:50%;background:var(--green-dim)}
.term .bar .d.on{background:var(--green);box-shadow:var(--glow-soft)}
.term .log{height:360px;overflow-y:auto;padding:18px;font-size:13.5px;line-height:1.7}
.term .line{margin-bottom:10px;white-space:pre-wrap;word-break:break-word}
.term .you{color:var(--muted)}
.term .you::before{content:"operator@404:~$ ";color:var(--green-2)}
.term .ag{color:var(--white)}
.term .ag::before{content:"agent> ";color:var(--green)}
.term .sys{color:var(--muted-2);font-style:italic}
.term .feed{display:flex;border-top:1px solid var(--line)}
.term .feed input{flex:1;background:transparent;border:0;color:var(--white);font-family:var(--mono);font-size:14px;padding:14px 16px;outline:none}
.term .feed input::placeholder{color:var(--muted-2)}
.term .feed button{background:var(--green);color:#021006;border:0;padding:0 22px;font-weight:800;letter-spacing:1px}
.prompts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.prompts button{background:var(--bg-1);border:1px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:1px;padding:8px 12px;border-radius:20px;transition:.15s}
.prompts button:hover{color:var(--green);border-color:var(--green-dim)}

/* ---------- token flow ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
.node{border:1px solid var(--line);border-radius:9px;padding:18px;background:var(--bg-1);text-align:center;position:relative}
.node .ic{font-size:22px;color:var(--green)}
.node h4{font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:8px 0 4px;color:var(--white)}
.node p{font-size:12px;color:var(--muted)}
.node.flowarrow::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--green);z-index:3}

/* ---------- docs ---------- */
.doc{display:grid;grid-template-columns:200px 1fr;gap:36px}
.doc .toc{position:sticky;top:130px;align-self:start;display:flex;flex-direction:column;gap:6px;font-size:12px}
.doc .toc a{color:var(--muted);padding:6px 0;border-left:2px solid var(--line);padding-left:12px}
.doc .toc a:hover{color:var(--green);border-color:var(--green-dim)}
.doc section{margin-bottom:40px;scroll-margin-top:130px}
.doc h2{font-size:22px;margin-bottom:14px}
.doc ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.doc li{padding-left:18px;position:relative;color:var(--muted);font-size:14px}
.doc li::before{content:">";position:absolute;left:0;color:var(--green)}
.doc li b{color:var(--white)}

/* ---------- mint ---------- */
.mintbox{max-width:520px;margin:0 auto;text-align:center}
.count{display:flex;gap:12px;justify-content:center;margin:24px 0}
.count .u{border:1px solid var(--line);border-radius:8px;padding:14px 18px;min-width:78px;background:var(--bg-1)}
.count .u .n{font-size:30px;font-weight:800;color:var(--green)}
.count .u .l{font-size:10px;letter-spacing:2px;color:var(--muted-2);text-transform:uppercase}
.progress{height:10px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg);margin:18px 0}
.progress i{display:block;height:100%;width:0;background:var(--green);box-shadow:var(--glow)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:60px;padding:30px 0;position:relative;z-index:2}
.foot .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted-2)}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--green)}
.foot .disc{width:100%;font-size:11px;color:var(--muted-2);line-height:1.6;border-top:1px dashed var(--line-soft);padding-top:14px;margin-top:6px}

/* ---------- boot overlay ---------- */
#boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s}
#boot.done{opacity:0;pointer-events:none}
#boot .box{width:min(620px,90vw);font-size:13px}
#boot .blog{color:var(--muted);white-space:pre-wrap;min-height:200px}
#boot .blog .ok{color:var(--green)}
#boot .pbar{height:8px;border:1px solid var(--line);border-radius:4px;margin-top:16px;overflow:hidden}
#boot .pbar i{display:block;height:100%;width:0;background:var(--green);box-shadow:var(--glow);transition:width .2s}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:.6s}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .g4,.agentgrid,.flow{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .doc{grid-template-columns:1fr}
  .doc .toc{position:static;flex-direction:row;flex-wrap:wrap}
  .heroface{display:none}
  .statline{display:none}
  .node.flowarrow::after{content:"↓";right:50%;top:auto;bottom:-13px;transform:translateX(50%)}
}
@media(max-width:560px){
  .g2{grid-template-columns:1fr}
  h1{font-size:48px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #rain{display:none}
}

/* sound toggle (home + claim) */
.sndbtn{position:fixed;bottom:14px;right:14px;z-index:65;background:rgba(5,7,5,.82);border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:1px;padding:7px 12px;border-radius:6px;cursor:pointer;backdrop-filter:blur(6px);transition:.15s}
.sndbtn:hover{color:var(--green);border-color:var(--green-dim);box-shadow:var(--glow-soft)}