:root{
  --void:#07090F;
  --panel:#0E1320;
  --panel-2:#121A2B;
  --hull:#243149;
  --ink:#D2DCEC;
  --dim:#7384A0;
  --faint:#4A576E;
  --signal:#E8A33D;   /* crewed / active duty */
  --drift:#54BFD4;    /* dormant / available */
  --alert:#C2528F;    /* non-replicant */
  --signal-soft:rgba(232,163,61,.14);
  --drift-soft:rgba(84,191,212,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--drift)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* starfield */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}

.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 22px}

/* hero */
header.hero{padding:64px 0 30px}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--drift);margin:0 0 18px}
h1{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;letter-spacing:.02em;
  font-size:clamp(34px,7vw,68px);line-height:1.02;margin:0;color:#F2F6FC}
h1 .reg{color:var(--signal)}
.lede{max-width:640px;color:var(--dim);font-size:clamp(15px,1.7vw,18px);margin:20px 0 0}
.lede strong{color:var(--ink);font-weight:600}

.stats{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.stat{background:var(--panel);border:1px solid var(--hull);border-radius:10px;
  padding:14px 18px;min-width:128px}
.stat .n{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;font-size:26px;line-height:1}
.stat .l{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-top:7px}
.stat.crewed .n{color:var(--signal)}
.stat.dormant .n{color:var(--drift)}

/* section scaffolding */
section{padding:46px 0}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;
  border-bottom:1px solid var(--hull);padding-bottom:12px}
.sec-head .idx{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--faint);font-size:13px}
.sec-head h2{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:clamp(18px,2.6vw,24px);
  margin:0;letter-spacing:.02em}
.sec-head .hint{margin-left:auto;color:var(--dim);font-size:13px}

/* tree */
.map-shell{position:relative;background:
    radial-gradient(circle at 50% 46%, rgba(84,191,212,.05), transparent 60%),
    var(--panel);
  border:1px solid var(--hull);border-radius:16px;overflow:hidden}
#tree{display:block;width:100%;height:auto;touch-action:none;cursor:grab}
#tree:active{cursor:grabbing}
.legend{display:flex;flex-wrap:wrap;gap:18px;padding:14px 18px;border-top:1px solid var(--hull);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.06em;color:var(--dim)}
.legend .key{display:flex;align-items:center;gap:8px}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.dot.s{background:var(--signal);box-shadow:0 0 9px var(--signal)}
.dot.d{background:var(--drift)}
.dot.a{background:var(--alert)}
.maphelp{padding:0 18px 14px;color:var(--faint);font-size:11px;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

link{stroke:var(--hull)}
.node circle{stroke:var(--void);stroke-width:1.5;cursor:pointer;transition:r .15s}
.node text{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;fill:var(--dim);cursor:pointer}
.node:hover circle{stroke:#fff}
.node.sel circle{stroke:#fff;stroke-width:2}
.node.sel text{fill:#fff}

/* detail drawer */
.detail{position:fixed;top:0;right:0;height:100%;width:min(380px,90vw);
  background:var(--panel-2);border-left:1px solid var(--hull);
  transform:translateX(100%);transition:transform .28s ease;z-index:40;
  padding:26px 24px;overflow-y:auto;box-shadow:-20px 0 50px rgba(0,0,0,.5)}
.detail.open{transform:translateX(0)}
.detail .x{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--dim);
  font-size:22px;cursor:pointer;line-height:1}
.detail .x:hover{color:#fff}
.detail .glyph{font-size:42px;line-height:1}
.detail h3{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:22px;margin:14px 0 4px}
.detail .canon-tag{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;border-radius:20px;display:inline-block}
.ct-confirmed{background:rgba(84,191,212,.12);color:var(--drift);border:1px solid rgba(84,191,212,.3)}
.ct-unsorted{background:rgba(115,132,160,.12);color:var(--dim);border:1px solid var(--hull)}
.ct-non{background:rgba(194,82,143,.12);color:var(--alert);border:1px solid rgba(194,82,143,.3)}
.detail p.desc{color:var(--ink);margin:16px 0;font-size:15px}
.detail dl{margin:18px 0 0;border-top:1px solid var(--hull);padding-top:16px}
.detail dt{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-top:14px}
.detail dd{margin:4px 0 0;font-size:14px}
.seatbox{margin-top:18px;border-radius:10px;padding:14px;font-size:14px}
.seatbox.crewed{background:var(--signal-soft);border:1px solid rgba(232,163,61,.34)}
.seatbox.dormant{background:var(--drift-soft);border:1px solid rgba(84,191,212,.28)}
.seatbox .st{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase}
.seatbox.crewed .st{color:var(--signal)}
.seatbox.dormant .st{color:var(--drift)}

/* roster */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--hull);border-radius:12px;padding:16px;
  cursor:pointer;transition:border-color .15s,transform .15s}
.card:hover{transform:translateY(-2px)}
.card.crewed{border-left:3px solid var(--signal)}
.card.dormant{border-left:3px solid var(--drift)}
.card:hover.crewed{border-color:var(--signal)}
.card:hover.dormant{border-color:var(--drift)}
.card .top{display:flex;align-items:center;gap:10px}
.card .glyph{font-size:24px}
.card .nm{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:16px}
.card .role{color:var(--dim);font-size:13px;margin-top:9px}
.card .badge{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;margin-left:auto;padding:3px 8px;border-radius:20px}
.card.crewed .badge{background:var(--signal-soft);color:var(--signal)}
.card.dormant .badge{background:var(--drift-soft);color:var(--drift)}
.roster-sub{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin:8px 0 14px}

.nonbobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.nb{background:var(--panel);border:1px solid var(--hull);border-left:3px solid var(--alert);
  border-radius:12px;padding:16px}
.nb .nm{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:16px}
.nb .role{color:var(--dim);font-size:13px;margin-top:8px}

/* drift lore */
.drift-quote{background:
    linear-gradient(180deg,rgba(84,191,212,.06),transparent),var(--panel);
  border:1px solid var(--hull);border-radius:16px;padding:38px 34px;text-align:center}
.drift-quote p{font-size:clamp(17px,2.4vw,23px);max-width:760px;margin:0 auto;color:var(--ink);
  line-height:1.5}
.drift-quote .mk{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--drift);font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px}

footer{padding:42px 0 60px;border-top:1px solid var(--hull);margin-top:30px;
  color:var(--faint);font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.05em;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

@media (max-width:560px){
  .sec-head .hint{display:none}
  .stat{flex:1 1 calc(50% - 14px);min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}
:focus-visible{outline:2px solid var(--drift);outline-offset:2px}