:root{--bg-color:#121212;--text-color:#e0e0e0;--accent-color:#4caf50;--warn-color:#ffc107;--error-color:#f44336;--neutral-color:#757575}body{background-color:var(--bg-color);color:var(--text-color);flex-direction:column;align-items:center;min-height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex}#app{box-sizing:border-box;text-align:center;width:100%;max-width:600px;padding:20px}.controls{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:30px;display:flex}#startButton,#installButton,#closeOnboarding{cursor:pointer;border:none;border-radius:8px;padding:15px 30px;font-size:1.2rem;font-weight:700;transition:opacity .2s,background-color .2s}#startButton{background-color:var(--accent-color);color:#fff}#installButton{color:var(--accent-color);border:2px solid var(--accent-color);background-color:#0000}#closeOnboarding{background-color:var(--accent-color);color:#fff;margin-top:20px}#startButton:disabled,#installButton:disabled{opacity:.6;cursor:not-allowed}#key-display{background:#1e1e1e;border-radius:16px;margin-top:20px;padding:30px;position:relative;box-shadow:0 4px 20px #00000080}.key-badge{color:#fff;margin:10px 0;font-size:3.5rem;font-weight:800}.alternate-key{color:var(--neutral-color);height:1.5rem;margin-bottom:20px;font-size:1.2rem}.confidence-container{background:#333;border-radius:4px;width:100%;height:8px;margin-top:10px;overflow:hidden}.confidence-fill{width:0%;height:100%;transition:width .3s,background-color .3s}.status-none{background-color:var(--neutral-color)}.status-low{background-color:var(--error-color)}.status-medium{background-color:var(--warn-color)}.status-high{background-color:var(--accent-color)}.listening-indicator{background-color:var(--error-color);opacity:0;border-radius:50%;width:12px;height:12px;display:none;position:absolute;top:15px;right:15px}#key-display.is-listening .listening-indicator{animation:1.5s infinite pulse;display:block}@keyframes pulse{0%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}to{opacity:.2;transform:scale(1)}}#notes-display{flex-direction:column;gap:15px;margin-top:30px;transition:opacity .5s;display:flex}.notes-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.note-chip{color:#fff;text-align:center;border-radius:25px;min-width:45px;padding:10px 18px;font-size:1.1rem;font-weight:700;box-shadow:0 2px 8px #0000004d}.note-chip.pentatonic{background-color:var(--accent-color)}.note-chip.scale{background-color:var(--warn-color);color:#333}.note-chip.tonic{border:3px solid #fff;transform:scale(1.1);box-shadow:0 4px 12px #00000080}#fingerboard{justify-content:center;width:100%;margin-top:40px;display:flex}.fingerboard-svg{filter:drop-shadow(0 4px 12px #00000080);width:100%;max-width:320px;height:auto}.note-dot{cursor:default;-webkit-user-select:none;user-select:none}.note-dot text{pointer-events:none}.overlay{z-index:1000;box-sizing:border-box;background-color:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex;position:fixed;top:0;left:0}.overlay-content{text-align:left;background-color:#1e1e1e;border-radius:16px;width:100%;max-width:500px;padding:30px;box-shadow:0 10px 40px #00000080}.overlay-content h2{color:var(--accent-color);text-align:center;margin-top:0}.overlay-content ul{margin:20px 0;padding-left:20px}.overlay-content li{margin-bottom:12px}