@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap";@import"https://fonts.googleapis.com/css2?family=Noto+Music&display=swap";:root{--bg-color: #0f1115;--panel-bg: rgba(255, 255, 255, .03);--text-main: #f0f0f5;--text-muted: #8b8d98;--accent-color: #6d28d9;--accent-hover: #7c3aed;--neon-glow: #a78bfa;--status-green: #22c55e;--status-yellow: #eab308;--status-orange: #f97316;--status-red: #ef4444;--status-cyan: #06b6d4}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background-color:var(--bg-color);color:var(--text-main);background-image:radial-gradient(circle at 50% 0%,rgba(109,40,217,.1) 0%,transparent 50%);min-height:100vh;display:flex;justify-content:center;align-items:center}.app-container{width:100%;max-width:100%;height:100vh;padding:1rem}.game-container{position:relative;background:var(--panel-bg);border:1px solid rgba(255,255,255,.05);border-radius:24px;padding:2rem;box-shadow:0 25px 50px -12px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;height:100%;display:flex;flex-direction:column}.animate-fade-in{animation:fadeIn .6s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.icon-pulse{animation:pulse 2s infinite;display:block;margin:0 auto}@keyframes pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1;filter:drop-shadow(0 0 10px var(--neon-glow))}to{transform:scale(1);opacity:.8}}.text-neon{color:var(--neon-glow);text-shadow:0 0 15px rgba(167,139,250,.4)}h1{font-size:2.5rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.5rem}h2{font-size:1.8rem;font-weight:600}p.subtitle{color:var(--text-muted);font-size:1.1rem;margin-bottom:2rem}.instructions{background:#0003;padding:1.5rem;border-radius:12px;margin-bottom:2rem;text-align:left}.instructions p{margin-bottom:.5rem;color:#ccc}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.text-muted{color:var(--text-muted)}.text-center{text-align:center}.max-w-sm{max-width:24rem;margin-inline:auto}.flex{display:flex}.items-center{align-items:center}.gap-2{gap:.5rem}.m-auto{margin:0 auto}.ml-2{margin-left:.5rem}.opacity-50{opacity:.5;pointer-events:none}button{cursor:pointer;border:none;font-family:inherit;transition:all .2s ease}.btn-primary{background-color:var(--accent-color);color:#fff;padding:1rem 2.5rem;border-radius:30px;font-size:1.1rem;font-weight:600;box-shadow:0 4px 15px #6d28d94d}.btn-primary:hover{background-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #6d28d980}.btn-secondary{background-color:transparent;color:#fff;border:1px solid rgba(255,255,255,.2);padding:.8rem 2rem;border-radius:30px;font-size:1rem}.btn-secondary:hover{background-color:#ffffff0d;border-color:#ffffff80}.btn-play-target{background:linear-gradient(135deg,#1f2231,#13141c);width:100px;height:100px;border-radius:50%;border:2px solid rgba(255,255,255,.05);color:var(--neon-glow);display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 10px 25px #00000080,inset 0 1px 1px #ffffff1a;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.btn-play-target:hover:not(:disabled){transform:scale(1.05);border-color:#a78bfa4d;box-shadow:0 15px 35px #0009,0 0 20px #6d28d966,inset 0 1px 1px #fff3}.btn-play-target.playing{transform:scale(.95);background:var(--accent-color);color:#fff;border-color:transparent;box-shadow:0 0 30px #6d28d999}.progress-indicator{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:var(--text-muted)}.progress-bar-bg{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--neon-glow);box-shadow:0 0 10px var(--neon-glow);transition:width .3s ease}.slider-section{transition:opacity .3s ease}.slider-wrapper{position:relative;padding:1rem 0}input[type=range].pitch-slider{-webkit-appearance:none;width:100%;background:transparent;cursor:pointer}input[type=range].pitch-slider:focus{outline:none}input[type=range].pitch-slider::-webkit-slider-runnable-track{width:100%;height:12px;border-radius:6px;background:linear-gradient(to right,#ffffff0d,#ffffff1a,#ffffff0d);border:1px solid rgba(255,255,255,.05)}input[type=range].pitch-slider::-webkit-slider-thumb{-webkit-appearance:none;height:36px;width:36px;border-radius:50%;background:#fff;margin-top:-13px;box-shadow:0 0 15px #fff3,0 4px 10px #00000080;border:2px solid var(--accent-color);transition:transform .1s}input[type=range].pitch-slider:active::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 25px var(--neon-glow)}input[type=range].pitch-slider::-moz-range-track{width:100%;height:12px;border-radius:6px;background:#ffffff1a}input[type=range].pitch-slider::-moz-range-thumb{height:36px;width:36px;border-radius:50%;background:#fff;border:2px solid var(--accent-color);box-shadow:0 0 15px #fff3}.slider-labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted)}.score-display,.final-score{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0003;border-radius:16px;padding:2rem;margin-bottom:2rem;border:1px solid rgba(255,255,255,.05)}.error-value{font-size:4rem;font-weight:600;line-height:1;margin-bottom:.5rem}.error-unit{font-size:1.1rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.feedback-message{font-size:1.2rem;color:#ccc}.help-button{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--text-muted);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10}.help-button:hover{background:#ffffff1a;color:#fff;transform:scale(1.1)}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal-content{background:#13141c;border:1px solid rgba(255,255,255,.1);border-radius:20px;width:100%;max-width:480px;padding:2.5rem;position:relative;text-align:left;box-shadow:0 25px 50px -12px #000c;animation:fadeIn .3s cubic-bezier(.16,1,.3,1)}.modal-close{position:absolute;top:1rem;right:1rem;background:transparent;color:var(--text-muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}.modal-close:hover{color:#fff;background:#ffffff1a}.modal-content h2{font-size:1.5rem;margin-bottom:2rem;text-align:center;color:#fff}.help-section{margin-bottom:1.5rem}.help-section h3{font-size:1.1rem;color:var(--neon-glow);margin-bottom:.5rem}.help-section p,.help-section ul{font-size:.95rem;color:#ccc;line-height:1.5}.help-section ul{padding-left:1.2rem}.help-section li{margin-bottom:.3rem;color:#ccc}.help-section li strong{color:#fff}.grand-staff-container{display:flex;justify-content:center;align-items:center;margin:1rem 0;background:#0003;border-radius:12px;padding:1rem}.piano-scroll-container{width:100%;overflow-x:auto;padding:1rem 0;border-radius:8px;background:#0000004d;scrollbar-width:thin;scrollbar-color:var(--neon-glow) rgba(0,0,0,.1);margin-bottom:2rem}.piano-scroll-container::-webkit-scrollbar{height:8px}.piano-scroll-container::-webkit-scrollbar-track{background:#0000001a}.piano-scroll-container::-webkit-scrollbar-thumb{background-color:var(--neon-glow);border-radius:4px}.piano-keyboard{--white-key-width: 24px;--white-key-height: 100px;--black-key-width: 14px;--black-key-height: 60px;position:relative;width:calc(52 * var(--white-key-width));height:var(--white-key-height);margin:0 auto}.key{position:absolute;top:0;border-radius:0 0 4px 4px;transition:background-color .1s ease,transform .1s ease,box-shadow .1s ease;transform-origin:top center}.key.white{width:var(--white-key-width);height:var(--white-key-height);background:#f0f0f0;border:1px solid rgba(0,0,0,.2);z-index:1}.key.black{width:var(--black-key-width);height:var(--black-key-height);background:#222;z-index:2;border:1px solid black}.key.active{background:var(--neon-glow);box-shadow:0 0 15px var(--neon-glow)}.key.black.active{background:linear-gradient(to bottom,#000 0%,var(--neon-glow) 100%);border:none;border-radius:0 0 4px 4px;box-shadow:0 5px 15px var(--neon-glow)}.key.white.target-green{background:var(--status-green);box-shadow:0 0 15px var(--status-green)}.key.black.target-green{background:linear-gradient(to bottom,#000 0%,var(--status-green) 100%);box-shadow:0 5px 15px var(--status-green)}.key.white.target-yellow{background:var(--status-yellow);box-shadow:0 0 15px var(--status-yellow)}.key.black.target-yellow{background:linear-gradient(to bottom,#000 0%,var(--status-yellow) 100%);box-shadow:0 5px 15px var(--status-yellow)}.key.white.target-orange{background:var(--status-orange);box-shadow:0 0 15px var(--status-orange)}.key.black.target-orange{background:linear-gradient(to bottom,#000 0%,var(--status-orange) 100%);box-shadow:0 5px 15px var(--status-orange)}.key.white.target-red{background:var(--status-red);box-shadow:0 0 15px var(--status-red)}.key.black.target-red{background:linear-gradient(to bottom,#000 0%,var(--status-red) 100%);box-shadow:0 5px 15px var(--status-red)}.key.white.user-wrong{background:var(--status-cyan);box-shadow:0 0 15px var(--status-cyan)}.key.black.user-wrong{background:linear-gradient(to bottom,#000 0%,var(--status-cyan) 100%);box-shadow:0 5px 15px var(--status-cyan)}.key.black.target-green,.key.black.target-yellow,.key.black.target-orange,.key.black.target-red,.key.black.user-wrong{border:none;border-radius:0 0 4px 4px}.key.pressed{transform:scaleY(.98);background:var(--neon-glow)}.key.white.pressed{box-shadow:inset 0 2px 8px #0006,0 0 15px var(--neon-glow)}.key.black.pressed{transform:scaleY(.96);background:var(--accent-color);border:none;border-radius:0 0 4px 4px;box-shadow:inset 0 -2px 5px #0006,0 0 15px var(--accent-color)}.build-info{position:fixed;bottom:10px;right:20px;font-size:10px;color:var(--text-muted);opacity:.6;z-index:100;pointer-events:none;font-family:monospace}