:root {
  --bg: #F3F5F7; --surface: #FFFFFF; --sunk: #EEF1F4; --ink: #17222D; --muted: #5A6774; --line: #D8DEE4;
  --signal: #3D5F82; --orig: #B7790A; --algo: #0D7A64; --note: #6B4FC8; --env: #A4407A;
  /* indicators on the plot (step detectors, envelopes): one colour each, in this order */
  --c1: #B7790A; --c2: #0D7A64; --c3: #A4407A; --c4: #C2410C; --c5: #5F6E00; --c6: #8B5A2B;
  --err: #B42318; --err-bg: #FDF0EE; --warn: #8F5400; --warn-bg: #FDF5E8; --ok: #2F7D32; --ok-bg: #EEF7EE;
  --info: #3D5F82; --info-bg: #EEF3F8; --focus: #2B6CB0;
  --font: "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10171E; --surface: #172029; --sunk: #131B23; --ink: #E4EAF0; --muted: #97A4B1; --line: #2A3643;
    --signal: #8DB0D6; --orig: #E3A93B; --algo: #3DC1A2; --note: #A68CF2; --env: #E58BBE;
    --c1: #E3A93B; --c2: #3DC1A2; --c3: #E58BBE; --c4: #F08A5D; --c5: #B5C34A; --c6: #D2A679;
    --err: #F07A6E; --err-bg: #2A1716; --warn: #E0A548; --warn-bg: #271F12; --ok: #6CC070; --ok-bg: #16241A;
    --info: #8DB0D6; --info-bg: #16212C; --focus: #7FB2EC; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10171E; --surface: #172029; --sunk: #131B23; --ink: #E4EAF0; --muted: #97A4B1; --line: #2A3643;
  --signal: #8DB0D6; --orig: #E3A93B; --algo: #3DC1A2; --note: #A68CF2; --env: #E58BBE;
  --c1: #E3A93B; --c2: #3DC1A2; --c3: #E58BBE; --c4: #F08A5D; --c5: #B5C34A; --c6: #D2A679;
  --err: #F07A6E; --err-bg: #2A1716; --warn: #E0A548; --warn-bg: #271F12; --ok: #6CC070; --ok-bg: #16241A;
  --info: #8DB0D6; --info-bg: #16212C; --focus: #7FB2EC; color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 28px 16px; border-bottom: 1px solid var(--line); }
.top h1 { font-size: 22px; letter-spacing: -0.01em; }
.top p { margin: 4px 0 0; color: var(--muted); max-width: 68ch; font-size: 14px; }
.filechip { font-size: 13px; color: var(--muted); text-align: right; max-width: 40ch; min-width: 0; }
.top-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-tools .btn { padding: 5px 10px; font-size: 13px; white-space: nowrap; }
a.btn { color: inherit; text-decoration: none; } /* the repository link, dressed as the buttons beside it */
.filechip strong { display: block; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: calc(100% - 90px); }
/* The controls stay in view while the results scroll; the divider sits on main so it runs full height. */
aside { padding: 6px 0 24px; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
aside section { padding: 16px 22px; border-bottom: 1px solid var(--line); }
aside section:last-child { border-bottom: 0; }
aside h2 { font-size: 14px; margin-bottom: 10px; }
.hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

.drop { display: block; border: 1.5px dashed var(--line); border-radius: 8px; padding: 14px; text-align: center; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--signal); background: var(--info-bg); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop strong { display: block; font-weight: 600; }
.drop span { font-size: 13px; color: var(--muted); }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.link { background: none; border: 0; padding: 0; color: var(--signal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 13px; }
.link:hover { color: var(--ink); }

.field { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }
.field select, .field input[type=number] { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 14px; }

.ctl { margin-top: 12px; }
.ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.ctl-head label { color: var(--ink); font-weight: 500; }
.ctl-head output { color: var(--muted); font-variant-numeric: tabular-nums; }
.ctl-head input[type=number] { width: 84px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
input[type=range] { width: 100%; margin: 6px 0 0; accent-color: var(--signal); }

.check { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; margin-top: 12px; font-size: 14px; cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--algo); }
.check small { grid-column: 2; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "▾"; margin-left: 6px; font-size: 11px; color: var(--muted); display: inline-block; transition: transform .15s; }
details[open] > summary::after { transform: rotate(180deg); }
/* a menu's own settings, shown under it while it is in use */
.sub-opts { margin: 4px 0 4px 2px; padding: 2px 0 4px 12px; border-left: 2px solid var(--line); }
.howto { margin-top: 8px; font-size: 13px; color: var(--muted); }
.howto > summary { color: var(--signal); }
.howto p { margin: 6px 0 0; }
.credit a { color: inherit; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13.5px; font-weight: 500; }
.btn:hover:not(:disabled) { border-color: var(--signal); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--signal); border-color: var(--signal); color: var(--surface); }
.stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

main { padding: 20px 28px 40px; min-width: 0; border-left: 1px solid var(--line); }
.empty { max-width: 560px; margin: 8vh auto; text-align: center; }
.empty h2 { font-size: 20px; margin-bottom: 8px; }
.empty p { color: var(--muted); margin: 0 0 18px; }
.empty .stack { justify-content: center; }
.metrics .spec-col { color: var(--muted); }
.demo-menu .exp-panel { left: 50%; right: auto; transform: translateX(-50%); display: grid; gap: 6px; text-align: left; }
.demo-pick { display: block; width: 100%; padding: 8px 10px; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.demo-pick:hover, .demo-pick:focus-visible { border-color: var(--signal); }
.demo-pick b { display: block; font-size: 14px; }
.demo-pick span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.formats { margin-top: 28px; text-align: left; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }
.formats b { color: var(--ink); font-weight: 600; }
.formats p { margin: 0 0 8px; }

.validation { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.val-summary { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 16px; background: none; border: 0; text-align: left; cursor: pointer; }
.val-summary .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.val-summary .t { font-weight: 600; }
.val-summary .s { color: var(--muted); font-size: 13.5px; flex: 1; }
.val-summary .chev { color: var(--muted); font-size: 12px; transition: transform .15s; }
.val-summary[aria-expanded="true"] .chev { transform: rotate(180deg); }
.val-list { list-style: none; margin: 0; padding: 0 16px 12px; display: grid; gap: 6px; }
.val-list > li:not(.val-item) { padding: 2px 2px 0; }
.val-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 12px; border-radius: 7px; font-size: 13.5px; }
.val-item .ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--surface); margin-top: 1px; }
.val-item b { font-weight: 600; }
.val-item p { margin: 2px 0 0; color: var(--muted); }
.val-item .fix { color: var(--ink); margin-top: 4px; }
.val-item code { font-size: 12.5px; background: var(--sunk); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.lv-error { background: var(--err-bg); } .lv-error .ic { background: var(--err); }
.lv-warn { background: var(--warn-bg); } .lv-warn .ic { background: var(--warn); }
.lv-info { background: var(--info-bg); } .lv-info .ic { background: var(--info); }
.lv-pass { background: var(--ok-bg); } .lv-pass .ic { background: var(--ok); }

.plot-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 4px; }
.plot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 2px 6px 6px; }
.plot-head h2 { font-size: 15px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend svg { flex: none; }
/* the indicators' entries wrap like the others: their span adds no box of its own */
.legend #legInd { display: contents; }
.plot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 6px 8px; font-size: 13px; color: var(--muted); }
.plot-tools .btn { padding: 4px 9px; font-size: 12.5px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-weight: 500; cursor: pointer; }
.toggle input { margin: 0; accent-color: var(--note); }
.toggle:has(input:checked) { border-color: var(--note); color: var(--note); }
.toggle:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.toggle.iv input { accent-color: var(--algo); }
.toggle.env { cursor: default; }
.toggle.env select { margin: 0; padding: 1px 4px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.toggle.iv:has(input:checked) { border-color: var(--algo); color: var(--algo); }
.note-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.note-form label { color: var(--note); font-weight: 500; }
.note-form input { width: 18ch; padding: 4px 7px; border: 1px solid var(--note); border-radius: 5px; background: var(--surface); font-size: 13px; }
.note-hint { color: var(--note); }
.plot-card.noting #plot, .spectrum-card.noting #specPlot { cursor: crosshair; }
.note-opts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.note-opts select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
.note-list .extra { color: var(--muted); }
.note-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 6px 8px; padding: 0; font-size: 13px; }
.note-list li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 9px; border: 1px solid var(--line); border-radius: 999px; }
.note-list b { color: var(--note); font-weight: 600; font-variant-numeric: tabular-nums; }
.note-list button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.note-list button:hover { color: var(--ink); }
#plot { width: 100%; height: min(64vh, 560px); min-height: 380px; }

.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.steps > summary { display: flex; align-items: baseline; }
.steps > summary h2 { margin: 0; }
.steps[open] > summary { margin-bottom: 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.card h2 { font-size: 15px; margin-bottom: 8px; }
.freq { margin-top: 18px; }
.freq > h2 { margin: 0; }
.freq-sum { color: var(--ink); }
.freq-view { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.freq-view h3 { font-size: 14px; margin: 0; }
.method-tag { margin: 4px 0 6px; }
.method-box .ctl { margin-top: 4px; }
#specPlot { height: 280px; }
#spectroPlot { height: 240px; }
#spectroPlot image { image-rendering: pixelated; } /* one block per window and row, not smeared between them */
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.card-head h2 { margin-bottom: 0; }
.card-head .stack { margin-top: 0; }
.card-head .btn { padding: 4px 9px; font-size: 12.5px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; font-size: 12.5px; color: var(--muted); }
td.num, th.num { text-align: right; }
.metrics td:first-child { color: var(--ink); }
.metrics td small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.metrics .col-orig { color: var(--orig); }
.metrics .col-algo { color: var(--algo); }
.metrics td.diff { font-weight: 600; }
.metrics .tip { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; cursor: help; }
.note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.tablewrap { max-height: 360px; overflow: auto; }
.tablewrap thead th { position: sticky; top: 0; background: var(--surface); }
tr.only-orig td { color: var(--muted); }
.privacy { font-size: 12.5px; color: var(--muted); margin-top: 22px; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 7px; font-size: 13.5px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
/* Home's "keep your work?" question (#79) */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.modal-box { width: 100%; max-width: 460px; padding: 20px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.modal-box h2 { font-size: 18px; margin: 0 0 8px; }
.modal-box p { font-size: 14px; color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  aside { position: static; max-height: none; overflow: visible; border-bottom: 1px solid var(--line); }
  main { padding: 16px; border-left: 0; }
  .top { padding: 18px 16px 14px; flex-direction: column; align-items: flex-start; }
  .filechip { text-align: left; max-width: 100%; }
  .top-tools { width: 100%; }
  .top-tools .filechip { flex: 1; }
}
/* indicators: step detectors and envelopes on the plot, each a row with its colour */
aside h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 0; }
.ind-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ind { min-width: 0; border: 1px solid var(--line); border-left: 3px solid var(--ic); border-radius: 6px; background: var(--surface); }
.ind.off { opacity: .6; }
.ind-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; min-width: 0; }
.ind .sw { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ic); }
.ind .sw.band { border-radius: 2px; background: color-mix(in srgb, var(--ic) 30%, transparent); border: 1px solid var(--ic); }
.ind-name { flex: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; }
.ind-name:hover { text-decoration: underline; }
.ind-sum { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-btn { flex: none; width: 26px; height: 26px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.ind-btn:hover { border-color: var(--line); color: var(--ink); }
.ind-body { padding: 0 10px 10px; border-top: 1px solid var(--line); min-width: 0; }
.ind-body input[type=range] { width: 100%; }
.ind-body .field:first-of-type { margin-top: 8px; }
.field.add { margin-top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Export… menu (#53) */
.exp { position: relative; }
.exp > summary { list-style: none; }
.exp > summary::-webkit-details-marker { display: none; }
.exp-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(320px, calc(100vw - 32px)); padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.exp-panel .field { margin-top: 0; }
.exp-panel .stack { margin-top: 10px; }
.exp-panel .btn { padding: 6px 11px; font-size: 13px; }
/* recorder overlay (#51): covers the page so touches in a pocket change nothing */
.rec-btn { margin-top: 10px; width: 100%; justify-content: center; }
#saveRec { margin-top: 12px; }
body.recording { overflow: hidden; }
.rec-overlay { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; padding: 24px 16px; touch-action: none; user-select: none; -webkit-user-select: none; }
.rec-box { width: 100%; max-width: 420px; text-align: center; }
.rec-box h2 { font-size: 20px; margin: 0 0 8px; }
.rec-big { font-size: 64px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 8px 0; color: var(--signal); }
.rec-big:empty { display: none; }
.rec-info { color: var(--muted); margin: 0 0 20px; }
.rec-box .field, .rec-box .hint { text-align: left; }
.rec-box .stack { justify-content: center; }
.rec-stop { position: relative; overflow: hidden; width: 100%; padding: 22px; border-radius: 12px; border: 2px solid var(--orig); background: var(--surface); color: var(--ink); font-size: 18px; font-weight: 600; cursor: pointer; touch-action: none; -webkit-touch-callout: none; }
.rec-fill { position: absolute; inset: 0; width: 0; background: var(--orig); opacity: .35; transition: width 0s; }
.rec-stop.holding .rec-fill { width: 100%; transition: width 1s linear; }
.rec-label { position: relative; }
#recErrText { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }