#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.piano-keyboard{display:flex;justify-content:flex-start;position:relative;height:180px;overflow-x:auto;padding:10px 0;background-color:#111;border-radius:8px;box-shadow:0 5px 15px #00000080;width:100%;min-width:0;-webkit-overflow-scrolling:touch;touch-action:pan-x;-webkit-user-select:none;user-select:none}.piano-octave{display:flex;position:relative;height:100%;margin-right:1px}.piano-octave:last-child{margin-right:0}.piano-key{position:relative;border:1px solid #555;box-sizing:border-box;padding:0;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;transition:all .05s ease-out;margin:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;will-change:transform,background-color}.white-key{background-color:#fff;width:32px;height:100%;color:#333;z-index:1;border-right-width:1px}.black-key{background-color:#222;width:18px;height:65%;margin-left:-9px;margin-right:-9px;z-index:2;color:#fff;box-shadow:0 0 3px #000c}.piano-key.pressed{background-color:#90caf9;box-shadow:inset 0 2px 5px #0000004d;color:#222}.black-key.pressed{background-color:#64b5f6}.piano-key.midi-active{background-color:#ff9800;box-shadow:inset 0 2px 5px #0000004d,0 0 8px #ff980099;color:#222;animation:midi-pulse 1s ease-in-out infinite alternate}.black-key.midi-active{background-color:#f57c00}@keyframes midi-pulse{0%{box-shadow:inset 0 2px 5px #0000004d,0 0 8px #ff980099}to{box-shadow:inset 0 2px 5px #0000004d,0 0 12px #ff9800cc}}.piano-key.hint{background-color:#4caf50;box-shadow:inset 0 2px 5px #0000004d;color:#fff}.black-key.hint{background-color:#388e3c}.key-label{font-size:.65rem;font-weight:700;padding-bottom:.4rem;pointer-events:none}.black-key .key-label{padding-bottom:.25rem}@media (max-width: 768px){.piano-keyboard{height:130px;padding:20px 0 10px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}.white-key{width:24px}.black-key{width:14px;margin-left:-7px;margin-right:-7px}.key-label{font-size:.5rem}}@media (max-width: 480px){.piano-keyboard{height:100px;overflow-x:auto;padding:8px 0;max-width:100%;-webkit-overflow-scrolling:touch;min-height:100px;scroll-padding:10px}.piano-octave{margin-right:0}.white-key{width:22px;min-width:22px}.black-key{width:12px;left:-6px;height:50px;min-height:40px}.key-label{font-size:7px}}@media (prefers-color-scheme: light){.piano-key{border-color:#ccc}.black-key{background-color:#333}.piano-key.pressed{background-color:#2196f3;color:#fff}.black-key.pressed{background-color:#1976d2}.piano-key.midi-active{background-color:#ff9800;color:#fff}.black-key.midi-active{background-color:#f57c00}}.staff-notation-layout{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.staff-notation{background-color:#fff;border-radius:4px;margin-left:20px;box-shadow:0 4px 8px #0003}.staff-notation svg{background-color:#fff;border-radius:4px;box-shadow:0 4px 8px #0003}.circle-of-fifths{display:flex;align-items:center;justify-content:center}.notation-error{color:red;padding:20px;text-align:center;font-weight:700}.game-controls{margin-bottom:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}.game-main-controls{display:flex;align-items:center;justify-content:center;gap:10px}.note-range-group{display:flex;align-items:center;justify-content:center;gap:8px}.note-range-group label{font-size:14px;font-weight:500;color:#333;min-width:80px}.note-picker{width:60px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;font-size:14px;text-align:center}.note-picker:disabled{background-color:#f5f5f5;color:#999;cursor:not-allowed}.note-name{font-size:12px;color:#666;font-weight:700;min-width:35px}.game-toggle-button{padding:10px 20px;font-size:16px;color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .2s ease}.game-toggle-button.active{background-color:#f44}.game-toggle-button.active:hover{background-color:#e63939}.game-toggle-button.inactive{background-color:#4a4}.game-toggle-button.inactive:hover{background-color:#3d9a3d}.range-setting-button{padding:10px 20px;font-size:16px;color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .2s ease}.range-setting-button.active{background-color:#ff9800}.range-setting-button.active:hover{background-color:#f57c00}.range-setting-button.inactive{background-color:#2196f3}.range-setting-button.inactive:hover{background-color:#1976d2}.settings-button{padding:10px 20px;font-size:16px;color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .2s ease}.settings-button.active{background-color:#e91e63}.settings-button.active:hover{background-color:#c2185b}.settings-button.inactive{background-color:#9c27b0}.settings-button.inactive:hover{background-color:#7b1fa2}.game-status{color:#4a4;font-weight:700;font-size:14px}.game-status.wrong-notes{color:#ff6b6b}.checkbox-container{display:flex;justify-content:center;margin:10px 0}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:500;color:#333}.checkbox-input{width:18px;height:18px;cursor:pointer}.checkbox-text{-webkit-user-select:none;user-select:none}@media (prefers-color-scheme: dark){.checkbox-label{color:#fff}}.hint-section{display:flex;flex-direction:column;align-items:center;gap:8px}.hint-buttons{display:flex;gap:10px;align-items:center}.hint-button{padding:8px 16px;font-size:14px;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s ease}.hint-button.active{background-color:#ff9800}.hint-button.active:hover{background-color:#f57c00}.hint-button.inactive{background-color:#2196f3}.hint-button.inactive:hover{background-color:#1976d2}.show-button{padding:10px 20px;font-size:16px;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s ease}.show-button.active{background-color:#4caf50}.show-button.active:hover{background-color:#45a049}.show-button.inactive{background-color:#9e9e9e}.show-button.inactive:hover{background-color:#757575}.direction-hint{background-color:#f44336;color:#fff;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@media (prefers-color-scheme: dark){.note-range-group label{color:#fff}.note-picker{background-color:#444;border-color:#666;color:#fff}.note-picker:disabled{background-color:#333;color:#888}.note-name{color:#ccc}}.presets-section{border-top:1px solid #e0e0e0;padding-top:15px}.presets-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.presets-header h4{margin:0;font-size:16px;color:#333}.save-preset-button{padding:6px 12px;background-color:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .2s ease}.save-preset-button:hover:not(:disabled){background-color:#1976d2}.save-preset-button:disabled{background-color:#ccc;cursor:not-allowed}.preset-input-group{display:flex;gap:8px;margin-bottom:10px;align-items:center}.preset-name-input{flex:1;padding:6px 10px;border:1px solid #ccc;border-radius:4px;font-size:14px}.confirm-save-button{padding:6px 10px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}.confirm-save-button:hover{background-color:#45a049}.cancel-save-button{padding:6px 10px;background-color:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}.cancel-save-button:hover{background-color:#da190b}.presets-list{display:flex;flex-direction:column;gap:6px}.preset-item{display:flex;align-items:center;gap:8px}.preset-load-button{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:8px 12px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;transition:all .2s ease;text-align:left}.preset-load-button:hover:not(:disabled){background-color:#e9ecef;border-color:#adb5bd}.preset-load-button:disabled{background-color:#f5f5f5;color:#999;cursor:not-allowed}.preset-name{font-weight:500;font-size:14px;color:#333}.preset-range{font-size:12px;color:#666;margin-top:2px}.preset-delete-button{padding:6px 8px;background-color:transparent;border:1px solid #dc3545;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s ease}.preset-delete-button:hover:not(:disabled){background-color:#dc3545}.preset-delete-button:disabled{border-color:#ccc;cursor:not-allowed;opacity:.5}@media (prefers-color-scheme: dark){.presets-section{border-top-color:#444}.presets-header h4{color:#fff}.preset-name-input{background-color:#444;border-color:#666;color:#fff}.preset-load-button{background-color:#333;border-color:#555}.preset-load-button:hover:not(:disabled){background-color:#444;border-color:#666}.preset-load-button:disabled{background-color:#222;color:#888}.preset-name{color:#fff}.preset-range{color:#ccc}.preset-delete-button{border-color:#dc3545;color:#dc3545}}@media (max-width: 768px){.presets-header{flex-direction:column;gap:10px;align-items:stretch}.preset-input-group{flex-direction:column}.preset-name-input{margin-bottom:8px}.preset-item{flex-direction:column;align-items:stretch}.preset-delete-button{align-self:flex-end;margin-top:4px}.game-toggle-button.hide-on-mobile,.settings-button.hide-on-mobile,.desktop-text{display:none}.mobile-text{display:inline}}@media (min-width: 769px){.desktop-text{display:inline;font-size:16px}.mobile-text{display:none}}.circle-container{position:relative;width:220px;height:220px;display:flex;justify-content:center;align-items:center}.circle-section{position:absolute;background-color:#2a2a2a;border:2px solid #444;border-radius:4px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s ease;transform-origin:center}.major-key{width:40px;height:40px;z-index:2}.minor-key{width:30px;height:30px;background-color:#333;border-color:#555;z-index:1}.circle-section:hover{background-color:#3a3a3a;border-color:#666;transform:scale(1.1);z-index:3}.circle-section.selected{background-color:#4a4a4a;border-color:#888;transform:scale(1.1);box-shadow:0 0 10px #ffffff4d;z-index:4}.minor-key:hover{background-color:#444}.minor-key.selected{background-color:#555}.section-content{color:#fff;font-weight:700;text-align:center;-webkit-user-select:none;user-select:none}.major-key .section-content{font-size:1rem}.minor-key .section-content{font-size:.8rem}.show-key-button{padding:10px 20px;font-size:16px;color:#fff;background-color:#2196f3;border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .2s ease}.show-key-button:hover{background-color:#1976d2}@media (prefers-color-scheme: light){.circle-of-fifths{background-color:#f5f5f5}.show-key-button{background-color:#2196f3;color:#fff}.show-key-button:hover{background-color:#1976d2}.circle-section{background-color:#e0e0e0;border-color:#ccc}.minor-key{background-color:#d0d0d0;border-color:#bbb}.circle-section:hover{background-color:#f0f0f0;border-color:#999}.circle-section.selected{background-color:#d0d0f0;border-color:#666;box-shadow:0 0 10px #0003}.minor-key:hover{background-color:#e0e0e0}.minor-key.selected{background-color:#c0c0e0}.section-content{color:#333}}@media (max-width: 768px){.circle-of-fifths{padding:.5rem;margin:0 auto}.circle-container{width:210px;height:210px}.major-key{width:38px;height:38px}.minor-key{width:28px;height:28px}}@media (max-width: 480px){.circle-container{width:180px;height:180px}.major-key{width:32px;height:32px}.minor-key{width:24px;height:24px}.major-key .section-content{font-size:.9rem}.minor-key .section-content{font-size:.7rem}.circle-of-fifths{padding:.3rem}}.start-game-button{background-color:#4caf50;color:#fff;border:none;padding:12px 24px;font-size:16px;font-weight:700;border-radius:6px;cursor:pointer;transition:background-color .2s ease;margin-top:10px;width:100%}.start-game-button:hover{background-color:#45a049}.start-game-button:active{background-color:#3d8b40;transform:translateY(1px)}.start-game-button:focus{outline:2px solid #4caf50;outline-offset:2px}.scoreboard{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:.5rem;background:#ffffff1a;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.score-item{display:flex;flex-direction:column;align-items:center;padding:.5rem 1rem;border-radius:6px;min-width:60px}.score-item.correct{background:#22c55e33;border:1px solid rgba(34,197,94,.3)}.score-item.wrong{background:#ef444433;border:1px solid rgba(239,68,68,.3)}.score-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;opacity:.8;margin-bottom:.25rem}.score-item.correct .score-label{color:#22c55e}.score-item.wrong .score-label{color:#ef4444}.score-value{font-size:1.5rem;font-weight:700;color:#fff}@media (max-width: 768px){.scoreboard{gap:.5rem;padding:.25rem}.score-item{padding:.25rem .5rem;min-width:50px}.score-label{font-size:.625rem}.score-value{font-size:1.25rem}}.zoom-controls{position:fixed;bottom:10px;left:10px;z-index:1000;display:flex;gap:5px;background-color:#282828f2;padding:8px;border-radius:8px;box-shadow:0 2px 8px #0000004d;border:1px solid #555;transform-origin:bottom left}.zoom-button{padding:6px 12px;border:1px solid #666;border-radius:4px;background-color:#2a2a2a;color:#e0e0e0;cursor:pointer;font-size:14px;transition:background-color .2s ease}.zoom-button:hover{background-color:#3a3a3a}.zoom-button:active{background-color:#1a1a1a}.zoom-reset{padding:6px 8px;font-size:12px}.zoom-indicator{padding:6px 8px;font-size:12px;color:#b0b0b0;min-width:40px;text-align:center;display:flex;align-items:center;justify-content:center}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}