:root { color-scheme: light dark; --bg:#0b0b10; --fg:#eaeaf2; --muted:#9aa0a6; --card:#15151d; --border:#2a2a34; --primary:#6aa0ff; --good:#34d399; --bad:#f87171 }
@media (prefers-color-scheme: light){ :root{ --bg:#fff; --fg:#1a1a1f; --muted:#57606a; --card:#f6f8fa; --border:#e6e8eb } }
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif }
.container{ max-width:960px; margin:0 auto; padding:24px }
header .subtitle{ color:var(--muted) }
.panel{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px }
.row{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:12px; align-items:center }
.group{ display:flex; flex-direction:column; gap:6px }
.btn{ border:1px solid var(--border); background:transparent; color:var(--fg); padding:10px 14px; border-radius:8px; cursor:pointer }
.btn.primary{ background:var(--primary); color:#fff; border-color:transparent }
.hint{ color:var(--muted); font-size:0.9rem; display:flex; gap:6px }
.tuner{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:12px }
.note{ font-size:3rem; font-weight:700 }
.freq{ color:var(--muted) }
.meter{ position:relative; width:100%; height:60px; border:1px dashed var(--border); border-radius:8px; display:flex; justify-content:space-between; align-items:flex-end; padding: 0 8px }
.tick{ color:var(--muted); font-size:.8rem }
#needle{ position:absolute; top:0; width:2px; height:100%; background:var(--primary); left:50% }
.status{ min-height: 22px; color:var(--muted) }