:root{--paper:#f6f2e9;--surface:#fbf8f2;--ink:#22262a;--ink-soft:#3a3f44;--muted:#5b6066;--rule:#ddd6c8;--rule-strong:#c7bfaf;--accent:#2c6b66;--accent-ink:#fff;--accent-soft:#e2ecea;--warn-ink:#7a4d00;--warn-bg:#f7ead0;--danger-ink:#9a2f22;--danger-bg:#f6e1dc;--wave-ink:#2c6b66;--wave-dim:#a8a293;--wave-selection:#2c6b661a;--radius:6px;--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mark:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--space:16px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--font-ui);margin:0}h1,h2,h3{margin:0;font-weight:600}h2{font-size:1rem}p{margin:0}.num,.clock,.time,td.num{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.small-text{font-size:.85rem}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{min-height:100vh}.app.dragging{outline:3px dashed var(--accent);outline-offset:-8px}.header{justify-content:space-between;align-items:center;gap:var(--space);padding:14px max(var(--space), calc((100vw - 1080px) / 2));border-bottom:1px solid var(--rule);background:var(--surface);display:flex}.wordmark{font-family:var(--font-mark);letter-spacing:.01em;font-size:1.6rem;font-weight:500}.tagline{color:var(--muted);font-size:.9rem}.main{max-width:1080px;padding:20px var(--space) 64px;grid-template-columns:minmax(0,1fr);gap:18px;margin:0 auto;display:grid}.row{align-items:center;gap:10px;display:flex}.row.wrap{flex-wrap:wrap}button,select,input{font:inherit;color:inherit}button{border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--surface);min-height:36px;color:var(--ink);cursor:pointer;padding:6px 14px}button:hover:not(:disabled){border-color:var(--ink-soft)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}button.primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}button.ghost{background:0 0;border-color:#0000}button.ghost:hover:not(:disabled){border-color:var(--rule-strong)}button.small{min-height:30px;padding:3px 10px;font-size:.875rem}button.link{min-height:0;color:var(--accent);text-underline-offset:3px;background:0 0;border:0;padding:0;text-decoration:underline}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input:not([type=checkbox],[type=radio],[type=range]),select{border:1px solid var(--rule-strong);border-radius:var(--radius);background:#fff;min-height:34px;padding:4px 8px}input.num{width:8.5em}input[type=range]{accent-color:var(--accent)}.field{gap:3px;font-size:.875rem;display:grid}.field.inline{align-items:center;gap:6px;display:flex}.field small{color:var(--muted)}.hint{color:var(--muted);font-size:.875rem}.message{border-radius:var(--radius);background:var(--accent-soft);padding:8px 12px;font-size:.9rem}.message.error{background:var(--danger-bg);color:var(--danger-ink);justify-content:space-between;align-items:center;gap:10px;display:flex}.message.error.inline{padding:2px 8px;display:inline-block}.message.warning{background:var(--warn-bg);color:var(--warn-ink)}.message.stale{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.inputs{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.inputs .link{margin-left:auto}.empty-state{color:var(--muted);gap:12px;display:grid}.drop{border:1.5px dashed var(--rule-strong);background:var(--surface);min-height:180px;color:var(--ink);text-align:center;align-content:center;place-items:center;gap:6px;display:grid}.drop span{color:var(--muted);font-size:.9rem}.recorder{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);gap:10px;padding:14px 16px;display:grid}.recorder-head{justify-content:space-between;align-items:center;display:flex}.recorder-live{gap:10px;display:grid}.meter{background:var(--rule);border-radius:4px;height:8px;overflow:hidden}.meter-fill{background:var(--accent);transform-origin:0;height:100%}.workspace,.results,.recorder{grid-template-columns:minmax(0,1fr)}.workspace{gap:12px;padding-top:4px;display:grid}.source-meta{flex-wrap:wrap;align-items:baseline;gap:4px 14px;display:flex}.source-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden}.waveform{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface);cursor:crosshair;touch-action:none}.waveform canvas{display:block}.transport{align-items:center;gap:12px;display:flex}.transport .play{background:var(--ink);border-color:var(--ink);width:44px;height:44px;color:var(--paper);border-radius:50%;padding:0;font-size:.95rem}.transport .seek{flex:1;min-width:80px}.clock{min-width:13ch}.toggle{white-space:nowrap;align-items:center;gap:6px;font-size:.875rem;display:flex}.range-fields{flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.875rem;display:flex}.range-fields .label{font-weight:600}.transcribe{border-top:1px solid var(--rule);gap:12px;padding-top:12px;display:grid}.mode{border:0;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;display:flex}.mode legend{margin-bottom:6px;font-size:.875rem;font-weight:600}.mode label{align-items:baseline;gap:8px;font-size:.9rem;display:flex}.mode input{accent-color:var(--accent)}.advanced summary{cursor:pointer;color:var(--ink-soft);font-size:.875rem}.advanced fieldset{border:0;gap:12px;max-width:520px;margin:10px 0 0;padding:0;display:grid}.progress{gap:8px;display:grid}.indeterminate{background:linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat var(--rule);height:3px;animation:1.4s ease-in-out infinite slide}@keyframes slide{0%{background-position:-40% 0}to{background-position:140% 0}}.stages{color:var(--muted);flex-wrap:wrap;gap:4px 18px;margin:0;padding:0;font-size:.875rem;list-style:none;display:flex}.stages .done{color:var(--ink-soft)}.stages .current{color:var(--ink);font-weight:600}.results-bar{border-top:1px solid var(--rule-strong);flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;padding-top:18px;display:flex}.segmented{display:inline-flex}.segmented button{border-radius:0}.segmented button:first-child{border-radius:var(--radius) 0 0 var(--radius)}.segmented button:last-child{border-radius:0 var(--radius) var(--radius) 0;margin-left:-1px}.segmented button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.results{gap:12px;display:grid}.tabs{border-bottom:1px solid var(--rule);gap:4px;display:flex}.tab{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0}.tab.active{border-bottom-color:var(--accent);color:var(--ink);font-weight:600}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.legend{color:var(--muted);margin-bottom:8px;font-size:.8rem}.toolbar .legend{margin:0 0 0 auto}.table-wrap{border-top:1px solid var(--rule);max-height:560px;overflow:auto}table.data{border-collapse:collapse;width:100%;font-size:.9rem}.data th{z-index:1;background:var(--paper);border-bottom:1px solid var(--rule-strong);color:var(--muted);text-align:left;padding:7px 10px;font-size:.8rem;font-weight:600;position:sticky;top:0}.data td{border-bottom:1px solid var(--rule);padding:5px 10px}.data tbody tr{cursor:pointer}.data tbody tr:hover{background:var(--surface)}.data tbody tr.active{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.data td.note,.data td.chord{font-weight:600}.data td.chord.uncertain,.data td.chord.no_chord,.data td.chord.silence{color:var(--muted);font-weight:400}.data td.actions{white-space:nowrap;text-align:right}.mark{border:1px solid var(--rule-strong);color:var(--ink-soft);border-radius:3px;margin-right:6px;padding:0 6px;font-size:.75rem;display:inline-block}.score{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem}.empty{color:var(--muted);padding:14px 0}.note-editor{flex-wrap:wrap;align-items:end;gap:10px;padding:10px 0;display:flex}.note-editor input[type=number]{width:5em}.keyboard{border:1px solid var(--rule-strong);background:#fff;border-radius:4px;height:44px;display:flex;overflow:hidden}.key.white{border-right:1px solid var(--rule);flex:1;position:relative}.key.black{z-index:1;background:var(--ink-soft);border-radius:0 0 2px 2px;width:60%;height:58%;position:absolute;top:0;right:-30%}.key.on{background:var(--accent)!important}.key-label{text-align:center;color:var(--muted);font-size:8px;position:absolute;bottom:1px;left:0;right:0}dialog.help{border:1px solid var(--rule-strong);background:var(--paper);width:calc(100% - 32px);max-width:640px;max-height:85vh;color:var(--ink);border-radius:8px;padding:20px 24px}dialog.help::backdrop{background:#22262a59}.help-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}dialog.help h3{margin-top:16px;font-size:.95rem}dialog.help li,dialog.help p{margin:4px 0}dialog.help a{color:var(--accent);text-underline-offset:3px}@media (width<=640px){.header{align-items:flex-start}.inputs button{flex:30%}.inputs .link{margin-left:0}.transport{flex-wrap:wrap}.transport .seek{flex-basis:100%;order:3}.toolbar .legend{margin-left:0}.data td,.data th{padding:5px 6px}.data .score{display:none}.data td.actions button{margin-left:auto;display:block}.keyboard{height:34px}}@media (prefers-reduced-motion:reduce){.indeterminate{background:var(--accent);opacity:.4;animation:none}*{scroll-behavior:auto!important}}