:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#0b0d0c; color:#f1f3ed; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -20%,#263126 0,transparent 42%),#0b0d0c; }
.shell { width:min(680px,calc(100% - 32px)); margin:0 auto; padding:52px 0 48px; }
header { margin-bottom:24px; }
.eyebrow { color:#b7e56d; letter-spacing:.16em; font-size:12px; font-weight:700; margin:0 0 10px; }
h1 { font-size:clamp(30px,6vw,48px); letter-spacing:-.04em; margin:0; }
.subtitle { color:#92998f; margin:10px 0 0; }
.card { border:1px solid #2a2f2a; border-radius:18px; background:rgba(22,25,22,.92); box-shadow:0 18px 60px rgba(0,0,0,.24); }
.controls { padding:20px; margin-bottom:14px; }
label { display:block; color:#b8beb4; font-size:13px; margin-bottom:9px; }
.control-row { display:flex; gap:10px; }
select,button { min-height:44px; border-radius:10px; border:1px solid #394038; font:inherit; }
select { min-width:0; flex:1; padding:0 12px; background:#0f120f; color:#e8ece4; }
button { padding:0 19px; border-color:#b7e56d; background:#b7e56d; color:#13200d; font-weight:750; cursor:pointer; }
button.stop { border-color:#555d53; background:#272c27; color:#f0f2ed; }
button:disabled { opacity:.55; cursor:wait; }
.status { color:#8d958a; font-size:13px; margin:13px 0 0; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#666; margin-right:7px; }
.status.active .dot { background:#b7e56d; box-shadow:0 0 10px #b7e56d; }
.result { min-height:365px; padding:32px 24px; display:flex; align-items:center; flex-direction:column; justify-content:center; }
.hint { margin:0 0 8px; color:#899086; font-size:13px; }
.note { font-size:clamp(90px,25vw,150px); font-weight:800; line-height:.9; letter-spacing:-.08em; font-variant-numeric:tabular-nums; }
.frequency { margin-top:22px; font-size:24px; font-variant-numeric:tabular-nums; }
.unit { color:#7f877d; font-size:14px; }
.tuning { width:min(360px,90%); display:grid; grid-template-columns:22px 1fr 22px; align-items:center; gap:8px; margin-top:25px; color:#697068; }
.meter { height:8px; background:#31362f; border-radius:99px; position:relative; overflow:hidden; }
.meter-fill { position:absolute; left:50%; top:0; width:0; height:100%; background:#b7e56d; transition:width 90ms,left 90ms; }
.center-mark { position:absolute; width:2px; height:14px; background:white; left:calc(50% - 1px); top:-3px; }
.cents { color:#9ca399; font-size:13px; min-height:18px; margin:10px 0 0; }
.diagnostics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid #282d27; border-radius:14px; overflow:hidden; margin-top:14px; background:#282d27; }
.diagnostics div { padding:15px; background:#151815; display:flex; flex-direction:column; gap:5px; }
.diagnostics span { color:#747c72; font-size:11px; }
.diagnostics strong { font-size:14px; font-variant-numeric:tabular-nums; }
.tips { margin-top:20px; color:#91998f; font-size:13px; line-height:1.6; }
summary { cursor:pointer; color:#b2b9af; }
@media(max-width:520px){.control-row{flex-direction:column}.diagnostics div{padding:12px 9px}.diagnostics strong{font-size:12px}.shell{padding-top:28px}}