:root{--bg:#11161f;--bg-soft:#182233;--fg:#f0f4fb;--muted:#95a8c2;--accent:#4ae3a5;--accent-soft:#4ae3a533;--warn:#fc6;--danger:#ff6b6b;--card:#ffffff0d;--border:#ffffff1f;color:var(--fg);background:radial-gradient(circle at 15% 10%,#1d2b44,#0f141c 60%);font-family:Space Grotesk,Avenir Next,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}#root{min-height:100vh}.app-shell{gap:1rem;max-width:760px;margin:0 auto;padding:1rem;display:grid}header{border:1px solid var(--border);background:linear-gradient(120deg,#4ae3a52e,#4ae3a505);border-radius:1rem;padding:1rem}h1{margin:0;font-size:1.8rem}header p{color:var(--muted);margin:.4rem 0 0}.panel,.display-card{background:var(--card);border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1rem;padding:1rem}.panel-row{gap:.6rem;margin-bottom:.9rem;display:grid}.panel-row:last-child{margin-bottom:0}.primary{background:var(--accent);color:#0b1a13;border:0;border-radius:.8rem;padding:.7rem 1rem;font-weight:700}.status{white-space:nowrap;text-overflow:ellipsis;min-height:1.2rem;color:var(--muted);font-size:.95rem;display:block;overflow:hidden}.field{color:var(--muted);font-size:.9rem}.level-meter{border:1px solid var(--border);background:#ffffff0f;border-radius:999px;width:100%;height:.75rem;overflow:hidden}.level-meter-fill{background:linear-gradient(90deg,#50657b,#7f95ad);border-radius:999px;min-width:0;height:100%;transition:width .1s linear,background .1s linear;display:block}.level-meter-fill.active{background:linear-gradient(90deg,#27ad78,#84ffd3)}.spectrum-canvas{background:#0b1119;border-radius:.6rem;width:100%;height:140px;margin-top:.75rem;display:block}input[type=range]{width:100%}.display-card h2{color:var(--warn);margin:0}.pitch-frequency,.pitch-cents{font-variant-numeric:tabular-nums;min-height:1.35rem;color:var(--muted);margin:.6rem 0 0;font-family:IBM Plex Mono,SFMono-Regular,monospace;font-size:1.15rem;line-height:1.35rem}.pitch-bubble-row{grid-template-columns:1fr auto 1fr;align-items:center;gap:.7rem;min-height:44px;margin-top:.85rem;display:grid}.bubble-side{grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem;display:grid}.bubble-dot{background:rgba(255, 107, 107, var(--bubble-fill,0));height:14px;box-shadow:0 0 calc(10px * var(--bubble-fill,0)) #ff6b6ba6;border:1px solid #fff3;border-radius:999px}.pitch-center{text-align:center;width:6.5ch;min-width:6.5ch;color:var(--warn);font-family:IBM Plex Mono,SFMono-Regular,monospace;font-size:1.7rem;font-weight:700;line-height:1}.pitch-name{white-space:pre;letter-spacing:.01em;width:3ch;display:inline-block}@media (width>=768px){.app-shell{gap:1.2rem;padding:1.3rem}.panel-row{grid-template-columns:1fr}}@media (width<=479px){.pitch-center{width:6ch;min-width:6ch;font-size:1.4rem}}