:root{--primary-color: #ff7b00;--primary-dark: #e66d00;--primary-light: #ff9933;--primary-rgb: 255, 123, 0;--text-color: #333;--container-padding: 1rem;--button-padding: .75rem 1.25rem;--button-font-size: 1rem;--heading-size: 1.5rem}@media (min-width: 768px){:root{--container-padding: 1.5rem;--button-padding: 1rem 2rem;--button-font-size: 1.1rem;--heading-size: 2rem}}@media (min-width: 1024px){:root{--container-padding: 2rem}}select,.note-select{padding:.625rem 2.5rem .625rem .875rem;font-size:1rem;font-weight:500;color:var(--text-color);background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:12px;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:all .2s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none}select:hover,.note-select:hover{border-color:var(--primary-color);box-shadow:0 2px 4px #00000014}select:focus,.note-select:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #ff7b001a;outline:none}select:disabled,.note-select:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.6}.settings-item,.setting-group{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.settings-label,.setting-group label{font-weight:500;color:var(--text-color);min-width:120px}.training-container{height:100%;display:flex;flex-direction:column;align-items:center}.training-container h1{color:var(--primary-dark);margin-bottom:2rem}.training-container p{color:var(--text-color);font-size:1.2rem}.selection-grid{display:flex;gap:1.5rem;justify-content:center;max-width:100%;margin:2rem auto;flex-wrap:nowrap}.selection-grid .select-button{padding:1rem 1.2rem;font-size:1rem;border:none;background-color:var(--primary-color)!important;color:#fff!important;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:100px;flex:1;max-width:140px;outline:0!important;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;position:relative;box-shadow:0 2px 4px #0000000d;display:flex;align-items:center;justify-content:center;text-align:center;word-wrap:break-word;line-height:1.3}.selection-grid .select-button:not(.selected){background-color:#fff!important;color:var(--text-color)!important;border:2px solid var(--primary-color)}.selection-grid .select-button:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a;background-color:#fff!important}.selection-grid .select-button.selected{border-color:var(--primary-color);background-color:var(--primary-color)!important;color:#fff;box-shadow:0 4px 8px rgba(var(--primary-rgb),.2)}.selection-grid .select-button.selected:hover{background-color:var(--primary-color)!important;color:#fff}.selection-indicator{position:absolute;top:-10px;right:-10px;background-color:var(--primary-dark);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2px solid white;box-shadow:0 2px 4px #0000001a;transition:all .2s ease;z-index:1}.select-button.selected .selection-indicator{background-color:var(--primary-color);color:#fff;transform:scale(1.1)}.select-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.select-button.selected:hover{color:#fff;background-color:var(--primary-color)}.setup-container h2{margin-bottom:.5rem;color:var(--text-color);font-size:1.4rem}.setup-container .selection-hint{color:#666;margin-bottom:1.5rem;font-size:.9rem}.select-button{outline:none;-webkit-tap-highlight-color:transparent}.select-button:focus{outline:none;box-shadow:none}.select-button:focus-visible{outline:none;box-shadow:none}button{outline:none!important;-webkit-tap-highlight-color:transparent}button:focus,button:active,button:hover{outline:none!important}button:focus-visible{outline:none;box-shadow:none}.selection-grid .select-button:focus,.selection-grid .select-button:active,.selection-grid .select-button:focus-visible,.selection-grid .select-button:-moz-focus-inner{outline:0!important;border-color:#e0e0e0;box-shadow:none!important}.selection-grid .select-button.selected:focus,.selection-grid .select-button.selected:active{border-color:var(--primary-color);outline:0!important;box-shadow:0 4px 8px rgba(var(--primary-rgb),.2)!important}.mode-selector{display:flex;gap:1rem;margin-bottom:2rem;justify-content:center}.mode-button{padding:.8rem 1.5rem;border:none;background-color:var(--primary-color);color:#fff;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:1rem}.mode-button:not(.selected){background-color:#fff;color:var(--text-color);border:2px solid var(--primary-color)}.mode-button.selected{background-color:var(--primary-color);color:#fff}.mode-button:hover{transform:translateY(-2px);box-shadow:0 2px 4px #0000001a}.note-buttons,.interval-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem;width:100%;max-width:600px}.note-buttons button,.interval-buttons button{padding:1rem 2rem;font-size:1.1rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.note-buttons button:hover,.interval-buttons button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.play-again-button{background-color:var(--primary-color);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .2s ease;margin-top:1rem}.play-again-button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.start-button{background-color:var(--primary-color);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .2s ease;margin-top:2rem}.start-button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.pitch-training,.interval-training{min-height:100vh;padding-bottom:60px;position:relative}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;min-height:calc(100vh - 60px)}.score-display{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;font-size:1.2rem;color:var(--text-color)}.score-numbers{background-color:var(--primary-color);color:#fff;padding:.5rem 1rem;border-radius:8px;font-weight:700}.score-percentage{font-weight:700;color:var(--primary-color)}button.piano-key.white-key,.piano-key.white-key{background:linear-gradient(to bottom,#fff,#f5f5f5)!important;border:1px solid #d0d0d0!important;border-top:1px solid #e8e8e8!important;padding:0!important;min-width:0!important;color:#333!important}button.piano-key.black-key,.piano-key.black-key{background:linear-gradient(to bottom,#2a2a2a,#000)!important;border:1px solid #000!important;border-top:1px solid #000!important;padding:0!important;min-width:0!important;color:#fff!important}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--background-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow-x:hidden;width:100%}img,video,canvas,svg{max-width:100%;height:auto}body,input,textarea,button,select{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--card-width: 100%;--card-max-width: 1200px;--card-padding: 1rem;--card-border-radius: 0}.layout-container{min-height:100vh;display:flex;justify-content:center;align-items:center;background-color:var(--primary-light);padding:0;width:100%}.visitor-banner-fixed{position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,#fff3cd,#ffe08a);color:#6c4a00;border-bottom:1px solid #ffd86a;padding:.5rem 1rem;text-align:center;font-size:.875rem;z-index:1000;line-height:1.4}.visitor-banner-fixed a{color:#0d6efd;text-decoration:underline}.layout-card{background:#fff;border-radius:var(--card-border-radius);box-shadow:none;width:var(--card-width);max-width:var(--card-max-width);min-height:100vh;padding:var(--card-padding);position:relative;overflow-y:auto;overflow-x:hidden}.layout-card::-webkit-scrollbar{display:none}.layout-card{-ms-overflow-style:none;scrollbar-width:none}@media (min-width: 768px){:root{--card-padding: 1.5rem;--card-border-radius: 8px}.layout-container{padding:1rem}.layout-card{min-height:auto;height:auto;max-height:85vh;box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014}.visitor-banner-fixed{font-size:.95rem}}@media (min-width: 1024px){:root{--card-padding: 2rem;--card-border-radius: 15px;--card-max-width: 900px}.layout-card{max-height:90vh}}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;background-color:var(--background-color)}.auth-box{background:var(--surface-color);padding:2rem;border-radius:8px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:400px}.auth-box h1{text-align:center;color:var(--text-color);margin-bottom:1.5rem}.auth-error{background-color:#fee2e2;border:1px solid #ef4444;color:#dc2626;padding:.75rem;border-radius:4px;margin-bottom:1rem;font-size:.875rem}.auth-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{color:var(--text-color);font-size:.875rem;font-weight:500}.form-group input{padding:.5rem;border:1px solid var(--border-color);border-radius:4px;font-size:1rem;background-color:var(--input-background);color:var(--text-color)}.form-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color-light)}.auth-button{background-color:var(--primary-color);color:#fff;padding:.75rem;border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}.auth-button:hover{background-color:var(--primary-color-dark)}.auth-button:disabled{background-color:var(--disabled-color);cursor:not-allowed}.auth-link{text-align:center;margin-top:1rem;font-size:.875rem;color:var(--text-color)}.auth-link a{color:var(--primary-color);text-decoration:none;font-weight:500}.auth-link a:hover{text-decoration:underline}.auth-button.secondary{background-color:#fff;color:var(--primary-color);border:1px solid var(--primary-color);margin-bottom:1rem}.auth-button.secondary:hover{background-color:#f8f9fb}.google-login-button{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background-color:#fff;color:#3c4043;border:1px solid #dadce0;border-radius:6px;font-size:14px;font-weight:500;font-family:Roboto,Arial,sans-serif;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.google-login-button:hover{background-color:#f8f9fa;border-color:#d2d3d4;box-shadow:0 1px 3px #0000001a}.google-login-button:active{background-color:#f1f3f4;box-shadow:0 1px 2px #0000000d}.google-login-button svg{flex-shrink:0}.auth-divider{display:flex;align-items:center;text-align:center;margin:20px 0;color:var(--text-secondary)}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid var(--border-color)}.auth-divider span{padding:0 10px;font-size:14px;color:#5f6368}.page-container{min-height:100vh;display:flex;flex-direction:column}.top-bar{padding:.5rem;width:100%}.top-bar-widget{display:flex;align-items:stretch;background:var(--surface-color);border:2px solid var(--border-color);border-radius:8px;box-shadow:0 2px 4px #0000001a;width:100%;max-width:100%;margin:0 auto}.top-bar-section{display:flex;align-items:center;padding:10px 8px;transition:background-color .2s;cursor:pointer;flex:1;color:inherit;justify-content:center;min-width:0}.top-bar-section:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.top-bar-section:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.top-bar-section:not(:first-child):not(:last-child){border-left:2px solid var(--border-color)}.top-bar-section svg{width:20px;height:20px;flex-shrink:0}@media (hover: hover) and (pointer: fine){.top-bar-section:hover{background-color:var(--primary-color);color:#fff}}.top-bar-section:active{background-color:var(--primary-color);color:#fff}.username{font-size:.75rem;font-weight:500;margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}@media (min-width: 480px){.top-bar{padding:.75rem 1rem}.top-bar-widget{max-width:400px}.top-bar-section{padding:10px 12px}.username{font-size:.8rem;margin-left:8px;max-width:80px}}@media (min-width: 768px){.top-bar{padding:.75rem 1.5rem}.top-bar-section{padding:8px 16px}.username{font-size:.875rem;margin-left:12px;max-width:none}}.home-button,.logout-button{width:20px;height:20px;padding:0;background:none;border:none;cursor:pointer;color:var(--text-color);opacity:.7;transition:opacity .2s;flex-shrink:0}.user-info-button{display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;padding:0;color:inherit;height:100%}.user-info-button .username{font-size:.875rem;font-weight:500}.menu{max-width:100%;margin:0 auto;padding:1rem;flex-grow:1}.menu h1{text-align:center;color:var(--text-color);margin-bottom:1.5rem;font-size:clamp(1.75rem,5vw,2.5rem)}.menu-options{display:grid;gap:1rem;grid-template-columns:1fr;width:100%}.menu-option{background:var(--surface-color);border:2px solid var(--border-color);border-radius:8px;padding:1.25rem;cursor:pointer;transition:all .3s ease;text-align:left;width:100%;display:block;min-height:44px}.menu-option:active{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a;border-color:var(--primary-color)}@media (hover: hover) and (pointer: fine){.menu-option:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a;border-color:var(--primary-color)}}.menu-option h2{color:var(--text-color);margin:0 0 .5rem;font-size:clamp(1.15rem,4vw,1.5rem);font-weight:600}.menu-option p{color:var(--text-color);margin:0;font-size:clamp(.875rem,3vw,1rem);line-height:1.5}@media (min-width: 480px){.menu{padding:1.25rem}.menu-options{gap:1.25rem}.menu-option{padding:1.5rem}}@media (min-width: 768px){.menu{padding:1.5rem;max-width:800px}.menu h1{margin-bottom:2rem}.menu-options{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media (min-width: 1024px){.menu{padding:2rem}}.profile-container{max-width:100%;margin:0 auto;padding:1rem}.profile-header{text-align:center;margin-bottom:1.5rem}.profile-avatar{width:64px;height:64px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:#fff}.profile-avatar svg{width:36px;height:36px;stroke-width:2}.profile-header h1{font-size:clamp(1.5rem,5vw,2rem);color:var(--text-color);margin:0}.profile-info{display:flex;flex-direction:column;gap:1rem}.info-card{background:var(--surface-color);border:2px solid var(--border-color);border-radius:8px;padding:1.25rem;transition:all .2s ease}.info-card:active{border-color:var(--primary-color);box-shadow:0 2px 8px #0000001a}@media (hover: hover) and (pointer: fine){.info-card:hover{border-color:var(--primary-color);box-shadow:0 2px 8px #0000001a}}.info-label{color:var(--text-color);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin-bottom:.5rem}.info-value{color:var(--text-color);font-size:1.1rem;font-weight:500;word-break:break-word}@media (min-width: 768px){.profile-container{max-width:600px;padding:1.5rem}.profile-header{margin-bottom:2rem}.profile-avatar{width:80px;height:80px}.profile-avatar svg{width:48px;height:48px}.info-card{padding:1.5rem}.info-label{font-size:.875rem}.info-value{font-size:1.25rem}}.back-button{min-width:44px;min-height:44px;width:auto;height:auto;padding:12px;background:none;border:none;cursor:pointer;color:var(--text-color);opacity:.7;transition:opacity .2s;display:flex;align-items:center;justify-content:center}.back-button svg{width:20px;height:20px}.back-button:active{opacity:1;background-color:#0000000d;border-radius:4px}@media (hover: hover) and (pointer: fine){.back-button:hover{opacity:1}}.menu-link{display:flex;align-items:center;gap:8px;color:var(--text-color);opacity:.7;transition:opacity .2s;cursor:pointer;padding:12px;min-height:44px;border-radius:4px}.menu-link:active{opacity:1;background-color:#0000000d}@media (hover: hover) and (pointer: fine){.menu-link:hover{opacity:1}}.menu-link svg{width:20px;height:20px;flex-shrink:0}.menu-link span{font-size:.875rem;font-weight:500}@media (min-width: 768px){.back-button,.menu-link{padding:8px}}.home-button svg{width:100%;height:100%}.icon-button{width:20px;height:20px;padding:0;background:none;border:none;cursor:pointer;color:inherit;flex-shrink:0}.icon-button svg{width:100%;height:100%}.top-bar-section button,.top-bar-section .icon-button,.top-bar-section .user-info-button{border:none;padding:0;background:none;transition:none;border-color:transparent;pointer-events:none}.top-bar-section:hover{background-color:var(--primary-color);color:#fff}.top-bar-section>*{pointer-events:none}.selection-screen{height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem;box-sizing:border-box}.selection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem;width:100%;max-width:800px;margin:2rem 0;padding:0 1rem}.start-button[disabled]{background:#cfd3d8;color:#6b7280;position:relative}.start-button[disabled]:before{content:"🔒";position:absolute;left:-1.5rem}.results-screen{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}.results-content{text-align:center;max-width:600px}.score-display{margin:2rem 0}.session{max-width:800px;margin:0 auto;padding:2rem}.session-header{background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 1px 3px #0000000d}.session-title{color:var(--text-color);margin:0 0 1rem;font-size:1.5rem;font-weight:600}.session-instructions{color:var(--text-color);opacity:.8;margin:0;font-size:1rem;line-height:1.5}.session-content{background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;padding:2rem;margin-bottom:2rem;box-shadow:0 1px 3px #0000000d}.session-controls{display:flex;gap:1rem;margin-bottom:2rem}.session-button{background:var(--primary-color);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}.session-button:hover{background:var(--primary-color-dark)}.session-button:disabled{background:var(--disabled-color);cursor:not-allowed}.session-feedback{text-align:center;margin:1rem 0;font-size:1.25rem;font-weight:500}.session-feedback.correct{color:var(--success-color)}.session-feedback.incorrect{color:var(--error-color)}.session-settings{background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;margin-top:2rem;box-shadow:0 1px 3px #0000000d}.options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-top:1rem}.option-item{display:flex;align-items:center;gap:.5rem}.option-item input[type=checkbox]{accent-color:var(--primary-color)}.option-item label{color:var(--text-color);font-size:.875rem}.piano{width:100%;max-width:100%;margin:10px auto;padding:12px;background:linear-gradient(to bottom,#2c2c2c,#1a1a1a);border-radius:8px;box-shadow:0 10px 40px #0000004d,inset 0 1px #ffffff0d;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#666 #1a1a1a}.piano::-webkit-scrollbar{height:6px}.piano::-webkit-scrollbar-track{background:#1a1a1a;border-radius:3px}.piano::-webkit-scrollbar-thumb{background:#666;border-radius:3px}.piano::-webkit-scrollbar-thumb:hover{background:#888}.piano-keys{display:flex;justify-content:center;align-items:center;position:relative;height:180px;background:#1a1a1a;padding:8px;border-radius:4px;box-shadow:inset 0 3px 8px #00000080,inset 0 -1px 2px #ffffff08;min-width:fit-content;width:fit-content;margin:0 auto}.key-container{position:relative;flex:0 0 auto;margin:0}.piano-key{border:none;margin:0;padding:0;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;transition:all .15s ease;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.piano-key.white-key{width:36px;max-width:36px;min-width:36px;height:180px;background:linear-gradient(to bottom,#fff,#f5f5f5)!important;border-radius:0 0 3px 3px;border:1px solid #d0d0d0!important;border-top:1px solid #e8e8e8!important;box-shadow:0 2px 4px #00000026,inset 0 1px #fffc,inset 0 -2px 3px #0000000d}.piano-key.white-key.selected{background:linear-gradient(to bottom,#fff,#f5f5f5)!important;box-shadow:0 0 8px #f8f7f699,inset 0 1px #fffc,inset 0 -2px 3px #0000000d}@media (hover: hover) and (pointer: fine){.piano-key.white-key:hover:not(:disabled):not(.selected){background:linear-gradient(to bottom,#f9f9f9,#ececec)!important;border-color:silver!important;transform:translateY(1px);box-shadow:0 2px 4px #00000026,inset 0 1px #ffffffe6,inset 0 -1px 2px #0000000d}}.piano-key.white-key:active:not(:disabled):not(.selected){background:linear-gradient(to bottom,#ececec,#e0e0e0)!important;transform:translateY(2px);box-shadow:0 1px 2px #00000026,inset 0 2px 4px #0000001a}.piano-key.white-key:disabled{background:linear-gradient(to bottom,#e8e8e8,#d5d5d5)!important;cursor:not-allowed;opacity:.5;border-color:#c5c5c5!important;color:#999}.piano-key.black-key{position:absolute;top:0;right:0;width:24px;max-width:24px;min-width:24px;height:108px;background:linear-gradient(to bottom,#2a2a2a,#000)!important;z-index:2;border-radius:0 0 2px 2px;border:1px solid #000!important;border-top:1px solid #000!important;transform:translate(50%);box-shadow:0 4px 8px #000c,inset 0 -2px 4px #00000080}.piano-key.black-key.selected{background:linear-gradient(to bottom,#2a2a2a,#000)!important;box-shadow:0 0 8px #f60c,inset 0 -2px 4px #0000004d}@media (hover: hover) and (pointer: fine){.piano-key.black-key:hover:not(:disabled):not(.selected){background:linear-gradient(to bottom,#3a3a3a,#1a1a1a)!important;transform:translate(50%) translateY(1px);box-shadow:0 3px 6px #000c,inset 0 -2px 4px #00000080}}.piano-key.black-key:active:not(:disabled):not(.selected){background:linear-gradient(to bottom,#1a1a1a,#000)!important;transform:translate(50%) translateY(2px);box-shadow:0 2px 4px #000c,inset 0 2px 4px #000000b3}.piano-key.black-key:disabled{background:linear-gradient(to bottom,#3a3a3a,#2a2a2a)!important;cursor:not-allowed;opacity:.4}.key-label{padding-bottom:8px;font-size:10px;font-weight:600;color:#333;text-shadow:0 1px 0 rgba(255,255,255,.7);-webkit-user-select:none;user-select:none}.piano-key.white-key:disabled .key-label{color:#999}.black-key-label{display:block;color:#fff;font-size:.5em;font-weight:600;position:absolute;bottom:6px;width:100%;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8);-webkit-user-select:none;user-select:none;letter-spacing:-.5px}.piano-key.black-key:disabled .black-key-label{color:#666}@media (hover: none) and (pointer: coarse){.piano-key.white-key:hover:not(:disabled),.piano-key.black-key:hover:not(:disabled){transform:none}.piano-key.black-key:hover:not(:disabled){transform:translate(50%)}}@media (min-width: 360px){.piano-key.white-key{width:40px;max-width:40px;min-width:40px;height:200px}.piano-key.black-key{width:26px;max-width:26px;min-width:26px;height:120px}.key-label{font-size:11px;padding-bottom:10px}}@media (min-width: 480px){.piano{padding:16px;max-width:560px}.piano-keys{height:220px;padding:10px}.piano-key.white-key{width:50px;max-width:50px;min-width:50px;height:220px}.piano-key.black-key{width:32px;max-width:32px;min-width:32px;height:132px}.key-label{font-size:12px;padding-bottom:12px}.black-key-label{font-size:.6em;bottom:8px}}@media (min-width: 768px){.piano{padding:20px;max-width:620px;margin:20px auto;border-radius:12px}.piano-keys{height:260px;padding:12px;border-radius:6px}.piano-key.white-key{width:65px;max-width:65px;min-width:65px;height:260px;border-radius:0 0 5px 5px}.piano-key.black-key{width:40px;max-width:40px;min-width:40px;height:156px;border-radius:0 0 3px 3px}.key-label{font-size:13px;padding-bottom:14px}.black-key-label{font-size:.65em}}@media (min-width: 1024px){.piano-keys{height:300px}.piano-key.white-key{width:80px;max-width:80px;min-width:80px;height:300px}.piano-key.black-key{width:48px;max-width:48px;min-width:48px;height:180px}.key-label{font-size:14px;padding-bottom:15px}.black-key-label{bottom:8px}}:root{--primary-color: #ff7043;--primary-dark: #e64a19;--primary-light: #ffccbc;--text-color: #33261F}body{margin:0;padding:0;min-height:100vh;display:flex;justify-content:center;align-items:center;background-color:var(--primary-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:var(--text-color)}.pitch-training{height:100%;display:flex;flex-direction:column;align-items:center}h1{color:var(--primary-dark);margin-top:0;margin-bottom:1.5rem}.notation-toggle{margin:20px 0;padding:10px;background-color:var(--primary-light);border-radius:8px}.notation-toggle label{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;color:#4a5568}.notation-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer}.score{font-size:1.5rem;font-weight:700;color:var(--primary-dark);margin:1.5rem 0}.status-display{height:50px;line-height:50px;margin:1.5rem 0;font-size:1.2em;font-weight:500;text-align:center;background-color:var(--primary-light);border-radius:8px;border:1px solid var(--primary-color);color:var(--text-color)}.note-buttons{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:1.5rem}button:not(.piano-key){padding:15px 30px;font-size:1.1rem;cursor:pointer;border:none;border-radius:8px;background-color:var(--primary-color);color:#fff;transition:all .2s ease;font-weight:500;min-width:80px}button:not(.piano-key):hover{background-color:var(--primary-dark);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button:not(.piano-key):active{transform:translateY(0)}.pitch-training>button{background-color:var(--primary-color);margin-bottom:1rem;width:100%}.pitch-training>button:hover{background-color:var(--primary-dark)}.pitch-training>button:only-child{background-color:var(--primary-color);font-size:1.3rem;padding:20px 40px;margin:1rem auto;display:block}.pitch-training>button:only-child:hover{background-color:var(--primary-dark)}.note-buttons button{background-color:var(--primary-color)!important;color:#fff!important;border:none;padding:1rem 2rem;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .2s ease}.note-buttons button:hover{background-color:var(--primary-dark)!important;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}@media (max-width: 768px){.pitch-training{padding:1rem;width:95%}.note-buttons{grid-template-columns:repeat(4,1fr)}.note-buttons button{min-width:60px;padding:10px}}@media (max-width: 480px){.pitch-training{padding:1rem;width:95%}.note-buttons{grid-template-columns:repeat(2,1fr)}button{padding:12px 20px}}.back-button{position:absolute;top:1rem;left:1rem}.back-button a{display:flex;align-items:center;gap:.5rem;color:var(--primary-dark);text-decoration:none;font-weight:500;padding:.5rem;border-radius:8px;transition:all .2s ease}.back-button a:hover{background-color:var(--primary-light)}.results-container{text-align:center;padding:2rem}.results-container h2{color:var(--primary-dark);font-size:2rem;margin-bottom:2rem}.final-score{margin:2rem 0;display:flex;flex-direction:column;gap:1.5rem;align-items:center}.score-item{display:flex;align-items:center;gap:1rem;justify-content:center}.score-label{font-size:1.8rem;color:var(--text-color);font-weight:500}.score-numbers,.score-percentage{font-size:2.5rem;font-weight:700;color:var(--primary-dark)}.score-message{font-size:1.2rem;color:var(--text-color);margin:2rem 0}.results-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.primary-button,.secondary-button{padding:1rem 2rem;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center}.primary-button{background-color:var(--primary-color);color:#fff;border:none}.primary-button:hover{background-color:var(--primary-dark);transform:translateY(-2px)}.secondary-button{background-color:#fff;color:var(--primary-dark);border:2px solid var(--primary-color);text-decoration:none}.secondary-button:hover{background-color:var(--primary-light);transform:translateY(-2px);color:var(--primary-dark)}.controls{display:flex;gap:1.5rem;justify-content:center;margin:1.5rem 0;flex-wrap:wrap}.replay-button,.stop-button{padding:.875rem 1.75rem;font-size:1rem;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:140px}.replay-button{background-color:var(--primary-color);color:#fff}.replay-button:hover{background-color:var(--primary-dark);transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.stop-button{background-color:#e74c3c;color:#fff}.stop-button:hover{background-color:#c0392b;transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.stop-button:disabled{background-color:#95a5a6;cursor:not-allowed;transform:none}.feedback{min-height:3rem;margin:1rem 0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:600;transition:opacity .2s ease;color:var(--text-color)}.feedback:empty{opacity:0}.feedback.correct{color:#27ae60!important;font-weight:700}.feedback.incorrect{color:#e74c3c!important;font-weight:700}.status-message{font-size:1.2rem;color:var(--text-color);margin:1.5rem 0;min-height:3rem;display:flex;align-items:center;justify-content:center;gap:4px}.animated-dots:after{content:"";animation:dots 1.5s steps(4,end) infinite;display:inline-block;width:0}@keyframes dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.setup-container{display:flex;flex-direction:column;align-items:center;gap:2rem;margin-top:2rem}.setup-container h2{color:var(--text-color);font-size:1.4rem;margin:0}.note-selection{display:flex;gap:1rem;justify-content:center;max-width:100%;margin:0 auto;flex-wrap:nowrap}.note-select-button{padding:1rem 1.5rem;font-size:1.2rem;border:2px solid var(--primary-color);background-color:#fff;color:var(--text-color);border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:50px;flex:1;max-width:80px;outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;position:relative}.note-select-button.selected{background-color:var(--primary-color);color:#fff;border-width:2px;border-style:solid;border-color:var(--primary-dark);box-shadow:inset 0 0 0 1px #fff3}.note-select-button.selected:after{content:"✓";position:absolute;top:-8px;right:-8px;background-color:var(--primary-dark);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid white;box-shadow:0 2px 4px #0000001a}.note-select-button:hover{transform:translateY(-2px);box-shadow:0 2px 4px #0000001a}.note-select-button:focus,.note-select-button:focus-visible,.note-select-button:active{outline:none;border-color:var(--primary-color);box-shadow:none}.start-button{margin-top:1rem;padding:1rem 2rem;font-size:1.2rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.start-button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 2px 4px #0000001a}.interval-training{height:100%;display:flex;flex-direction:column;align-items:center}.interval-selection{display:flex;gap:1rem;justify-content:center;max-width:100%;margin:0 auto;flex-wrap:nowrap}.interval-select-button{padding:1rem 1.5rem;font-size:1.1rem;border:2px solid var(--primary-color);background-color:#fff;color:var(--text-color);border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:50px;flex:1;max-width:80px;outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;position:relative}.interval-select-button:focus,.interval-select-button:focus-visible,.interval-select-button:active{outline:none;border-color:var(--primary-color);box-shadow:none}.interval-select-button.selected{background-color:var(--primary-color);color:#fff;border-width:2px;border-style:solid;border-color:var(--primary-dark);box-shadow:inset 0 0 0 1px #fff3}.interval-select-button.selected:after{content:"✓";position:absolute;top:-8px;right:-8px;background-color:var(--primary-dark);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid white;box-shadow:0 2px 4px #0000001a}.interval-select-button:hover{transform:translateY(-2px);box-shadow:0 2px 4px #0000001a}.interval-select-button:hover:not(.selected){background-color:#fff;color:var(--text-color)}.interval-select-button.selected:hover{background-color:var(--primary-color);color:#fff}.interval-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem;width:100%;max-width:600px}.interval-buttons button{background-color:var(--primary-color)!important;color:#fff!important;border:none;padding:1rem 2rem;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .2s ease}.interval-buttons button:hover{background-color:var(--primary-dark)!important;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}@media (max-width: 768px){.interval-buttons{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.interval-buttons{grid-template-columns:1fr}}.play-again-button{background-color:var(--primary-color)!important;color:#fff!important}.chord-training{min-height:100vh;padding:20px;display:flex;flex-direction:column;align-items:center}.back-button{position:absolute;top:20px;left:20px}.back-button a{display:flex;align-items:center;gap:5px;text-decoration:none;color:var(--text-color)}.training-mode{max-width:1200px;margin:0 auto;padding:2rem}.training-mode-header{text-align:center;margin-bottom:3rem}.training-mode-header h1{font-size:2.5rem;margin-bottom:.5rem;color:#2c3e50}.training-mode-header p{font-size:1.1rem;color:#7f8c8d}.lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}.lesson-tile{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.lesson-tile:hover:not(.locked){transform:translateY(-4px);box-shadow:0 6px 20px #00000026;border-color:#3498db}.lesson-tile.completed{border-color:#27ae60;background:linear-gradient(135deg,#fff,#f0f9f4)}.lesson-tile.locked{opacity:.5;cursor:not-allowed;background:#f5f5f5}.lesson-number{position:absolute;top:-10px;right:-10px;background:#3498db;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;box-shadow:0 2px 8px #0003}.lesson-tile.completed .lesson-number{background:#27ae60}.lesson-tile.locked .lesson-number{background:#95a5a6}.lesson-content{padding-right:2rem}.lesson-content h3{font-size:1.3rem;margin-bottom:.5rem;color:#2c3e50}.lesson-content p{font-size:.95rem;color:#7f8c8d;margin-bottom:1rem}.lesson-status{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;margin-top:1rem}.lesson-status.completed{color:#27ae60}.lesson-status.locked{color:#95a5a6}.loading{text-align:center;padding:4rem;font-size:1.2rem;color:#7f8c8d}.back-button{margin-bottom:1rem}.back-button a{display:inline-flex;align-items:center;gap:.5rem;color:#3498db;text-decoration:none;font-weight:600;transition:color .2s}.back-button a:hover{color:#2980b9}@media (max-width: 768px){.training-mode{padding:1rem}.lessons-grid{grid-template-columns:1fr}.training-mode-header h1{font-size:2rem}}.theory-carousel{max-width:900px;margin:2rem auto;background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;padding:2.5rem}.theory-content{min-height:400px;margin-bottom:2rem}.theory-slide{font-size:1.1rem;line-height:1.8;color:#2c3e50}.theory-slide h2{color:#3498db;margin-bottom:1.5rem;font-size:2rem}.theory-slide p{margin-bottom:1rem}.theory-slide ul{margin-left:2rem;margin-bottom:1rem}.theory-slide li{margin-bottom:.75rem}.theory-slide strong{color:#2c3e50;font-weight:600}.theory-slide em{color:#e74c3c;font-style:italic}.theory-image{margin-top:2rem;text-align:center}.theory-image img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 12px #0000001a}.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:2rem;border-top:2px solid #ecf0f1}.carousel-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:2px solid #3498db;background:#fff;color:#3498db;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.carousel-button:hover:not(:disabled){background:#3498db;color:#fff;transform:translateY(-2px)}.carousel-button:disabled{opacity:.4;cursor:not-allowed}.carousel-button.primary{background:#3498db;color:#fff}.carousel-button.primary:hover{background:#2980b9}.carousel-indicators{display:flex;gap:.5rem;justify-content:center}.indicator{width:12px;height:12px;border-radius:50%;background:#bdc3c7;transition:all .3s ease}.indicator.active{background:#3498db;width:32px;border-radius:6px}@media (max-width: 768px){.theory-carousel{padding:1.5rem;margin:1rem}.theory-content{min-height:300px}.theory-slide{font-size:1rem}.theory-slide h2{font-size:1.5rem}.carousel-controls{flex-direction:column;gap:1rem}.carousel-button{width:100%;justify-content:center}}.lesson-view{max-width:1200px;margin:0 auto;padding:2rem;min-height:80vh}.lesson-header{margin-bottom:2rem}.lesson-header h1{font-size:2rem;color:#2c3e50;margin-top:1rem}.back-link{display:inline-flex;align-items:center;gap:.5rem;color:#3498db;text-decoration:none;font-weight:600;transition:color .2s}.back-link:hover{color:#2980b9}.practice-intro{max-width:600px;margin:4rem auto;text-align:center;background:#fff;padding:3rem;border-radius:12px;box-shadow:0 4px 20px #0000001a}.practice-intro h2{font-size:2rem;color:#2c3e50;margin-bottom:1.5rem}.practice-intro p{font-size:1.1rem;color:#7f8c8d;margin-bottom:1rem}.start-button{margin-top:2rem;padding:1rem 3rem;font-size:1.2rem;font-weight:600;background:#27ae60;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #27ae604d}.start-button:hover{background:#229954;transform:translateY(-2px);box-shadow:0 6px 16px #27ae6066}.lesson-results{max-width:700px;margin:4rem auto;text-align:center;background:#fff;padding:3rem;border-radius:12px;box-shadow:0 4px 20px #0000001a}.lesson-results h2{font-size:2.5rem;color:#2c3e50;margin-bottom:2rem}.score-display{font-size:3rem;font-weight:700;margin:1.25rem 0 .5rem}.score-display .score{color:#3498db;font-size:2rem;text-align:center}.score-caption{margin-top:.25rem;color:#7f8c8d;font-size:.95rem}.success-message{font-size:1.3rem;color:#27ae60;font-weight:600;margin:2rem 0}.fail-message{font-size:1.2rem;color:#e74c3c;font-weight:600;margin:2rem 0}.results-actions{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.primary-button,.secondary-button{padding:1rem 2rem;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.primary-button{background:#3498db;color:#fff;box-shadow:0 4px 12px #3498db4d}.primary-button:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 6px 16px #3498db66}.secondary-button{background:#fff;color:#3498db;border:2px solid #3498db}.secondary-button:hover{background:#ecf0f1}@media (max-width: 768px){.lesson-view{padding:1rem}.lesson-header h1{font-size:1.5rem}.practice-intro,.lesson-results{padding:2rem 1rem;margin:2rem auto}.score-display,.score-display .score{font-size:1.6rem}}.footer{position:fixed;bottom:0;left:0;right:0;padding:8px;background-color:var(--surface-color);border-top:1px solid var(--border-color)}.footer-content{text-align:center;color:var(--text-color);font-size:.8rem;opacity:.8}.stats-chart-container{width:100%;height:500px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.chart-wrapper{position:relative;height:100%;width:100%}#root{width:100%;margin:0;padding:0;text-align:center;overflow-x:hidden}.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:1.5rem}.read-the-docs{color:#888}.app-container{min-height:100vh;display:flex;flex-direction:column;width:100%;overflow-x:hidden}.content{flex:1;width:100%;padding-bottom:60px}@media (min-width: 768px){.card{padding:2em}.content{padding-bottom:50px}}@media (min-width: 1024px){#root{max-width:1280px;margin:0 auto}.content{padding-bottom:40px}}