@font-face{font-family:Archivo;src:url(../assets/fonts/archivo-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:ArchivoBlack;src:url(../assets/fonts/archivo-black-latin.woff2) format("woff2");font-display:swap}

:root{
  --bg-cyan:#67d8d3;
  --bg-violet:#9d78ff;
  --bg-ivory:#ded7c4;
  --bg-ink:#030407;
  --bg-panel:rgba(6,8,12,.94);
  --bg-line:rgba(174,205,204,.17);
  --bg-active:#a489ff;
  --bg-active-rgb:164,137,255;
  --bg-signal:.04;
  --bg-noise:.06;
  --bg-bearing:.5;
  --bg-lock:0;
  --bg-x:50%;
  --bg-y:42%;
}

*{box-sizing:border-box}
html{background:var(--bg-ink);color-scheme:dark}
body{margin:0;overflow:hidden;background:var(--bg-ink);color:#e7e1d4;font-family:Archivo,Arial,sans-serif}
.after-dark-page button,.after-dark-page a{font:inherit}
.after-dark-page button:focus-visible,.after-dark-page a:focus-visible{outline:2px solid var(--bg-active);outline-offset:3px}

/* Threshold ---------------------------------------------------------------- */
.bg-gate{
  position:fixed;
  inset:0;
  z-index:2147483500;
  display:grid;
  align-items:center;
  overflow:hidden;
  background:#020307;
  transition:opacity .8s ease,visibility 0s linear .82s;
}
.bg-gate.is-open{opacity:0;visibility:hidden;pointer-events:none}
.bg-gate>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.78) contrast(1.08) brightness(.52);
  transform:scale(1.015);
}
.bg-gate-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,3,7,.97) 0,rgba(2,3,7,.85) 26%,rgba(2,3,7,.18) 66%,rgba(2,3,7,.66)),
    radial-gradient(circle at 70% 34%,rgba(86,63,147,.15),transparent 27%),
    linear-gradient(0deg,rgba(2,3,7,.9),transparent 55%);
}
.bg-gate-frame{position:absolute;inset:12px;border:1px solid rgba(192,222,219,.1);pointer-events:none}
.bg-gate-frame::before{
  content:"HS-BG / PRESSURE ENCLOSURE 07";
  position:absolute;
  left:12px;
  top:10px;
  color:rgba(189,212,210,.38);
  font-size:.3rem;
  font-weight:800;
  letter-spacing:.18em;
}
.bg-gate-frame::after{
  content:"PRIVATE FREQUENCY / LOCAL SYSTEM";
  position:absolute;
  right:12px;
  bottom:10px;
  color:rgba(174,145,230,.42);
  font-size:.28rem;
  font-weight:800;
  letter-spacing:.18em;
}
.bg-gate-frame i{position:absolute;width:44px;height:44px;border-color:rgba(165,127,244,.32);border-style:solid}
.bg-gate-frame i:nth-child(1){left:-1px;top:-1px;border-width:1px 0 0 1px}
.bg-gate-frame i:nth-child(2){right:-1px;top:-1px;border-width:1px 1px 0 0}
.bg-gate-frame i:nth-child(3){right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.bg-gate-frame i:nth-child(4){left:-1px;bottom:-1px;border-width:0 0 1px 1px}
.bg-gate-copy{
  position:relative;
  width:min(720px,calc(100vw - 70px));
  margin-left:clamp(28px,7vw,120px);
  padding:clamp(25px,4.5vw,62px);
  border-left:2px solid rgba(157,120,255,.66);
  background:linear-gradient(90deg,rgba(3,4,8,.88),rgba(3,4,8,.42) 75%,transparent);
  box-shadow:-34px 0 90px rgba(0,0,0,.38);
}
.bg-gate-copy>p:first-child{margin:0 0 16px;color:#9f86e5;font-size:.52rem;font-weight:800;letter-spacing:.24em}
.bg-gate h1{margin:0;font:clamp(3.1rem,8.8vw,8.6rem)/.76 ArchivoBlack,Arial,sans-serif;letter-spacing:-.07em;text-transform:uppercase}
.bg-gate h1 span{display:block;color:transparent;font-size:.34em;letter-spacing:.14em;-webkit-text-stroke:1px rgba(201,218,214,.58)}
.bg-gate-line{max-width:45ch;margin:25px 0 23px;color:#a9aaa5;font-size:clamp(.84rem,1.5vw,1.02rem);line-height:1.55}
.bg-gate-actions{display:flex;flex-wrap:wrap;gap:8px}
.bg-gate button{
  min-height:47px;
  padding:12px 16px;
  border:1px solid #755db1;
  background:linear-gradient(180deg,#211a35,#0d0a16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 7px 0 #050409;
  color:#dfd7f4;
  font-size:.57rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.bg-gate button:hover{border-color:#b298ff;color:#fff}
.bg-gate button+button{border-color:rgba(201,218,214,.22);background:#080a0d;color:#8f9997}
.bg-gate small{display:block;max-width:67ch;margin-top:18px;color:#6f7374;font-size:.43rem;line-height:1.6;letter-spacing:.09em;text-transform:uppercase}

/* Physical world ---------------------------------------------------------- */
.bg-experience{position:fixed;inset:0;overflow:hidden;background:#020407;opacity:0;transition:opacity .9s ease}
.bg-experience.is-live{opacity:1}
.bg-world{position:absolute;inset:0;z-index:1;overflow:hidden;background:#020407}
.bg-city{position:absolute;inset:0;width:100%;height:100%;display:block}
.bg-water-glow{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at var(--bg-x) 59%,rgba(var(--bg-active-rgb),calc(.035 + var(--bg-signal)*.08)),transparent 19%),
    linear-gradient(0deg,rgba(1,3,6,.7),transparent 51%);
}
.bg-cabin{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none}
.bg-cabin image{width:100%;height:100%}
.bg-glass,.bg-rain{position:absolute;inset:0;z-index:6;pointer-events:none}
.bg-glass{
  background:
    radial-gradient(circle at var(--bg-x) var(--bg-y),rgba(var(--bg-active-rgb),calc(var(--bg-signal)*.045)),transparent 8%,rgba(2,4,7,.08) 23%,rgba(1,2,4,.28) 78%),
    linear-gradient(112deg,transparent 0 24%,rgba(215,235,233,.018) 31%,transparent 38% 71%,rgba(188,161,234,.018) 76%,transparent 81%),
    radial-gradient(ellipse 74% 64% at 50% 42%,transparent 45%,rgba(0,0,0,.42) 91%);
}
.bg-rain{
  opacity:.26;
  background:
    repeating-linear-gradient(101deg,transparent 0 31px,rgba(199,222,226,.035) 32px,transparent 33px 76px),
    repeating-linear-gradient(176deg,transparent 0 4px,rgba(0,0,0,.1) 5px);
}
.bg-vector-scope{
  position:absolute;
  left:46.15%;
  top:62.2%;
  z-index:8;
  width:10.4%;
  aspect-ratio:1;
  border-radius:50%;
  opacity:.8;
  pointer-events:none;
}
.filter-cold{--bg-active:#69d9d5;--bg-active-rgb:105,217,213}
.filter-ghost{--bg-active:#ded7c4;--bg-active-rgb:222,215,196}
.bg-pulse-live .bg-glass::after{
  content:"";
  position:absolute;
  left:var(--bg-x);
  top:var(--bg-y);
  width:12px;
  height:12px;
  border:1px solid var(--bg-active);
  border-radius:50%;
  animation:bg-pulse-wave 1.15s ease-out;
  transform:translate(-50%,-50%);
}

/* Live interface ---------------------------------------------------------- */
.bg-header{
  position:fixed;
  inset:15px 15px auto;
  z-index:30;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:12px;
  color:#727b7b;
  font-size:.36rem;
  font-weight:800;
  letter-spacing:.15em;
  pointer-events:none;
}
.bg-header>a,.bg-header button{pointer-events:auto}
.bg-header>a{
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:1px solid rgba(158,124,232,.52);
  background:rgba(4,5,9,.86);
  color:#b295ef;
  font:1rem ArchivoBlack,Arial,sans-serif;
  text-decoration:none;
}
.bg-header>div{display:flex;align-items:center;gap:10px}
.bg-header>div b{display:flex;align-items:center;gap:6px;color:#77b9b4;font-size:.3rem}
.bg-header>div b::before{content:"";width:5px;height:5px;border-radius:50%;background:#64d5ce;box-shadow:0 0 8px #64d5ce}
.bg-header time{color:#a5b3b1;font-variant-numeric:tabular-nums}
.bg-header button{
  min-height:37px;
  padding:7px 10px;
  border:1px solid rgba(197,216,213,.15);
  background:rgba(4,6,9,.78);
  color:#7d8987;
  font-size:.35rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.bg-mission{
  position:fixed;
  left:50%;
  top:20%;
  z-index:14;
  width:min(630px,calc(100vw - 390px));
  text-align:center;
  text-shadow:0 2px 24px #000;
  transform:translateX(-50%);
  pointer-events:none;
}
.bg-mission p{margin:0 0 8px;color:var(--bg-active);font-size:.38rem;font-weight:800;letter-spacing:.2em}
.bg-mission h2{max-width:25ch;margin:0 auto;color:#d5d6d0;font:clamp(1rem,2.05vw,2rem)/1.08 ArchivoBlack,Arial,sans-serif;letter-spacing:-.025em}
.bg-mission>span{display:block;margin-top:8px;color:#71817f;font-size:.31rem;font-weight:800;letter-spacing:.14em}
.bg-mission-progress{width:150px;height:2px;margin:13px auto 0;background:rgba(190,213,210,.11)}
.bg-mission-progress i{display:block;width:calc(var(--bg-lock)*100%);height:100%;background:var(--bg-active);box-shadow:0 0 9px var(--bg-active);transition:width .08s linear}

.bg-flight-bus,.bg-spectrum,.bg-channels,.bg-map{
  position:fixed;
  z-index:24;
  border:1px solid var(--bg-line);
  background:linear-gradient(145deg,rgba(7,9,13,.95),rgba(2,3,6,.94));
  box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 0 0 2px rgba(1,2,4,.7);
}
.bg-flight-bus{left:16px;bottom:112px;width:262px;padding:8px}
.bg-flight-bus>header,.bg-spectrum>header,.bg-channels>header,.bg-map>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 2px 7px;
  border-bottom:1px solid rgba(185,210,207,.08);
  color:#687574;
  font-size:.25rem;
  font-weight:800;
  letter-spacing:.13em;
}
.bg-flight-bus>header b{display:flex;align-items:center;gap:5px;color:#62b6b1;font-size:.23rem}
.bg-flight-bus>header i{width:4px;height:4px;border-radius:50%;background:#64d6ce;box-shadow:0 0 7px #64d6ce}
.bg-dial-bank{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px 1px}
.bg-dial{
  --dial:0;
  position:relative;
  display:grid;
  place-content:center;
  justify-items:center;
  aspect-ratio:1;
  border:1px solid #34413f;
  border-radius:50%;
  background:radial-gradient(circle at 50% 56%,#0e1516 0 42%,#020304 44% 58%,#26302e 59% 62%,#040506 63%);
  box-shadow:inset 0 0 0 2px #020304,0 6px 13px rgba(0,0,0,.6);
}
.bg-dial::before{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:repeating-conic-gradient(from -122deg,rgba(207,220,211,.6) 0 .8deg,transparent 1deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 0 74%,#000 75%);
  mask:radial-gradient(circle,transparent 0 74%,#000 75%);
  opacity:.52;
}
.bg-dial>i{
  position:absolute;
  left:50%;
  bottom:49%;
  z-index:2;
  width:1px;
  height:31%;
  background:linear-gradient(#ece4cf,var(--bg-active) 72%);
  box-shadow:0 0 5px var(--bg-active);
  transform:translateX(-50%) rotate(calc(-122deg + var(--dial)*244deg));
  transform-origin:50% 100%;
}
.bg-dial>b{position:relative;z-index:3;margin-top:23%;color:#d7d6c9;font-size:.49rem;letter-spacing:.03em}
.bg-dial>small{position:absolute;left:50%;bottom:12%;z-index:3;color:#66716e;font-size:.17rem;font-weight:800;letter-spacing:.08em;transform:translateX(-50%)}
.bg-flight-bus dl{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;background:rgba(190,214,211,.06)}
.bg-flight-bus dl div{min-width:0;padding:5px 6px;background:#05070a}
.bg-flight-bus dt{color:#5e6967;font-size:.2rem;font-weight:800;letter-spacing:.08em}
.bg-flight-bus dd{margin:2px 0 0;color:#bdc9c6;font-size:.31rem;font-weight:800;letter-spacing:.04em}

.bg-spectrum{right:16px;bottom:112px;width:255px;padding:8px}
.bg-spectrum>header b{color:var(--bg-active);font-size:.25rem}
.bg-spectrum-bars{display:flex;align-items:flex-end;gap:3px;height:74px;padding:8px 3px 4px;background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(190,214,211,.035) 10px)}
.bg-spectrum-bars i{display:block;flex:1;height:8%;background:linear-gradient(var(--bg-active),rgba(var(--bg-active-rgb),.25));box-shadow:0 0 4px rgba(var(--bg-active-rgb),.28);transition:height .09s linear}
.bg-spectrum footer{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:5px 0 0;background:rgba(190,214,211,.06)}
.bg-spectrum footer span{min-width:0;padding:5px;background:#05070a;color:#63706e;font-size:.19rem;font-weight:800;letter-spacing:.07em}
.bg-spectrum footer b{display:block;margin-top:2px;overflow:hidden;color:#bcc8c5;font-size:.25rem;text-overflow:ellipsis;white-space:nowrap}

.bg-channels{right:16px;top:68px;width:225px;padding:8px;transform:translateX(calc(100% + 30px));transition:transform .45s cubic-bezier(.2,.72,.2,1)}
.bg-channels.has-unlock{transform:none}
.bg-channels>header b{color:var(--bg-active);font-size:.25rem}
.bg-channels>div{display:grid;gap:3px;padding-top:6px}
.bg-channels a{display:grid;grid-template-columns:27px 1fr;gap:1px 8px;align-items:center;padding:7px;border:1px solid rgba(191,213,210,.08);background:#05070a;color:#66706f;text-decoration:none;pointer-events:none}
.bg-channels a>span{grid-row:1/3;display:grid;place-items:center;width:25px;height:25px;border:1px solid #303b3a;color:#5c6866;font-size:.28rem;font-weight:800}
.bg-channels a>b{font-size:.34rem;letter-spacing:.07em}
.bg-channels a>small{font-size:.22rem;font-weight:800;letter-spacing:.09em}
.bg-channels a.is-unlocked{border-color:rgba(var(--bg-active-rgb),.36);color:#d8ded9;pointer-events:auto}
.bg-channels a.is-unlocked>span{border-color:var(--bg-active);color:var(--bg-active);box-shadow:0 0 10px rgba(var(--bg-active-rgb),.12)}
.bg-channels a.is-unlocked>small{color:var(--bg-active)}

.bg-controls{
  position:fixed;
  left:50%;
  bottom:17px;
  z-index:28;
  display:grid;
  grid-template-columns:minmax(190px,1.55fr) repeat(3,minmax(105px,1fr));
  gap:5px;
  width:min(760px,calc(100vw - 570px));
  padding:6px;
  border:1px solid rgba(190,214,211,.13);
  background:rgba(4,6,9,.94);
  box-shadow:0 22px 70px rgba(0,0,0,.68),inset 0 0 0 2px rgba(1,2,4,.75);
}
.bg-control,.bg-scan{
  position:relative;
  min-height:53px;
  padding:8px 10px;
  border:1px solid rgba(190,214,211,.14);
  background:linear-gradient(180deg,#0b0e13,#050609);
  color:#788482;
  text-align:left;
  cursor:pointer;
}
.bg-control span,.bg-scan span{display:block;color:#687472;font-size:.28rem;font-weight:800;letter-spacing:.12em}
.bg-control b,.bg-scan b{display:block;margin-top:4px;color:#c3cbc7;font-size:.4rem;letter-spacing:.08em}
.bg-control:hover,.bg-scan:hover{border-color:rgba(var(--bg-active-rgb),.55)}
.bg-scan{padding-left:50px;border-color:rgba(var(--bg-active-rgb),.44);background:linear-gradient(110deg,rgba(var(--bg-active-rgb),.13),#050609)}
.bg-scan i{
  position:absolute;
  left:12px;
  top:50%;
  width:27px;
  height:27px;
  border:2px solid rgba(var(--bg-active-rgb),.6);
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--bg-active-rgb),.25),#050608 63%);
  box-shadow:0 0 0 4px #020304;
  transform:translateY(-50%);
}
.bg-scanning .bg-scan{border-color:var(--bg-active);box-shadow:inset 0 0 23px rgba(var(--bg-active-rgb),.15)}
.bg-scanning .bg-scan i{background:var(--bg-active);box-shadow:0 0 18px var(--bg-active),0 0 0 4px rgba(var(--bg-active-rgb),.2)}
.bg-scanning .bg-scan span{color:var(--bg-active)}
.bg-instruction{position:fixed;left:50%;bottom:84px;z-index:19;margin:0;color:#555f5e;font-size:.3rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:translateX(-50%);white-space:nowrap}
.bg-contact-flash{
  position:fixed;
  left:50%;
  top:43%;
  z-index:32;
  display:grid;
  justify-items:center;
  gap:5px;
  min-width:240px;
  padding:13px 20px;
  border:1px solid var(--bg-active);
  background:rgba(3,5,8,.9);
  box-shadow:0 0 44px rgba(var(--bg-active-rgb),.22);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-50%) scale(.88);
  pointer-events:none;
}
.bg-contact-flash span{color:var(--bg-active);font-size:.3rem;font-weight:800;letter-spacing:.18em}
.bg-contact-flash b{color:#e1e0d6;font-size:.68rem;letter-spacing:.08em}
.bg-lock-flash .bg-contact-flash{visibility:visible;animation:bg-contact 1.25s ease both}

/* Shared-site controls stay available without covering the capsule deck. */
.after-dark-page .thermal-secret-signal,
.after-dark-page .thermal-rift,
.after-dark-page .thermal-headlight-control,
.after-dark-page .thermal-console,
.after-dark-page .thermal-passenger-dock,
.after-dark-page .thermal-secret-chamber{display:none!important}
.after-dark-page>.thermal-device-bay{top:54%;opacity:.7}
.after-dark-page>.thermal-device-bay .thermal-device-toggle{width:102px}
.after-dark-page>.thermal-device-bay:hover,
.after-dark-page>.thermal-device-bay.is-open{opacity:1}

@keyframes bg-pulse-wave{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(55)}
}
@keyframes bg-contact{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}
  16%,76%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}
}

@media(max-width:1050px){
  .bg-mission{width:min(560px,calc(100vw - 270px))}
  .bg-flight-bus{width:225px}
  .bg-spectrum{width:215px}
  .bg-controls{width:min(620px,calc(100vw - 470px));grid-template-columns:minmax(165px,1.5fr) repeat(3,minmax(88px,1fr))}
}

@media(max-width:760px){
  .bg-gate>img{object-position:center;filter:saturate(.74) contrast(1.08) brightness(.42)}
  .bg-gate-shade{background:linear-gradient(0deg,rgba(2,3,7,.98) 0,rgba(2,3,7,.75) 58%,rgba(2,3,7,.28)),radial-gradient(circle at 50% 22%,transparent,rgba(2,3,7,.7) 70%)}
  .bg-gate-copy{align-self:end;width:calc(100vw - 24px);margin:0 12px max(18px,env(safe-area-inset-bottom));padding:23px 20px;border-left:1px solid rgba(157,120,255,.64);background:rgba(3,4,8,.82)}
  .bg-gate h1{font-size:clamp(2.9rem,17vw,5.5rem)}
  .bg-gate-line{margin:17px 0;font-size:.78rem}
  .bg-gate-actions{display:grid;grid-template-columns:1fr}
  .bg-gate button{width:100%;min-height:43px}
  .bg-gate small{font-size:.37rem}
  .bg-gate-frame{inset:5px}.bg-gate-frame::before,.bg-gate-frame::after{display:none}

  .bg-cabin{min-width:100%;min-height:100%}
  .bg-vector-scope{display:none}
  .bg-header{inset:9px 9px auto;grid-template-columns:auto 1fr;gap:8px}
  .bg-header>div span,.bg-header time,.bg-header button{display:none}
  .bg-header>div b{font-size:.26rem}
  .bg-header>a{width:34px;height:34px;font-size:.8rem}
  .bg-mission{top:21%;width:calc(100vw - 34px)}
  .bg-mission p{font-size:.31rem}
  .bg-mission h2{font-size:clamp(1rem,5.6vw,1.55rem);max-width:23ch}
  .bg-mission>span{font-size:.27rem}
  .bg-mission-progress{width:110px;margin-top:9px}

  .bg-flight-bus{left:7px;right:7px;bottom:82px;width:auto;padding:5px}
  .bg-flight-bus>header,.bg-dial-bank{display:none}
  .bg-flight-bus dl{grid-template-columns:repeat(4,1fr)}
  .bg-flight-bus dl div{padding:5px 4px}
  .bg-flight-bus dt{font-size:.16rem}
  .bg-flight-bus dd{font-size:.25rem}
  .bg-spectrum{display:none}

  .bg-channels{right:7px;top:51px;width:164px;padding:5px}
  .bg-channels>header{font-size:.19rem}
  .bg-channels>div{gap:2px}
  .bg-channels a{grid-template-columns:21px 1fr;padding:4px;gap:1px 5px}
  .bg-channels a>span{width:19px;height:19px;font-size:.22rem}
  .bg-channels a>b{font-size:.25rem}
  .bg-channels a>small{font-size:.18rem}

  .bg-controls{left:7px;right:7px;bottom:max(7px,env(safe-area-inset-bottom));grid-template-columns:1.42fr repeat(3,1fr);gap:3px;width:auto;padding:4px;transform:none}
  .bg-control,.bg-scan{min-height:61px;padding:6px;text-align:center}
  .bg-scan{padding-left:6px}
  .bg-scan i{left:50%;top:7px;width:18px;height:18px;transform:translateX(-50%)}
  .bg-control span,.bg-scan span{margin-top:23px;font-size:.19rem;letter-spacing:.06em}
  .bg-control b,.bg-scan b{font-size:.25rem;letter-spacing:.04em}
  .bg-control span{margin-top:0}
  .bg-control{display:grid;align-content:center}
  .bg-instruction{display:none}
  .bg-contact-flash{top:44%;min-width:210px;padding:11px}
  .after-dark-page>.thermal-device-bay{top:76px;opacity:.55}
  .after-dark-page>.thermal-device-bay .thermal-device-toggle{width:82px}
}

@media(max-width:390px){
  .bg-mission{top:24%}
  .bg-mission h2{font-size:1rem}
  .bg-mission>span{display:none}
  .bg-channels{width:142px}
  .bg-channels a>b{font-size:.22rem}
  .bg-control b,.bg-scan b{font-size:.22rem}
}

@media(max-height:620px) and (max-width:760px){
  .bg-mission{top:18%}
  .bg-mission h2{font-size:.9rem}
  .bg-mission>span{display:none}
  .bg-channels{display:none}
  .bg-flight-bus{bottom:76px}
  .bg-controls{min-height:56px}
}

@media(prefers-reduced-motion:reduce){
  .bg-gate,.bg-experience,.bg-channels,.bg-dial>i,.bg-spectrum-bars i,.bg-mission-progress i{transition:none}
  .bg-pulse-live .bg-glass::after,.bg-lock-flash .bg-contact-flash{animation:none}
  .bg-lock-flash .bg-contact-flash{visibility:visible;opacity:1}
}

@media print{.bg-gate,.bg-experience{display:none}}

.bg-map{left:16px;top:68px;width:206px;padding:8px}
.bg-map canvas{display:block;width:100%;height:auto;margin:7px 0 5px;background:radial-gradient(circle at 50% 50%,rgba(12,20,26,.9),rgba(2,4,7,.96));border:1px solid rgba(185,210,207,.09)}
.bg-map>footer{display:flex;justify-content:space-between;gap:8px;padding:5px 2px 1px;border-top:1px solid rgba(185,210,207,.08);color:#687574;font-size:.25rem;font-weight:800;letter-spacing:.1em}
.bg-map>footer b{color:#b7c9c6}
.bg-thrust[aria-pressed=true]{border-color:rgba(157,120,255,.75);box-shadow:0 0 24px rgba(157,120,255,.2)}
@media(max-width:1050px){.bg-map{width:172px}}
@media(max-width:760px){
  .bg-map{left:auto;right:8px;top:56px;width:112px;padding:5px}
  .bg-map>footer{display:none}
  .bg-controls{grid-template-columns:repeat(2,1fr)}
}

/* flight briefing */
.bg-briefing{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 40%,rgba(4,6,12,.82),rgba(2,3,6,.95));backdrop-filter:blur(3px)}
.bg-briefing.is-open{display:flex}
.bg-briefing-card{width:min(760px,100%);max-height:92svh;overflow-y:auto;padding:clamp(20px,3.4vw,34px);border:1px solid rgba(157,120,255,.32);background:linear-gradient(150deg,rgba(9,10,18,.98),rgba(3,4,8,.99));box-shadow:0 40px 110px rgba(0,0,0,.7),inset 0 0 0 2px rgba(1,2,4,.8);clip-path:polygon(0 0,97% 0,100% 6%,100% 100%,3% 100%,0 94%)}
.bg-briefing-eyebrow{margin:0 0 12px;color:#9d78ff;font-size:.52rem;font-weight:800;letter-spacing:.28em}
.bg-briefing h2{margin:0 0 12px;font-family:ArchivoBlack,Archivo,sans-serif;font-size:clamp(1.15rem,2.8vw,1.85rem);line-height:1.08;letter-spacing:-.02em;color:#eef0f7}
.bg-briefing-lede{margin:0 0 20px;max-width:62ch;color:#9aa4b4;font-size:.8rem;line-height:1.62}
.bg-briefing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:18px}
.bg-briefing-grid section{padding:14px 16px;border:1px solid rgba(185,210,207,.1);background:rgba(6,8,13,.8)}
.bg-briefing-grid h3{margin:0 0 10px;color:#7f8b9b;font-size:.5rem;font-weight:800;letter-spacing:.24em}
.bg-briefing-grid dl{display:grid;gap:7px;margin:0}
.bg-briefing-grid dl div{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:baseline}
.bg-briefing-grid dt{color:#c9b6ff;font-size:.55rem;font-weight:800;letter-spacing:.12em}
.bg-briefing-grid dd{margin:0;color:#9aa4b4;font-size:.68rem;line-height:1.45}
.bg-briefing-rule{display:grid;gap:7px;padding:14px 16px;margin-bottom:18px;border-left:2px solid rgba(157,120,255,.5);background:rgba(15,12,26,.7)}
.bg-briefing-rule b{color:#e4e7f0;font-size:.66rem;letter-spacing:.06em}
.bg-briefing-rule span{color:#98a1b2;font-size:.66rem;line-height:1.6}
.bg-briefing-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bg-briefing-actions button{padding:14px 26px;border:1px solid rgba(157,120,255,.55);background:linear-gradient(90deg,#231846,#0b0810);color:#e7e1ff;font-family:inherit;font-size:.6rem;font-weight:800;letter-spacing:.22em;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.bg-briefing-actions button:hover{border-color:#9d78ff;box-shadow:0 0 28px rgba(157,120,255,.25)}
.bg-briefing-actions label{display:flex;align-items:center;gap:8px;color:#7f8b9b;font-size:.6rem;letter-spacing:.1em;cursor:pointer}
#bg-help{min-width:30px;padding:5px 9px;border:1px solid rgba(185,210,207,.2);background:rgba(8,10,16,.8);color:#b7c9c6;font-family:inherit;font-size:.62rem;font-weight:800;cursor:pointer}
#bg-help:hover{border-color:rgba(157,120,255,.6);color:#e7e1ff}
@media(max-width:760px){
  .bg-briefing-card{clip-path:none}
  .bg-briefing-grid dl div{grid-template-columns:64px 1fr}
}