:root{--amber: #FFB000;--amber-dim: #CC8D00;--amber-dark: #7A5500;--amber-glow-soft: rgba(255, 176, 0, .3);--amber-glow-med: rgba(255, 176, 0, .4);--amber-glow-strong: rgba(255, 176, 0, .6);--bg: #0a0a0a;--bg-elevated: #141414;--bg-surface: #1a1a1a;--text-primary: #FFB000;--text-secondary: #CC8D00;--text-dim: #7A5500;--font-mono: "IBM Plex Mono", "Fira Mono", "Courier New", monospace;--glow-sm: 0 0 4px rgba(255, 176, 0, .3);--glow-md: 0 0 8px rgba(255, 176, 0, .4), 0 0 16px rgba(255, 176, 0, .2);--glow-lg: 0 0 8px rgba(255, 176, 0, .5), 0 0 20px rgba(255, 176, 0, .3), 0 0 40px rgba(255, 176, 0, .1);--radius: 4px;--transition: .2s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100vh;height:100dvh;overflow:hidden}body{background-color:var(--bg);color:var(--text-primary);font-family:var(--font-mono);font-size:14px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:var(--font-mono);cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}button:focus-visible{outline:1px solid var(--amber);outline-offset:2px}::selection{background:#ffb0004d;color:var(--amber)}.app{height:var(--app-height, 100vh);width:var(--app-width, 100vw);max-width:100%;display:grid;grid-template-rows:48px auto 1fr 1fr;grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "toggle" "waveform" "view";overflow:hidden;position:relative}.app-header{grid-area:header;display:flex;align-items:center;justify-content:center;padding:0 24px;position:relative}.app-logo{position:absolute;left:24px;font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--amber-dark);text-decoration:none;transition:color .2s ease,text-shadow .2s ease}.app-logo:hover{color:var(--amber);text-shadow:0 0 4px rgba(255,176,0,.3)}.app-title{font-size:14px;font-weight:500;letter-spacing:6px;text-transform:uppercase;color:var(--amber);text-shadow:var(--glow-md)}.app-view{grid-area:view;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:0 24px}.crt-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.crt-scanlines{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px)}.crt-vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.7) 100%)}.mode-toggle{grid-area:toggle;display:flex;justify-content:center;gap:0;padding:8px 24px}.mt-btn{padding:6px 20px;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--amber-dark);background:transparent;transition:all var(--transition)}.mt-btn:first-child{border-radius:var(--radius) 0 0 var(--radius);border-right:none}.mt-btn:last-child{border-radius:0 var(--radius) var(--radius) 0}.mt-btn--active{color:var(--amber);background:#ffb0000d;text-shadow:var(--glow-sm)}.mt-btn:hover:not(.mt-btn--active){color:var(--text-secondary)}.waveform{grid-area:waveform;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:100px}.wf-canvas{width:100%;height:100%;display:block}.metronome-view{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}.mv-controls{display:flex;gap:16px;margin-top:16px}.mv-play{padding:12px 28px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-dark);border-radius:var(--radius);background:transparent;transition:all var(--transition);min-width:88px}.mv-play:hover{border-color:var(--amber-dim);text-shadow:var(--glow-sm)}.mv-play--active{border-color:var(--amber);background:#ffb00014;text-shadow:var(--glow-md)}.bpm-display{display:flex;flex-direction:column;align-items:center;gap:2px;-webkit-user-select:none;user-select:none}.bpm-value{font-size:72px;font-weight:300;line-height:1;color:var(--amber);text-shadow:var(--glow-lg);letter-spacing:-2px}.bpm-label{font-size:10px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim)}.beat-indicator{width:100%;max-width:320px;padding:24px 0}.bi-track{position:relative;height:24px;display:flex;align-items:center;justify-content:center}.bi-center-mark{position:absolute;width:1px;height:12px;background:var(--amber-dark);left:50%}.bi-pendulum{width:16px;height:16px;border-radius:50%;background:var(--amber-dark);transition:transform .3s ease;will-change:transform}.bi-pendulum--active{background:var(--amber);box-shadow:var(--glow-md)}.tempo-fader{position:relative;width:100%;max-width:320px;padding:28px 0 8px}.tf-track{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--amber-dark);transform:translateY(-50%);pointer-events:none;margin-top:-4px}.tf-notch{position:absolute;transform:translate(-50%)}.tf-notch-tick{width:1px;height:8px;background:var(--amber-dark);margin:0 auto;transform:translateY(-3px)}.tf-notch-label{display:block;font-size:8px;color:var(--text-dim);text-align:center;margin-top:2px;letter-spacing:.5px}.tf-slider{-webkit-appearance:none;appearance:none;width:100%;height:40px;background:transparent;cursor:pointer;position:relative;z-index:1;margin:0}.tf-slider::-webkit-slider-runnable-track{height:2px;background:transparent;border-radius:1px}.tf-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:32px;background:var(--amber);border:1px solid var(--amber-dim);border-radius:2px;box-shadow:var(--glow-md);cursor:grab;margin-top:-15px;transition:box-shadow var(--transition)}.tf-slider::-webkit-slider-thumb:hover,.tf-slider:active::-webkit-slider-thumb{box-shadow:var(--glow-lg)}.tf-slider::-moz-range-track{height:2px;background:transparent;border-radius:1px}.tf-slider::-moz-range-thumb{width:12px;height:32px;background:var(--amber);border:1px solid var(--amber-dim);border-radius:2px;box-shadow:var(--glow-md);cursor:grab}.tf-slider::-moz-range-thumb:hover,.tf-slider:active::-moz-range-thumb{box-shadow:var(--glow-lg)}.tap-tempo{padding:12px 28px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-dark);border-radius:var(--radius);background:transparent;transition:all var(--transition);min-width:88px}.tap-tempo:hover{border-color:var(--amber-dim);text-shadow:var(--glow-sm)}.tap-tempo:active{background:#ffb00014;text-shadow:var(--glow-md);border-color:var(--amber)}.tuner-view{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}.tv-source{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;max-width:90%}.tv-source-btn{font-size:9px;font-weight:400;letter-spacing:1px;color:var(--text-dim);background:none;border:none;padding:4px 6px;cursor:pointer;transition:color var(--transition);white-space:nowrap}.tv-source-btn:hover{color:var(--amber-dim)}.tv-source-alt{font-size:9px;font-weight:400;letter-spacing:.5px;color:var(--text-secondary);background:none;border:none;border-left:1px solid var(--amber-dark);padding:4px 8px;cursor:pointer;white-space:nowrap;transition:color var(--transition);animation:tv-source-fade .2s ease-out}.tv-source-alt:hover{color:var(--amber);text-shadow:var(--glow-sm)}@keyframes tv-source-fade{0%{opacity:0}to{opacity:1}}.tv-controls{display:flex;gap:16px;margin-top:16px}.tv-ref{padding:12px 20px;font-size:12px;font-weight:500;letter-spacing:2px;color:var(--text-secondary);border:1px solid var(--amber-dark);border-radius:var(--radius);background:transparent;transition:all var(--transition);min-width:88px}.tv-ref:hover{color:var(--amber);border-color:var(--amber-dim);text-shadow:var(--glow-sm)}.tv-mic{padding:12px 28px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-dark);border-radius:var(--radius);background:transparent;transition:all var(--transition);min-width:88px}.tv-mic:hover{border-color:var(--amber-dim);text-shadow:var(--glow-sm)}.tv-mic--active{border-color:var(--amber);background:#ffb00014;text-shadow:var(--glow-md)}.note-display{display:flex;flex-direction:column;align-items:center;gap:4px;-webkit-user-select:none;user-select:none}.nd-note-row{display:flex;align-items:baseline;gap:4px}.nd-note{font-size:72px;font-weight:300;line-height:1;color:var(--amber);text-shadow:var(--glow-md);letter-spacing:-1px}.nd-note--tuned{text-shadow:var(--glow-lg)}.nd-note--idle{color:var(--amber-dark);text-shadow:none}.nd-octave{font-size:24px;font-weight:300;color:var(--text-secondary)}.nd-cents{font-size:16px;font-weight:400;color:var(--text-secondary);letter-spacing:1px}.nd-cents--tuned{color:var(--amber);text-shadow:var(--glow-sm)}.nd-cents--idle{font-size:11px;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase}.pitch-meter{width:100%;max-width:320px;padding:24px 0}.pm-track{position:relative;height:24px;display:flex;align-items:center}.pm-tick{position:absolute;width:1px;height:8px;background:var(--amber-dark);transform:translate(-50%)}.pm-tick--center{height:14px;background:var(--text-secondary)}.pm-needle{position:absolute;width:3px;height:20px;background:var(--amber);border-radius:1px;transform:translate(-50%);transition:left .25s ease-out;box-shadow:var(--glow-md)}.pm-needle--tuned{box-shadow:var(--glow-lg)}.pm-needle--idle{background:var(--amber-dark);box-shadow:none}