:root { color-scheme: light; --ink:#203344; --muted:#657682; --teal:#087d78; --line:#dae3e7; --soft:#f3f7f8; }
* { box-sizing:border-box; }
body { margin:0; background:#edf2f4; color:var(--ink); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
header { background:#193b46; color:white; padding:27px max(24px,calc((100% - 1200px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.eyebrow { color:#a9d6d3; font-size:11px; font-weight:700; letter-spacing:1.8px; }
h1 { margin:4px 0; font-size:29px; font-weight:650; } header p { margin:0; color:#d1e2e7; }
.phase { min-width:135px; text-align:center; padding:12px 20px; border:1px solid #5b7e85; border-radius:30px; font-weight:650; }
.phase.active { background:#d5f1e8; color:#165b50; border-color:#d5f1e8; }
main { max-width:1248px; padding:22px 24px; margin:auto; }
.card { background:white; border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin-bottom:18px; box-shadow:0 3px 12px #23404e05; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px; }
h2 { font-size:14px; color:var(--teal); margin:0; font-weight:700; } h2 span { font-size:19px; margin-left:12px; color:var(--ink); font-weight:650; }
.muted { color:var(--muted); font-size:12px; }
button, select, input { font:inherit; } button, select, input[type=number] { border:1px solid #c7d4da; border-radius:6px; background:white; color:var(--ink); padding:8px 11px; }
button { cursor:pointer; font-size:13px; white-space:nowrap; font-weight:550; } button:hover:not(:disabled) { background:#edf7f5; border-color:#80aca6; }
button:disabled, select:disabled, input:disabled { opacity:0.45; cursor:default; }
button.primary { background:var(--teal); border-color:var(--teal); color:white; } button.primary:hover:not(:disabled) { background:#096c68; }
button.stop { background:#fbefed; color:#994b3d; border-color:#e9c6be; }
button.active-mode { outline:2px solid #91c8bb; outline-offset:2px; }
:focus-visible { outline:3px solid #da9f42; outline-offset:3px; }
label { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:550; }
label.inline { flex-direction:row; align-items:center; gap:6px; }
input[type=checkbox], input[type=range] { accent-color:var(--teal); }
input[type=number] { width:110px; font-size:13px; } input[type=file] { max-width:100%; font-size:12px; }
.selectors { display:flex; align-items:flex-end; gap:12px; } .grow { flex:1; min-width:0; } select { width:100%; font-size:14px; }
canvas { width:100%; height:105px; display:block; margin:16px 0 9px; background:var(--soft); border-radius:5px; touch-action:none; cursor:crosshair; }
.range-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; } .range-controls .muted { align-self:center; flex:1; min-width:180px; }
.imports { margin-top:16px; border-top:1px solid var(--line); padding-top:10px; } summary { cursor:pointer; font-size:13px; color:var(--teal); }
.import-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:12px 0; }
code { background:var(--soft); padding:1px 4px; border-radius:3px; }
.sources { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.source-chip { background:var(--soft); border:1px solid var(--line); border-radius:20px; padding:5px 10px; }
.source-chip.loaded { background:#e9f5f1; border-color:#b3d6cb; }
.plot-toolbar { display:flex; flex-wrap:wrap; gap:15px; align-items:center; margin-bottom:8px; }
.plot-scroll { max-height:440px; overflow:auto; border:1px solid var(--line); border-radius:6px; background:white; }
.empty { padding:42px 20px; text-align:center; color:var(--muted); }
.pitch-svg { display:block; min-width:720px; width:100%; } .pitch-svg text { fill:var(--muted); font:11px system-ui,sans-serif; }
.pitch-svg .row-label { fill:var(--ink); font-size:12px; }
.pitch-svg .pitch-dot { fill:#158a82; fill-opacity:0.72; stroke:#08706d; stroke-width:1; cursor:pointer; }
.pitch-svg .pitch-dot.model { fill:#7162b9; stroke:#5d4e9d; } .pitch-svg .pitch-dot.probe { fill:#ce9031; stroke:#a37024; }
.pitch-svg .pitch-dot.overview { fill:#29495a; stroke:#1e3440; }
.pitch-svg .pitch-dot.selected { fill:#efb54e; fill-opacity:1; stroke:#5b3f12; stroke-width:2.5; }
.pitch-svg .pitch-dot:hover { fill-opacity:1; stroke-width:2.5; }
.plot-note { margin:8px 0 0; }
.probe-readout { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:10px 0 18px; }
.frequency { font-size:25px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.5px; }
.probe-navigation { display:flex; gap:8px; }
.transport { display:flex; flex-wrap:wrap; gap:10px; } kbd { font:10px system-ui; opacity:0.6; margin-left:7px; }
.settings { display:grid; grid-template-columns:1.2fr 1fr 1.2fr 1.3fr 1.3fr; gap:20px; margin:18px 0; align-items:center; }
.settings output { display:inline; font-weight:400; color:var(--muted); } .settings input[type=range] { width:100%; }
.tuning { display:flex; gap:14px; align-items:center; background:var(--soft); padding:12px; border-radius:6px; }
.tuning input { flex:1; min-width:70px; max-width:340px; } .tuning output { min-width:72px; font-size:12px; font-variant-numeric:tabular-nums; }
.error { border:1px solid #e3b7ac; background:#fff0eb; color:#863c2c; padding:13px 18px; border-radius:8px; margin-bottom:16px; white-space:pre-wrap; }
footer { text-align:center; color:var(--muted); padding:2px 20px 25px; font-size:12px; }
@media(max-width:750px) {
  header { padding:20px; } header p { font-size:12px; } h1 { font-size:24px; } .phase { min-width:90px; padding:8px 12px; font-size:12px; }
  main { padding:16px 10px; } .card { padding:16px; } .section-head { align-items:flex-start; }
  .selectors { flex-wrap:wrap; } .grow { min-width:180px; } .import-grid { grid-template-columns:1fr; }
  .settings { grid-template-columns:repeat(2,1fr); gap:12px; } .tuning { flex-wrap:wrap; } .probe-readout { align-items:flex-start; flex-direction:column; }
  .frequency { font-size:22px; }
}