/* ============================================================
   PANEL: HOME — minimal hero over Earth
============================================================ */
.home{align-items:center}
.home .panel-shell{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.2rem;max-width:780px;
}

.home-meta{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;
  font-family:var(--f-mono);font-size:.62rem;
  color:var(--t-mute);letter-spacing:.04em;
}
.home-meta .badge{
  display:inline-flex;align-items:center;gap:.36rem;
  padding:.3rem .7rem;
  border:1px solid var(--line-2);border-radius:99px;
  background:rgba(15,18,26,.72);
  backdrop-filter:blur(8px);
  text-transform:uppercase;letter-spacing:.14em;font-size:.58rem;font-weight:600;
}
.home-meta .badge.ok::before{
  content:"";width:.36rem;height:.36rem;border-radius:50%;background:var(--lime);
  box-shadow:0 0 6px var(--lime-glow);
  animation:pulse 2.4s ease-in-out infinite;
}
.home-meta .powered{
  display:inline-flex;align-items:center;gap:.32rem;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mute);
  padding:.3rem .7rem;
  border:1px solid var(--line-2);border-radius:99px;
  background:rgba(15,18,26,.72);
  backdrop-filter:blur(8px);
}
.home-meta .powered b{color:var(--indigo);font-weight:700;letter-spacing:.06em;text-transform:none;font-size:.66rem}

.home h1{
  font-weight:700;
  font-size:clamp(2.4rem, 6vw, 5.2rem);
  line-height:.96;letter-spacing:-.04em;
  margin:0;color:var(--t);
  text-shadow:0 2px 30px rgba(0,0,0,.55);
  text-wrap:balance;
}
.home h1 .em{
  background:linear-gradient(120deg, var(--lime) 0%, #FFE066 50%, var(--indigo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.home h1 .soft{color:var(--t-soft);font-weight:300;letter-spacing:-.03em;display:block;margin-top:.15em}

.home-lede{
  font-size:clamp(1rem, 1.2vw, 1.18rem);color:var(--t-soft);max-width:54ch;line-height:1.55;margin:.2rem auto 0;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  text-wrap:pretty;
}

.home-cta-row{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:center;margin-top:.4rem}
.home-cta-row .btn{padding:.7rem 1.1rem;font-size:.84rem}
.home-cta-row .stamp{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-mute);margin-left:.3rem;
}

/* compact orbit-stat strip for hero */
.home-orbits{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:.5rem;
  width:100%;max-width:560px;margin-top:.8rem;
}
.orbit{
  background:rgba(15,18,26,.6);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.7rem .8rem;text-align:left;
  display:flex;flex-direction:column;gap:.2rem;
}
.orbit .v{font-weight:700;font-size:1.4rem;letter-spacing:-.03em;line-height:1;color:var(--t)}
.orbit .v small{font-size:.6rem;color:var(--t-mute);font-weight:500;margin-left:.18rem}
.orbit .v.lime{color:var(--lime)}
.orbit .l{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t-mute);line-height:1.4}

@media(max-width:540px){
  .home-orbits{grid-template-columns:1fr;max-width:320px}
}

/* ============================================================
   PANEL: BRAIN
============================================================ */
.brain .panel-shell{
  display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.5rem,3vw,2.4rem);
  align-items:center;
}
@media(max-width:1080px){.brain .panel-shell{grid-template-columns:1fr;gap:1.2rem}}

.brain-left{display:flex;flex-direction:column;gap:1rem}

.brain-pillars{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:.55rem;
  margin-top:.4rem;
}
.pillar{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.7rem .85rem;display:flex;flex-direction:column;gap:.25rem;
  transition:border-color .25s var(--e), background .25s var(--e), transform .25s var(--e);
}
.pillar:hover{border-color:var(--line-2);background:var(--bg-2);transform:translateY(-2px)}
.pillar .pi{
  width:1.5rem;height:1.5rem;border-radius:6px;
  display:grid;place-items:center;
  background:var(--lime-soft);color:var(--lime);
  border:1px solid rgba(197,240,43,.32);
  margin-bottom:.15rem;
}
.pillar .pi svg{width:13px;height:13px}
.pillar:nth-child(2) .pi{background:var(--indigo-soft);color:var(--indigo);border-color:rgba(129,140,248,.32)}
.pillar:nth-child(3) .pi{background:var(--cyan-soft);color:var(--cyan);border-color:rgba(103,232,249,.32)}
.pillar:nth-child(4) .pi{background:rgba(255,179,71,.12);color:var(--warn);border-color:rgba(255,179,71,.32)}
.pillar h4{font-weight:600;font-size:.88rem;letter-spacing:-.01em;margin:0;line-height:1.2}
.pillar p{margin:0;font-size:.74rem;color:var(--t-soft);line-height:1.4}

/* brain visual — animated svg */
.brain-right{
  position:relative;
  aspect-ratio:1.1 / 1;
  max-height:clamp(380px, 64vh, 620px);
  width:100%;max-width:680px;
  margin:0 auto;
}
.brain-svg{width:100%;height:100%;overflow:visible}
.brain-svg .link{stroke:var(--line-2);stroke-width:1.4;fill:none;stroke-dasharray:5 5;animation:dashflow 6s linear infinite}
.brain-svg .link.lime{stroke:rgba(197,240,43,.6);animation-duration:4s}
.brain-svg .link.ig{stroke:rgba(129,140,248,.6);animation-duration:5s}
.brain-svg .link.cy{stroke:rgba(103,232,249,.55);animation-duration:7s}
@keyframes dashflow{to{stroke-dashoffset:-40}}
.brain-svg .node{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1.4}
.brain-svg .node.lime{fill:var(--bg);stroke:var(--lime);stroke-width:2;filter:drop-shadow(0 0 12px var(--lime-glow))}
.brain-svg .node.ig{stroke:var(--indigo);stroke-width:1.6;fill:rgba(129,140,248,.10)}
.brain-svg .node.cy{stroke:var(--cyan);stroke-width:1.6;fill:rgba(103,232,249,.10)}
.brain-svg .core-pulse{fill:none;stroke:var(--lime);stroke-width:1.2;opacity:.6;animation:corepulse 2.4s ease-out infinite}
@keyframes corepulse{0%{r:24;opacity:.75}100%{r:88;opacity:0}}
.brain-svg text{font-family:var(--f-mono);font-size:11px;fill:var(--t-soft);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.brain-svg text.label-core{fill:var(--lime);font-weight:700;font-size:10px;letter-spacing:.1em}

/* ============================================================
   PANEL: SYSTEM (3 layers)
============================================================ */
.system .panel-shell{align-items:flex-start}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:980px){.layers{grid-template-columns:1fr;gap:.8rem}}

.lyr{
  background:linear-gradient(180deg, var(--bg-elev), var(--bg-1));
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.2rem;display:flex;flex-direction:column;
  transition:border-color .25s var(--e), transform .25s var(--e);
}
.lyr:hover{border-color:var(--line-2);transform:translateY(-2px)}
.lyr.l-core{border-top:3px solid var(--lime)}
.lyr.l-connect{border-top:3px solid var(--indigo)}
.lyr.l-cast{border-top:3px solid var(--cyan)}
.lyr-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.lyr-head .num{font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.16em;padding:.24rem .5rem;border-radius:5px}
.l-core .lyr-head .num{background:var(--lime-soft);color:var(--lime);border:1px solid rgba(197,240,43,.4)}
.l-connect .lyr-head .num{background:var(--indigo-soft);color:var(--indigo);border:1px solid rgba(129,140,248,.4)}
.l-cast .lyr-head .num{background:var(--cyan-soft);color:var(--cyan);border:1px solid rgba(103,232,249,.4)}
.lyr-head .name{font-family:var(--f-mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-soft)}

.lyr h3{font-weight:700;font-size:1.1rem;line-height:1.15;letter-spacing:-.02em;margin:0 0 .45rem;color:var(--t)}
.lyr h3 small{display:block;font-weight:400;color:var(--t-soft);font-size:.78rem;letter-spacing:-.005em;margin-top:.22rem}
.lyr p{margin:0 0 .8rem;color:var(--t-soft);font-size:.8rem;line-height:1.55;flex:1}
.lyr ul{border-top:1px solid var(--line);padding-top:.65rem}
.lyr ul li{display:grid;grid-template-columns:1rem 1fr;gap:.45rem;padding:.3rem 0;font-size:.76rem;color:var(--t-soft);line-height:1.4}
.lyr ul li::before{content:"";width:.32rem;height:.32rem;border-radius:50%;background:currentColor;margin-top:.45rem}
.lyr.l-core ul li::before{background:var(--lime)}
.lyr.l-connect ul li::before{background:var(--indigo)}
.lyr.l-cast ul li::before{background:var(--cyan)}

/* ============================================================
   PANEL: MODULES (grid)
============================================================ */
.modules .panel-shell{align-items:flex-start}
.mod-grid{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:.6rem;
}
@media(max-width:1080px){.mod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.mod-grid{grid-template-columns:repeat(2,1fr)}}

.mod{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1rem .9rem;display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .25s var(--e), background .25s var(--e), transform .25s var(--e);
  position:relative;overflow:hidden;
}
.mod:hover{border-color:var(--line-2);background:var(--bg-2);transform:translateY(-2px)}
.mod .mi{
  width:1.95rem;height:1.95rem;border-radius:7px;
  display:grid;place-items:center;
  background:var(--lime-soft);color:var(--lime);
  border:1px solid rgba(197,240,43,.32);
}
.mod .mi svg{width:16px;height:16px}
.mod.ig .mi{background:var(--indigo-soft);color:var(--indigo);border-color:rgba(129,140,248,.32)}
.mod.cy .mi{background:var(--cyan-soft);color:var(--cyan);border-color:rgba(103,232,249,.32)}
.mod.am .mi{background:rgba(255,179,71,.12);color:var(--warn);border-color:rgba(255,179,71,.32)}
.mod h5{margin:0;font-weight:600;font-size:.84rem;letter-spacing:-.01em;line-height:1.2}
.mod p{margin:0;font-size:.7rem;color:var(--t-mute);line-height:1.4}

/* ============================================================
   PANEL: ARCHITECTURE
============================================================ */
.arch .panel-shell{align-items:flex-start}
.arch-grid{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(120px, auto);gap:var(--gap);
}
@media(max-width:1080px){.arch-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.arch-grid{grid-template-columns:repeat(2,1fr)}}

.arch-card{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);
  padding:1.05rem 1rem;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:.55rem;
  transition:border-color .25s var(--e), background .25s var(--e), transform .25s var(--e);
}
.arch-card:hover{border-color:var(--line-2);background:var(--bg-2);transform:translateY(-2px)}
.arch-card .num{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;color:var(--t-mute);font-weight:600}
.arch-card .num strong{color:var(--lime)}
.arch-card h4{font-weight:600;font-size:.92rem;letter-spacing:-.012em;line-height:1.22;margin:0 0 .3rem}
.arch-card p{margin:0;font-size:.74rem;color:var(--t-soft);line-height:1.45}

.arch-card.std{grid-column:span 2}
.arch-card.wide{grid-column:span 3}
.arch-card.feature{
  grid-column:span 4;grid-row:span 2;
  background:linear-gradient(135deg, var(--bg-2), var(--bg-1));
  display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:1.4rem;
}
.arch-card.feature h4{font-size:1.15rem;letter-spacing:-.022em;line-height:1.18}
.arch-card.feature p{font-size:.82rem}
.arch-card.feature .visual{display:flex;align-items:center;justify-content:center}
.arch-card.feature .visual svg{width:100%;height:auto;max-width:170px}

@media(max-width:1080px){
  .arch-card.wide{grid-column:span 2}
  .arch-card.std{grid-column:span 2}
  .arch-card.feature{grid-column:span 4;grid-template-columns:1fr;gap:.7rem;grid-row:span 1}
  .arch-card.feature .visual{display:none}
}
@media(max-width:680px){.arch-card,.arch-card.wide,.arch-card.std,.arch-card.feature{grid-column:span 2}}

.arch-card.featured-corner::before{
  content:"";position:absolute;top:-30%;right:-20%;
  width:60%;height:80%;
  background:radial-gradient(circle, var(--lime-glow), transparent 60%);
  pointer-events:none;filter:blur(20px);opacity:.55;
}

.uid-pill{
  display:inline-flex;align-items:center;gap:.36rem;
  padding:.24rem .5rem;background:var(--bg);border:1px solid var(--line-2);border-radius:6px;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.04em;color:var(--t-soft);width:fit-content;
}
.uid-pill .dot{width:.32rem;height:.32rem;border-radius:50%;background:var(--lime);box-shadow:0 0 6px var(--lime-glow);animation:pulse 2.4s ease-in-out infinite}
.uid-pill .uid{color:var(--lime);font-weight:600}

/* ============================================================
   PANEL: SECURITY
============================================================ */
.security .panel-shell{align-items:flex-start}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:880px){.sec-grid{grid-template-columns:1fr}}

.sec-card{
  background:linear-gradient(180deg, var(--bg-elev), var(--bg-1));
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.2rem;display:flex;flex-direction:column;
  transition:border-color .25s var(--e), transform .25s var(--e);
}
.sec-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.sec-card .lvl{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-mute);font-weight:600;
  margin-bottom:.7rem;padding:.24rem .55rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:99px;
  width:fit-content;
}
.sec-card .lvl strong{color:var(--lime);font-weight:700}
.sec-card h3{font-weight:600;font-size:.96rem;line-height:1.2;letter-spacing:-.012em;margin:0 0 .45rem}
.sec-card p{margin:0 0 .8rem;color:var(--t-soft);font-size:.78rem;line-height:1.5;flex:1}
.sec-card ul{border-top:1px solid var(--line);padding-top:.65rem}
.sec-card ul li{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.02em;color:var(--t-soft);padding:.25rem 0;display:grid;grid-template-columns:.85rem 1fr;gap:.4rem}
.sec-card ul li::before{content:"›";color:var(--lime);font-weight:700}

/* ============================================================
   PANEL: PRICING — generous, enterprise-feeling
============================================================ */
.pricing .panel-shell{align-items:center;gap:1.4rem}
.price-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;
  width:100%;
}
@media(max-width:1100px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.price-grid{grid-template-columns:1fr}}

.price{
  background:linear-gradient(180deg, var(--bg-elev), var(--bg-1));
  border:1px solid var(--line);border-radius:14px;
  padding:1.4rem 1.25rem;display:flex;flex-direction:column;gap:.85rem;
  position:relative;
  transition:border-color .25s var(--e), transform .25s var(--e), box-shadow .25s var(--e);
}
.price:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.price.featured{
  background:linear-gradient(180deg, rgba(197,240,43,.08), var(--bg-1) 70%);
  border-color:rgba(197,240,43,.45);
  box-shadow:0 0 0 1px rgba(197,240,43,.18) inset, 0 24px 60px -28px rgba(197,240,43,.35);
}
.pr-flag{
  position:absolute;top:-.55rem;left:1.25rem;
  background:var(--lime);color:var(--bg);
  padding:.22rem .55rem;font-family:var(--f-mono);font-size:.54rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;border-radius:5px;
}
.pr-tier{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-mute);font-weight:600;
}
.pr-tier strong{color:var(--lime);font-weight:700}
.price.featured .pr-tier strong{color:var(--lime)}

.pr-name{font-weight:700;font-size:1.05rem;letter-spacing:-.015em;line-height:1.1;color:var(--t);margin:-.2rem 0 0}
.pr-tag{font-size:.74rem;color:var(--t-soft);line-height:1.4;margin:0 0 .15rem}

.pr-amount{
  font-weight:700;font-size:2.1rem;letter-spacing:-.035em;line-height:1;
  display:flex;align-items:baseline;gap:.25rem;color:var(--t);
  font-feature-settings:"tnum","ss01";
}
.pr-amount .ccy{font-family:var(--f-mono);font-size:.72rem;color:var(--t-mute);font-weight:500;letter-spacing:.06em;align-self:flex-start;margin-top:.45rem}
.pr-amount .per{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;color:var(--t-mute);font-weight:500;text-transform:uppercase;margin-left:.1rem}
.pr-amount.compact{font-size:1.4rem}

.pr-amount-sub{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;color:var(--t-mute);text-transform:uppercase;font-weight:500;margin-top:-.45rem}

.pr-features{
  border-top:1px solid var(--line);padding-top:.8rem;flex:1;
  display:flex;flex-direction:column;gap:.4rem;
}
.pr-features li{
  display:grid;grid-template-columns:.95rem 1fr;gap:.5rem;
  font-size:.76rem;color:var(--t-soft);line-height:1.4;
}
.pr-features li::before{content:"✓";color:var(--lime);font-weight:700;font-size:.8rem;line-height:1.2}
.pr-features li.plus{color:var(--t);font-weight:600}
.pr-features li.plus::before{content:"+";color:var(--lime)}

.pr-cta{
  margin-top:.2rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem .9rem;font-size:.82rem;font-weight:600;letter-spacing:-.005em;
  border:1px solid var(--line-2);color:var(--t);background:var(--bg-2);border-radius:10px;
  transition:all .25s var(--e);
}
.pr-cta:hover{background:var(--bg-3);border-color:var(--line-3)}
.price.featured .pr-cta{background:var(--lime);color:var(--bg);border-color:var(--lime)}
.price.featured .pr-cta:hover{background:var(--lime-2);border-color:var(--lime-2);box-shadow:0 0 22px var(--lime-glow)}
.pr-foot{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.1em;color:var(--t-mute);text-align:center;text-transform:uppercase}

.pr-note{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  color:var(--t-mute);text-align:center;text-transform:uppercase;
  display:flex;align-items:center;gap:.5rem;justify-content:center;flex-wrap:wrap;
}
.pr-note .dot{width:.32rem;height:.32rem;border-radius:50%;background:var(--lime);box-shadow:0 0 6px var(--lime-glow)}

/* ============================================================
   PANEL: START (final CTA)
============================================================ */
.start .panel-shell{align-items:center;text-align:center}
.start-shell{
  width:100%;max-width:880px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  text-align:center;
}
.start h1{font-size:clamp(1.8rem, 3.6vw, 3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0;color:var(--t)}
.start h1 .em{background:linear-gradient(120deg, var(--lime) 0%, var(--indigo) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.start p{margin:0;color:var(--t-soft);font-size:1rem;line-height:1.55;max-width:52ch}

.start-actions{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;align-items:center;margin-top:.4rem}
.start-actions .btn{padding:.78rem 1.2rem;font-size:.85rem}

.start-stamps{
  display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem;
}
.start-stamps span{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-mute);padding:.26rem .55rem;border:1px solid var(--line-2);border-radius:99px;
}
.start-stamps .powered{color:var(--indigo);border-color:rgba(129,140,248,.4)}

/* ============================================================
   HUD — bottom bar (panel indicator + hints)
============================================================ */
.hud{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  height:var(--hud-h);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:1rem;
  padding:0 var(--pad-x);
  background:var(--bg-glass);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.08em;
  color:var(--t-mute);text-transform:uppercase;
}
.hud-l{justify-self:start;display:inline-flex;align-items:center;gap:.45rem}
.hud-l .pulse{width:.36rem;height:.36rem;border-radius:50%;background:var(--lime);box-shadow:0 0 6px var(--lime-glow);animation:pulse 2.4s ease-in-out infinite}
.hud-l .pwr{color:var(--indigo);font-weight:600}

.hud-c{
  justify-self:center;display:inline-flex;align-items:center;gap:.7rem;
  padding:.22rem .65rem;border:1px solid var(--line-2);border-radius:99px;background:var(--bg-1);
  color:var(--t-soft);font-weight:500;
}
.hud-c .idx{color:var(--lime);font-weight:700}
.hud-c .sep{color:var(--t-faint)}
.hud-c .name{color:var(--t)}

.hud-r{justify-self:end;display:inline-flex;align-items:center;gap:.5rem}
.hud-r .key{
  font-family:var(--f-mono);font-size:.54rem;font-weight:700;
  background:var(--bg-2);color:var(--t-soft);
  padding:.16rem .35rem;border-radius:4px;
  border:1px solid var(--line-2);
  margin-right:.15rem;
}
@media(max-width:640px){
  .hud-l span:not(.pulse){display:none}
  .hud-r{display:none}
  .hud{grid-template-columns:auto 1fr auto}
  .hud-c{justify-self:end}
}

/* progress bar at very bottom of stage */
.stage-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);z-index:6;pointer-events:none;
}
.stage-progress .bar{
  height:100%;background:linear-gradient(90deg, var(--lime), var(--indigo));
  width:calc(var(--prog, 1) * 100%);
  transition:width .45s var(--e);
  box-shadow:0 0 8px var(--lime-glow);
}