:root{
  --bg:#070b18; --panel:#0e1a33; --ink:#eaf3ff; --muted:#9db3cc; --line:#1b2946; --cta:#2dd4bf;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{display:flex; flex-direction:column; background:radial-gradient(1200px 600px at 50% -20%,#0c1530,var(--bg)); color:var(--ink)}
header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); background:#0a142acc; backdrop-filter:blur(6px)}
header h1{margin:0; font-size:16px}
.controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.controls label{display:flex; gap:6px; align-items:center; color:var(--muted)}
.controls input[type="range"]{width:140px}
button{background:var(--panel); border:1px solid #1c2a4b; color:var(--ink); padding:6px 10px; border-radius:6px; cursor:pointer}
button:hover{opacity:.9}
main{position:relative; flex:1}
canvas{display:block; width:100%; height:100%}
#hud{position:absolute; left:12px; top:12px; background:#00000033; padding:8px 10px; border-radius:8px; color:var(--muted); font-size:13px}
#hud .hint{opacity:.75; margin-top:4px}
footer{border-top:1px solid var(--line); color:var(--muted); padding:8px 12px; font-size:12px}

/* ===== Overlays ===== */
#introOverlay, #infoOverlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter: blur(6px);
  z-index: 50; padding:16px;
}
#introOverlay.show, #infoOverlay.show{ display:flex; animation: fadeIn .12s ease-out; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.panel{
  width:min(960px, 96vw); background:#0c1530; color:var(--ink); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden;
}
.panel .panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:#0a142a; border-bottom:1px solid var(--line);
}
.panel .panel-foot{
  display:flex; gap:8px; justify-content:flex-end; align-items:center;
  padding:10px 12px; background:#0a142a; border-top:1px solid var(--line);
}
#infoOverlay .panel{ height:min(80vh, 880px); }
#infoOverlay .panel iframe{ flex:1; width:100%; border:0; background:#060b18; }

/* Intro specific */
.panel.intro{ width:min(720px, 94vw); }
.intro-body{ padding:28px 24px 20px; text-align:center; }
.intro-body h2{ margin:8px 0 10px; font-size:22px; }
.intro-body p{ color:var(--muted); line-height:1.65; margin:0 auto 18px; max-width:620px; }
button.primary{
  background:var(--cta); color:#001; font-weight:700; border:none; border-radius:10px;
  padding:12px 18px; cursor:pointer;
}
button.ghost{
  background:transparent; color:var(--ink); border:1px solid #1c2a4b; border-radius:8px;
  padding:8px 12px; cursor:pointer;
}
button.primary:hover, button.ghost:hover{ opacity:.9 }