:root{
  --void:#090B0F;
  --void-2:#0E1116;
  --grid:#19202A;
  --rule:#232C38;
  --bone:#EDEAE0;
  --dim:#77828F;
  --dimmer:#4A5560;
  --signal:#FF4D1C;
  --cool:#7C8BFF;

  --f-disp:'Big Shoulders Display','Big Shoulders','Archivo','Arial Narrow',Impact,sans-serif;
  --f-mono:'Martian Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --f-body:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body[data-mode="back"]{
  height:100%;background:var(--void);color:var(--bone);
  font-family:var(--f-body);overflow:hidden;touch-action:none;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}

#back .mono,.mono{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.disp{font-family:var(--f-disp);font-weight:700;line-height:.86;letter-spacing:.005em;text-transform:uppercase}

/* ══ stage ══════════════════════════════════════════════════════ */
#stage{position:fixed;inset:0;cursor:grab;background:var(--void)}
#stage.drag{cursor:grabbing}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
#world{position:absolute;top:0;left:0;width:0;height:0;transform-origin:0 0;will-change:transform}

/* ══ nodes ══════════════════════════════════════════════════════ */
.node{position:absolute;transform:translate(-50%,-50%);text-align:left}
.proj{
  width:300px;padding:16px 18px 18px;
  background:linear-gradient(180deg,rgba(20,25,33,.94),rgba(11,14,19,.96));
  border:1px solid var(--rule);
  transition:border-color .2s, transform .28s cubic-bezier(.2,.8,.2,1), background .2s;
  display:flex;flex-direction:column;gap:9px;cursor:pointer;
}
.proj::before{
  content:"";position:absolute;left:-1px;top:-1px;width:14px;height:14px;
  border-left:2px solid var(--signal);border-top:2px solid var(--signal);
  opacity:.55;transition:opacity .2s;
}
.proj:hover,.proj.on{border-color:var(--signal);background:linear-gradient(180deg,rgba(31,20,16,.96),rgba(14,11,10,.97))}
.proj:hover::before,.proj.on::before{opacity:1}
.proj:hover{transform:translate(-50%,-50%) scale(1.035)}
.p-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;color:var(--dim)}
.p-name{font-family:var(--f-disp);font-weight:700;font-size:38px;line-height:.82;letter-spacing:.006em;text-transform:uppercase;margin:0}
.p-role{color:var(--signal);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.35}
.p-meta{display:flex;gap:6px;align-items:center;color:var(--dim);border-top:1px solid var(--rule);padding-top:9px}
.p-bars{display:flex;gap:3px}
.p-bars i{width:9px;height:9px;background:var(--dimmer);display:block}
.p-bars i.hit{background:var(--cool)}
.proj.core{width:330px}
.proj.core .p-name{font-size:52px}

/* level of detail */
#world.far .proj{padding:12px 14px}
#world.far .p-role,#world.far .p-meta{display:none}
#world.far .p-name{font-size:44px}
#world.far .proj.core .p-name{font-size:60px}

/* pieces (image slots) */
.piece{
  width:150px;height:188px;border:1px solid var(--rule);overflow:hidden;
  cursor:pointer;transition:border-color .2s,transform .3s cubic-bezier(.2,.8,.2,1);
  background:var(--void-2);
}
.piece img{display:block;width:100%;height:calc(100% - 22px);object-fit:cover;filter:contrast(1.05)}
.piece figcaption{
  height:22px;display:flex;align-items:center;justify-content:space-between;
  padding:0 6px;border-top:1px solid var(--rule);color:var(--dim);
}
.piece:hover{border-color:var(--cool);transform:translate(-50%,-50%) scale(1.06)}

/* station labels */
.stn{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;user-select:none}
.stn b{
  display:block;font-family:var(--f-disp);font-weight:700;font-size:26px;line-height:.9;
  letter-spacing:.05em;text-transform:uppercase;color:var(--bone);transition:color .2s;
}
.stn span{display:block;color:var(--dimmer);margin-top:3px;transition:color .2s}
.stn:hover b,.stn.on b{color:var(--signal)}
.stn:hover span,.stn.on span{color:var(--dim)}

/* ══ HUD ════════════════════════════════════════════════════════ */
.hud{position:fixed;z-index:20;pointer-events:none}
.hud > *{pointer-events:auto}
.hud-tl{top:0;left:0;padding:18px 20px;display:flex;gap:14px;align-items:center}
.hud-tr{top:0;right:0;padding:18px 20px;display:flex;gap:8px;align-items:center}
.hud-bl{bottom:0;left:0;padding:16px 20px;display:flex;gap:16px;align-items:center;color:var(--dimmer)}
.hud-br{bottom:0;right:0;padding:16px 20px;display:flex;gap:8px;align-items:center}
.wordmark{display:flex;align-items:center;gap:9px;color:var(--bone);text-decoration:none}
.wordmark i{width:9px;height:9px;background:var(--signal);display:block;flex:none}
.wordmark b{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:.045em;text-transform:uppercase;line-height:1}
.wordmark s{color:var(--dim);text-decoration:none}
.ctl{
  border:1px solid var(--rule);padding:7px 11px;color:var(--dim);
  transition:border-color .18s,color .18s,background .18s;background:rgba(9,11,15,.72);
  backdrop-filter:blur(8px);
}
.ctl:hover{border-color:var(--bone);color:var(--bone)}
.ctl.hot{border-color:var(--signal);color:var(--signal)}
.ctl.solid{background:var(--signal);border-color:var(--signal);color:#0A0C10;font-weight:600}
.ctl.solid:hover{background:var(--bone);border-color:var(--bone);color:#0A0C10}
.read{display:flex;gap:5px;align-items:baseline}
.read u{text-decoration:none;color:var(--dim);font-variant-numeric:tabular-nums}
.hud-tl,.hud-tr{background:linear-gradient(180deg,rgba(9,11,15,.92) 45%,rgba(9,11,15,0))}
.hud-bl,.hud-br{background:linear-gradient(0deg,rgba(9,11,15,.92) 45%,rgba(9,11,15,0))}
@media(max-width:760px){
  .wordmark b{font-size:16px}
  .wordmark s{display:none}
  .hud-tl{padding:14px 14px 26px}
  .hud-tr{
    top:auto;bottom:0;left:0;right:0;padding:12px 12px 14px;gap:6px;
    background:linear-gradient(0deg,rgba(9,11,15,.96) 55%,rgba(9,11,15,0));
  }
  .hud-tr .ctl{flex:1;text-align:center;padding:11px 6px}
  .hud-bl{display:none}
  .hud-br{top:0;bottom:auto;right:0;padding:14px 14px 26px;background:none}
  .hud-br #btnIn,.hud-br #btnOut{display:none}
  #tourbar{bottom:auto;top:0}
}

/* ══ intro ══════════════════════════════════════════════════════ */
#intro{
  position:fixed;inset:0;z-index:40;background:var(--void);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,5vw,80px);gap:clamp(14px,2.2vh,26px);
  transition:opacity .75s ease,visibility .75s;
}
#intro.gone{opacity:0;visibility:hidden}
#intro h1{
  font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.4rem,min(12.5vw,16.5vh),12rem);line-height:.82;letter-spacing:.01em;margin:0;
  color:var(--bone);
}
#intro h1 em{font-style:normal;color:var(--signal)}
#intro .sub{max-width:56ch;color:var(--dim);font-size:clamp(.86rem,.35vw+.8rem,1.06rem);line-height:1.5;margin:0}
#intro .sub b{color:var(--bone);font-weight:600}
#intro .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#intro .ln{overflow:hidden;display:block}
#intro .ln > span{display:block;transform:translateY(102%);animation:up .95s cubic-bezier(.16,1,.3,1) forwards}
#intro .ln:nth-child(2)>span{animation-delay:.08s}
#intro .ln:nth-child(3)>span{animation-delay:.16s}
@keyframes up{to{transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(14px);animation:fu .8s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fu{to{opacity:1;transform:none}}

/* ══ detail panel ═══════════════════════════════════════════════ */
#panel{
  position:fixed;top:0;right:0;bottom:0;width:min(470px,92vw);z-index:35;
  background:var(--void-2);border-left:1px solid var(--rule);
  transform:translateX(101%);transition:transform .5s cubic-bezier(.2,.85,.2,1);
  display:flex;flex-direction:column;
}
#panel.open{transform:none}
.pn-head{padding:20px 22px 16px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.pn-close{position:absolute;top:16px;right:18px;color:var(--dim)}
.pn-close:hover{color:var(--signal)}
.pn-title{font-family:var(--f-disp);font-weight:700;font-size:clamp(2.4rem,6vw,3.6rem);line-height:.84;text-transform:uppercase;letter-spacing:.008em;margin:0;padding-right:36px}
.pn-role{color:var(--signal)}
.pn-body{padding:20px 22px 30px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
.pn-body p{margin:0;color:#C6CBD2;line-height:1.62;font-size:.95rem}
.pn-sec{display:flex;flex-direction:column;gap:9px}
.pn-sec > .mono{color:var(--dimmer)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--rule);padding:5px 8px;color:var(--dim)}
.chip.lit{border-color:var(--cool);color:var(--cool)}
.slot{border:1px dashed var(--dimmer);padding:13px 14px;color:var(--dimmer);display:flex;flex-direction:column;gap:4px}
.pnm{border-left:3px solid var(--signal);padding:2px 0 2px 12px;display:flex;flex-direction:column;gap:3px}
.pnm b{font-family:var(--f-disp);font-weight:700;font-size:2rem;line-height:.95;text-transform:uppercase;color:var(--bone);font-variant-numeric:tabular-nums}
.pnm span{color:var(--dim)}
.slot b{font-family:var(--f-disp);font-weight:700;font-size:1.5rem;text-transform:uppercase;color:var(--dimmer);line-height:1}
@media(max-width:720px){
  #panel{top:auto;left:0;width:100%;height:76vh;border-left:none;border-top:1px solid var(--rule);transform:translateY(101%)}
  #panel.open{transform:none}
}

/* ══ index view ═════════════════════════════════════════════════ */
#index{
  position:fixed;inset:0;z-index:38;background:var(--void);overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
  padding:76px clamp(20px,5vw,64px) 90px;
}
#index.open{opacity:1;visibility:visible}
.ix-h{font-family:var(--f-disp);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,7vw,5rem);line-height:.85;margin:0 0 6px}
.ix-d{color:var(--dim);max-width:60ch;margin:0 0 34px;line-height:1.6}
.ix-row{
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px;
  padding:20px 0;border-top:1px solid var(--rule);cursor:pointer;
}
@media(min-width:840px){.ix-row{grid-template-columns:14rem minmax(0,1fr) 12rem;gap:28px;align-items:baseline}}
.ix-row:hover .ix-n{color:var(--signal)}
.ix-n{font-family:var(--f-disp);font-weight:700;font-size:1.9rem;text-transform:uppercase;line-height:.9;transition:color .18s}
.ix-b{color:#AEB6C0;line-height:1.6;font-size:.93rem;margin:0}
.ix-s{display:flex;flex-wrap:wrap;gap:4px}
#ixClose{position:fixed;top:16px;right:18px;z-index:2}
.ix-foot{border-top:1px solid var(--rule);margin-top:8px;padding-top:26px;display:flex;flex-direction:column;gap:10px}
.ix-foot span{color:var(--dimmer)}
.ix-foot a{
  font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,2.6rem);color:var(--bone);text-decoration:none;
  border-bottom:3px solid var(--signal);align-self:flex-start;line-height:1.05;word-break:break-word;
}
.ix-foot a:hover{color:var(--signal)}

/* ══ tour progress ══════════════════════════════════════════════ */
#tourbar{position:fixed;left:0;right:0;bottom:0;height:2px;background:transparent;z-index:30}
#tourbar i{display:block;height:100%;width:0;background:var(--signal)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  #intro .ln > span{transform:none}
  .fade-up{opacity:1;transform:none}
}