:root{--bg-color: #121212;--text-color: #E0E0E0;--accent-flat: #FF8A65;--accent-sharp: #FF8A65;--accent-locked: #00E676;--font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-main);overflow:hidden;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;-webkit-font-smoothing:antialiased}#root{width:100%;height:100%}.App{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:background-color .5s ease;position:relative}.App.locked{background-color:#1a221a}.start-screen{text-align:center;z-index:10}.start-screen h1{font-size:2rem;font-weight:300;margin-bottom:3rem;letter-spacing:2px;color:var(--text-color)}.start-btn{background:transparent;color:var(--text-color);border:2px solid var(--text-color);padding:1rem 3rem;font-size:1.2rem;border-radius:50px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.start-btn:hover{background:var(--text-color);color:var(--bg-color);transform:scale(1.05);box-shadow:0 0 20px #fff3}.tuner-interface{display:flex;flex-direction:column;align-items:center;width:100%;max-width:600px;position:relative;z-index:5}.sparkline-container{position:absolute;top:50%;left:0;width:100%;height:150px;transform:translateY(-50%);z-index:-1;opacity:.5;pointer-events:none}.note-display{font-size:10rem;font-weight:700;line-height:1;color:var(--text-color);transition:color .1s ease,opacity .5s ease;margin-bottom:2rem}.note-display.locked{color:var(--accent-locked)}.note-display.holding{opacity:.3}.gauge-container{position:relative;width:80%;height:60px;margin-bottom:4rem;opacity:.3;transition:opacity .3s ease}.gauge-container.visible{opacity:1}.gauge-container.holding{opacity:.3}.gauge-ruler{width:100%;height:2px;background-color:#fff3;position:absolute;top:50%;transform:translateY(-50%)}.tick{position:absolute;background-color:#fff6;width:1px;transform:translate(-50%,-50%)}.tick.major{height:20px;top:50%;background-color:#fff9}.tick.minor{height:10px;top:50%}.tick.center{height:30px;width:2px;top:50%;background-color:var(--accent-locked);box-shadow:0 0 10px var(--accent-locked)}.gauge-indicator{width:16px;height:16px;background-color:var(--accent-flat);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .1s cubic-bezier(.25,.46,.45,.94),background-color .2s ease;box-shadow:0 0 10px #ff8a6580;z-index:2;border:2px solid var(--bg-color)}.locked .gauge-indicator{background-color:var(--accent-locked);box-shadow:0 0 15px #00e676cc}.cents-label{position:absolute;width:100%;text-align:center;top:40px;font-family:monospace;font-size:.8rem;color:#888;letter-spacing:1px}.tech-readout{font-family:Courier New,monospace;color:#666;font-size:.85rem;margin-top:auto;opacity:.7}