:root{
  --bg:#14161a;--panel:#1c1f25;--line:#2b3038;--text:#e8e6e1;--mute:#9a9ea6;
  --amber:#ffb020;--green:#4ade80;--red:#ff5a4d;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--sans)}
.mono{font-family:var(--mono)}
a{color:inherit}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--amber);color:#000;padding:8px 12px;z-index:99}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:10px 16px;background:rgba(20,22,26,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.bar-name{font:700 16px var(--mono);color:var(--amber)}
.phases{display:flex;gap:4px;list-style:none;margin:0 auto;padding:0;font:12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.phases li{padding:4px 8px;color:var(--mute);border-radius:3px}
.phases li.on{color:#000;background:var(--amber)}
.bar-cta{font:600 13px var(--sans);text-decoration:none;border:1px solid var(--amber);color:var(--amber);padding:6px 12px;border-radius:4px}
.bar-cta:hover{background:var(--amber);color:#000}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%}
.progress i{display:block;height:100%;width:0;background:var(--amber)}

section{max-width:860px;margin:0 auto;padding:88px 20px}
.hero{padding-top:72px;min-height:88vh}
.tag{color:var(--amber);font-size:13px;letter-spacing:.12em;margin:0 0 12px}
h1{font-size:clamp(44px,9vw,84px);line-height:1;margin:0 0 8px;letter-spacing:-.02em}
h2{font-size:clamp(28px,5vw,40px);margin:0 0 24px}
.role{font-size:20px;color:var(--mute);margin:0 0 20px}
.lede{font-size:clamp(20px,3vw,26px);max-width:620px;margin:0 0 28px}
.status{list-style:none;padding:16px;margin:0 0 24px;background:var(--panel);border:1px solid var(--line);border-radius:6px;font-size:14px}
.status li{padding:3px 0}
.ok{color:var(--green);margin-right:8px}
.summary{color:var(--mute);max-width:700px}
.scroll{color:var(--mute);font-size:13px;margin-top:40px}

.jobs{display:grid;gap:24px;position:relative;padding-left:22px;border-left:2px dashed var(--line)}
.job{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px 22px;position:relative}
.job::before{content:"";position:absolute;left:-30px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--amber)}
.when{color:var(--amber);font-size:13px}
.job h3{margin:6px 0 2px;font-size:20px;line-height:1.3}
.org{color:var(--mute);margin:0 0 10px;font-style:italic}
.job ul{margin:0;padding-left:20px}
.job li{margin:6px 0}

.sub{color:var(--mute);margin:-8px 0 20px}
.rack{background:#0e1013;border:2px solid #3a4049;border-radius:6px;padding:10px 12px;box-shadow:inset 0 0 0 4px #15181c}
.u{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:6px 0;background:linear-gradient(#262b33,#1d2128);border:1px solid #39404a;border-radius:3px;cursor:default;transition:background .2s}
.u:hover,.u:focus,.u.open{background:linear-gradient(#2e353f,#242a33)}
.leds{display:grid;grid-template-columns:repeat(6,10px);gap:4px;flex:none}
.leds i{width:10px;height:10px;border-radius:2px;background:#26402f}
.leds i.on{background:var(--green);box-shadow:0 0 6px var(--green)}
.leds i.amb{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.ut b{display:block;font:600 14px var(--mono);letter-spacing:.02em}
.ut span{display:block;color:var(--mute);font-size:14px;line-height:1.5;margin-top:2px}

#show .big{font-size:clamp(20px,3vw,28px);max-width:680px}
.refs{color:var(--mute)}

.checks{list-style:none;padding:0;margin:0 0 28px;font-size:15px}
.checks li{padding:4px 0;color:var(--mute)}
.checks li::before{content:"[ ] ";color:var(--mute)}
.checks li.ticked::before{content:"[x] ";color:var(--green)}
.checks li.ticked{color:var(--text)}
.fin{opacity:0;transition:opacity .6s}
.done.show .fin{opacity:1}
.done p{color:var(--green);font-size:14px;letter-spacing:.08em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btn{display:inline-block;padding:12px 18px;background:var(--amber);color:#000;text-decoration:none;font-weight:600;border-radius:5px}
.btn.alt{background:transparent;color:var(--amber);border:1px solid var(--amber)}
.btn:hover{filter:brightness(1.1)}
footer{text-align:center;color:var(--mute);padding:32px;font-size:13px;border-top:1px solid var(--line)}

.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.js .rv.in{opacity:1;transform:none}

@keyframes blink{50%{opacity:.25}}
.leds i.on{animation:blink 1.6s infinite}
.leds i.amb{animation:blink .7s infinite}

@media (max-width:640px){
  .phases{display:none}
  .bar-cta{margin-left:auto}
  section{padding:64px 16px}
  .jobs{padding-left:16px}
  .job::before{left:-24px}
  .leds{grid-template-columns:repeat(3,10px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .rv.in,.done,.done.show{transform:none}
  .chev{transition:none}
  .leds i.on,.leds i.amb{animation-duration:3s}
}

.worked{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.worked p{margin:0 0 6px;font-size:11px;letter-spacing:.12em;color:var(--mute)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 12px}
.job .chips li{margin:0;padding:3px 10px;border:1px solid var(--amber);color:var(--amber);border-radius:999px;font-size:13px}

.u{display:block;padding:0}
.uh{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;cursor:pointer}
.uh:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.uh .ut{flex:1}
.cnt{color:var(--mute);font-size:13px}
.chev{width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.u.open .chev{transform:rotate(-135deg)}
.up{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px 52px}
.js .up{display:none}
.js .u.open .up{display:flex}
.port{font:13px var(--mono);color:var(--text);background:#0e1013;border:1px solid #4a525d;border-radius:3px;padding:6px 10px;cursor:pointer}
.port:hover{border-color:var(--amber)}
.port[aria-pressed="true"]{background:var(--amber);color:#000;border-color:var(--amber)}
.port:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.patch{margin:10px 4px 2px;font-size:13px;color:var(--green);min-height:1.6em}
.job{transition:opacity .3s,border-color .3s,box-shadow .3s}
.jobs.filtering .job{opacity:.35}
.jobs.filtering .job.hit{opacity:1;border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 0 18px rgba(255,176,32,.25)}
@media (max-width:640px){.up{padding-left:14px}}
.done .next{font:600 clamp(18px,2.6vw,24px)/1.4 var(--sans);color:var(--text);letter-spacing:0;margin:10px 0 6px}
.checks li{transition:color .5s}
.checks li::before{transition:color .5s}

#net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}

.job,#rack{scroll-margin-top:76px}
.backbtn{display:none;position:absolute;top:14px;right:16px;font:600 12px var(--mono);color:var(--amber);background:transparent;border:1px solid var(--amber);border-radius:4px;padding:5px 9px;cursor:pointer}
.backbtn:hover{background:var(--amber);color:#000}
.job.hit .backbtn{display:block}
@media (max-width:640px){.backbtn{top:auto;bottom:14px}.job.hit{padding-bottom:58px}}