@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap";:root{color:#f2f6fb;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;font-family:Space Grotesk,Segoe UI,sans-serif;line-height:1.4}*{box-sizing:border-box}body{background:#000;margin:0}#root{min-height:100vh}:root{--cli-bg:#000;--cli-panel:#101317;--cli-panel-alt:#0c1014;--cli-chrome:#383e46;--cli-border:#262c34;--cli-label:#8c98aa;--cli-muted:#5c626a;--cli-text:#f2f6fb;--cli-cyan:#00e5ff;--cli-amber:#ffd300;--cli-magenta:#ff2a6d;--cli-green:#24c25b;--cli-danger:#ff7b7b}.app-shell{width:100%;min-height:100dvh;padding:max(.5rem, env(safe-area-inset-top,0px)) max(.5rem, env(safe-area-inset-right,0px)) calc(5.75rem + env(safe-area-inset-bottom,0px)) max(.5rem, env(safe-area-inset-left,0px));background:var(--cli-bg);color:var(--cli-text);margin:0 auto}.top-app-bar{justify-content:space-between;align-items:center;height:4rem;padding:0 .1rem 0 .2rem;display:flex}.brand{color:var(--cli-amber);letter-spacing:.12em;font-size:.9rem;font-weight:700}.ghost-icon-button{color:var(--cli-label);background:0 0;border:0;justify-content:center;align-items:center;padding:.2rem;display:inline-flex}.gear-icon{display:block}.panel{background:var(--cli-panel);border:1px solid var(--cli-border);border-radius:16px;padding:.85rem}.stack>*+*{margin-top:.75rem}.panel-title{letter-spacing:.03em;margin:0;font-size:1.05rem}.panel-copy{color:var(--cli-label);margin:0;font-size:.84rem}.status-row{color:var(--cli-label);letter-spacing:.09em;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin:0 0 .8rem;font-size:.7rem;display:flex}.chromatic-gauge{border:1px solid var(--cli-border);background:linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 20% 100%, var(--cli-panel-alt);border-radius:12px;padding:.65rem .65rem .8rem}.gauge-markers{color:var(--cli-muted);justify-content:space-between;font-size:.62rem;display:flex}.gauge-rail{height:32px;margin-top:.45rem;position:relative}.target-line{background:var(--cli-amber);width:2px;height:100%;position:absolute;top:0;left:calc(50% - 1px);box-shadow:0 0 12px #ffd30099}.pitch-indicator{border-radius:8px;width:9px;height:18px;margin-left:-4px;transition:left .15s linear,background-color .18s,box-shadow .18s;position:absolute;top:7px}.pitch-indicator.in-tune{background:var(--cli-green);box-shadow:0 0 15px #24c25bbf}.pitch-indicator.off-pitch{background:var(--cli-cyan);box-shadow:0 0 14px #00e5ffb3}.note-display{text-align:center;margin:.7rem 0}.note-display-main{color:var(--cli-amber);text-shadow:0 0 14px #ffd30073,0 0 26px #ffd30029;margin:0;font-size:clamp(3.6rem,19vw,5.2rem);font-weight:700;line-height:.95}.note-display-offset{color:var(--cli-cyan);margin:.1rem 0 0}.signal-info{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}.signal-card{background:var(--cli-panel-alt);border:1px solid var(--cli-border);border-radius:12px;padding:.5rem .7rem}.signal-card-green{border-left:3px solid var(--cli-amber)}.signal-card-cyan{border-left:3px solid var(--cli-cyan)}.signal-label{color:var(--cli-label);letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:.68rem}.signal-value{color:var(--cli-text);margin:.25rem 0 0;font-size:1rem}.preset-strip{gap:.45rem;margin-top:.8rem;padding-bottom:.1rem;display:flex;overflow-x:auto}.preset-button{border:1px solid var(--cli-border);background:var(--cli-panel-alt);color:var(--cli-text);letter-spacing:.07em;text-transform:uppercase;border-radius:999px;flex:none;padding:.5rem .8rem;font-size:.68rem;transition:transform 80ms}.preset-button:active{transform:scale(.98)}.preset-button.active{background:var(--cli-cyan);color:var(--cli-bg);border-color:var(--cli-cyan)}.preset-grid{gap:.6rem;display:grid}.preset-tile{border:1px solid var(--cli-border);background:var(--cli-panel-alt);color:var(--cli-text);text-align:left;border-radius:12px;padding:.8rem}.preset-tile span{letter-spacing:.05em;font-weight:700;display:block}.preset-tile small{color:var(--cli-label)}.preset-tile.active{border-color:var(--cli-cyan);box-shadow:0 0 0 1px #00e5ff4d}.calibration-readout{color:var(--cli-amber);text-align:center;font-size:2.1rem;font-weight:700}.calibration-slider{width:100%;accent-color:var(--cli-cyan)}.calibration-steps{grid-template-columns:repeat(5,1fr);gap:.35rem;display:grid}.chip{border:1px solid var(--cli-border);background:var(--cli-panel-alt);color:var(--cli-label);border-radius:999px;padding:.35rem .15rem;font-size:.68rem}.toggle-row{border:1px solid var(--cli-border);background:var(--cli-panel-alt);border-radius:12px;justify-content:space-between;align-items:center;padding:.75rem;display:flex}.toggle-row span{font-size:.9rem}.toggle-row input{width:1rem;height:1rem;accent-color:var(--cli-cyan)}.spectral-graph{border:1px solid var(--cli-border);background:var(--cli-panel-alt);border-radius:12px;margin-top:.8rem;padding:.6rem}.spectral-title{color:var(--cli-label);letter-spacing:.08em;align-items:center;gap:.35rem;font-size:.65rem;display:flex}.live-dot{background:var(--cli-cyan);border-radius:50%;width:.45rem;height:.45rem;box-shadow:0 0 8px #00e5ffcc}.spectral-bars{grid-template-columns:repeat(24,minmax(0,1fr));align-items:end;gap:2px;height:92px;margin-top:.55rem;display:grid}.spectral-bar{background:linear-gradient(180deg, var(--cli-cyan) 0%, var(--cli-magenta) 100%);border-radius:2px 2px 0 0;transition:height .14s linear}.primary{background:var(--cli-amber);width:100%;color:var(--cli-bg);text-transform:uppercase;letter-spacing:.08em;border:0;border-radius:999px;margin-top:.9rem;padding:.85rem 1rem;font-weight:700}.error{color:var(--cli-danger);margin:.7rem 0 0}.bottom-nav{width:100%;padding:.6rem max(.5rem, env(safe-area-inset-right,0px)) calc(.7rem + env(safe-area-inset-bottom,0px)) max(.5rem, env(safe-area-inset-left,0px));background:var(--cli-bg);border-top:1px solid var(--cli-border);grid-template-columns:repeat(3,1fr);gap:.4rem;margin:0 auto;display:grid;position:fixed;bottom:0;left:0;right:0}.nav-item{border:1px solid var(--cli-border);background:var(--cli-panel-alt);color:var(--cli-label);letter-spacing:.06em;border-radius:999px;padding:.45rem .2rem;font-size:.66rem}.nav-item.active{border-color:var(--cli-cyan);color:var(--cli-bg);background:var(--cli-cyan)}@media (width>=431px){.app-shell{max-width:430px;padding-top:1rem;padding-left:.75rem;padding-right:.75rem}.top-app-bar{padding:0 .5rem}.bottom-nav{max-width:430px;padding-left:.75rem;padding-right:.75rem}}