:root{
  --bg:#0a0c0b;
  --panel:#101413;
  --panel-2:#0d1110;
  --line:#222a27;
  --line-hot:#33403b;
  --ink:#d6ded9;
  --dim:#7d8a84;
  --lime:#b6ff3d;
  --cyan:#4fe3d0;
  --amber:#ffb84d;
  --red:#ff5c5c;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--mono);font-size:15px;line-height:1.6;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  background-position:center top;
  position:relative;overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 0%,rgba(182,255,61,.07),transparent 60%);pointer-events:none;z-index:0}
.scan{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.55}
.wrap{width:100%;max-width:940px;margin:0 auto;padding:0 18px;position:relative;z-index:2}

/* masthead */
.masthead{border-bottom:1px solid var(--line-hot);background:linear-gradient(180deg,rgba(10,12,11,.4),rgba(10,12,11,.95));padding:34px 0 26px;position:relative;z-index:2}
.kicker{font-size:10.5px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
h1{font-size:clamp(46px,17vw,120px);line-height:.86;margin:14px 0 0;letter-spacing:-.04em;font-weight:700}
h1 .accent{color:var(--lime)}
.tagline{font-family:var(--sans);font-size:clamp(15px,4.2vw,19px);line-height:1.45;color:var(--ink);max-width:46ch;margin:18px 0 0;border-left:2px solid var(--lime);padding-left:14px}
.meta-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:26px;background:var(--line);border:1px solid var(--line)}
.meta{background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.meta span{font-size:9.5px;letter-spacing:.18em;color:var(--dim)}
.meta strong{font-size:13px;font-weight:500;color:var(--ink)}
.blink{color:var(--amber);animation:b 1.6s steps(2,end) infinite}
@keyframes b{50%{opacity:.35}}

/* sections */
main{padding:8px 0 40px}
section{padding:38px 0 6px;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-size:clamp(19px,5vw,26px);letter-spacing:-.02em;margin:0 0 18px;font-weight:700;display:flex;gap:12px;align-items:baseline;line-height:1.2}
h2 .num{font-size:11px;letter-spacing:.16em;color:var(--lime);border:1px solid var(--line-hot);padding:3px 6px;flex:none;position:relative;top:-2px}
.prose p,.lede{font-family:var(--sans);font-size:15.5px;line-height:1.62;color:#c3cdc7}
.prose em{color:var(--cyan);font-style:normal}
.prose strong,.lede strong{color:#fff}
.lede{color:var(--dim);margin:-6px 0 22px}

.callout{border:1px solid var(--lime);background:rgba(182,255,61,.05);padding:14px;margin-top:22px}
.callout .tag{font-size:9.5px;letter-spacing:.2em;color:var(--lime)}
.callout p{font-family:var(--sans);margin:8px 0 0;font-size:14.5px;color:#c9d3cd}

/* architecture */
.arch-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.acard{background:var(--panel);padding:14px}
.acard h3{margin:0;font-size:13px;letter-spacing:.02em;color:var(--lime)}
.acard .role{font-size:9.5px;letter-spacing:.18em;color:var(--dim);display:block;margin-bottom:8px}
.acard p{font-family:var(--sans);font-size:13.5px;color:#b3beb8;margin:6px 0 0}
.acard ul{margin:8px 0 0;padding-left:16px;font-size:12.5px;color:var(--dim)}
.ascii{overflow-x:auto;font-size:10.5px;line-height:1.5;color:var(--dim);border:1px solid var(--line);background:var(--panel-2);padding:14px;margin-top:16px}

/* phases */
.phase{border:1px solid var(--line);border-left:3px solid var(--tone,var(--lime));background:var(--panel);margin-bottom:14px}
.phase-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.phase-head .v{font-size:12px;color:var(--tone,var(--lime));letter-spacing:.1em;font-weight:700}
.phase-head .t{font-family:var(--sans);font-size:15px;font-weight:600;flex:1 1 100%}
.phase-head .when{font-size:10px;letter-spacing:.14em;color:var(--dim);border:1px solid var(--line-hot);padding:2px 6px}
.phase ul{margin:0;padding:12px 14px 14px 30px}
.phase li{font-family:var(--sans);font-size:14px;color:#bcc6c0;margin-bottom:6px}
.phase li::marker{color:var(--tone,var(--lime))}
.phase .ship{padding:0 14px 14px;font-size:12px;color:var(--dim)}
.phase .ship b{color:var(--cyan);letter-spacing:.1em;font-weight:500}

/* rail lists */
.rail-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rail{background:var(--panel);padding:13px 14px;display:grid;gap:5px}
.rail .k{font-size:11px;letter-spacing:.14em;color:var(--lime)}
.rail-list.alt .rail .k{color:var(--red)}
.rail .v{font-family:var(--sans);font-size:14px;color:#bcc6c0}

/* evals */
.eval-board{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.eval-col{background:var(--panel);padding:14px}
.eval-col .h{font-size:9.5px;letter-spacing:.2em;color:var(--dim)}
.eval-col ul{list-style:none;margin:10px 0 0;padding:0}
.eval-col li{font-family:var(--sans);font-size:13.5px;color:#bcc6c0;padding:6px 0 6px 18px;position:relative;border-top:1px dashed var(--line)}
.eval-col li:first-child{border-top:0}
.eval-col li::before{content:"▸";position:absolute;left:0;color:var(--cyan);font-size:11px}

/* demo */
ol.demo{list-style:none;counter-reset:d;margin:0;padding:0}
ol.demo li{counter-increment:d;border-left:1px solid var(--line-hot);padding:0 0 20px 34px;position:relative;font-family:var(--sans);font-size:14.5px;color:#bcc6c0}
ol.demo li::before{content:counter(d);position:absolute;left:-13px;top:-2px;width:25px;height:25px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--lime);color:var(--lime);font-family:var(--mono);font-size:11px}
ol.demo li:last-child{border-left-color:transparent;padding-bottom:4px}
ol.demo li b{color:#fff;display:block;font-size:13px;letter-spacing:.02em;margin-bottom:2px}
ol.demo li .sec{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.14em}

/* questions */
.progress{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bar{flex:1;height:6px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--lime);transition:width .35s cubic-bezier(.4,0,.2,1)}
#bar-label{font-size:10.5px;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.q-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.q{background:var(--panel);border:0;border-left:3px solid transparent;text-align:left;width:100%;color:inherit;font:inherit;padding:14px;cursor:pointer;display:grid;gap:6px;transition:background .18s,border-color .18s}
.q:hover{background:#131817}
.q .qh{display:flex;gap:10px;align-items:baseline}
.q .box{flex:none;width:16px;height:16px;border:1px solid var(--line-hot);display:grid;place-items:center;font-size:11px;color:transparent;transition:.18s}
.q .qt{font-family:var(--sans);font-size:15px;font-weight:600;color:#e6ede9}
.q .why{font-family:var(--sans);font-size:13.5px;color:var(--dim);padding-left:26px}
.q .why b{color:var(--cyan);font-weight:500}
.q.done{border-left-color:var(--lime);background:var(--panel-2)}
.q.done .box{border-color:var(--lime);color:var(--lime);background:rgba(182,255,61,.12)}
.q.done .qt{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--line-hot)}

/* footer */
footer{padding:20px 18px 46px}
.foot-line{height:1px;background:repeating-linear-gradient(90deg,var(--line-hot) 0 6px,transparent 6px 12px);margin-bottom:14px}
footer p{font-size:11px;letter-spacing:.08em;color:var(--dim);margin:0}

@media (min-width:640px){
  body{font-size:15.5px}
  .meta-row{grid-template-columns:repeat(4,1fr)}
  .arch-grid{grid-template-columns:repeat(2,1fr)}
  .eval-board{grid-template-columns:repeat(2,1fr)}
  .rail-list{grid-template-columns:repeat(2,1fr)}
  .phase-head .t{flex:1}
  .ascii{font-size:12px}
}
@media (min-width:900px){
  .wrap{padding:0 28px}
  section{padding:52px 0 10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}