:root {
  --bg:#060914; --panel:#0e1530; --panel2:#131c3d; --text:#f3f1ff; --muted:#a9a5c9; --rule:#27305a;
  --cyan:#7ee8ff; --violet:#e0a8ff; --gold:#ffc83d; --pink:#ff5ea8; --mx:50%; --my:20%;
}
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body {
  margin:0; color:var(--text); line-height:1.7; background:var(--bg);
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 85% 0%, rgba(153,58,139,.42), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 15%, rgba(40,90,170,.3), transparent 70%),
    radial-gradient(circle 420px at var(--mx) var(--my), rgba(126,232,255,.07), transparent 70%),
    linear-gradient(180deg,#070b1a,#0b0f26 60%,#12102e); }
#stars { position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
.space-decor { display:none; }
header.site-header, main, footer, .chapter-nav-inner { max-width:900px; margin-left:auto; margin-right:auto; padding-left:1.5rem; padding-right:1.5rem; }

/* hero */
header.site-header { position:relative; padding-top:5rem; padding-bottom:2.5rem; max-width:900px; }
.eyebrow { font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); position:relative; z-index:2; }
header.site-header h1 { position:relative; z-index:2; font-size:clamp(4rem,15vw,9rem); font-weight:700; letter-spacing:-.05em; line-height:.95; margin:.7rem 0 0;
  padding:0 .1em .16em 0; margin-bottom:.9rem; background:linear-gradient(90deg,#fff,#9be9ff 45%,#e0a8ff); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(126,232,255,.4)); }
.accent-bar { height:4px; width:110px; border-radius:4px; background:linear-gradient(90deg,var(--cyan),var(--violet)); position:relative; z-index:2; }
.tagline { position:relative; z-index:2; font-size:1.3rem; color:#dcd7f5; margin:1.3rem 0 0; max-width:520px; }
.repo-link { position:relative; z-index:2; margin:1.8rem 0 0; }
.repo-link a { display:inline-block; color:var(--cyan); border:1px solid #7ee8ff66; padding:.65rem 1.2rem; border-radius:999px; text-decoration:none; font-weight:700; transition:background .2s, box-shadow .2s; }
.repo-link a:hover { background:#7ee8ff22; box-shadow:0 0 22px #7ee8ff66; }

/* nav: floating pill */
.chapter-nav { position:sticky; top:0; z-index:20; padding:.8rem 1.5rem 1.4rem; background:linear-gradient(180deg,#080b1b 0,#080b1b 62%,rgba(8,11,27,0) 100%); pointer-events:none; }
.chapter-nav .chapter-nav-inner { pointer-events:auto; max-width:852px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 1.2rem; padding:.65rem 1.4rem; font-size:.84rem;
  background:rgba(10,14,34,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(126,232,255,.22); border-radius:999px; box-shadow:0 10px 40px -12px rgba(0,0,0,.6); }
.chapter-nav a { color:var(--muted); text-decoration:none; font-weight:500; border:none; transition:color .2s; }
.chapter-nav a:hover, .chapter-nav a.current { color:var(--text); }
.chapter-nav a.current { text-shadow:0 0 12px var(--cyan); }
.chapter-nav .nav-back { color:var(--cyan); font-weight:700; }
.chapter-nav .nav-top { margin-left:auto; }

main { padding-top:2.5rem; padding-bottom:3rem; max-width:900px; }
h2 { font-size:clamp(2.2rem,6vw,3.4rem); letter-spacing:-.03em; line-height:1; margin:5rem 0 1.5rem; scroll-margin-top:5rem; counter-increment:ms; }
main { counter-reset:ms; }
h2::before { content:"MISSION 0" counter(ms) " /"; display:block; font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.22em; color:var(--cyan); margin-bottom:.7rem; }
h3 { font-size:1.3rem; margin:2.5rem 0 .6rem; color:var(--violet); scroll-margin-top:5rem; }
h4 { font-size:1.02rem; margin:1.8rem 0 .4rem; color:var(--gold); }
p, li { font-size:1.08rem; color:#e6e2fa; }
b, strong { color:#fff; }
a { color:var(--cyan); text-decoration:none; border-bottom:1px solid #7ee8ff55; transition:border-color .2s; }
a:hover { border-color:var(--cyan); }
code { background:var(--panel2); color:var(--cyan); padding:.15em .4em; border-radius:4px; font-family:"Space Mono",monospace; font-size:.85em; }
.chapter-date { font-family:"Space Mono",monospace; font-size:.76rem; letter-spacing:.08em; color:var(--muted); margin:-.6rem 0 1.4rem; text-transform:uppercase; }
hr { border:none; border-top:1px solid var(--rule); margin:2rem 0; }
img, video { max-width:100%; border-radius:12px; }
video { width:100%; border:1px solid var(--rule); box-shadow:0 20px 60px -20px rgba(126,232,255,.25); background:#000; }
table { display:table; width:100%; border-collapse:collapse; font-size:.92rem; margin:1.4rem 0; border:1px solid var(--rule); border-radius:12px; background:rgba(14,21,48,.6); }
th, td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--rule); vertical-align:top; }
th { color:var(--cyan); font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
td { color:#d9d5f2; }

/* stats */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin:0 0 2.5rem; }
.stat-row div { background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:1rem 1.2rem; transition:transform .25s, border-color .25s, box-shadow .25s; }
.stat-row div:hover { transform:translateY(-4px); border-color:var(--cyan); box-shadow:0 0 28px -8px var(--cyan); }
.stat-row b { display:block; font-size:2.6rem; font-weight:700; line-height:1.05; letter-spacing:-.03em; background:linear-gradient(90deg,#fff,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-row span { font-family:"Space Mono",monospace; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; }

/* comm-log dialogue */
blockquote, .comm { position:relative; margin:.8rem 0; padding:.85rem 1.1rem .85rem 1.2rem; border-radius:10px; border-left:3px solid var(--cyan);
  background:linear-gradient(180deg,#0a1126,#0f1838); color:#c6f6ff; font-family:"Space Mono",monospace; font-size:.9rem; line-height:1.6;
  box-shadow:0 0 24px rgba(126,232,255,.1), inset 0 0 30px rgba(126,232,255,.04); }
.comm span { display:block; font-size:.66rem; letter-spacing:.2em; color:var(--cyan); margin-bottom:.25rem; text-transform:uppercase; opacity:.85; }
.comm.you { border-left-color:var(--violet); color:#f1dcff; margin-left:2rem; } .comm.you span { color:var(--violet); }
.comm.log { border-left-color:var(--gold); color:#ffe9b0; } .comm.log span { color:var(--gold); }

/* stop tabs */
.stops { margin:1.8rem 0; }
.stop-tabs, .stop-tabs * { font-family:inherit; }
.stop-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.st { cursor:pointer; padding:.55rem 1rem; border-radius:999px; border:1px solid var(--rule); background:var(--panel); color:var(--muted); font-size:.88rem; font-weight:700; transition:all .2s; }
.st:hover { color:var(--text); border-color:var(--cyan); }
.st.active { color:#041018; background:linear-gradient(90deg,var(--cyan),var(--violet)); border-color:transparent; box-shadow:0 0 22px rgba(126,232,255,.4); }
.stop-panel { display:none; background:var(--panel); border:1px solid var(--rule); border-radius:16px; padding:1.4rem 1.6rem 1.6rem; }
.stop-panel.active { display:block; animation:panelin .45s ease both; }
.stop-panel.active .comm { animation:panelin .5s ease both; }
.stop-panel.active .comm:nth-of-type(2) { animation-delay:.12s; } .stop-panel.active .comm:nth-of-type(3) { animation-delay:.24s; } .stop-panel.active .comm:nth-of-type(4) { animation-delay:.36s; }
@keyframes panelin { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.stop-panel h3 { margin:0; font-size:1.9rem; color:#fff; }
.kind { font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:.3rem 0 1rem; }
.tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.tags i { font-style:normal; font-size:.78rem; padding:.25rem .65rem; border-radius:99px; border:1px solid #7ee8ff44; color:var(--cyan); background:rgba(126,232,255,.06); }

/* run stepper */
.run { background:var(--panel); border:1px solid var(--rule); border-radius:18px; padding:1.6rem; margin:1.6rem 0; }
.run-track { height:4px; background:var(--rule); border-radius:4px; margin:1.2rem 0 -1.55rem; position:relative; z-index:0; }
.run-fill { height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--violet)); border-radius:4px; transition:width .5s cubic-bezier(.2,.8,.2,1); box-shadow:0 0 14px var(--cyan); }
.run-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:.4rem; position:relative; z-index:1; }
.rs { width:100%; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.55rem; color:var(--muted); font-family:inherit; }
.rs i { font-style:normal; width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--bg); border:2px solid var(--rule); transition:all .3s; }
.rs span { font-size:.78rem; text-align:center; line-height:1.25; }
.rs:hover i { border-color:var(--cyan); }
.rs.done i { border-color:var(--cyan); color:var(--cyan); }
.rs.active i { background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#041018; border-color:transparent; transform:scale(1.15); box-shadow:0 0 24px rgba(126,232,255,.6); }
.rs.active span { color:var(--text); }
.run-detail { margin-top:1.4rem; padding:1rem 1.2rem; border-radius:12px; background:var(--bg); border:1px dashed var(--rule); min-height:5.5rem; font-size:1rem; color:#e6e2fa; }
.run-detail b { color:var(--gold); font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:.3rem; }
.run-play { margin-top:1rem; cursor:pointer; font-family:inherit; font-weight:700; font-size:.95rem; color:#041018; background:linear-gradient(90deg,var(--gold),#ff9a3d); border:none; border-radius:999px; padding:.7rem 1.4rem; box-shadow:0 0 24px rgba(255,200,61,.35); transition:transform .2s; }
.run-play:hover { transform:translateY(-2px); }

/* gallery + lightbox */
.gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin:1.4rem 0; }
.gallery img { width:100%; aspect-ratio:16/9; object-fit:cover; cursor:zoom-in; border:1px solid var(--rule); transition:transform .3s, box-shadow .3s, border-color .3s; }
.gallery img:hover { transform:scale(1.025); border-color:var(--cyan); box-shadow:0 14px 44px -10px rgba(126,232,255,.4); }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(3,5,12,.92); display:none; flex-direction:column; align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92vw; max-height:80vh; border-radius:10px; box-shadow:0 0 60px rgba(126,232,255,.25); }
.lightbox p { color:var(--muted); margin:1rem 0 0; max-width:700px; text-align:center; font-size:.95rem; }

/* headset bug log */
.buglog { list-style:none; padding:0; display:grid; gap:.8rem; counter-reset:bug; }
.buglog li { counter-increment:bug; position:relative; background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--pink); border-radius:12px; padding:1rem 1.2rem 1rem 3.4rem; font-size:1rem; transition:transform .25s, border-color .25s; }
.buglog li::before { content:counter(bug,decimal-leading-zero); position:absolute; left:1rem; top:1rem; font-family:"Space Mono",monospace; font-size:.8rem; color:var(--pink); }
.buglog li:hover { transform:translateX(5px); border-color:var(--pink); }

/* reveal */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s, transform .7s; }
.rv.in { opacity:1; transform:none; }

footer { display:flex; flex-direction:column; gap:.5rem; color:var(--muted); font-size:.85rem; padding-bottom:3rem; }
footer a { color:var(--cyan); }

@media (max-width:700px) {
  table { display:block; overflow-x:auto; }
  .run-steps { grid-template-columns:repeat(3,1fr); row-gap:1rem; } .run-track { display:none; }
  .gallery { grid-template-columns:1fr; } .comm.you { margin-left:.6rem; }
}
@media (prefers-reduced-motion:reduce) {
  .rv { opacity:1; transform:none; transition:none; }
}