:root{color-scheme:light;--ink:#1f2933;--muted:#5b6770;--line:#d9dfdf;--clean:#355d7a;--distorted:#8a6d2f;--paper:#fafaf7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 Avenir,"Helvetica Neue",sans-serif}main{padding:16px 18px 12px;max-width:900px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:23px;line-height:1.2;margin:0 0 10px;font-weight:800}h2{font-size:16px;margin:0;font-weight:800}button,select{font:inherit;color:var(--ink);border:1px solid #bbc4c8;border-radius:5px;background:white;min-height:36px;padding:5px 11px;cursor:pointer}button:hover:not(:disabled){background:#eef1f2}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--clean);outline-offset:3px}button:disabled{cursor:default;opacity:.42}.choices{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}.choices button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.settings{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px}.settings label{display:flex;align-items:center;gap:7px}select{font-size:13px;min-height:32px;padding:3px 6px}.notes{margin:8px 0;color:var(--ink);font-size:15px;font-weight:800}.transport{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.transport #clean{border-color:var(--clean)}.transport #processed{border-color:var(--distorted)}.transport .playing{box-shadow:inset 0 -3px currentColor}#status{font-size:12px;color:var(--muted);min-width:60px}progress{appearance:none;height:3px;width:100%;border:0;margin:8px 0 4px;background:#e7e9e6}progress::-webkit-progress-bar{background:#e7e9e6}progress::-webkit-progress-value{background:var(--distorted)}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin:4px 0 9px}.legend .clean{color:var(--clean)}.legend .distorted{color:var(--distorted)}.legend .clean:before,.legend .distorted:before{content:"";display:inline-block;width:18px;border-top:2px solid currentColor;vertical-align:middle;margin-right:6px}.legend .clean:before{border-top-style:dashed}section{margin:4px 0 10px}.plot-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:3px}.plot-title span{font-size:11px;color:var(--muted);text-align:right}svg{display:block;width:100%;height:auto;overflow:visible}svg text{font-family:Avenir,sans-serif;fill:var(--muted);font-size:13px}svg .grid{stroke:#d9dfdf;stroke-width:1}svg .trace-clean{fill:none;stroke:var(--clean);stroke-width:1.5;stroke-dasharray:5 3}svg .trace-processed{fill:none;stroke:var(--distorted);stroke-width:1.6}svg .input-frequency{stroke:#8d999f;stroke-dasharray:2 4;stroke-width:.7}.measurement{font-size:11px;margin:0;color:var(--muted)}#error{color:#8b2929;font-size:13px}#help{border:1px solid #bbc4c8;border-radius:8px;background:white;color:var(--ink);max-width:min(540px,calc(100vw - 24px));max-height:80vh;overflow:auto;padding:18px;font-size:14px;line-height:1.5;box-shadow:0 8px 32px #0002}#help::backdrop{background:#0001}#help p{margin:12px 0}a{color:var(--clean)}[hidden]{display:none!important}@media(max-width:420px){main{padding:12px 8px}h1{font-size:20px}.settings{gap:7px}.settings label{gap:5px}.choices button{padding:5px 8px}.transport button{padding:5px 8px}.legend{gap:7px;font-size:10px}.plot-title{gap:8px}.plot-title span{max-width:155px}.plot-title h2{font-size:15px}svg text{font-size:16px}}
:root .peak-marker{stroke-dasharray:none;fill:var(--paper);stroke-width:2}
main[data-heard=clean] .trace-clean,main[data-heard=processed] .trace-processed{stroke-width:2.6}
main[data-heard=clean] .trace-processed{opacity:.35}
main[data-heard=processed] .trace-clean{opacity:.65}