:root{--bg:#f6f4ef;--panel:#fff;--ink:#1d1f24;--muted:#6b6f78;--line:#e2ded5;--accent:#2563eb;--accent-soft:#93c5fd;--ok:#15803d;--warn:#b45309;--fail:#b91c1c;--white-key:#fdfcf9;--black-key:#22242a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#14161a;--panel:#1d2026;--ink:#eceae4;--muted:#9aa0aa;--line:#2d3139;--accent:#60a5fa;--accent-soft:#1e3a8a;--ok:#4ade80;--warn:#fbbf24;--fail:#f87171;--white-key:#e9e6df;--black-key:#0b0c0e;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);padding:env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left));-webkit-tap-highlight-color:transparent;font:15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}.top{justify-content:space-between;align-items:center;gap:12px;padding:10px 0 6px;display:flex}h1{margin:0;font-size:1.1rem}h1 .sub{color:var(--muted);font-weight:500}h2{margin:0 0 8px;font-size:.95rem}.muted{color:var(--muted)}.hint{color:var(--muted);margin:8px 0 0;font-size:.82rem}.pill{border:1px solid var(--line);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;max-width:55vw;padding:3px 10px;font-size:.8rem;font-weight:600;display:inline-block;overflow:hidden}.pill.on{background:var(--ok);color:#fff;border-color:#0000}.pill.off{color:var(--muted)}.pill.pending{color:var(--warn)}.now{align-items:center;gap:18px;padding:4px 0 10px;display:flex}.now-note{text-align:center;min-width:3.2ch;font:600 3.2rem/1 Georgia,Times New Roman,serif}.now-meta{flex:1;gap:4px;min-width:0;max-width:340px;font-size:.9rem;display:grid}.vel{background:var(--line);border-radius:3px;height:6px;overflow:hidden}.vel-bar{background:var(--accent);width:0;height:100%;transition:width 80ms}.now-meta .pill{justify-self:start}.kbd{background:var(--panel);border:1px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:10px;padding:6px}.piano{width:100%;height:clamp(90px,26vh,170px);display:block}.key.white{fill:var(--white-key);stroke:#9a968c;stroke-width:.6px}.key.black{fill:var(--black-key)}.key.down{fill:var(--accent)}.key.sustained{fill:var(--accent-soft)}.key-label{fill:#8b877d;text-anchor:middle;pointer-events:none;font:600 9px system-ui,sans-serif}.key-label.middle-c{fill:var(--accent)}.panels{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;padding:10px 0 16px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0;padding:12px}.panel p{overflow-wrap:anywhere;margin:0 0 4px}.row{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}button{font:inherit;color:var(--accent);border:1.5px solid var(--accent);cursor:pointer;background:0 0;border-radius:8px;min-height:40px;padding:8px 12px;font-size:.9rem;font-weight:600}button:active{background:var(--accent);color:#fff}button:disabled{opacity:.4;cursor:default}kbd{border:1px solid var(--line);border-radius:4px;padding:0 4px;font:600 .75rem ui-monospace,monospace}.checks{gap:8px;margin:0;padding:0;list-style:none;display:grid}.checks li{grid-template-columns:22px 1fr;gap:6px;font-size:.88rem;display:grid}.checks small{color:var(--muted);overflow-wrap:anywhere}.checks .ic{text-align:center;font-weight:700}.checks .ok .ic{color:var(--ok)}.checks .warn .ic{color:var(--warn)}.checks .fail .ic{color:var(--fail)}.checks .pending .ic{color:var(--muted)}.report{background:var(--bg);width:100%;min-height:140px;color:var(--ink);border:1px solid var(--line);border-radius:6px;margin-top:8px;font:.75rem ui-monospace,monospace}.log{gap:2px;margin:8px 0 0;padding:0;font:.85rem ui-monospace,monospace;list-style:none;display:grid}.log li.on{color:var(--ink)}.log li.off{color:var(--muted)}.log li.ped{color:var(--warn)}@media (height<=500px){.top{padding-top:6px}.now{padding-bottom:6px}.now-note{font-size:2.4rem}}.rotate-hint{color:var(--warn);margin:0 0 8px;font-size:.85rem;display:none}@media (orientation:portrait) and (width<=700px){.rotate-hint{display:block}}