:root{
  --bg:#0b1020;
  --panel:#121a33;
  --text:#e9eefc;
  --muted:#9fb0e8;
  --accent:#7df9ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 50% 0%, #18245a, var(--bg));
  color:var(--text);
  font:14px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
#wrap{max-width:1100px;margin:18px auto;padding:0 14px}
header{
  display:flex;align-items:flex-end;justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
}
.title{font-weight:800;letter-spacing:1px;text-transform:uppercase}
.hud{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted)}
.hud .k{color:var(--accent)}
canvas{
  width:100%;
  height:auto;
  display:block;
  background:#000;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;color:var(--muted)}
.help b{color:var(--text)}
.note{opacity:.9}