:root{ --bg:#0b0f14; --panel:#0f141a; --ink:#e6f0ff; --muted:#9bb3cc; --accent:#7aa2ff }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0; background:radial-gradient(1200px 600px at 70% -10%, #16202b 0%, var(--bg) 60%); color:var(--ink); font:500 14px/1.3 ui-sans-serif,system-ui,"Segoe UI",Inter,Roboto,Arial}
  header{position:sticky; top:0; z-index:2; backdrop-filter:saturate(1.2) blur(8px); background:linear-gradient( to bottom, rgba(17,23,31,.92), rgba(17,23,31,.65)); border-bottom:1px solid #1e2935}
  .wrap{max-width:1120px; margin:0 auto; padding:14px 18px}
  h1{margin:0 0 6px 0; font-size:18px}
  .sub{font-size:12px; color:var(--muted)}
  .panel{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 0}
  .panel label{display:flex; gap:8px; align-items:center; background:var(--panel); border:1px solid #1d2633; padding:8px 10px; border-radius:12px}
  .panel select,.panel input[type="range"]{accent-color:var(--accent)}
  .panel input[type="number"], .panel button{background:#0b121a; color:#e6f0ff; border:1px solid #1e2937; border-radius:8px; padding:8px 10px}
  #stage{position:relative; height:calc(100vh - 240px); min-height:520px}
  canvas{display:block; width:100%; height:100%; background: radial-gradient(900px 500px at 30% 20%, #0e151d, #0a0f15 60%); border-top:1px solid #101825}
  .legend{position:absolute; left:16px; bottom:16px; color:#cfe1ff; font-size:12px; padding:8px 10px; border-radius:10px; background:rgba(11,15,20,.6); border:1px solid #1b2431; white-space:pre-wrap}
  #testResults{left:auto; right:16px; bottom:16px}
  #legend, #testResults{display:none !important}
  .hidden{display:none}
  .badge{display:inline-block; padding:2px 6px; border:1px solid #203044; border-radius:8px; font-size:11px; background:#111824}