:root{
  --bg:#0b1020; --panel:#141a2e; --ink:#e8ecff; --accent:#ffd23f; --muted:#8b93b5;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:radial-gradient(1200px 700px at 50% -10%, #1f2a16, var(--bg));
  color:var(--ink);
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100%; gap:14px; padding:18px;
}
h1{ margin:0; font-size:20px; letter-spacing:3px; color:var(--accent); text-shadow:0 2px 0 #00000055; }
.wrap{ position:relative; width:min(960px,96vw); }
canvas{
  width:100%; height:auto; display:block; image-rendering:pixelated;
  background:#7fd0ff; border:4px solid #000; border-radius:8px;
  box-shadow:0 16px 40px #00000066, inset 0 0 0 2px #ffffff14;
}
.controls{
  display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center;
  font-size:13px; color:var(--muted); max-width:960px;
}
.controls b{ color:var(--ink); }
kbd{
  background:var(--panel); border:1px solid #2a335a; border-bottom-width:3px;
  border-radius:6px; padding:2px 8px; font-size:12px; color:var(--ink);
}
.hint{ font-size:12px; color:var(--muted); }