:root{--bg:#0b0c10;--panel:#14161c;--fg:#e8e9ee;--muted:#8a8f9c;--accent:#6ee7f0;color:var(--fg);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}#app{grid-template-rows:auto 1fr auto auto;gap:.5rem;height:100vh;padding:.75rem;display:grid}.bar{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}h1{letter-spacing:.02em;margin:0;font-size:1.1rem;font-weight:600}.file-btn input{display:none}.file-btn span,.modes button{background:var(--panel);color:var(--fg);font:inherit;cursor:pointer;border:1px solid #2a2e38;border-radius:999px;padding:.4rem .9rem;font-size:.9rem;display:inline-block}.file-btn span{border-color:var(--accent);color:var(--accent)}.file-btn span:hover,.modes button:hover{background:#1c1f27}.modes{gap:.25rem;display:flex}.modes button.active{background:var(--accent);color:#06262a;border-color:var(--accent)}.title{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:40ch;margin-left:auto;font-size:.9rem;overflow:hidden}.stage{background:var(--panel);border:1px dashed #2a2e38;border-radius:12px;min-height:0;position:relative;overflow:hidden}.stage.dragover{border-color:var(--accent)}.stage canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.hint{text-align:center;color:var(--muted);pointer-events:none;place-content:center;display:grid;position:absolute;inset:0}.hint p{margin:.25rem 0}.hint .small{margin-top:1rem;font-size:.8rem}.stage.loaded .hint{display:none}#piano{background:var(--bg);border-radius:8px;width:100%;height:96px;display:block}.status{color:var(--accent);min-height:1.2em;font-size:.9rem}.hint.busy .small,.hint.busy strong{opacity:.5}audio{width:100%}