:root{--bg:#0a0b0d;--panel:#14161a;--panel-2:#1a1d22;--border:#24282e;--border-2:#2f353e;--text:#e8ecf1;--muted:#8b919b;--accent:#1de9b6;--accent-2:#0faa84;--amber:#ffb020;--lit:#2f6fd6;--mine:#e8590c;--sans:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;--mono:"Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--accent)}code{font-family:var(--mono);font-size:.9em}h2{margin:0;font-size:18px}.app{flex-direction:column;gap:12px;max-width:1100px;margin:0 auto;padding:16px 14px 190px;display:flex}.app.dragging{outline:2px dashed var(--accent);outline-offset:-6px}.top{align-items:center;gap:12px;display:flex}.top h1{letter-spacing:-.01em;margin:0;font-size:24px}.top p{margin:2px 0 0}.muted{color:var(--muted)}.small{font-size:13px}.mono{font-family:var(--mono);font-size:13px}.spacer{flex:1}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:12px;padding:14px;display:flex}.welcome p{margin:0;line-height:1.5}.guide summary{cursor:pointer;color:var(--accent);font-size:14px}.guide[open]>*+*{margin-top:10px}.guide ol{margin:0;padding-left:22px;font-size:14px;line-height:1.6}.guide p{color:var(--muted);font-size:14px}.kept h3{margin:4px 0 6px;font-size:15px}.kept ul{flex-direction:column;gap:2px;margin:0 0 6px;padding:0;list-style:none;display:flex}.kept li{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:4px 0;display:flex}.kept li .link{text-align:left;font-size:15px}.kept li .muted{flex:1}button.forget{min-height:28px;padding:0 9px;font-size:16px;line-height:1}.notices{background:#17150f;border-color:#5a4a1e;gap:8px}.notices p{margin:0;font-size:14px;line-height:1.5}.words{background:var(--panel-2);border:1px solid var(--border-2);border-radius:10px;flex-direction:column;gap:8px;padding:12px;display:flex}.words label{font-weight:600}.words p{margin:0}.words textarea{background:var(--bg);border:1px solid var(--border-2);font:inherit;color:inherit;resize:vertical;border-radius:6px;width:100%;padding:8px;font-size:15px}button.link{min-height:0;color:var(--accent);font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.row{flex-wrap:wrap;align-items:center;gap:8px 14px;display:flex}.actions{flex-wrap:wrap;gap:10px;display:flex}.label{color:var(--muted);min-width:56px;font-size:13px}label{align-items:center;gap:6px;font-size:14px;display:inline-flex}input,select{background:var(--panel-2);border:1px solid var(--border-2);border-radius:6px;padding:5px 7px}input[type=checkbox],input[type=range]{accent-color:var(--accent)}input[type=range]{padding:0}button,.button{background:var(--panel-2);border:1px solid var(--border-2);cursor:pointer;border-radius:8px;min-height:40px;padding:8px 14px;font-size:15px}button:disabled{opacity:.4;cursor:default}button.play{background:var(--accent);border-color:var(--accent);color:#04130e;min-width:96px;font-weight:700}.file{align-items:center;display:inline-flex}.file input{display:none}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips button{border-radius:999px;min-height:36px;padding:6px 14px}.chips button.on{background:var(--accent);color:#04130e;border-color:var(--accent);font-weight:600}.error{color:#ff8a80;margin:0}.mixer summary{cursor:pointer;color:var(--muted);padding:4px 0;font-size:14px}.mixer[open] summary{margin-bottom:10px}.mixer>label{margin-top:10px}.channels{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;display:grid}.channel{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;align-items:center;gap:8px;padding:6px 10px;display:flex}.channel.is-mine{border-color:var(--accent-2)}.channel .name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:14px;font-weight:600;overflow:hidden}.channel input[type=range]{width:90px}.ms{min-width:34px;min-height:32px;padding:2px 8px;font-size:13px;font-weight:700}.ms.on{color:#fff;background:#d24b4b;border-color:#d24b4b}.ms.solo.on{background:var(--amber);border-color:var(--amber);color:#1a1200}.score{color:#111;cursor:pointer;background:#fdfcf8;border-radius:10px;min-height:120px;padding:4px}.score .muted{color:#666;margin:0;padding:12px}.score .error{padding:12px}.score-page svg{width:100%;height:auto;display:block}.score g.note.mine{color:#0b5f49;fill:#0b5f49}.score g.note.mark-good{color:#2b8a3e;fill:#2b8a3e}.score g.note.mark-close{color:#d08700;fill:#d08700}.score g.note.mark-off{color:#d62828;fill:#d62828}.score g.note.mark-missed{color:#9aa0a6;fill:#9aa0a6}.score g.note.lit{color:var(--lit);fill:var(--lit);stroke:var(--lit)}.score g.note.lit.mine{color:var(--mine);fill:var(--mine);stroke:var(--mine)}.score g.note.lit .notehead{filter:drop-shadow(0 0 2px)}.score g.note.focus{color:var(--mine);fill:var(--mine);stroke:var(--mine)}.score g.note.focus .notehead{filter:drop-shadow(0 0 3px var(--mine)) drop-shadow(0 0 1px var(--mine))}.stage{z-index:4;background:var(--bg);flex-direction:column;gap:8px;margin:-6px 0;padding:6px 0;display:flex;position:sticky;top:0}.pitch{border:1px solid var(--border);cursor:pointer;background:#101216;border-radius:10px;height:168px;overflow:hidden}.pitch canvas{width:100%;height:100%;display:block}.learn{border-color:#6b3a1a;gap:6px;padding:10px 14px}.learn .learn-what{font-size:16px}.learn .lyric{font-style:italic}.learn .actions{gap:6px}.learn .actions button{min-height:34px;padding:4px 12px}.learn .keys{margin:0}button.learn-toggle[aria-pressed=true]{background:var(--mine);border-color:var(--mine);color:#fff}.transport{z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border);padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#101216f5;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:0;left:0;right:0}.transport>*{width:100%;max-width:1100px;margin:0 auto}.transport .status{font-family:var(--mono);margin-left:auto;font-size:14px}.transport .scrub{width:100%}.transport .tempo input{width:120px}.loop-range{align-items:center;gap:6px;font-size:14px;display:inline-flex}.results h2{font-size:17px}.results p{margin:0;line-height:1.5}.tips{flex-direction:column;gap:6px;margin:0;padding-left:20px;font-size:15px;line-height:1.5;display:flex}.legend i{vertical-align:-1px;border-radius:50%;width:10px;height:10px;margin:0 4px 0 10px;display:inline-block}.legend i:first-child{margin-left:0}.legend .good{background:#2b8a3e}.legend .close{background:#d08700}.legend .off{background:#d62828}.legend .missed{background:#9aa0a6}button.sing{border-color:#d62828}button.sing.on{color:#fff;background:#d62828}.credits{text-align:center;margin-top:8px}@media (width<=560px){.top h1{font-size:20px}.top p{display:none}.transport .row{gap:6px 10px}.transport label{font-size:13px}.transport .tempo input{width:96px}.pitch{height:120px}.learn .keys,.learn .done{display:none}.transport button.play{min-width:76px}button,.button{padding:7px 11px;font-size:14px}}