:root{
  --bg:#07090f;
  --bg-2:#0b1018;
  --panel:rgba(15,21,32,.62);
  --stroke:rgba(120,170,255,.16);
  --text:#eaf2ff;
  --muted:#9fb0c8;
  --accent:#4cc9ff;
  --accent-2:#8b5cf6;
  --radius:18px;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 700px at 50% 20%,#101a2b 0%,var(--bg) 60%);
  color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.glass{
  background:var(--panel);
  border:1px solid var(--stroke);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:var(--shadow);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Loading */
#loading{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);transition:opacity .6s ease,visibility .6s}
#loading.done{opacity:0;visibility:hidden}
.loader-card{width:min(360px,84vw);text-align:center}
.loader-logo{font-weight:800;letter-spacing:.24em;font-size:.8rem;margin-bottom:22px}
.loader-logo span{color:var(--accent)}
.loader-bar{height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
#loader-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s ease}
#loader-text{margin-top:14px;color:var(--muted);font-size:.78rem;letter-spacing:.08em}

/* Top bar */
.topbar{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:20;display:flex;align-items:center;gap:28px;
  padding:10px 12px 10px 20px;border-radius:99px;
}
.brand{font-weight:800;letter-spacing:.2em;font-size:.74rem;color:var(--text);text-decoration:none;white-space:nowrap}
.brand span{color:var(--accent)}
.topbar nav{display:flex;gap:4px}
.nav-btn{padding:9px 16px;border-radius:99px;color:var(--muted);font-size:.8rem;transition:.25s}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-btn:active{transform:scale(.96)}
.nav-btn.active{color:#04121d;background:linear-gradient(120deg,var(--accent),#7ee8ff);font-weight:650}

/* Info panel */
.info-panel{
  position:fixed;top:88px;right:24px;z-index:20;width:min(360px,calc(100vw - 32px));
  padding:26px;border-radius:var(--radius);
  transform:translateX(28px);opacity:0;visibility:hidden;
  transition:.45s cubic-bezier(.22,.9,.24,1);
}
.info-panel.open{transform:none;opacity:1;visibility:visible}
.info-kicker{color:var(--accent);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:10px}
#info-title{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
#info-desc{color:var(--muted);font-size:.86rem;line-height:1.6;margin-bottom:18px}
.spec-list{list-style:none;border-top:1px solid var(--stroke)}
.spec-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--stroke);font-size:.78rem}
.spec-list li span:first-child{color:var(--muted)}
.spec-list li span:last-child{text-align:right;font-weight:550}
.info-diagram{position:relative;height:74px;margin-top:18px;border-radius:12px;background:linear-gradient(135deg,rgba(76,201,255,.08),rgba(139,92,246,.08));overflow:hidden}
.diagram-bar{position:absolute;left:14%;right:14%;top:52%;height:8px;border-radius:99px;background:rgba(234,242,255,.14)}
.diagram-chip{position:absolute;left:44%;top:34%;width:34px;height:22px;border-radius:5px;background:linear-gradient(120deg,var(--accent),var(--accent-2));animation:pulse 2.6s ease-in-out infinite}
.diagram-line{position:absolute;left:20%;right:20%;top:63%;height:1px;background:rgba(76,201,255,.5)}
@keyframes pulse{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.icon-btn{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--stroke);color:var(--muted);font-size:.95rem;transition:.22s;
}
.icon-btn:hover{color:#fff;border-color:rgba(76,201,255,.5);background:rgba(76,201,255,.08)}
#info-close{position:absolute;top:14px;right:14px}

/* Labels */
#labels{position:fixed;inset:0;pointer-events:none;z-index:12}
.label{
  position:absolute;transform:translate(-50%,-50%);
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#dceaff;
  background:rgba(8,12,20,.72);border:1px solid var(--stroke);border-radius:99px;
  padding:5px 10px;white-space:nowrap;opacity:0;transition:opacity .3s;
}
.label::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:rgba(76,201,255,.45)}
.label.visible{opacity:1}

/* Tour */
.tour-hud{
  position:fixed;left:24px;top:88px;z-index:20;width:min(290px,calc(100vw - 32px));
  padding:20px;border-radius:var(--radius);
}
.tour-title{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
#tour-step{font-weight:650;margin-bottom:12px}
.tour-progress{height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-bottom:16px}
#tour-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s ease}
.tour-actions{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:8px 12px;border-radius:99px;border:1px solid var(--stroke);font-size:.74rem;color:var(--muted);transition:.2s}
.chip:hover{color:#fff;border-color:rgba(76,201,255,.45)}
.chip.danger:hover{border-color:rgba(255,110,130,.55);color:#ffb9c4}

/* Control bar */
.controlbar{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:20;display:flex;align-items:center;gap:22px;
  padding:12px 18px;border-radius:99px;max-width:calc(100vw - 24px);
}
.control-group{display:flex;align-items:center;gap:6px}
.controlbar .icon-btn{width:36px;height:36px;border-radius:99px}
.slider-group{display:flex;align-items:center;gap:10px;min-width:230px}
.slider-group label{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#explode-slider{flex:1;appearance:none;height:3px;border-radius:99px;background:rgba(255,255,255,.12)}
#explode-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(76,201,255,.16);cursor:pointer}
#explode-slider::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
#explode-value{font-size:.72rem;color:var(--accent);min-width:36px;text-align:right}
.toggles{gap:6px}
.toggle{padding:8px 13px;border-radius:99px;border:1px solid var(--stroke);font-size:.72rem;color:var(--muted);transition:.22s}
.toggle[aria-pressed="true"]{color:#04121d;background:linear-gradient(120deg,var(--accent),#7ee8ff);border-color:transparent;font-weight:650}

/* Fallback */
.fallback{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--bg);padding:24px;text-align:center}
.fallback h1{letter-spacing:.2em;font-size:.9rem;margin-bottom:14px}
.fallback p{color:var(--muted);max-width:440px;margin:0 auto 28px;line-height:1.6}
.fallback-diagram{width:min(520px,90vw);border:1px solid var(--stroke);border-radius:16px;padding:18px;background:var(--bg-2)}
.fd-screen{height:110px;border:1px solid var(--stroke);border-radius:10px;display:grid;place-items:center;color:var(--muted);font-size:.75rem;margin-bottom:10px}
.fd-base{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-size:.66rem;color:var(--muted)}
.fd-base div{border:1px solid var(--stroke);border-radius:8px;padding:14px 6px}

/* Responsive */
@media (max-width:820px){
  .topbar{top:12px;width:calc(100vw - 20px);justify-content:space-between;gap:10px;padding:8px 8px 8px 16px}
  .brand{font-size:.64rem}
  .nav-btn{padding:8px 11px;font-size:.72rem}
  .info-panel{top:auto;bottom:96px;right:12px;left:12px;width:auto;max-height:46vh;overflow:auto;transform:translateY(24px)}
  .info-panel.open{transform:none}
  .tour-hud{top:auto;bottom:96px;left:12px;width:min(300px,calc(100vw - 24px))}
  .controlbar{bottom:10px;flex-wrap:wrap;justify-content:center;gap:10px;border-radius:22px;padding:10px 12px}
  .slider-group{min-width:190px}
  .toggles{flex-wrap:wrap;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* Keep hidden panels hidden until JavaScript reveals them. */
[hidden] {
  display: none !important;
}