:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b0d12;--fg:#eef1f6;--muted:#a4acba;--panel:#0b0d128c;--line:#ffffff1f;--fire:#ff7a2f;--gold:#ffd166;--tide:#2fd3c6}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);margin:0;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app,#app canvas{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}.title-card{text-align:center;pointer-events:none;text-shadow:0 2px 24px #00000080;transition:opacity 1.2s;position:fixed;top:24px;left:50%;transform:translate(-50%)}.title-card.faded{opacity:.35}.title-card h1{letter-spacing:-.02em;margin:0;font-size:clamp(28px,6vw,56px);line-height:1}.title-card b{background:linear-gradient(90deg, var(--fire), var(--gold));color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:900}.title-card i{background:linear-gradient(90deg, #7ae7ff, var(--tide));color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:700}.title-card p{color:var(--muted);margin:8px 0 0;font-size:13px}.hud{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;min-width:200px;padding:10px 12px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;position:fixed;bottom:16px;left:16px}.hud dl{grid-template-columns:auto 1fr;gap:0 12px;margin:0;display:grid}.hud dt{color:var(--muted)}.hud dd{text-align:right;margin:0}.hud .error{color:#ff8a80;white-space:pre-wrap;max-width:320px}.hint{color:var(--muted);text-shadow:0 1px 8px #0009;font-size:12px;position:fixed;bottom:16px;right:16px}.hint code{font-size:11px}@media (width<=640px){.hint{display:none}}.play-hud[hidden]{display:none}.play-hud{pointer-events:none;text-shadow:0 1px 8px #0009;justify-items:center;gap:8px;width:min(560px,100vw - 32px);display:grid;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.play-hud kbd{border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:3px 6px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.ph-prompt{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;font-weight:600}.ph-bar{background:#ffffff1f;border-radius:999px;width:240px;height:6px;overflow:hidden}.ph-bar i{background:linear-gradient(90deg, var(--gold), var(--fire));transform-origin:0;height:100%;transition:transform 80ms linear;display:block}.ph-bar i[data-low=true]{background:#ff4d4d}.ph-state{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.ph-keys{color:var(--muted);text-align:center;font-size:12px;line-height:2}.ph-error{background:#781414b3;border-radius:10px;padding:10px 14px}body[data-mode=play] .hint{display:none}body[data-mode=play] .title-card.faded{opacity:0}.tuning-panel{z-index:10;width:300px;max-height:calc(100vh - 24px);position:fixed;top:12px;right:12px;overflow-y:auto}.tuning-panel[hidden]{display:none}.ph-room{pointer-events:auto;color:var(--muted);font-size:12px}.ph-room button{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:999px;margin-left:6px;padding:4px 10px}.ph-net{color:var(--gold);background:var(--panel);border-radius:6px;padding:4px 8px;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}