:root {
  --paper:#f8f9fa; --surface:#ffffff; --text:#18212d; --muted:#5b6878;
  --line:#dce2e9; --control-border:#85909e; --soft:#f4f6f8; --action:#155d9c; --on-action:#ffffff;
  font-family: Inter, Helvetica, Arial, sans-serif;
  color:var(--text); background:var(--paper); color-scheme:light;
  font-synthesis:none; -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
body { margin:0; }
main { width:min(100% - 2.5rem, 35rem); margin:1.25rem auto 1.5rem; }
header { margin-block-end:2rem; }
h1 { font-size:1.75rem; line-height:1.2; font-weight:600; letter-spacing:-.055rem; margin:0 0 .75rem; }
header p { color:var(--muted); font-size:.9375rem; line-height:1.6; margin:0; max-width:30rem; }
h2 { font-size:1.125rem; font-weight:600; letter-spacing:-.02rem; margin:0 0 1rem; }
.recorder { background:var(--surface); border:1px solid var(--line); padding:1.5rem; border-radius:.5rem; }
.mode { display:flex; gap:.25rem; padding:.25rem; background:var(--soft); border-radius:.75rem; margin-block-end:1.75rem; }
button, select, .primary { font-family:inherit; font-size:.9375rem; line-height:1.4; }
button { cursor:pointer; border:1px solid var(--control-border); border-radius:.5rem; padding:.625rem 1rem; min-height:2.75rem; background:var(--surface); color:var(--text); }
.mode button { flex:1; background:transparent; border-color:transparent; border-radius:.5rem; }
.mode button[aria-pressed="true"] { background:var(--surface); border-color:var(--control-border); font-weight:600; }
.settings { display:grid; gap:1.5rem; }
.field { min-width:0; }
label { font-size:.875rem; font-weight:500; display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; margin-block-end:.625rem; }
select { color:var(--text); width:100%; min-height:2.75rem; border:1px solid var(--control-border); border-radius:.5rem; background:var(--surface); padding:.625rem .75rem; }
.sound-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-block-start:.625rem; }
.quiet { background:transparent; }
.hint { color:var(--muted); font-size:.8125rem; line-height:1.6; margin:.5rem 0 0; }
output { font-size:.8125rem; color:var(--muted); font-variant-numeric:tabular-nums; }
input[type="range"] { width:100%; margin:0; min-height:1.5rem; accent-color:var(--action); cursor:pointer; }
.range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; line-height:1.5; }
.check { justify-content:flex-start; align-items:center; min-height:2.75rem; margin:0; cursor:pointer; }
.check input { accent-color:var(--action); width:1.125rem; height:1.125rem; margin:0; flex-shrink:0; }
.check-hint { margin:0; padding-inline-start:1.875rem; }
.capture { border-block-start:1px solid var(--line); margin-block-start:1.5rem; padding-block-start:1.5rem; }
.capture-info { display:flex; justify-content:space-between; gap:1rem; font-size:.875rem; line-height:1.5; }
#timer { font-variant-numeric:tabular-nums; color:var(--muted); }
#camera { width:100%; max-height:22rem; display:block; background:var(--soft); border-radius:.5rem; margin-block-end:1rem; }
.primary { background:var(--action); color:var(--on-action); border:1px solid var(--action); border-radius:.5rem; min-height:2.75rem; padding:.75rem 1rem; text-align:center; font-weight:500; display:block; width:100%; text-decoration:none; cursor:pointer; }
.capture .primary { margin-block-start:1.25rem; }
button:disabled,select:disabled,input:disabled { cursor:not-allowed; opacity:.5; }
#status { font-size:.875rem; line-height:1.6; margin:.875rem 0; }
#status:empty { margin:0; }
.result { margin-block-start:1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:.5rem; padding:1.5rem; }
.result audio,.result video { display:block; width:100%; max-height:25rem; }
.result .download { margin-block-start:1rem; }
details { margin-block:1rem; }
summary { cursor:pointer; font-size:.875rem; line-height:1.6; padding-block:.625rem; }
details audio,details video { margin-block:.625rem; }
.text-link { display:inline-block; color:var(--text); font-size:.875rem; text-underline-offset:3px; padding-block:.625rem; }
footer { margin-block-start:1.5rem; }
footer p { color:var(--muted); font-size:.75rem; line-height:1.6; margin:.25rem 0; }
:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
@media(hover:hover) { button:hover:not(:disabled),.quiet:hover { background:var(--soft); } .primary:hover:not(:disabled) { background:#285986; color:var(--on-action); } }
@media(max-width:25rem) { main { margin-block-start:2rem; width:calc(100% - 2rem); } .recorder,.result { padding:1rem; } select { font-size:1rem; } }
@media(forced-colors:active) { :focus-visible { outline-color:Highlight; } .mode button[aria-pressed="true"] { border:2px solid Highlight; } }
[hidden] { display:none!important; }

.record-button { display:flex; align-items:center; justify-content:center; gap:.75rem; width:100%; min-height:4rem; margin-block-start:1.25rem; background:#b42332; border-color:#b42332; color:#fff; font-weight:600; font-size:1rem; border-radius:2rem; }
.record-mark { width:1.25rem; height:1.25rem; border:2px solid currentColor; border-radius:50%; background:currentColor; }
.stop-mark { width:1.125rem; height:1.125rem; border-radius:.125rem; background:currentColor; }
.capture.is-recording .capture-info { color:#b42332; font-weight:600; }
.wave { display:block; width:100%; height:5rem; border-radius:.5rem; background:var(--paper); }
.live-wave { margin-block-end:1rem; }
.comparison { margin-block-start:1.5rem; }
h3 { font-size:.9375rem; line-height:1.4; font-weight:600; margin:0; }
figure { margin:1rem 0; }
figcaption { font-size:.8125rem; line-height:1.5; margin-block-end:.5rem; }
@media(hover:hover) { .record-button:hover:not(:disabled) { background:#941b28; color:#fff; } }
@media(prefers-reduced-motion:reduce) { .live-wave { display:none; } }

.app-header { display:flex; align-items:center; gap:1rem; margin-block-end:1rem; min-height:2.75rem; }
.brand { display:inline-flex; align-items:center; gap:.5rem; min-height:2.75rem; color:#111; font-size:1.125rem; font-weight:700; letter-spacing:-.035rem; text-decoration:none; flex-shrink:0; }
.brand img { display:block; width:2.625rem; height:2rem; }
.app-header h1 { border-inline-start:1px solid var(--line); padding-inline-start:1rem; margin:0; font-size:1.125rem; line-height:1.4; font-weight:600; letter-spacing:-.025rem; }
.mode button[aria-pressed="true"] { color:var(--action); border-color:var(--action); }
@media(max-width:40rem) {
  main { margin-block-start:.5rem; width:calc(100% - 2rem); }
  .app-header { margin-block-end:.5rem; gap:.75rem; }
  .app-header h1 { padding-inline-start:.75rem; font-size:1rem; }
  .recorder,.result { padding:1rem; }
  .mode { margin-block-end:1rem; }
  .settings { gap:1rem; }
  .capture { margin-block-start:1rem; padding-block-start:1rem; }
  select { font-size:1rem; }
  footer { margin-block-start:1rem; }
}

.version { margin-block-start:1.25rem; }
.version h3 { margin-block-end:.75rem; }
.version .wave { margin-block-start:.5rem; }
.version .text-link { min-height:2.75rem; }
.result #discard { margin-block-start:1rem; }

/* One shared selection surface slides between the two native buttons. */
.mode { position:relative; isolation:isolate; }
.mode::before {
  content:"";
  position:absolute;
  inset-block:.25rem;
  inset-inline-start:.25rem;
  width:calc(50% - .375rem);
  border:1px solid var(--action);
  border-radius:.5rem;
  background:var(--surface);
  pointer-events:none;
  z-index:-1;
  transform:translateX(0);
}
.mode:has(#videoMode[aria-pressed="true"])::before { transform:translateX(calc(100% + .25rem)); }
.mode button, .mode button[aria-pressed="true"] { background:transparent; border-color:transparent; }
@media(hover:hover) { .mode button:hover:not(:disabled) { background:transparent; color:var(--action); } }
@media(prefers-reduced-motion:no-preference) {
  .mode::before { transition:transform 150ms cubic-bezier(0.2, 0, 0, 1); }
}
@media(forced-colors:active) {
  .mode::before { border-color:Highlight; }
  .mode button[aria-pressed="true"] { color:Highlight; }
}

#levelValue { color:var(--action); background:#edf5fc; border-radius:.375rem; padding:.25rem .5rem; font-weight:600; white-space:nowrap; }
input[type="range"] { --fill:60%; appearance:none; -webkit-appearance:none; height:2.75rem; background:transparent; display:block; padding:0; }
input[type="range"]::-webkit-slider-runnable-track { height:.375rem; border-radius:1rem; background:linear-gradient(to right,var(--action) 0,var(--action) var(--fill),#e1e7ee var(--fill),#e1e7ee 100%); }
input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:1.375rem; height:1.375rem; margin-top:-.5rem; background:white; border:3px solid var(--action); border-radius:50%; box-shadow:0 1px 3px #0002; }
input[type="range"]::-moz-range-track { height:.375rem; border-radius:1rem; background:#e1e7ee; }
input[type="range"]::-moz-range-progress { height:.375rem; border-radius:1rem; background:var(--action); }
input[type="range"]::-moz-range-thumb { width:1rem; height:1rem; background:white; border:3px solid var(--action); border-radius:50%; box-shadow:0 1px 3px #0002; }
.range-labels { margin-block-start:-.125rem; }
.adaptive-setting { padding:0; }
.adaptive-setting .check { justify-content:space-between; gap:1rem; font-weight:500; }
.adaptive-setting .hint { margin:.125rem 0 0; max-width:26rem; }
#duck { appearance:none; -webkit-appearance:none; position:relative; width:2.5rem; height:1.5rem; border-radius:1rem; background:#738093; border:1px solid transparent; cursor:pointer; flex-shrink:0; }
#duck::before { content:""; position:absolute; inset-block-start:2px; inset-inline-start:2px; width:1.125rem; height:1.125rem; border-radius:50%; background:#fff; box-shadow:0 1px 2px #0002; transform:translateX(0); }
#duck:checked { background:var(--action); }
#duck:checked::before { transform:translateX(1rem); }
@media(prefers-reduced-motion:no-preference) { #duck { transition:background-color 150ms; } #duck::before { transition:transform 150ms cubic-bezier(0.2,0,0,1); } }
@media(forced-colors:active) { #duck { appearance:auto; width:1.5rem; background:Canvas; } #duck::before { display:none; } input[type="range"] { appearance:auto; } input[type="range"]::-webkit-slider-thumb { border-color:Highlight; } }

.app-header h1 { display:flex; align-items:center; gap:.5rem; }
.app-icon { width:1.5rem; height:1.5rem; object-fit:contain; flex-shrink:0; }
@media(max-width:22rem) { .app-header { gap:.5rem; } .app-header h1 { gap:.375rem; padding-inline-start:.5rem; font-size:.9375rem; } }

footer { text-align:center; }
footer strong { color:var(--text); font-weight:600; }

.copyright { display:flex; flex-direction:column; align-items:center; gap:.25rem; margin-block-start:1.5rem; padding-block:.5rem; color:var(--muted); font-size:.75rem; line-height:1.6; }
.copyright a { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.75rem; color:var(--text); font-size:.9375rem; font-weight:600; text-decoration:none; }
.copyright img { display:block; width:2rem; height:1.5rem; }

.wave-timeline { position:relative; overflow:hidden; border-radius:.5rem; }
.version .wave-timeline { margin-block-start:.5rem; }
.version .wave-timeline .wave { margin-block-start:0; }
.playhead { position:absolute; inset-block:0; left:0; width:2px; background:#155d9c; transform:translateX(-50%); pointer-events:none; }
@media(forced-colors:active) { .playhead { background:Highlight; } }

.download-button { display:flex; align-items:center; justify-content:center; width:min(100%, 20rem); min-height:3rem; margin:1rem auto 0; padding:.75rem 1rem; border:1px solid var(--control-border); border-radius:.5rem; font-size:.9375rem; font-weight:500; line-height:1.4; text-align:center; text-decoration:none; }
.download-secondary { background:var(--surface); color:var(--text); }
.download-primary { background:var(--action); border-color:var(--action); color:var(--on-action); }
.result #discard { display:block; margin:1.25rem auto 0; }
@media(hover:hover) { .download-secondary:hover { background:var(--soft); } .download-primary:hover { background:#285986; } }
dialog { width:min(26rem, calc(100% - 2rem)); max-height:calc(100dvh - 2rem); margin:auto; padding:1.5rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); color:var(--text); box-shadow:0 16px 48px #18212d26; overscroll-behavior:contain; }
dialog::backdrop { background:#18212d66; }
dialog h2 { margin:0 0 .75rem; }
dialog p { font-size:.9375rem; line-height:1.6; color:var(--muted); margin:0; }
.dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.75rem; margin-block-start:1.5rem; }
.dialog-confirm { background:var(--action); border-color:var(--action); color:var(--on-action); }
@media(hover:hover) { .dialog-confirm:hover:not(:disabled) { background:#285986; } }
@media(max-width:26rem) { .dialog-actions { flex-direction:column; } .dialog-actions button { width:100%; } }

.spectral-analysis { margin-block:1.5rem; padding-block-start:1.5rem; border-block-start:1px solid var(--line); }
#analyze { margin-block-start:.75rem; }
.spectrogram { display:block; width:100%; height:auto; }
.spectrum-legend { display:flex; align-items:center; gap:.5rem; margin-block-start:1rem; font-size:.6875rem; color:var(--muted); }
.spectrum-gradient { flex:1; min-width:1rem; height:.5rem; background:linear-gradient(to right,#f8f9fa,#155d9c); }

/* Wider work area on desktop; the single-column mobile flow stays intact. */
.versions, .version, .capture { min-width:0; }
@media(min-width:56rem) {
  main { width:min(calc(100% - 4rem), 68rem); margin-block-start:2rem; }
  .app-header { margin-block-end:1.5rem; }
  .recorder { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:3rem; padding:2rem; }
  .mode { grid-column:1; margin-block-end:1.5rem; }
  .settings { grid-column:1; }
  .capture { grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; padding:0; border:0; }
  #camera { max-height:26rem; }
  .live-wave { height:8rem; }
  .record-button { max-width:22rem; margin-inline:auto; }
  .result { padding:2rem; }
  .versions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
  .version { display:flex; flex-direction:column; }
  .version .download-button { margin-block-start:1rem; }
  .version .wave { height:7rem; }
  #spectrograms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2rem; }
  #spectrograms .spectrum-legend { grid-column:1 / -1; max-width:28rem; width:100%; margin-inline:auto; }
  #spectrograms figure { min-width:0; }
  #spectrograms figure:last-of-type { grid-column:1 / -1; width:calc((100% - 2rem)/2); justify-self:center; }
  #spectrograms > p { grid-column:1 / -1; }
  .spectral-analysis { margin-block-start:2rem; padding-block-start:2rem; }
  footer { margin-block-start:1.5rem; }
}

.audio-guide { margin-block:1.25rem; color:var(--muted); font-size:.8125rem; line-height:1.6; }
#spectrograms > h3, #spectrograms #differencePlot { grid-column:1 / -1; }
#spectrograms > h3 { margin-block:1.25rem .5rem; }
#differenceStatus { margin-block:.25rem 1rem; font-weight:600; }
#differencePlot .hint { margin-block:.5rem; }

.audio-guide { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.audio-guide h2 { margin:0; font-size:inherit; }
.guide-toggle { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; min-height:56px; padding:1rem 1.25rem; border:0; border-radius:0; background:transparent; color:var(--text); text-align:left; font:inherit; font-weight:600; cursor:pointer; }
.guide-toggle:hover { background:#f8f9fa; }
.guide-toggle:focus-visible { outline:2px solid #155d9c; outline-offset:-3px; }
.guide-symbol { display:grid; place-items:center; flex:none; width:24px; height:24px; color:#155d9c; font-size:1.5rem; font-weight:400; line-height:1; }
.guide-content { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows 200ms cubic-bezier(0.2,0,0,1), visibility 200ms; }
.guide-content.is-open { grid-template-rows:1fr; visibility:visible; }
.guide-content > div { min-height:0; overflow:hidden; }
.guide-copy { padding:0 1.25rem 1.25rem; }
.guide-copy > :first-child { padding-top:1rem; border-top:1px solid var(--line); margin-top:0; }
.guide-copy > :last-child { margin-bottom:0; }
@media(prefers-reduced-motion:reduce) { .guide-content { transition:none; } }