*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#fff}.app{max-width:500px;margin:0 auto;padding:12px;min-height:100vh;display:flex;flex-direction:column}header{text-align:center;margin-bottom:6px}.title-row{display:flex;align-items:center;justify-content:center;gap:.75rem}header h1{font-size:1.5rem;color:#00d9ff;text-shadow:0 0 20px rgba(0,217,255,.5)}main{flex:1;display:flex;flex-direction:column}.game-area{flex:1;display:flex;flex-direction:column;gap:6px}.game-controls{background:#ffffff0d;border-radius:10px;padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.level-info{width:100%}.level-info h2{font-size:1.1rem;margin:0}.level-meta{font-size:.85rem;min-height:20px}.stage-nav{display:flex;align-items:center;justify-content:center;gap:12px}.stage-arrow{background:transparent;border:none;color:#00d9ff;font-size:1.2rem;font-weight:700;cursor:pointer;padding:4px 8px;opacity:.8;transition:opacity .2s,transform .2s}.stage-arrow:hover:not(:disabled){opacity:1;transform:scale(1.2)}.stage-arrow:disabled{opacity:.2;cursor:default}.progress{color:#00d9ff;font-size:.95rem}.controls-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;width:100%}.toggle-label{display:flex;align-items:center;gap:6px;font-size:.85rem;cursor:pointer}.toggle-label.compact{font-size:.8rem}.toggle-label input[type=checkbox]{width:16px;height:16px;cursor:pointer}.toggle-label input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.slider-compact{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#ffffffb3}.slider-compact input[type=range]{width:60px;height:4px;border-radius:2px;background:#333;appearance:none;cursor:pointer}.slider-compact input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#00d9ff;cursor:pointer}.slider-compact input[type=range]:disabled{opacity:.5;cursor:not-allowed}.action-row{display:flex;gap:10px}.start-button{background:linear-gradient(135deg,#00d9ff,#0f8);border:none;color:#1a1a2e;font-size:1rem;font-weight:700;padding:10px 32px;border-radius:25px;cursor:pointer;transition:transform .2s,box-shadow .2s;width:100%}.start-button:hover{transform:scale(1.05);box-shadow:0 0 20px #00d9ff80}.stop-button{background:#ff505033;border:2px solid #ff5050;color:#ff5050;font-size:.9rem;font-weight:700;padding:8px 24px;border-radius:20px;cursor:pointer;transition:transform .2s,background .2s}.stop-button:hover{background:#ff50504d;transform:scale(1.05)}.status{font-size:1.1rem;color:#fc0;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.instructions{background:#00d9ff1a;border:1px solid rgba(0,217,255,.3);border-radius:8px;padding:8px;text-align:center;font-size:.8rem}.instructions p{margin:2px 0}.instructions .hint{font-size:.7rem;color:#888}.feedback-container{height:40px;display:flex;align-items:center;justify-content:center}.feedback{text-align:center;padding:8px 20px;border-radius:10px;font-weight:700;opacity:0;transform:scale(.8);transition:all .15s ease-out}.feedback.show{opacity:1;transform:scale(1);animation:feedbackPop .3s ease-out}@keyframes feedbackPop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.feedback-label{font-size:1.2rem;letter-spacing:2px}.feedback-timing{font-size:.75rem;opacity:.7;margin-top:2px}.feedback.perfect{background:linear-gradient(135deg,#ffd70033,#ffb40033);border:2px solid #ffd700;color:gold}.feedback.great{background:linear-gradient(135deg,#0f83,#00c86433);border:2px solid #00ff88;color:#0f8}.feedback.good{background:linear-gradient(135deg,#00d9ff33,#0096c833);border:2px solid #00d9ff;color:#00d9ff}.feedback.fail{background:linear-gradient(135deg,#ff505033,#c8323233);border:2px solid #ff5050;color:#ff5050}.xylophone{display:flex;flex-direction:column;gap:2px;padding:10px;background:#0000004d;border-radius:12px}.tine{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-radius:6px;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tine.active{background:linear-gradient(90deg,#3a506b,#5c7a99);border:2px solid #6fa3d4}.tine.active:hover{background:linear-gradient(90deg,#4a607b,#6c8aa9);transform:translate(4px)}.tine.active:active{transform:scale(.98)}.tine.inactive{background:#3c3c5066;border:2px solid transparent;opacity:.4;cursor:default}.tine.lit{background:linear-gradient(90deg,#00d9ff,#0f8)!important;border-color:#fff!important;box-shadow:0 0 15px #00d9ffb3;transform:translate(6px)}.tine.lit .note-name{color:#000000b3;text-shadow:none}.scale-degree{font-size:1.3rem;font-weight:700;color:#fff;min-width:30px}.note-name{font-size:.85rem;color:#b4dcffe6;text-shadow:0 0 8px rgba(0,150,255,.4)}.tine.inactive .scale-degree,.tine.inactive .note-name{color:#ffffff4d}.info-button{width:28px;height:28px;border-radius:50%;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#ffffffb3;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.info-button:hover{background:#00d9ff1a;border-color:#00d9ff;color:#00d9ff}.modal-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-container{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);max-width:500px;width:100%;max-height:85vh;display:flex;flex-direction:column;animation:modalFadeIn .3s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.modal-title{font-size:1.25rem;font-weight:600;color:#00d9ff;margin:0}.modal-close{background:none;border:none;color:#ffffffb3;font-size:1.75rem;line-height:1;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.modal-close:hover{color:#fff;background:#ffffff1a}.modal-content{padding:1.5rem;overflow-y:auto;flex:1}.info-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem}.info-tab{flex:1;padding:.6rem .5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffb3;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center}.info-tab:hover{background:#00d9ff1a;border-color:#00d9ff;color:#fff}.info-tab.active{background:#00d9ff33;border-color:#00d9ff;color:#00d9ff}.info-tab-content{min-height:200px}.info-section{animation:modalFadeIn .2s ease}.info-intro{color:#ffffffb3;line-height:1.6;margin-bottom:.75rem}.info-list{margin:0;padding-left:1.25rem;color:#ffffffb3;line-height:1.7}.info-list li{margin-bottom:.75rem}.info-list li:last-child{margin-bottom:0}.info-list.numbered{padding-left:1.5rem}.info-list strong{color:#fff}.brain-benefits{font-size:.85rem;color:#ffffffb3;line-height:1.6}.brain-image-container{margin-bottom:1rem;text-align:center}.brain-image{max-width:100%;height:auto;border-radius:8px;opacity:.9}.brain-intro{margin-bottom:.75rem}.brain-systems-list{margin:0 0 1rem 1.25rem;padding:0}.brain-systems-list li{margin-bottom:.25rem}.brain-overview{margin-bottom:16px;padding:12px;background:#ff6b9d1a;border-radius:8px;border-left:3px solid #ff6b9d}.brain-detail{margin-bottom:1rem}.brain-detail:last-of-type{margin-bottom:0}.summary-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.summary-header{font-size:.9rem;color:#fff9}.summary-level{text-transform:uppercase;letter-spacing:1px}.summary-grade{font-size:5rem;font-weight:700;line-height:1;animation:gradeReveal .5s ease-out}@keyframes gradeReveal{0%{opacity:0;transform:scale(.5) rotate(-10deg)}50%{transform:scale(1.2) rotate(5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.summary-score{display:flex;flex-direction:column;align-items:center;gap:4px}.score-value{font-size:2rem;font-weight:700;color:#fff}.new-best{font-size:.85rem;font-weight:700;color:gold;background:#ffd70033;padding:4px 12px;border-radius:12px;animation:pulse 1s infinite}.summary-percentage{font-size:.9rem;color:#ffffff80}.summary-stats{width:100%;display:flex;flex-direction:column;gap:8px;padding:12px;background:#ffffff0d;border-radius:8px}.stat-row{display:flex;justify-content:space-between;align-items:center}.stat-label{color:#fff9}.stat-value{font-weight:700;color:#fff}.summary-counts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.count-item{display:flex;flex-direction:column;align-items:center;padding:8px 16px;border-radius:8px;min-width:60px}.count-item.perfect{background:#ffd70026;border:1px solid rgba(255,215,0,.3)}.count-item.perfect .count-label{color:gold}.count-item.great{background:#00ff8826;border:1px solid rgba(0,255,136,.3)}.count-item.great .count-label{color:#0f8}.count-item.good{background:#00d9ff26;border:1px solid rgba(0,217,255,.3)}.count-item.good .count-label{color:#00d9ff}.count-item.correct{background:#64c8ff26;border:1px solid rgba(100,200,255,.3)}.count-item.correct .count-label{color:#64c8ff}.count-label{font-size:.75rem;text-transform:uppercase}.count-value{font-size:1.2rem;font-weight:700;color:#fff}.summary-continue{background:linear-gradient(135deg,#00d9ff,#0f8);border:none;color:#1a1a2e;font-size:1rem;font-weight:700;padding:12px 48px;border-radius:25px;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:8px}.summary-continue:hover{transform:scale(1.05);box-shadow:0 0 20px #00d9ff80}.level-progress{background:#ffffff0d;border-radius:8px;overflow:hidden}.level-progress-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:transparent;border:none;color:#fffc;font-size:.8rem;cursor:pointer;transition:background .2s}.level-progress-toggle:hover{background:#ffffff0d}.level-progress-toggle .toggle-label{font-weight:500}.level-progress-toggle .toggle-summary{color:#ffffff80;font-size:.75rem}.level-progress-toggle .toggle-arrow{font-size:.7rem;color:#ffffff80}.level-tracks{padding:0 8px 8px;display:flex;flex-direction:column;gap:4px}.level-track{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;transition:background .2s}.level-track.current{background:#00d9ff1a}.level-label{font-size:.65rem;font-weight:500;color:#fff9;min-width:70px;text-transform:uppercase;letter-spacing:.5px}.level-track.current .level-label{color:#00d9ff}.stage-dots{display:flex;gap:4px;flex:1}.stage-dot{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:#ffffff0d;color:#fff6;font-size:.65rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0}.stage-dot.locked{opacity:.3;cursor:not-allowed}.stage-dot.unlocked{border-color:#fff6;color:#ffffffb3}.stage-dot.unlocked:hover:not(:disabled){border-color:#00d9ff;background:#00d9ff1a}.stage-dot.completed{background:#ffffff1a}.stage-dot.current{border-color:#00d9ff;background:#00d9ff33;box-shadow:0 0 8px #00d9ff66}.grade-badge{font-weight:700;font-size:.7rem}.dot-number{font-size:.65rem}.skill-mastery{display:flex;gap:8px;padding:6px 0;margin-top:4px}.skill-item{flex:1;min-width:0;background:transparent;border:none;padding:4px 6px;border-radius:6px;cursor:pointer;transition:background .2s;text-align:left}.skill-item:hover:not(:disabled){background:#ffffff1a}.skill-item.active{background:#ffffff1a;outline:1px solid rgba(255,255,255,.2)}.skill-item:disabled{cursor:not-allowed;opacity:.6}.skill-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px}.skill-names{display:flex;flex-direction:column;line-height:1.2}.skill-name{font-size:.65rem;color:#fffc;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.level-name{font-size:.55rem;color:#fff6}.skill-item.active .skill-name{color:#fff}.skill-item.active .level-name{color:#fff9}.skill-percent{font-size:.65rem;font-weight:700}.skill-bar{height:3px;background:#ffffff1a;border-radius:2px;overflow:hidden}.skill-fill{height:100%;border-radius:2px;transition:width .5s ease-out}.streak-display{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 16px;background:#ffd7001a;border:1px solid rgba(255,215,0,.3);border-radius:20px;animation:streakPop .3s ease-out}@keyframes streakPop{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.streak-count{display:flex;align-items:baseline;gap:4px}.streak-number{font-size:1.5rem;font-weight:700;color:gold}.streak-label{font-size:.75rem;color:#ffd700b3;text-transform:uppercase}.streak-multiplier{font-size:1rem;font-weight:700;color:#0f8;background:#0f83;padding:2px 8px;border-radius:10px}.streak-best{font-size:.7rem;font-weight:700;color:#ff6b9d;animation:pulse .5s infinite}.personal-best-indicator{font-size:.75rem;color:#ffffff80;margin-top:4px}.personal-best-indicator .best-score{color:gold;font-weight:700}.personal-best-indicator .best-grade{margin-left:4px}@media(max-width:480px){.app{padding:8px}header h1{font-size:1.3rem}.tine{padding:10px 16px}.scale-degree{font-size:1.4rem}.modal-container{max-height:90vh}.modal-header{padding:1rem 1.25rem}.modal-content{padding:1.25rem}.info-tab{padding:.5rem .25rem;font-size:.65rem}.level-progress{padding:8px}.level-label{min-width:65px;font-size:.65rem}.stage-dot{width:24px;height:24px;font-size:.6rem}.summary-grade{font-size:4rem}.score-value{font-size:1.5rem}.streak-display{padding:6px 12px}.streak-number{font-size:1.2rem}}