:root{
  --bg:#0b1020;
  --panel:#101a35;
  --ink:#e7ecff;
  --muted:#9fb0ffcc;
  --acc:#6ea8ff;
  --ok:#44d19a;
  --warn:#ffd166;
  --err:#ff6b6b;
  --card:#0f1730;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:grid; grid-template-columns: 360px 1fr; grid-template-rows: auto 1fr; grid-template-areas:
  "header header" "panel main"; background: radial-gradient(1200px 800px at 30% -10%, #1b2244 0%, var(--bg) 60%);
  color:var(--ink); font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
}
header{ grid-area: header; padding:14px 18px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #ffffff14; backdrop-filter: blur(4px);
        position: sticky; top:0; z-index:5; background: linear-gradient(180deg, #0a0f1eeb, #0a0f1eaa);
}
header h1{ font-size:18px; margin:0; letter-spacing:.2px }
header .sub{ color:var(--muted); font-size:12px }
a{ color:var(--acc); text-decoration: none }
.panel{ grid-area: panel; padding:16px; border-right:1px solid #ffffff14; overflow:auto; max-height: calc(100vh - 60px);}
.group{ background:var(--panel); border:1px solid #ffffff12; border-radius:16px; box-shadow: var(--shadow); padding:12px; margin-bottom:12px }
.group h3{ margin:4px 0 10px; font-size:13px; text-transform: uppercase; letter-spacing:.8px; color:#d7e0ff }
label{ display:block; font-size:12px; color:var(--muted); margin:6px 0 4px }
input[type="number"], input[type="range"], select{ width:100% }
input, select, button{
  background: var(--card); color:var(--ink); border:1px solid #ffffff1f; border-radius:12px; padding:8px 10px; outline:none;
}
input[type="range"]{ height: 32px }
button{ cursor:pointer; transition:.2s transform ease, .2s background-color; display:inline-flex; align-items:center; gap:8px; }
button:hover{ transform: translateY(-1px) }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:8px }
.row3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px }
.controls{ display:flex; gap:8px; flex-wrap: wrap }
.btn-primary{ background: linear-gradient(180deg, #6ea8ff, #5096ff); color:#001033; border: none }
.btn{ padding:10px 12px; border-radius:12px }
.btn-ghost{ background:#ffffff12 }
.toggle{ display:flex; align-items:center; gap:8px }
.inline{ display:flex; align-items:center; gap:8px }
small, .hint{ color:var(--muted); font-size:12px }

main{ grid-area: main; position:relative; }
#canvas{ width:100%; height:100%; display:block; background: radial-gradient(900px 600px at 50% -10%, #111b38, #080e1e 70%), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 20 20"><circle cx="1" cy="1" r="1" fill="white" opacity="0.08"/></svg>'); background-size: cover, 20px 20px }
.hud{ position:absolute; left:12px; bottom:12px; background:#0b1433bf; border:1px solid #ffffff22; border-radius:12px; padding:10px 12px; box-shadow: var(--shadow); min-width: 260px }
.hud pre{ margin:0; white-space: pre-wrap; font-size:12px; color:#dfe7ff }
.legend{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; background:#ffffff14; border-radius:999px; font-size:12px }
.dot{ width:10px; height:10px; border-radius:50% }

.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#111c3a; padding:1px 6px; border-radius:6px; border:1px solid #ffffff22 }

@media (max-width: 980px){
  body{ grid-template-columns:1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "header" "panel" "main" }
  .panel{ max-height: unset }
}