:root{--bg:#090910;--surface:#111118;--surface-2:#18181f;--border:#223;--in-tune:#0f8;--close:#fa0;--off:#f45;--text:#e2e2f0;--text-dim:#88a;--text-muted:#335;--accent:#66f;--accent-dim:#6666ff26;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--font-ui:system-ui, -apple-system, sans-serif;--font-mono:"Space Mono", "SF Mono", "Menlo", "Consolas", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;overflow:hidden auto}.glow-layer{pointer-events:none;z-index:0;opacity:0;transition:opacity .8s;position:fixed;inset:0}.glow-layer.visible{opacity:1}.glow-idle{background:radial-gradient(90% 45% at 50% -5%,#6666ff12 0%,#0000 60%)}.glow-in-tune{background:radial-gradient(90% 45% at 50% -5%,#00ff8817 0%,#0000 60%)}.glow-close{background:radial-gradient(90% 45% at 50% -5%,#ffaa0012 0%,#0000 60%)}.glow-off{background:radial-gradient(90% 45% at 50% -5%,#ff445512 0%,#0000 60%)}.app{z-index:1;flex-direction:column;align-items:center;min-height:100%;padding-bottom:48px;animation:.5s cubic-bezier(.22,1,.36,1) appEnter;display:flex;position:relative}@keyframes appEnter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.app-header{width:100%;padding:20px var(--space-md) 16px;border-bottom:1px solid #ffffff0a;justify-content:center;align-items:center;display:flex}.logo{font-family:var(--font-mono);letter-spacing:.42em;color:#ffffff2e;text-transform:uppercase;-webkit-user-select:none;user-select:none;font-size:10px;font-weight:700}.app-main{width:100%;max-width:480px;padding:0 var(--space-md);flex-direction:column;flex:1;align-items:center;display:flex}.mode-selector{gap:var(--space-xs);padding:var(--space-md) var(--space-md) var(--space-sm);justify-content:center;width:100%;max-width:480px;display:flex}.mode-btn{padding:10px var(--space-sm);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;font-family:var(--font-ui);background:0 0;border:1px solid #0000;flex-direction:column;flex:1;align-items:center;gap:5px;transition:all .2s;display:flex}.mode-btn:hover{color:var(--text-dim);background:#ffffff08}.mode-btn.active{color:var(--text);background:#6666ff14;border-color:#66f6}.mode-icon{font-size:16px;line-height:1}.mode-label{letter-spacing:.06em;font-size:11px;font-weight:500}.view{flex-direction:column;align-items:center;width:100%;animation:.3s cubic-bezier(.22,1,.36,1) viewEnter;display:flex}@keyframes viewEnter{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.view-placeholder{margin-top:var(--space-xl);color:var(--text-muted);letter-spacing:.05em;text-align:center;font-size:13px}.tuner-dial-wrapper{width:100%;max-width:420px;margin:var(--space-md) 0 0;justify-content:center;display:flex}.tuner-dial-canvas{width:100%;max-width:420px;height:auto;display:block}.note-display{margin:var(--space-xs) 0 0;justify-content:center;align-items:center;gap:2px;min-height:84px;display:flex;position:relative}.note-name{font-family:var(--font-mono);letter-spacing:-.02em;color:var(--text);font-size:clamp(64px,16vw,90px);font-weight:700;line-height:1;transition:color .3s,text-shadow .4s}.note-name.in-tune{color:var(--in-tune);text-shadow:0 0 20px #0f89,0 0 50px #00ff8840,0 0 90px #00ff881a}.note-name.muted{color:#ffffff14}.note-octave{font-family:var(--font-mono);color:var(--text-dim);align-self:flex-start;margin-top:14px;font-size:clamp(26px,6vw,34px);font-weight:400}.note-hz{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;letter-spacing:.06em;font-size:12px;position:absolute;bottom:-18px;left:50%;transform:translate(-50%)}.cents-indicator{width:100%;max-width:300px;margin:var(--space-lg) 0 var(--space-xs)}.cents-track{background:#ffffff0f;border-radius:2px;height:3px;position:relative}.cents-track:before{content:"";background:#ffffff26;border-radius:1px;width:2px;height:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cents-needle{border-radius:2px;width:3px;height:18px;transition:left 60ms linear,background .2s;position:absolute;top:50%;transform:translate(-50%,-50%)}.cents-labels{justify-content:space-between;margin-top:8px;display:flex}.cents-label-edge{font-family:var(--font-mono);color:#ffffff1f;letter-spacing:.04em;font-size:10px}.cents-value{font-family:var(--font-mono);text-align:center;letter-spacing:.08em;min-height:18px;margin-top:6px;font-size:12px;transition:color .2s}.waveform-strip{width:100%;max-width:480px;margin:var(--space-lg) 0 0;padding:0 var(--space-md);opacity:.9}.waveform-canvas{width:100%;max-width:420px;height:auto;margin:0 auto;display:block}.listen-controls{margin-top:var(--space-lg);justify-content:center;display:flex}.listen-btn{color:var(--text-dim);font-family:var(--font-ui);letter-spacing:.05em;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:10px;padding:14px 40px;font-size:14px;font-weight:500;transition:all .25s;display:flex}.listen-btn:hover{color:var(--text);background:#6666ff14;border-color:#6666ff80}.listen-btn.active{color:var(--in-tune);background:#00ff880f;border-color:#0f86}.listen-dot{opacity:.6;background:currentColor;border-radius:50%;flex-shrink:0;width:7px;height:7px;transition:opacity .2s,box-shadow .2s}.listen-btn.active .listen-dot{opacity:1;box-shadow:0 0 8px var(--in-tune);animation:1.6s infinite dotPulse}@keyframes dotPulse{0%,to{opacity:1}50%{opacity:.3}}.error-banner{width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--off);text-align:center;margin-top:var(--space-md);background:#ff445514;border:1px solid #ff445540;font-size:13px;animation:.25s viewEnter}.string-selector{gap:var(--space-xs);margin-top:var(--space-lg);flex-wrap:wrap;justify-content:center;display:flex}.string-btn{border-radius:var(--radius-sm);color:#fff3;cursor:pointer;width:46px;height:54px;font-family:var(--font-mono);background:#ffffff08;border:1px solid #ffffff12;flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:all .2s;display:flex}.string-btn:hover{color:var(--text-dim);background:#ffffff0d;border-color:#ffffff26}.string-btn.active{color:var(--text);background:#6666ff1a;border-color:#6666ff80}.string-btn.in-tune{color:var(--in-tune);background:#00ff8812;border-color:#00ff8880;animation:.35s cubic-bezier(.34,1.56,.64,1) stringInTune;box-shadow:0 0 14px #00ff8826}@keyframes stringInTune{0%{transform:scale(.95)}to{transform:scale(1)}}.string-note{font-size:14px;font-weight:700;line-height:1}.string-octave{opacity:.55;font-size:9px;line-height:1}.tuning-selector{width:100%;max-width:420px;margin-top:var(--space-md)}.tuning-trigger{width:100%;padding:10px var(--space-md);border-radius:var(--radius-md);color:var(--text);cursor:pointer;font-family:var(--font-ui);background:#ffffff08;border:1px solid #ffffff12;justify-content:space-between;align-items:center;transition:border-color .2s,background .2s;display:flex}.tuning-trigger:hover{background:#ffffff0d;border-color:#ffffff24}.tuning-trigger-left{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.tuning-trigger-name{font-size:14px;font-weight:600}.tuning-trigger-notes{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.14em;font-size:11px}.tuning-chevron{color:#fff3;flex-shrink:0;font-size:18px;line-height:1;transition:transform .25s cubic-bezier(.34,1.56,.64,1);transform:rotate(90deg)}.tuning-chevron.open{transform:rotate(-90deg)}.tuning-description{color:#ffffff4d;padding:0 var(--space-xs);margin-top:8px;font-size:12px;line-height:1.6}.tuning-tags{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.tuning-tag{letter-spacing:.08em;text-transform:uppercase;border:1px solid;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:700}.tuning-list{margin-top:var(--space-xs);border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff12;animation:.2s viewEnter;overflow:hidden}.tuning-row{width:100%;padding:10px var(--space-md);color:#ffffff59;cursor:pointer;font-family:var(--font-ui);text-align:left;justify-content:space-between;align-items:center;gap:var(--space-sm);background:0 0;border:none;border-bottom:1px solid #ffffff0a;transition:background .15s,color .15s;display:flex}.tuning-row:last-child{border-bottom:none}.tuning-row:hover{color:var(--text-dim);background:#ffffff0a}.tuning-row.active{color:var(--text);background:#6666ff14}.tuning-row-left{flex-direction:column;gap:2px;display:flex}.tuning-row-name{font-size:13px;font-weight:500}.tuning-row-notes{font-family:var(--font-mono);color:#fff3;letter-spacing:.12em;flex-shrink:0;font-size:11px}.instrument-section{width:100%;max-width:420px;margin-top:var(--space-lg);gap:var(--space-sm);flex-direction:column;display:flex}.instrument-picker{width:100%}.instrument-trigger{width:100%;padding:10px var(--space-md);border-radius:var(--radius-md);color:var(--text);cursor:pointer;font-family:var(--font-ui);background:#ffffff08;border:1px solid #ffffff12;justify-content:space-between;align-items:center;min-height:56px;transition:border-color .2s,background .2s;display:flex}.instrument-trigger:hover{background:#ffffff0d;border-color:#ffffff24}.instrument-trigger-placeholder{color:#fff3;font-size:13px}.instrument-trigger-left{align-items:center;gap:12px;display:flex}.instrument-trigger-symbol{text-align:center;flex-shrink:0;width:24px;font-size:20px;line-height:1}.instrument-trigger-info{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.instrument-trigger-name{font-size:14px;font-weight:600}.instrument-trigger-range{font-family:var(--font-mono);color:#ffffff40;letter-spacing:.06em;font-size:10px}.instrument-list{margin-top:var(--space-xs);border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff12;animation:.2s viewEnter;overflow:hidden}.instrument-row{width:100%;padding:11px var(--space-md);color:#ffffff59;cursor:pointer;font-family:var(--font-ui);text-align:left;background:0 0;border:none;border-bottom:1px solid #ffffff0a;align-items:center;gap:12px;transition:background .15s,color .15s;display:flex}.instrument-row:last-child{border-bottom:none}.instrument-row:hover{color:var(--text-dim);background:#ffffff0a}.instrument-row.active{color:var(--text);background:#6666ff14}.instrument-row-symbol{text-align:center;flex-shrink:0;width:22px;font-size:18px;line-height:1}.instrument-row-info{flex-direction:column;flex:1;gap:1px;display:flex}.instrument-row-name{font-size:13px;font-weight:500}.instrument-row-range{font-family:var(--font-mono);color:#ffffff2e;letter-spacing:.06em;font-size:9px}.instrument-row-count{color:#ffffff2e;flex-shrink:0;font-size:10px}.chromatic-hint{color:#ffffff40;text-align:center;padding:var(--space-md);border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff0f;font-size:12px;line-height:1.6}.chromatic-ladder{width:100%;max-width:320px;margin-top:var(--space-lg);flex-direction:column;gap:3px;display:flex}.chromatic-row{align-items:center;gap:var(--space-sm);border-radius:var(--radius-sm);padding:5px 8px;transition:background .15s;display:flex}.chromatic-row.active{background:#ffffff0d}.chromatic-note-name{font-family:var(--font-mono);color:#fff3;width:26px;font-size:12px}.chromatic-row.active .chromatic-note-name{color:var(--text)}.chromatic-bar-track{background:#ffffff0d;border-radius:2px;flex:1;height:3px;overflow:hidden}.chromatic-bar-fill{border-radius:2px;height:100%;transition:width .1s,background .15s}