html, body { height: 100%; margin: 0; background:#0b0f14; color:#e7f0f8; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
.wrap { display:flex; gap:16px; align-items:flex-start; justify-content:center; padding:16px; }
canvas { background:#0f1622; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06); image-rendering: pixelated; }
.hud { min-width: 300px; max-width: 420px; line-height:1.4; }
.panel { background:#0f1622; border-radius:16px; padding:12px 14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.title { font-weight:700; letter-spacing:.3px; }
kbd { background:#121a26; border-radius:6px; padding:2px 6px; border:1px solid rgba(255,255,255,.08); box-shadow: inset 0 -1px 0 rgba(255,255,255,.05); }
.row { display:flex; gap:8px; align-items:center; }
.row.space { justify-content:space-between; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.muted { color:#9fb2c8; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:#111b28; border:1px solid rgba(255,255,255,.07); }
.sep { height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); margin:10px 0; }
.btn { cursor:pointer; background:#142031; border:1px solid rgba(255,255,255,.08); padding:8px 12px; border-radius:10px; color:#e7f0f8; }
.btn:hover { background:#18263a; }
.legend { display:flex; flex-wrap:wrap; gap:6px; }
.pill { padding:4px 8px; border-radius:8px; background:#0e1826; border:1px solid rgba(255,255,255,.07); }
.chips { flex-wrap:wrap; gap:10px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.dot-red { background:#ff3b3b; }
.dot-blue { background:#7aa2ff; }
.tri-spike { width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #ff8b8b; display:inline-block; }
.sq { display:inline-block; width:12px; height:12px; }
.sq-spring { background:#30c48d; }
.sq-pump { background:#ffd166; }
.sq-finish { background:#62d1ff; }
.sq-ring { background:#f2a7ff; }
.sq-check { background:#a4b0be; }
.sq-door { background:#9ad1ff; }