*{box-sizing:border-box;margin:0;padding:0}:root{--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right);--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--border-color:#334155;--border-hover:#60a5fa;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#cbd5e1;--accent-gradient:linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);--accent-blue:#60a5fa;--accent-purple:#a78bfa;--success:#34d399;--error:#ef4444;--shadow-color:#60a5fa4d}[data-theme=light]{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#e2e8f0;--border-color:#cbd5e1;--border-hover:#3b82f6;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#475569;--accent-gradient:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--success:#22c55e;--error:#dc2626;--shadow-color:#3b82f633}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;padding-top:var(--sat);padding-left:var(--sal);padding-right:var(--sar);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;transition:background-color .3s,color .3s}html{height:100%;height:-webkit-fill-available}body{min-height:100%;min-height:-webkit-fill-available}.app{min-height:100vh;padding:2rem;padding-top:max(2rem,var(--sat));width:100%}.header{text-align:center;margin-bottom:3rem;padding-bottom:2rem}.title{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:3rem;font-weight:700}.subtitle{color:var(--text-secondary);margin-top:.5rem;font-size:1.2rem}.mode-selector,.difficulty-selector{max-width:1200px;margin:0 auto;padding:2rem}.mode-grid{grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1200px;margin-top:2rem;margin-left:auto;margin-right:auto;display:grid}.difficulty-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem;display:grid}.mode-card,.difficulty-card{background:var(--bg-secondary);border:2px solid var(--border-color);text-align:center;cursor:pointer;border-radius:16px;flex-direction:column;align-items:center;gap:1rem;padding:3rem 2rem;transition:all .3s;display:flex}.mode-card:hover,.difficulty-card:hover{box-shadow:0 12px 24px var(--shadow-color);border-color:var(--border-hover);background:var(--bg-secondary);transform:translateY(-8px)}.mode-icon{margin-bottom:1rem;font-size:4rem}.mode-card h2,.difficulty-card h2{color:var(--text-primary);margin-bottom:.5rem;font-size:2rem}.mode-card p,.difficulty-card p{color:var(--text-secondary);line-height:1.6}.difficulty-features{text-align:left;margin-top:1rem;list-style:none}.difficulty-features li{color:var(--text-muted);padding:.5rem 0}.difficulty-features li:before{content:"✓ ";color:var(--accent-blue);margin-right:.5rem;font-weight:700}.mode-title{text-align:center;margin-bottom:2rem}.mode-name{color:var(--text-primary);margin-bottom:.5rem;font-size:2.5rem;font-weight:600}.mode-subtitle{color:var(--text-secondary);font-size:1.1rem}.back-button{background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;border:none;border-radius:8px;margin-bottom:1.5rem;padding:.75rem 1.5rem;font-size:1rem;transition:all .3s}.back-button:hover{background:var(--border-color);transform:translateY(-2px)}.game-container{flex-direction:column;gap:2rem;max-width:1200px;margin:0 auto;display:flex}.score-display{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:1.5rem;padding:1.5rem;display:flex}.score-item{text-align:center}.score-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;font-size:.9rem}.score-value{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.streak-fire{margin-left:.5rem}.quiz-interface{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;flex-direction:column;align-items:center;gap:2rem;padding:3rem 2rem;display:flex}.play-button{background:var(--accent-gradient);color:#fff;cursor:pointer;box-shadow:0 4px 12px var(--shadow-color);border:none;border-radius:16px;align-items:center;gap:1rem;padding:2rem 4rem;font-size:1.5rem;font-weight:600;transition:all .3s;display:flex}.play-button:hover:not(:disabled){box-shadow:0 8px 24px var(--shadow-color);transform:translateY(-4px)}.play-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.answer-options{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;width:100%;max-width:800px;display:grid}.answer-button{background:var(--bg-primary);border:2px solid var(--border-color);color:var(--text-primary);cursor:pointer;border-radius:12px;padding:1.5rem 1rem;font-size:1.1rem;font-weight:500;transition:all .3s}.answer-button:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--border-hover);transform:translateY(-2px)}.answer-button:disabled{cursor:not-allowed}.answer-button.correct{border-color:var(--success);background:#34d3991a}.answer-button.incorrect{border-color:var(--error);background:#ef44441a}.answer-button.selected{border-width:3px}.feedback-display{text-align:center;border-radius:12px;padding:1.5rem;font-size:1.2rem;font-weight:600;animation:.3s fadeIn}.feedback-display.correct{border:2px solid var(--success);color:var(--success);background:#34d3991a}.feedback-display.incorrect{border:2px solid var(--error);color:var(--error);background:#ef44441a}.feedback-icon{margin-right:.5rem;font-size:2rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.next-button{background:var(--accent-gradient);color:#fff;cursor:pointer;border:none;border-radius:8px;margin-top:1rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;transition:all .3s}.next-button:hover{box-shadow:0 8px 20px var(--shadow-color);transform:translateY(-2px)}.restart-button{background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;border:none;border-radius:8px;margin:0 auto;padding:1rem 2rem;font-size:1rem;font-weight:600;transition:all .3s;display:block}.restart-button:hover{background:var(--border-color);transform:translateY(-2px)}.results-screen{max-width:800px;margin:0 auto;padding:2rem;animation:.5s fadeIn}.results-header{text-align:center;margin-bottom:3rem}.performance-emoji{margin-bottom:1rem;font-size:5rem;animation:.6s bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.performance-message{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:3rem;font-weight:700}.results-subtitle{color:var(--text-secondary);font-size:1.2rem}.results-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;margin-bottom:3rem;display:grid}.stat-card{background:var(--bg-secondary);border:2px solid var(--border-color);text-align:center;border-radius:16px;padding:2rem 1.5rem;transition:all .3s}.stat-card:hover{border-color:var(--border-hover);transform:translateY(-4px)}.stat-card.primary{border-color:var(--accent-blue);background:linear-gradient(135deg,#60a5fa1a 0%,#a78bfa1a 100%)}.stat-card .stat-value{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.stat-card .stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.results-actions{flex-direction:column;gap:1rem;max-width:400px;margin:0 auto;display:flex}.action-button{cursor:pointer;border:none;border-radius:12px;padding:1.25rem 2rem;font-size:1.1rem;font-weight:600;transition:all .3s}.action-button.primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 12px var(--shadow-color)}.action-button.primary:hover{box-shadow:0 8px 24px var(--shadow-color);transform:translateY(-4px)}.action-button.secondary{background:var(--bg-tertiary);color:var(--text-primary)}.action-button.secondary:hover{background:var(--border-color);transform:translateY(-2px)}@media (max-width:1024px){.mode-grid{grid-template-columns:repeat(2,1fr);max-width:900px}}@media (max-width:768px){.app{padding:1rem}.title{font-size:2rem}.subtitle{font-size:1rem}.mode-grid,.difficulty-grid{grid-template-columns:1fr;gap:1rem}.mode-card,.difficulty-card{padding:2rem 1.5rem}.score-display{flex-direction:column;gap:1rem}.quiz-interface{padding:2rem 1rem}.play-button{padding:1.5rem 3rem;font-size:1.2rem}.answer-options{grid-template-columns:1fr}.score-value{font-size:1.5rem}.mode-name{font-size:1.8rem}.settings-grid{grid-template-columns:1fr}}.settings-panel{z-index:1000;background:var(--bg-secondary);border:1px solid var(--border-color);border-right:none;border-radius:12px 0 0 12px;align-items:stretch;transition:right .3s;display:flex;position:fixed;top:50%;right:0;overflow:hidden;transform:translateY(-50%);box-shadow:-4px 0 20px #0000004d}.settings-panel:not(.expanded){right:-280px}.settings-panel.expanded{right:0}.settings-toggle{border:none;border-right:1px solid var(--border-color);width:44px;color:var(--text-secondary);cursor:pointer;background:0 0;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;padding:1rem .5rem;font-size:.8rem;transition:background-color .3s,color .3s;display:flex;position:relative}.settings-toggle:hover{color:var(--text-primary);background:#33415580}.toggle-icon{font-size:1.2rem;font-weight:700}.toggle-text{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:1px;font-weight:500}.settings-content{background:0 0;border:none;width:280px;max-height:80vh;padding:1.5rem;overflow-y:auto}.settings-title{color:var(--text-primary);text-align:center;border-bottom:1px solid var(--border-color);margin-bottom:1.5rem;padding-bottom:.75rem;font-size:1.1rem;font-weight:600}.settings-list{flex-direction:column;gap:1.25rem;display:flex}.setting-item{flex-direction:column;gap:.5rem;display:flex}.setting-item label{color:var(--text-muted);font-size:.85rem;font-weight:500}.setting-item input[type=number],.setting-item select{background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:6px;padding:.5rem;font-size:.9rem}.setting-item input[type=number]:focus,.setting-item select:focus{border-color:var(--border-hover);outline:none}.checkbox-item{flex-direction:row;align-items:center}.checkbox-item label{cursor:pointer;align-items:center;gap:.5rem;display:flex}.checkbox-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-blue)}.reset-settings-button{background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.85rem;transition:all .3s}.reset-settings-button:hover{background:var(--border-color)}.app{padding-bottom:calc(50px + var(--sab))}.answer-visualization{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;width:100%;max-width:800px;margin-top:1rem;padding:1.5rem}.visualization-title{color:var(--text-primary);text-align:center;margin-bottom:1rem;font-size:1.2rem;font-weight:600}.visualization-text{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.viz-label{color:var(--text-secondary);font-size:.9rem;font-weight:500}.viz-value{color:var(--text-primary);background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1rem;font-weight:600}.visualization-section{margin-top:1.5rem}.section-title{color:var(--text-secondary);text-align:center;text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem;font-size:.9rem}.piano-keyboard{justify-content:center;padding:1rem 0;display:flex;overflow-x:auto}.piano-container{background:var(--bg-secondary);border-radius:8px;height:120px;padding:8px;display:flex;position:relative}.piano-octave{width:140px;height:100%;position:relative}.piano-key{border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;padding-bottom:4px;transition:all .2s;display:flex;position:absolute;top:0}.white-key{z-index:1;background:linear-gradient(#f8fafc 0%,#e2e8f0 100%);border:1px solid #94a3b8;width:18px;height:100%}.white-key.highlighted{background:linear-gradient(180deg,var(--accent-blue)0%,#3b82f6 100%);border-color:var(--accent-blue);box-shadow:0 0 12px var(--shadow-color)}.black-key{z-index:2;background:linear-gradient(#1e293b 0%,#0f172a 100%);border:1px solid #334155;width:12px;height:60%;transform:translate(-50%)}.black-key.highlighted{background:linear-gradient(180deg,var(--accent-purple)0%,#7c3aed 100%);border-color:var(--accent-purple);box-shadow:0 0 12px #a78bfa99}.key-label{color:#fff;text-shadow:0 1px 2px #00000080;white-space:nowrap;font-size:.6rem;font-weight:600}.white-key .key-label{color:#0f172a;text-shadow:none}.music-staff{justify-content:center;max-width:100%;padding:1rem;display:flex;overflow-x:auto}.vexflow-container{background:var(--bg-primary);border-radius:8px;padding:10px}.vexflow-container svg{display:block}.vexflow-container svg .vf-stave line,.vexflow-container svg .vf-stave path{stroke:#fff}.vexflow-container svg .vf-stavenote path,.vexflow-container svg .vf-notehead path,.vexflow-container svg .vf-accidental path,.vexflow-container svg .vf-clef path{fill:#fff;stroke:#fff}.vexflow-container svg text{fill:#fff}@media (max-width:768px){.piano-octave{width:100px}.white-key{width:12px}.black-key{width:8px}.key-label{font-size:.5rem}.vexflow-container{padding:5px}}.title-link{text-decoration:none;display:inline-block}.title-link:hover .title{opacity:.8}.confetti-container{pointer-events:none;z-index:1000;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.confetti-piece{transform-origin:50%;border-radius:2px;animation:linear forwards confetti-fall;position:absolute;top:-20px}@keyframes confetti-fall{0%{opacity:1;top:-20px;transform:translate(0)rotate(0)}25%{transform:translate(-30px)rotate(90deg)}50%{transform:translate(30px)rotate(180deg)}75%{transform:translate(-20px)rotate(270deg)}to{opacity:0;top:100vh;transform:translate(20px)rotate(360deg)}}.setting-slider{appearance:none;background:var(--bg-tertiary);cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}.setting-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-gradient);cursor:pointer;border-radius:50%;width:18px;height:18px;transition:transform .2s}.setting-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.setting-slider::-moz-range-thumb{background:var(--accent-blue);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px}.slider-value{color:var(--text-secondary);text-align:center;margin-top:.25rem;font-size:.85rem}.setting-item .slider-container{width:100%}.copyright-footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);z-index:999;padding-bottom:var(--sab);position:fixed;bottom:0;left:0;right:0}.copyright{text-align:center;color:var(--text-secondary);padding:.5rem 1rem .25rem;font-size:.8rem}.version-info{text-align:center;color:var(--text-secondary);opacity:.6;padding:.25rem 1rem .5rem;font-size:.7rem}.copyright a{color:var(--accent-blue);text-decoration:none;transition:opacity .2s}.copyright a:hover{opacity:.8;text-decoration:underline}@media (max-width:768px){.settings-panel{top:auto;bottom:50px;transform:translateY(0)}.settings-panel:not(.expanded){right:-260px}.settings-panel.expanded{right:0}.settings-toggle{width:40px;padding:.75rem .25rem}.toggle-text{font-size:.7rem}.settings-content{width:260px;max-height:calc(100vh - 120px);padding:1rem}.settings-title{margin-bottom:1rem;font-size:1rem}.settings-list{gap:1rem}}