:root{
  --ink:#e8eefb; --muted:#90a4c4; --line:rgba(120,160,220,.16); --line-s:rgba(130,175,235,.32);
  --orange:#ff6a1a; --orange-soft:#ffb27a;
  --glass:rgba(10,16,30,.82);
  --ease:cubic-bezier(.62,.04,.21,1);
  --comic:#1d1633;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;font-family:'Saira',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;color:var(--ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(160,190,255,.07) 1px, transparent 1.6px) 0 0/14px 14px,
    radial-gradient(1300px 900px at 50% 42%, #1c2c5c 0%, #111b3c 45%, #070b18 100%);
  background-color:#070b18;}
button{font-family:inherit;color:inherit;cursor:pointer}
kbd{font-family:'IBM Plex Mono',monospace}

/* ---- three.js canvas ---- */
#c{position:fixed;inset:0;z-index:1;display:block;cursor:grab;touch-action:none;width:100%;height:100%}
#c.grabbing{cursor:grabbing}
#c.hovering{cursor:pointer}

/* ---- pins ---- */
#pins{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.pin{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;will-change:transform,opacity;
  transition:opacity .25s;filter:drop-shadow(0 4px 8px rgba(5,10,25,.35))}
.pin .in{position:relative;transform:translate(-50%,-100%);transition:transform .16s var(--ease)}
.pin:hover .in{transform:translate(-50%,-100%) scale(1.06)}
.pin .body{display:flex;align-items:center;gap:8px;background:rgba(12,20,38,.78);
  border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);border-radius:999px;padding:4px 11px 4px 5px;
  white-space:nowrap;backdrop-filter:blur(8px)}
.pin .num{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--c);
  color:#0b1322;font:600 11px 'IBM Plex Mono',monospace;padding:0 4px}
.pin .tx{display:flex;flex-direction:column;line-height:1.05}
.pin .tx span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--c);text-transform:uppercase}
.pin .tx b{font-family:'Cinzel';font-size:12.5px;letter-spacing:.03em;max-height:0;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-height .22s var(--ease),max-width .22s var(--ease),opacity .2s var(--ease),margin .22s var(--ease)}
.pin:hover .tx b,.pin.sel .tx b,.pin.hov .tx b,.pin.open .tx b{max-height:20px;max-width:260px;opacity:1;margin-bottom:2px}
.pin .stem{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid rgba(12,20,38,.78)}
.pin.sel .body{background:var(--c);border-color:#fff}
.pin.sel .tx span,.pin.sel .tx b{color:#0b1322}
.pin.sel .num{background:#0b1322;color:var(--c)}
.pin.sel .stem{border-top-color:var(--c)}
.pin.enemy .body{border-style:dashed}
.pin.solo .tx b{display:none}
.pin.solo .tx span{font-size:10px}
.pin.small .body{padding:3px 5px}
.pin.small .tx{display:none}

/* ---- HUD ---- */
.hud{position:fixed;z-index:20}
.brand{top:22px;left:26px;display:flex;align-items:center;gap:14px;
  background:var(--glass);border:1px solid var(--line-s);border-radius:14px;padding:11px 18px 11px 14px;
  backdrop-filter:blur(10px)}
.brand .mk{display:flex;gap:4px}
.brand .mk i{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;
  border-left:13px solid var(--orange);filter:drop-shadow(0 0 5px rgba(255,106,26,.7))}
.brand .mk i:nth-child(1){opacity:.35}.brand .mk i:nth-child(2){opacity:.65;margin-left:-6px}.brand .mk i:nth-child(3){margin-left:-6px}
.brand b{font-family:'Cinzel';font-weight:600;font-size:19px;letter-spacing:.2em;display:block;line-height:1}
.brand span{font-family:'Saira Condensed';letter-spacing:.38em;font-size:9.5px;color:var(--muted);text-transform:uppercase}

.modes{top:22px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px;
  background:var(--glass);border:1px solid var(--line-s);border-radius:14px;backdrop-filter:blur(10px)}
.mbtn{background:none;border:1px solid transparent;border-radius:10px;padding:8px 14px;display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:'Saira Condensed';font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--muted);transition:.18s}
.mbtn kbd{font-size:10px;border:1px solid var(--line-s);border-radius:5px;padding:1px 5px;color:var(--muted)}
.mbtn:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.mbtn.on{color:#0a0e16;background:var(--orange);box-shadow:0 0 18px -4px rgba(255,106,26,.7)}
.mbtn.on kbd{border-color:rgba(10,14,22,.35);color:#0a0e16}

.ctrls{top:22px;right:26px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ctrl-row{display:flex;gap:8px}
.cbtn{width:44px;height:44px;border-radius:12px;background:var(--glass);border:1px solid var(--line-s);
  display:grid;place-items:center;backdrop-filter:blur(10px);transition:.18s}
.cbtn:hover{border-color:var(--orange);color:#fff;box-shadow:0 0 16px rgba(255,106,26,.2)}
.cbtn.lite{color:#6f86a3;border-color:var(--line)}
.cbtn svg{width:20px;height:20px}
.cbtn.wide{width:auto;height:48px;padding:0 20px;gap:10px;font-family:'Saira Condensed';font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:14px;white-space:nowrap;display:flex;align-items:center}
.cbtn.wide svg{width:20px;height:20px}

/* ---- dock: the route through the education ---- */
.dock{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;gap:12px;align-items:flex-end;background:rgba(10,16,30,.84);border:1px solid var(--line-s);
  padding:10px 16px;border-radius:16px;backdrop-filter:blur(12px);max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.sem-group{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.sem-lab{font-family:'IBM Plex Mono',monospace;letter-spacing:.2em;font-size:9px;color:var(--muted);text-transform:uppercase;padding-left:2px}
.sem-row{display:flex;gap:6px;align-items:center}
.dbtn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:6px 11px 6px 7px;transition:.2s var(--ease);min-width:0;white-space:nowrap}
.dbtn:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.dbtn.active{border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:0 0 20px -6px var(--c)}
.dbtn .num{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--c);width:20px;text-align:center}
.dbtn .l{text-align:left;line-height:1.05}
.dbtn .l b{font-family:'Cinzel';font-size:12px;display:block}
.dbtn .l span{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.sem-sep{width:14px;height:1px;align-self:center;margin-top:14px;flex:0 0 auto;
  background:linear-gradient(90deg,transparent,var(--line-s) 40%,var(--line-s) 60%,transparent)}

.hint{position:fixed;bottom:104px;left:50%;transform:translateX(-50%);z-index:20;
  font-family:'Saira Condensed';letter-spacing:.14em;font-size:12.5px;text-transform:uppercase;white-space:nowrap;
  color:#dfe8fa;background:rgba(10,16,30,.6);border:1px solid var(--line);padding:7px 16px;border-radius:999px;
  transition:opacity .5s;pointer-events:none}
.hint.gone{opacity:0}

/* ---- toast (ride-along) ---- */
.toast{position:fixed;left:50%;bottom:112px;z-index:22;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:14px;background:rgba(10,16,30,.9);border:1px solid var(--line-s);border-left:4px solid var(--c,#fff);
  border-radius:14px;padding:12px 14px 12px 16px;backdrop-filter:blur(10px);transition:.4s var(--ease);max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast .k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;color:var(--c);text-transform:uppercase}
.toast b{display:block;font-family:'Cinzel';font-size:16px;margin:2px 0}
.toast p{font-size:12.5px;color:var(--muted)}
.toast button{flex:0 0 auto;background:none;border:1px solid var(--c);color:var(--ink);border-radius:999px;padding:7px 14px;
  font-family:'Saira Condensed';letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.toast button:hover{background:var(--c);color:#0a0e16}

/* ---- detail panel ---- */
#panel{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);z-index:40;
  background:linear-gradient(180deg,#0c1426,#0a1020);border-left:1px solid var(--line-s);
  box-shadow:-30px 0 80px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .55s var(--ease);
  display:flex;flex-direction:column;overflow:hidden}
#panel.open{transform:translateX(0)}
.pacc{height:5px;background:var(--c,#fff);flex:0 0 auto}
.phead{padding:24px 28px 12px;position:relative}
.pclose{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);display:grid;place-items:center;transition:.18s}
.pclose:hover{background:rgba(255,255,255,.1);border-color:var(--c)}
.pclose svg{width:16px;height:16px}
.pblok{font-family:'Saira Condensed';letter-spacing:.3em;font-size:12px;text-transform:uppercase;color:var(--c)}
.ptitle{font-family:'Cinzel';font-size:27px;line-height:1.1;margin:5px 40px 4px 0}
.psem{font-size:12.5px;color:var(--muted);letter-spacing:.05em}
.pbody{padding:6px 28px 24px;overflow-y:auto;flex:1}
.plaque{background:var(--plaque,#fff);border-radius:14px;height:110px;display:grid;place-items:center;padding:16px;
  overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4);margin:8px 0 18px}
.plaque img{max-height:78px;max-width:100%;width:auto;object-fit:contain;display:block}
.plaque.tall{height:170px}.plaque.tall img{max-height:150px}
.tagline{font-family:'Cinzel';font-size:19px;line-height:1.3;color:#fff;margin:6px 0 10px}
.pbody p.lead{font-size:14.5px;line-height:1.6;color:#cdd9ef}
.pbody p.tip{margin-top:12px;font-size:13px;color:var(--c);display:flex;gap:8px;align-items:flex-start}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tags span{font-size:12px;letter-spacing:.03em;padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:#e6eefc}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.facts div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:10px 10px 9px}
.facts b{display:block;font-family:'Cinzel';font-size:15px;color:var(--c);white-space:nowrap}
.facts span{font-size:11px;color:var(--muted)}
.sh{font-family:'Saira Condensed';letter-spacing:.24em;font-size:11px;text-transform:uppercase;color:var(--muted);
  margin:22px 0 10px;display:flex;align-items:center;gap:9px}
.sh::before{content:"";width:7px;height:7px;background:var(--c);border-radius:2px;transform:rotate(45deg)}
.mats{display:flex;flex-direction:column;gap:9px}
.mat{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:12px 15px;transition:.18s}
.mat:hover{border-color:var(--c);background:rgba(255,255,255,.06);transform:translateX(3px)}
.mat b{font-size:13.5px;font-weight:500;display:block}
.mat .sub{font-size:11.5px;color:var(--muted)}
.mat .arr{margin-left:auto;color:var(--muted)}
.pnav{display:flex;gap:8px;padding:14px 28px 22px;border-top:1px solid var(--line);flex:0 0 auto}
.pnav button{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:12px;padding:9px 13px;transition:.18s;min-width:0}
.pnav button.next{align-items:flex-end;text-align:right}
.pnav button:hover{border-color:var(--c);background:rgba(255,255,255,.06)}
.pnav button span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.pnav button b{font-family:'Cinzel';font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pnav button[disabled]{visibility:hidden}
#scrim{position:fixed;inset:0;z-index:35;background:rgba(4,7,14,.25);opacity:0;pointer-events:none;transition:opacity .4s}
#scrim.show{opacity:1;pointer-events:auto}

/* ---- intro ---- */
#intro{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;
  background:radial-gradient(1200px 800px at 50% 30%,#11203a,#070b14);transition:opacity .9s,visibility .9s}
#intro.gone{opacity:0;visibility:hidden}
#introFx{position:absolute;inset:0;z-index:0;pointer-events:none}
#intro>div{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:540px;width:100%}
#intro .il{font-family:'Cinzel';font-size:clamp(28px,6vw,58px);letter-spacing:.16em;opacity:0;
  transform:translateY(18px);animation:rise 1s var(--ease) .15s forwards}
#intro .is{font-family:'Saira Condensed';letter-spacing:.48em;font-size:13px;color:var(--orange-soft);
  text-transform:uppercase;margin-top:14px;opacity:0;transform:translateY(18px);animation:rise 1s var(--ease) .5s forwards}
#intro .id{font-size:14px;color:var(--muted);margin:18px auto 0;max-width:450px;line-height:1.6;opacity:0;
  transform:translateY(18px);animation:rise 1s var(--ease) .75s forwards}
#intro .ib{margin-top:30px;opacity:0;transform:translateY(18px);animation:rise 1s var(--ease) 1s forwards}
#intro .enter{background:none;border:1px solid var(--orange);color:var(--orange-soft);padding:14px 36px;
  border-radius:999px;font-family:'Saira Condensed';letter-spacing:.26em;font-size:13px;text-transform:uppercase;transition:.25s}
#intro .enter:hover{background:var(--orange);color:#0a0e16}
#intro .enter.glow{animation:evPulse 2.6s ease-in-out infinite}
#intro .enter.glow:hover{animation:evCharge .55s ease-out forwards}
#intro .iload{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;opacity:0;transition:opacity .3s}
#intro .iload.show{opacity:1}
@keyframes evPulse{0%,100%{box-shadow:0 0 6px rgba(212,90,10,.25)}50%{box-shadow:0 0 22px 1px rgba(212,90,10,.55)}}
@keyframes evCharge{0%{box-shadow:0 0 12px rgba(212,90,10,.45)}100%{box-shadow:0 0 48px 7px rgba(212,90,10,.92)}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

@media (max-width:900px){
  .modes{top:auto;bottom:96px}
  .mbtn{padding:7px 10px;font-size:12px}
  .mbtn kbd{display:none}
  .hint{display:none}
  .toast{bottom:150px}
}
@media (max-width:680px){
  .brand{top:14px;left:12px;padding:8px 12px}.brand b{font-size:15px}.brand span{font-size:8px;letter-spacing:.3em}
  .ctrls{top:14px;right:12px}.cbtn{width:38px;height:38px}
  .cbtn.wide{height:40px;padding:0 12px;font-size:12px}
  .dock{gap:10px;padding:8px 10px;bottom:14px;left:16px;right:16px;transform:none;max-width:none}
  .dbtn{padding:6px 8px}.dbtn .l b{font-size:11px}
  .facts b{font-size:13px}
  .modes{bottom:88px}
  .mbtn{padding:7px 9px;font-size:11px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}