:root{
  --bg:#000;
  --bg-soft:#0c0c0f;
  --card:#101116;
  --card-2:#171922;
  --text:#f6f8fb;
  --muted:#98a0b3;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --accent:#4e8cff;
  --gold:#ffbe4b;
  --orange:#ef5e3b;
  --yellow:#f8c954;
  --green:#64d59a;
  --shadow:0 20px 60px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(78,140,255,.45);outline-offset:3px}
body{
  background:
    radial-gradient(circle at 50% -20%, rgba(255,190,75,.06), transparent 28rem),
    linear-gradient(180deg,#000,#020305);
}
.app-shell{width:min(100%,980px);margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 14px max(34px,env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px 18px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#ffd56c,#ff9e36);color:#241400;font-size:22px;box-shadow:0 0 28px rgba(255,170,64,.38)}
.brand strong{display:block;font-size:15px}
.brand small{display:block;margin-top:2px;color:#7e8696;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.top-actions{display:flex;gap:8px}
.icon-btn{
  width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:#0b0c11;color:#fff
}
.intro{padding:8px 2px 18px}
.eyebrow{margin:0 0 7px;color:#7b8497;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.eyebrow.dark{color:rgba(18,10,0,.56)}
.intro h1{margin:0;font-size:clamp(36px,11vw,66px);line-height:.95;letter-spacing:-.055em}
.intro p:last-child{margin:14px 0 0;color:var(--muted);max-width:620px;line-height:1.55;font-size:15px}
.tabs{
  position:sticky;top:max(7px,env(safe-area-inset-top));z-index:40;display:grid;grid-template-columns:repeat(4,1fr);
  gap:6px;padding:6px;border:1px solid var(--line);border-radius:18px;background:rgba(7,8,12,.84);backdrop-filter:blur(14px);margin-bottom:12px
}
.tab{
  min-height:49px;border:0;border-radius:13px;background:transparent;color:#838c9c;font-size:11px;font-weight:850
}
.tab span{display:block;font-size:18px;margin-bottom:2px}
.tab.active{background:#fff;color:#0a0c12}
.panel{display:none}
.panel.active{display:block;animation:fadeIn .24s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.space-stage{
  position:relative;overflow:hidden;border-radius:30px;background:#000;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06)
}
canvas{display:block;width:100%;height:auto;aspect-ratio:.82;touch-action:none}
.stage-top,.stage-bottom{
  position:absolute;left:12px;right:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none
}
.stage-top{top:12px}.stage-bottom{bottom:12px}
.pill,.gesture-pill{
  padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.11);background:rgba(8,10,15,.78);backdrop-filter:blur(12px);font-size:10px;font-weight:850;color:#e9eef8
}
.live-pill{display:flex;align-items:center;gap:6px}
.live-pill i{width:7px;height:7px;border-radius:50%;background:#60eb9b;box-shadow:0 0 0 5px rgba(96,235,155,.12)}
.subtle{background:#11141b}
.mini-btn,.zoom-btn{
  pointer-events:auto;border:1px solid rgba(255,255,255,.11);background:rgba(8,10,15,.82);color:#fff
}
.mini-btn{min-height:38px;padding:7px 10px;border-radius:12px;font-size:11px;font-weight:800}
.gesture-pill{letter-spacing:.02em}
.zoom-hud{
  position:absolute;right:12px;bottom:58px;z-index:6;display:grid;gap:8px
}
.zoom-btn{
  width:42px;height:42px;border-radius:14px;font-size:28px;line-height:1
}
.planet-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:72px;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 1px 3px
}
.planet-strip::-webkit-scrollbar{display:none}
.planet-chip{
  min-height:78px;padding:8px 4px;border:1px solid transparent;border-radius:16px;background:transparent;color:#7c8496;font-size:10px;font-weight:850
}
.planet-chip.active{background:#0f1117;border-color:var(--line);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.mini-planet{
  display:block;width:34px;height:34px;margin:0 auto 6px;border-radius:50%;box-shadow:inset -7px -6px 10px rgba(0,0,0,.28),0 5px 12px rgba(255,255,255,.05)
}

.planet-card{
  margin-top:12px;border-radius:28px;background:#0f1117;color:#fff;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)
}
.planet-hero{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;padding:18px}
.planet-orb{
  width:80px;height:80px;border-radius:50%;box-shadow:inset -16px -14px 22px rgba(0,0,0,.3),0 0 28px rgba(255,255,255,.08)
}
.planet-title{margin:0 0 5px;font-size:28px;letter-spacing:-.04em}
.planet-desc{margin:0;color:#aeb7c9;font-size:13px;line-height:1.5}
.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(255,255,255,.08)}
.fact{min-height:80px;padding:12px 14px;border-right:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.fact small{display:block;margin-bottom:4px;font-size:10px;color:#8690a4}
.fact strong{font-size:14px}
.wow{margin:14px;padding:13px 14px;border-radius:16px;background:linear-gradient(180deg,#ffd05f,#ffa33d);color:#241400;font-size:13px;line-height:1.45}
.wow strong{display:inline-block;margin-bottom:4px}

.controls{margin-top:14px}
.controls-head,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.controls-head h2,.section-head h2{margin:0;font-size:28px;letter-spacing:-.045em}
.subcopy{margin:5px 0 0;color:var(--muted);font-size:13px}
.control-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.control-tile{
  position:relative;min-height:98px;padding:12px;border:1px solid var(--line);border-radius:18px;background:#0f1117;color:#fff;text-align:left
}
.control-tile span{display:block;margin-bottom:10px;font-size:22px}
.control-tile b,.control-tile small{display:block}
.control-tile b{font-size:13px}
.control-tile small{margin-top:2px;color:#8f98aa;font-size:10px}
.control-tile.active{border-color:rgba(78,140,255,.42);background:#111827;box-shadow:inset 0 0 0 1px rgba(78,140,255,.25)}
.checkbox-tile input{position:absolute;right:11px;top:11px;width:17px;height:17px;accent-color:#4e8cff}
.time-card,.slider-card,.toggle-row,.tip-banner,.compare-bars,.game-card{
  border:1px solid var(--line);border-radius:20px;background:#0f1117;box-shadow:var(--shadow)
}
.time-card{margin-top:10px;padding:14px;background:linear-gradient(180deg,#1b2132,#111520)}
.time-row,.slider-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.time-row small,.slider-head small{display:block;margin-top:3px;color:#b0bbce;font-size:11px}
.time-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.08)}
.time-card input,.slider-card input{width:100%;margin-top:14px;accent-color:#4e8cff}
.range-ends{display:flex;justify-content:space-between;margin-top:4px;color:#8e99ac;font-size:10px;text-transform:uppercase;font-weight:800}
.slider-card{margin-top:10px;padding:14px}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px;margin-top:10px;padding:13px 14px
}
.toggle-row b,.toggle-row small{display:block}
.toggle-row small{margin-top:3px;color:#8993a6;font-size:10px}
.toggle-row input{width:22px;height:22px;accent-color:#4e8cff}
.tip-banner{
  margin-top:10px;padding:14px;background:#11141c;color:#b6c1d7;font-size:12px;line-height:1.55
}
.tip-banner strong{color:#fff}
.metric-select{
  min-height:43px;max-width:42%;padding:8px 10px;border:1px solid var(--line);border-radius:13px;background:#0f1117;color:#fff;font-size:11px;font-weight:800
}
.compare-bars{padding:15px}
.bar-row{display:grid;grid-template-columns:70px 1fr 64px;gap:8px;align-items:center;margin:11px 0}
.bar-name,.bar-value{font-size:10px;font-weight:850}
.bar-value{text-align:right;color:#9ba4b7}
.bar-track{height:15px;overflow:hidden;border-radius:999px;background:#1f2431}
.bar-fill{height:100%;min-width:5px;border-radius:999px}
.compare-cards{display:grid;gap:8px;margin-top:9px}
.compare-card{
  padding:14px;border-radius:18px;background:#0f1117;border:1px solid var(--line)
}
.compare-card:nth-child(2n){background:linear-gradient(180deg,#ffd05f,#ffab42);color:#241400;border-color:transparent}
.compare-card h3{margin:0 0 5px;font-size:15px}
.compare-card p{margin:0;color:#adb7cb;font-size:11px;line-height:1.5}
.compare-card:nth-child(2n) p{color:#6d4d16}
.game-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:18px;padding:19px;border-radius:26px
}
.game-head.orange{background:linear-gradient(180deg,#f36a46,#e64b2d)}
.game-head.yellow{background:linear-gradient(180deg,#ffd668,#f7b743);color:#241400}
.game-head h2{margin:0;font-size:30px;letter-spacing:-.045em}
.game-head p:last-child{margin:6px 0 0;font-size:12px;opacity:.85}
.score-pill{
  flex:0 0 auto;padding:9px 11px;border-radius:999px;background:rgba(255,255,255,.88);color:#17110b;font-size:12px;font-weight:900
}
.game-card{margin-top:10px;padding:16px}
.game-card h3{margin:0 0 10px;font-size:22px;letter-spacing:-.03em}
.mission-option,.quiz-option{
  width:100%;min-height:49px;margin-top:7px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#171a22;color:#fff;text-align:left;font-weight:800;font-size:12px
}
.correct{background:#183224!important;border-color:#64d59a!important}
.wrong{background:#341e1e!important;border-color:#ff8f8f!important}
.feedback{margin-top:11px;color:#aab4c8;font-size:12px;line-height:1.5}
.primary-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;margin-top:9px;padding:10px 16px;border:0;border-radius:16px;background:#fff;color:#0b0d12;font-weight:900
}
.primary-btn span{font-size:20px}
.progress{overflow:hidden;height:8px;margin:10px 2px 0;border-radius:999px;background:#1d212d}
.progress>div{height:100%;width:0;border-radius:inherit;background:#4e8cff;transition:width .24s ease}
footer{display:flex;justify-content:space-between;gap:12px;padding:30px 2px 8px;color:#788195;font-size:10px}
footer strong{color:#d8deea}

@media (min-width:640px){
  .app-shell{padding-inline:22px}
  .tab{font-size:12px}
  canvas{aspect-ratio:1.16}
  .planet-strip{grid-auto-flow:unset;grid-template-columns:repeat(8,1fr);overflow:visible}
  .planet-hero{grid-template-columns:100px 1fr;padding:24px}
  .planet-orb{width:96px;height:96px}
  .fact-grid{grid-template-columns:repeat(3,1fr)}
  .control-grid{grid-template-columns:repeat(4,1fr)}
  .compare-cards{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .panel.active{animation:none}
}