/* ---------- Spire Mind showcase ---------- */
:root{
  --bg:#0b0d13; --bg2:#11141d; --panel:#151925; --panel2:#1b2030;
  --ink:#e8ecf5; --muted:#98a2b8; --faint:#5c6680;
  --ember:#ff5a36; --ember2:#ff8a3d; --crim:#e0143c; --gold:#ffcf5c;
  --combat:#ff6a45; --ooc:#4db3ff; --ooc2:#7ee0c0;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --radius:16px; --maxw:940px;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.15; letter-spacing:-.02em; font-weight:750}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:rgba(255,255,255,.07); padding:.12em .4em; border-radius:6px; color:var(--gold)}
a{color:inherit}

/* ambient ember glow */
.bg-embers{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 78% -10%, rgba(255,90,54,.16), transparent 60%),
    radial-gradient(50vw 50vw at 8% 8%, rgba(224,20,60,.12), transparent 55%),
    radial-gradient(40vw 40vw at 60% 108%, rgba(77,179,255,.10), transparent 60%);
  filter:saturate(1.05)}

/* ---------- sidebar ---------- */
.sidebar{position:fixed; top:0; left:0; width:250px; height:100vh; z-index:20;
  padding:26px 20px; background:linear-gradient(180deg,var(--bg2),rgba(11,13,19,.9));
  border-right:1px solid var(--line); backdrop-filter:blur(6px); display:flex; flex-direction:column}
.brand{display:flex; gap:12px; align-items:center; margin-bottom:26px}
.brand-mark{width:40px; height:40px; display:grid; place-items:center; font-size:20px;
  border-radius:12px; color:#1a0d08; font-weight:900;
  background:linear-gradient(135deg,var(--ember2),var(--crim)); box-shadow:0 8px 24px -8px var(--ember)}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted)}
/* ---- Twitch badge ---- */
.twitch-badge{display:flex; align-items:center; gap:10px; margin-bottom:16px; padding:10px 12px;
  border-radius:12px; text-decoration:none; border:1px solid var(--line2);
  background:linear-gradient(135deg,rgba(145,70,255,.16),rgba(145,70,255,.04));
  transition:.18s}
.twitch-badge:hover{border-color:rgba(145,70,255,.6); background:linear-gradient(135deg,rgba(145,70,255,.26),rgba(145,70,255,.08))}
.twitch-badge .tw-glyph{font-size:16px; line-height:1}
.twitch-badge .tw-text{display:flex; flex-direction:column; line-height:1.15; margin-right:auto}
.twitch-badge .tw-name{font-size:13px; font-weight:800; color:var(--ink)}
.twitch-badge .tw-status{font-size:11px; color:var(--muted); letter-spacing:.02em}
.twitch-badge .tw-dot{width:9px; height:9px; border-radius:50%; background:var(--faint); flex:none}
.twitch-badge.live .tw-dot{background:#ff3b57; box-shadow:0 0 0 0 rgba(255,59,87,.7); animation:pulse 1.6s infinite}
.twitch-badge.live .tw-status{color:#ff6a80; font-weight:800; letter-spacing:.04em}
.twitch-badge.offline .tw-dot{background:var(--faint)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,87,.6)}70%{box-shadow:0 0 0 7px rgba(255,59,87,0)}100%{box-shadow:0 0 0 0 rgba(255,59,87,0)}}

#toc a.nav-runs{color:var(--ember2); font-weight:800; margin-bottom:6px;
  background:linear-gradient(90deg,rgba(255,90,54,.14),transparent); border-left:2px solid rgba(255,90,54,.5)}
#toc a.nav-runs:hover{color:#fff; background:linear-gradient(90deg,rgba(255,90,54,.24),transparent)}

/* ---- hero reality banner ---- */
.reality{margin:30px 0 6px; padding:18px 20px; border-radius:14px;
  border:1px solid var(--line2); background:linear-gradient(135deg,rgba(224,20,60,.10),rgba(21,25,37,.6));
  box-shadow:var(--shadow); max-width:70ch}
.reality-h{font-size:13px; font-weight:800; color:var(--ink); margin-bottom:8px}
.reality-tag{display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#ff8fa0; font-weight:800; margin-right:6px}
.reality p{margin:0; font-size:15px; color:#cdd4e4}
.reality a{color:var(--ember2); text-decoration:underline; text-underline-offset:2px}

#toc{display:flex; flex-direction:column; gap:2px}
#toc a{padding:9px 12px; border-radius:10px; color:var(--muted); font-size:14.5px;
  font-weight:600; text-decoration:none; border-left:2px solid transparent; transition:.18s}
#toc a:hover{color:var(--ink); background:rgba(255,255,255,.04)}
#toc a.active{color:var(--ink); background:linear-gradient(90deg,rgba(255,90,54,.16),transparent);
  border-left:2px solid var(--ember)}
.sidebar-foot{margin-top:auto; font-size:12px; color:var(--faint); line-height:1.5; padding-top:18px;
  border-top:1px solid var(--line)}
.nav-toggle{display:none; position:fixed; top:16px; left:16px; z-index:30; width:44px; height:44px;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink); border-radius:12px;
  font-size:18px; cursor:pointer}

/* ---------- main ---------- */
main{position:relative; z-index:1; margin-left:250px; padding:0 40px 80px}
section{max-width:var(--maxw); margin:0 auto; padding:74px 0 10px; scroll-margin-top:20px}
.kicker{display:inline-block; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ember2); font-weight:800; margin-bottom:10px}
h2{font-size:clamp(26px,3.4vw,40px); margin:.1em 0 .5em}
.section-lede{font-size:18px; color:var(--muted); max-width:70ch; margin:0 0 30px}
p{color:#cdd4e4}
b{color:var(--ink); font-weight:700}

/* ---------- hero ---------- */
.hero{min-height:92vh; display:flex; flex-direction:column; justify-content:center;
  max-width:var(--maxw); margin:0 auto; padding:60px 0 40px}
.hero-tag{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-weight:700; margin-bottom:20px}
h1{font-size:clamp(38px,6vw,72px); margin:0 0 22px; font-weight:820}
.grad{background:linear-gradient(120deg,var(--ember2),var(--crim) 60%,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:64ch}
.lede b{color:var(--ink)}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:44px 0 10px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 16px}
.stat-n{font-size:30px; font-weight:820; background:linear-gradient(120deg,var(--ember2),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-l{font-size:12.5px; color:var(--muted); margin-top:4px}
.scroll-hint{margin-top:40px; color:var(--faint); font-size:13px; letter-spacing:.1em;
  animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- two brains ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.brain-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; position:relative; overflow:hidden}
.brain-card:before{content:""; position:absolute; inset:0 0 auto 0; height:3px}
.brain-card.combat:before{background:linear-gradient(90deg,var(--combat),transparent)}
.brain-card.ooc:before{background:linear-gradient(90deg,var(--ooc),transparent)}
.brain-icon{font-size:30px; margin-bottom:8px}
.brain-card h3{font-size:22px; margin:0 0 10px}
.mini{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px}
.mini li{font-size:14px; color:var(--muted); display:flex; gap:10px; align-items:baseline}
.mini li span{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint);
  min-width:64px; font-weight:700}
.bridge{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px;
  flex-wrap:wrap}
.bridge-node{padding:10px 16px; border-radius:12px; font-weight:700; font-size:14px; border:1px solid var(--line2)}
.bridge-node.combat-b{background:rgba(255,106,69,.12); color:var(--combat)}
.bridge-node.ooc-b{background:rgba(77,179,255,.12); color:var(--ooc)}
.bridge-arrow{color:var(--gold); font-weight:700; font-size:14px}

/* ---------- token legend ---------- */
.token-legend{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 26px}
.tok{border:1px solid var(--line); border-left-width:4px; border-radius:12px; padding:14px 16px;
  background:var(--panel); transition:.2s}
.tok:hover{transform:translateY(-3px); border-color:var(--line2); box-shadow:var(--shadow)}
.tok b{display:block; font-size:13px; letter-spacing:.08em; margin-bottom:3px}
.tok span{font-size:13.5px; color:var(--muted)}
.tok-cls{border-left-color:var(--gold)} .tok-cls b{color:var(--gold)}
.tok-player{border-left-color:#b48cff} .tok-player b{color:#b48cff}
.tok-card{border-left-color:var(--ember2)} .tok-card b{color:var(--ember2)}
.tok-monster{border-left-color:var(--crim)} .tok-monster b{color:#ff5a78}
.tok-relic{border-left-color:var(--ooc2)} .tok-relic b{color:var(--ooc2)}
.tok-potion{border-left-color:var(--ooc)} .tok-potion b{color:var(--ooc)}
.tok-orb{border-left-color:#5ce0ff} .tok-orb b{color:#5ce0ff}

/* ---------- callouts ---------- */
.callout{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line2);
  border-radius:var(--radius); padding:22px 24px; margin:26px 0; position:relative}
.callout:before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px; background:var(--ember)}
.callout.amber:before{background:var(--gold)}
.callout-h{font-weight:800; margin-bottom:6px; color:var(--ink)}
.perf-note{margin-top:18px; font-size:14.5px; color:var(--muted); background:rgba(255,207,92,.07);
  border:1px dashed rgba(255,207,92,.3); border-radius:12px; padding:12px 16px}

/* ---------- net diagram ---------- */
.net-diagram{display:flex; align-items:stretch; gap:12px; margin:6px 0 34px; flex-wrap:wrap}
.nd-col{display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center}
.nd-in{flex:0 0 150px}
.nd-chip{width:100%; text-align:center; font-size:12.5px; font-weight:700; padding:8px 10px;
  border-radius:9px; background:var(--panel); border:1px solid var(--line)}
.nd-label{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint);
  margin-top:4px; font-weight:700}
.nd-arrow{align-self:center; color:var(--ember2); font-size:20px}
.nd-trunk{flex:1 1 150px}
.nd-trunk-box{width:100%; padding:26px 16px; text-align:center; font-weight:800; border-radius:14px;
  background:linear-gradient(135deg,rgba(255,90,54,.16),rgba(224,20,60,.12));
  border:1px solid rgba(255,90,54,.3)}
.nd-trunk-box small{display:block; font-weight:500; color:var(--muted); margin-top:6px; font-size:12px}
.nd-heads{flex:1 1 220px; gap:8px}
.nd-head{width:100%; font-weight:700; font-size:14px; padding:11px 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--panel)}
.nd-head small{display:block; font-weight:500; color:var(--muted); font-size:12px; margin-top:2px}
.h-val{border-left:3px solid var(--gold)} .h-pol{border-left:3px solid var(--ooc)}
.h-aux{border-left:3px solid var(--ooc2)} .h-enc{border-left:3px solid var(--ember)}

/* ---------- feature grid ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px}
.feat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px}
.feat h4{margin:0 0 8px; font-size:16px}
.feat p{margin:0; font-size:14.5px; color:var(--muted)}

/* ---------- steps ---------- */
.steps{display:flex; flex-direction:column; gap:12px; margin:6px 0 26px}
.step{display:flex; gap:16px; align-items:flex-start; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px}
.step-n{flex:0 0 34px; height:34px; display:grid; place-items:center; font-weight:800; border-radius:10px;
  background:linear-gradient(135deg,var(--ember2),var(--crim)); color:#1a0d08}
.step div:last-child{color:var(--muted); font-size:15px}
.step b{color:var(--ink)}

/* ---------- ooc diagram ---------- */
.ooc-diagram{display:grid; grid-template-columns:1.3fr .8fr 1fr; gap:14px; align-items:center; margin:6px 0 30px}
.ooc-set{display:flex; flex-wrap:wrap; gap:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:16px}
.ooc-item{font-size:12.5px; font-weight:700; padding:7px 11px; border-radius:9px; position:relative}
.ooc-item.c{background:rgba(255,138,61,.14); color:var(--ember2); border:1px solid rgba(255,138,61,.3)}
.ooc-item.d{background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--line)}
.ooc-item small{display:block; font-size:9px; color:var(--faint); font-weight:600}
.ooc-attn{text-align:center; font-weight:700; font-size:13px; color:var(--ooc); padding:10px}
.ooc-attn small{display:block; color:var(--muted); font-weight:500; font-size:11px; margin-top:4px}
.ooc-out{text-align:center}
.ooc-q{font-size:12px; color:var(--muted); margin-bottom:8px}
.ooc-p{font-size:22px; font-weight:820; padding:14px; border-radius:14px;
  background:linear-gradient(135deg,rgba(77,179,255,.16),rgba(126,224,192,.14));
  border:1px solid rgba(77,179,255,.3); color:#bfe6ff}

/* ---------- route ---------- */
.route{display:grid; grid-template-columns:auto auto 1fr; gap:14px; align-items:center; margin:6px 0 24px}
.route-in,.route-arrow{font-size:14px; color:var(--muted)} .route-in b{color:var(--ink)}
.route-arrow{color:var(--gold); text-align:center; font-weight:700}
.route-out{display:flex; flex-direction:column; gap:8px}
.route-model{font-family:ui-monospace,monospace; font-size:13px; padding:9px 13px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); color:var(--muted)}
.route-model.on{border-color:var(--ember); color:var(--ink); background:rgba(255,90,54,.1)}
.route-model small{color:var(--faint)}
.hexa-fact{display:flex; gap:16px; align-items:center; background:var(--panel2); border:1px solid var(--line2);
  border-radius:14px; padding:18px 20px; margin-top:8px}
.hexa-icon{font-size:34px}
.hexa-fact div{font-size:14.5px; color:var(--muted)} .hexa-fact b{color:var(--ink)}

/* ---------- wheel ---------- */
.wheel{display:flex; flex-direction:column; gap:10px; margin:6px 0 28px; position:relative}
.wheel:before{content:""; position:absolute; left:15px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg,var(--ember),var(--ooc)); opacity:.5}
.wheel-step{display:flex; gap:16px; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:14px 18px; font-size:15px; color:var(--muted); position:relative; z-index:1}
.wheel-step span{flex:0 0 32px; height:32px; display:grid; place-items:center; font-weight:800;
  border-radius:50%; background:var(--bg); border:2px solid var(--ember); color:var(--ember2)}
.wheel-step b{color:var(--ink)}

/* ---------- stack ---------- */
.stack-flow{display:flex; flex-direction:column; gap:10px; align-items:center; margin:6px 0 28px}
.sf{width:100%; max-width:560px; text-align:center; padding:14px; border-radius:12px; font-weight:700;
  background:var(--panel); border:1px solid var(--line)}
.sf-arr{color:var(--faint); font-size:13px}
.sf-split{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:560px}
.sf-b{padding:14px; border-radius:12px; font-size:13.5px; font-weight:600}
.sf-b.combat{background:rgba(255,106,69,.1); border:1px solid rgba(255,106,69,.3); color:var(--combat)}
.sf-b.ooc{background:rgba(77,179,255,.1); border:1px solid rgba(77,179,255,.3); color:var(--ooc)}
.outro{font-size:17px; color:var(--muted); border-top:1px solid var(--line); padding-top:24px; margin-top:30px}
.outro b{color:var(--ink)}

/* ---------- footer ---------- */
.foot{max-width:var(--maxw); margin:60px auto 0; padding:26px 0; border-top:1px solid var(--line);
  color:var(--muted); font-size:14px}
.foot-sub{color:var(--faint); font-size:12.5px; margin-top:6px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%); transition:.3s} .sidebar.open{transform:none}
  .nav-toggle{display:block} main{margin-left:0; padding:0 20px 60px}
  .two-col,.token-legend,.feature-grid,.ooc-diagram,.sf-split,.stat-row{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .route{grid-template-columns:1fr} .net-diagram{flex-direction:column} .nd-arrow{transform:rotate(90deg)}
}

/* ---------- waitlist ---------- */
#waitlist{padding-top:38px}
.waitlist-panel{padding:28px 30px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid rgba(255,138,61,.38);
  box-shadow:0 24px 70px -32px rgba(255,90,54,.5)}
.waitlist-panel h2{margin-top:8px}
.waitlist-mock{margin-top:18px; padding:16px 18px; border-radius:var(--radius);
  background:var(--panel2); border:1px solid var(--line)}
.waitlist-mock-h{font-size:13px; color:var(--muted); margin-bottom:10px}
.waitlist-mock-tag{float:right; font-size:11px; color:var(--faint); border:1px solid var(--line2);
  border-radius:8px; padding:1px 8px}
.waitlist-mock-row{display:grid; grid-template-columns:90px 1fr 150px; gap:10px;
  align-items:center; margin:6px 0; font-size:13px}
.waitlist-mock-name{color:var(--ink)}
.waitlist-mock-bar{height:8px; border-radius:4px; background:var(--panel2); overflow:hidden}
.waitlist-mock-bar > span{display:block; height:100%;
  background:linear-gradient(90deg,var(--ember2),var(--crim))}
.waitlist-mock-v{color:var(--muted); font-size:12px}
.waitlist-mock-v.ok{color:var(--ooc2)}
.waitlist-mock-v.err{color:var(--gold)}
.waitlist-form{margin-top:18px}
.waitlist-row{display:flex; gap:10px; flex-wrap:wrap}
.waitlist-row input[type=email]{flex:1 1 260px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink); font-size:15px}
.waitlist-row input[type=email]:focus{outline:none; border-color:var(--ember2)}
.waitlist-row button{padding:12px 20px; border-radius:12px; border:none; cursor:pointer;
  font-weight:750; font-size:15px; color:#1a0d08;
  background:linear-gradient(135deg,var(--ember2),var(--crim));
  box-shadow:0 8px 24px -8px var(--ember)}
.waitlist-row button:disabled{opacity:.55; cursor:not-allowed}
.waitlist-hp{position:absolute; left:-9999px; top:-9999px}
.waitlist-turnstile{margin-top:12px; min-height:65px}
.waitlist-status{margin:10px 0 0; font-size:14px; min-height:1.4em}
.waitlist-status.ok{color:var(--ooc2)}
.waitlist-status.err{color:var(--crim)}
.waitlist-status.pending{color:var(--muted)}
.waitlist-fine{margin-top:8px; font-size:12px; color:var(--faint)}