@font-face{font-family:"Josefin Sans";src:url("fonts/josefin-sans.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --void:#070c18; --navy:#0e1830; --navy2:#152341; --brass:#d9b26f; --brass2:#f1d49a; --cream:#efe6d2;
  --teal:#5fc4c0; --rose:#e48a7a; --dim:#b8c0cf;
  --deco: "Josefin Sans","Futura","Century Gothic","Avenir Next","Josefin Sans","Gill Sans","Trebuchet MS",system-ui,sans-serif;
  --body: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(ellipse at 30% 40%,#14233f 0,#070c18 70%) fixed; color:var(--cream); font:16px/1.6 var(--body); min-height:100vh}
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 60% 45% at 78% 20%, rgba(95,196,192,.07), transparent 70%), radial-gradient(ellipse 50% 40% at 15% 85%, rgba(217,178,111,.06), transparent 70%)}
#stars{position:absolute; inset:0; width:100%; height:100%}
a{color:var(--brass2)} a:hover{color:#fff}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px}
.skip{position:absolute; left:-999px; top:8px; z-index:50; background:var(--brass); color:#111; padding:8px 12px; font-weight:700}
.skip:focus{left:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.topbar{position:relative; z-index:5; display:flex; align-items:center; gap:20px; padding:14px 28px; border-bottom:1px solid rgba(217,178,111,.35);
  background:linear-gradient(rgba(7,12,24,.92),rgba(7,12,24,.7)); backdrop-filter:blur(4px)}
.mark{display:flex; align-items:center; gap:12px}
.brandh{margin:0; font-size:inherit; font-weight:inherit}
.mark b{display:block; font-family:var(--deco); letter-spacing:.32em; text-transform:uppercase; font-size:1rem; color:var(--brass2); font-weight:600}
.mark small{display:block; color:var(--dim); font-size:.78rem; letter-spacing:.08em}
.emblem{width:38px; height:38px; flex:none}
#tram{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
#tram a{font-family:var(--deco); text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; text-decoration:none; color:var(--cream);
  padding:8px 14px; border:1px solid rgba(217,178,111,.4); clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
#tram a:hover{background:rgba(217,178,111,.15)}
#tram a[aria-current="page"]{background:var(--brass); color:#14110a; border-color:var(--brass)}

.layout{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:24px; max-width:1400px; margin:0 auto; padding:16px 28px 40px}
.map-wrap{position:sticky; top:12px; align-self:start; height:calc(100vh - 110px); min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center}
#station{width:100%; height:100%; max-height:640px; overflow:visible}
#rot{transform-box:view-box; transform-origin:300px 300px; will-change:transform}
.lbl{transform-box:fill-box; transform-origin:center}
.mod{cursor:pointer; outline:none}
.mod text{font-family:var(--deco); font-size:15px; letter-spacing:.24em; fill:var(--cream); font-weight:600}
.mod .sub{font-size:9.5px; letter-spacing:.14em; fill:var(--brass2); font-weight:400}
.mod .shell{fill:#13213b; stroke:url(#brass); stroke-width:4; transition:fill .3s}
.mod .glow{fill:none; stroke:var(--teal); stroke-width:3; opacity:0; transition:opacity .3s}
.mod:hover .shell,.mod:focus-visible .shell{fill:#1e3358}
.mod:focus-visible .glow,.mod.active .glow{opacity:1}
.mod.active .shell{fill:#21406b}
.mod .win{fill:#f6d78e; opacity:.85}
.hint{color:var(--dim); font-size:.82rem; letter-spacing:.06em; margin:4px 0 0; text-align:center}

/* panel */
.panel{position:relative; background:linear-gradient(rgba(14,24,48,.94),rgba(10,17,34,.96)); border:1px solid rgba(217,178,111,.5); padding:34px 36px 40px; outline:none;
  box-shadow:0 0 0 6px rgba(7,12,24,.6), 0 0 0 7px rgba(217,178,111,.25), 0 30px 60px rgba(0,0,0,.5); min-height:60vh}
.panel::before,.panel::after{content:""; position:absolute; width:40px; height:40px; border:2px solid var(--brass)}
.panel::before{top:-8px; left:-8px; border-right:0; border-bottom:0}
.panel::after{bottom:-8px; right:-8px; border-left:0; border-top:0}
.deck{font-family:var(--deco); letter-spacing:.3em; text-transform:uppercase; font-size:.75rem; color:var(--teal); margin:0 0 6px}
.panel h1,.panel h2{font-family:var(--deco); font-weight:600; letter-spacing:.06em; margin:0 0 12px; color:var(--brass2)}
.panel h1,.panel h2.hubname{font-size:clamp(2rem,4vw,3rem); line-height:1.05}
.panel h2{font-size:1.6rem}
.panel h3{font-family:var(--deco); letter-spacing:.12em; text-transform:uppercase; font-size:.95rem; color:var(--cream); margin:26px 0 10px; display:flex; align-items:center; gap:12px}
.panel h3::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(217,178,111,.6),transparent)}
.lede{font-size:1.15rem; color:#fff}
.muted{color:var(--dim)}
.rule{height:10px; margin:18px 0; background:linear-gradient(var(--brass),var(--brass)) center/100% 1px no-repeat; position:relative}
.rule::after{content:""; position:absolute; left:50%; top:0; width:10px; height:10px; margin-left:-5px; background:var(--brass); transform:rotate(45deg)}
.dir{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.dir a{display:block; padding:14px 16px; text-decoration:none; color:var(--cream); border:1px solid rgba(217,178,111,.35); background:rgba(217,178,111,.05)}
.dir a:hover{background:rgba(217,178,111,.14)}
.dir b{display:block; font-family:var(--deco); letter-spacing:.2em; text-transform:uppercase; color:var(--brass2); font-size:.85rem}
.dir span{font-size:.88rem; color:var(--dim)}
.logs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px}
.log{border-left:2px solid var(--teal); padding:6px 12px; background:rgba(95,196,192,.06)}
.log b{display:block; font-family:var(--mono); color:var(--teal); font-size:1.05rem}
.log span{font-size:.8rem; color:var(--dim)}

.assign{position:relative; padding:0 0 22px 26px; border-left:1px solid rgba(217,178,111,.45); margin-left:6px}
.assign::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; background:var(--navy); border:2px solid var(--brass); transform:rotate(45deg)}
.assign.now::before{background:var(--teal); border-color:var(--teal); box-shadow:0 0 12px var(--teal)}
.assign header{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
.assign h4{margin:0; font-size:1.15rem; font-family:var(--deco); letter-spacing:.06em; color:#fff}
.assign .when{font-family:var(--mono); font-size:.8rem; color:var(--brass2); margin-left:auto}
.assign .roles{font-size:.9rem; color:var(--dim); margin:2px 0 6px}
.assign ul{margin:6px 0; padding-left:18px; font-size:.93rem}
.assign li::marker{color:var(--brass)}
.tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:8px 0 0}
.tags li{font-size:.74rem; letter-spacing:.06em; padding:2px 8px; border:1px solid rgba(95,196,192,.5); color:#cfeeed; border-radius:20px}
.cert{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.cert div{border:1px solid rgba(217,178,111,.3); padding:10px 12px}
.cert b{font-family:var(--deco); letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; color:var(--brass2)}
.cert p{margin:4px 0 0; font-size:.86rem; color:var(--dim)}

.seg{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 16px}
.seg button{font:600 .72rem var(--deco); letter-spacing:.2em; text-transform:uppercase; color:var(--cream); background:transparent; border:1px solid rgba(217,178,111,.45); padding:7px 12px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--brass); color:#14110a}
.bays{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.bay{position:relative; border:1px solid rgba(217,178,111,.35); padding:14px 14px 14px; background:linear-gradient(rgba(21,35,65,.6),rgba(14,24,48,.6)); display:flex; flex-direction:column; gap:6px}
.bay .no{font-family:var(--mono); font-size:.7rem; color:var(--dim); letter-spacing:.1em; padding-right:92px; line-height:1.5}
.panel .bay h3.it{margin:0; font:600 1.02rem var(--body); letter-spacing:0; text-transform:none; color:#fff; display:block}
.panel .bay h3.it::after{display:none}
.bay p{margin:0; font-size:.88rem; color:#d7dce6}
.state{position:absolute; top:12px; right:12px; font:600 .66rem var(--deco); letter-spacing:.16em; text-transform:uppercase; padding:2px 7px; border:1px solid currentColor}
.state.live{color:var(--teal)} .state.running{color:#9fc1ff} .state.planned{color:var(--brass2)} .state.craft{color:#d9a6e6} .state.shipped{color:#c9ced8}
.bay a.go{margin-top:auto; font-family:var(--mono); font-size:.8rem; overflow-wrap:anywhere}
.bay .host{margin-top:auto; font-family:var(--mono); font-size:.78rem; color:var(--dim)}

.rec{display:grid; gap:16px}
.room{border:1px solid rgba(217,178,111,.35); padding:16px 18px; background:rgba(14,24,48,.55)}
.panel .room h3.rt::after{display:none}
.panel .room h3.rt{display:block; margin:0 0 4px; font-family:var(--deco); letter-spacing:.2em; text-transform:uppercase; color:var(--brass2); font-size:.9rem}
.room p{margin:0 0 10px; font-size:.9rem; color:var(--dim)}
.shelf{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:4px 0 10px}
.shelf li{font-size:.84rem; padding:4px 10px; background:rgba(239,230,210,.07); border:1px solid rgba(239,230,210,.18)}
.shelf li.fav{border-color:var(--brass); background:rgba(217,178,111,.14)}
.lab{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:10px 0 2px}
.star{display:flex; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--brass); background:rgba(217,178,111,.08); margin:6px 0 12px}
.star svg{flex:none; width:42px; height:42px}
.honest{font-size:.86rem; color:#f0d2cb; border-left:2px solid var(--rose); padding:4px 10px; margin-top:6px}
.comms{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.comms a{display:flex; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid rgba(95,196,192,.5); text-decoration:none; color:var(--cream)}
.comms a:hover{background:rgba(95,196,192,.1)}
.comms b{font-family:var(--deco); letter-spacing:.2em; text-transform:uppercase; color:var(--teal); font-size:.8rem}
.comms span{font-family:var(--mono); font-size:.9rem}
.noscript{position:relative; z-index:3; max-width:640px; margin:40px auto; padding:16px; background:var(--navy)}

.enter{animation:enter .6s ease both}
@keyframes enter{from{opacity:0; transform:translateY(10px)}}
@media (prefers-reduced-motion: reduce){
  .enter{animation:none}
  #bob,.array,.chase,.nav,.beacon,.snav,.strobe,.win,.spin,.halo,.pulse{animation:none !important}
}
@media (max-width: 960px){
  .layout{grid-template-columns:1fr; padding:10px 14px 30px}
  .map-wrap{position:relative; top:0; height:auto; min-height:0}
  #station{height:auto; max-height:360px}
  .topbar{flex-wrap:wrap; padding:12px 14px; gap:10px}
  #tram{margin:0; width:100%}
  #tram a{flex:1; text-align:center; padding:8px 6px; letter-spacing:.12em; font-size:.68rem}
  .panel{padding:24px 18px 28px}
  .dir,.logs{grid-template-columns:1fr}
}

/* ---------- station life ---------- */
#bob{animation:bob 9s ease-in-out infinite; transform-box:view-box}
@keyframes bob{50%{transform:translateY(-3px)}}
.array{transform-box:fill-box; transform-origin:50% 100%; animation:tilt 14s ease-in-out infinite}
.array.b{transform-origin:50% 0%; animation-delay:-7s}
@keyframes tilt{50%{transform:rotate(3deg)}}
.chase{animation:chase 6s linear infinite; opacity:.75}
@keyframes chase{to{stroke-dashoffset:-62.83}}
.nav{animation:blink 2.6s steps(1) infinite}
.nav.red{fill:#ff6b5b} .nav.green{fill:#5dffa8; animation-delay:-1.3s}
@keyframes blink{0%{opacity:1}12%{opacity:.15}100%{opacity:.15}}
.beacon{fill:#fff; animation:strobe 3.2s linear infinite}
@keyframes strobe{0%,4%,10%,14%{opacity:1}2%,12%,16%,100%{opacity:.08}}
.mod .win{transition:opacity .6s}
.mod .win.dim{opacity:.25}

/* ---------- docking collar + shuttle ---------- */
#collar{opacity:0; transition:opacity .5s}
#collar.on{opacity:1}
.jaw{transform-box:fill-box; transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.jaw.up{transform:translateY(-7px)} .jaw.dn{transform:translateY(7px)}
#collar.locked .jaw{transform:none}
.guide circle{fill:#3a2a12; transition:fill .15s}
.guide circle.amber{fill:#ffc35a}
#collar.locked .guide circle{fill:#5dffa8}
.halo{opacity:0; transition:opacity .6s}
#collar.locked .halo{opacity:1; animation:halo 3.4s ease-in-out infinite}
@keyframes halo{50%{opacity:.45}}
.pulse{opacity:0; transform-box:fill-box; transform-origin:center}
.pulse.go{animation:pulse .9s ease-out}
@keyframes pulse{0%{opacity:.9; transform:scale(1)}100%{opacity:0; transform:scale(5)}}
.portlbl{font:600 10px var(--deco); letter-spacing:.24em; fill:var(--teal)}
#collar.locked .portlbl{fill:#5dffa8}
#shuttle{transform-box:view-box; transform-origin:0 0; transform:translate(800px,-100px); will-change:transform}
.spin{transform-box:fill-box; transform-origin:center; animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#shuttle .flame,#shuttle .rcs,#shuttle .beam{opacity:0}
.snav{animation:blink 1.4s steps(1) infinite}
.snav.red{fill:#ff6b5b} .snav.green{fill:#5dffa8; animation-delay:-.7s}
.strobe{fill:#fff; animation:strobe 2.2s linear infinite}
.foot{position:relative; z-index:2; text-align:center; color:var(--dim); font-size:.8rem; padding:6px 20px 28px}
.comms a span{overflow-wrap:anywhere; text-align:right}