:root{color:#182033;background:#f4f0e8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,select{font:inherit}button{border:0;border-radius:999px;padding:.8rem 1.1rem;color:#182033;background:#fff;box-shadow:0 10px 24px #1e263d1a;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 30px #1e263d24}button:disabled{cursor:not-allowed;opacity:.45}select{width:100%;border:1px solid #d7cfbf;border-radius:14px;padding:.75rem .85rem;color:#182033;background:#fff}.app-shell{width:min(720px,calc(100% - 2rem));margin:0 auto;padding:2rem 0 4rem;display:flex;flex-direction:column;align-items:center}.hero{width:100%;margin-bottom:2rem;text-align:center}.eyebrow{margin:0 0 .5rem;color:#86684a;font-size:.82rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}h1{margin:0;color:#111827;font-size:clamp(2.4rem,8vw,5rem);line-height:.95;letter-spacing:-.07em}h2{margin-top:0}.hero-copy{max-width:620px;margin-left:auto;margin-right:auto;color:#4b5563;font-size:1.1rem}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.25rem;align-items:start}.panel,.info-card{border:1px solid rgb(255 255 255 / 70%);border-radius:30px;background:#ffffffb8;box-shadow:0 24px 70px #1f29371f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.panel{padding:1.25rem}.info-card{padding:1.5rem;color:#4b5563}.info-card strong{color:#111827}.score-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.score-card{border-radius:22px;padding:1rem;background:#f8f5ef}.score-card span{display:block;color:#6b7280;font-size:.82rem}.score-card strong{display:block;margin-top:.25rem;color:#111827;font-size:1.7rem;line-height:1}.button-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.audio-hint{width:100%;margin:0;font-size:.75rem;color:#9ca3af;font-style:italic}.primary-button{color:#fff;background:#1f2937}.guess-form{display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem;align-items:end;margin-bottom:1rem}.guess-form label{display:grid;gap:.35rem;color:#4b5563;font-weight:700}.feedback{border-radius:22px;padding:1rem;font-weight:700}.feedback-neutral{color:#4b5563;background:#f8f5ef}.feedback-success{color:#14532d;background:#dcfce7}.feedback-error{color:#7f1d1d;background:#fee2e2}.piano-keyboard-container{margin-top:1.25rem;border-radius:16px;padding:.75rem .75rem .5rem;background:#1a1a1a}.piano-octave-switch{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;font-weight:700;color:#d1d5db;font-size:.85rem}.octave-controls{display:flex;align-items:center;gap:.5rem}.octave-btn{width:1.75rem;height:1.75rem;padding:0;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;background:#374151;color:#f9fafb;box-shadow:none}.octave-btn:hover:not(:disabled){background:#4b5563;transform:none;box-shadow:none}.octave-display{min-width:1.5rem;text-align:center;font-size:1.1rem;font-weight:800;color:#f9fafb}.piano-keys{position:relative;display:flex;height:150px;border-radius:0 0 8px 8px;overflow:hidden}.piano-key{border:none;border-radius:0;padding:0;margin:0;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;transition:background 60ms ease;box-shadow:none}.piano-key:hover:not(:disabled){transform:none;box-shadow:none}.piano-key-white{position:relative;flex:1;height:100%;background:linear-gradient(to bottom,#fefefe,#f8f8f8 85%,#e8e8e8);border-right:1px solid #d4d4d4;border-bottom:3px solid #c8c8c8;border-radius:0 0 5px 5px;padding-bottom:8px;color:#9ca3af;font-size:.65rem;font-weight:600}.piano-key-white:last-of-type{border-right:none}.piano-key-white:hover:not(:disabled){background:linear-gradient(to bottom,#f3f3f3,#ebebeb 85%,#dcdcdc)}.piano-key-white:active:not(:disabled){background:linear-gradient(to bottom,#e8e8e8,#e0e0e0 85%,#d0d0d0);border-bottom-width:1px;padding-bottom:10px}.piano-key-black{position:absolute;top:0;width:9%;height:60%;background:linear-gradient(to bottom,#2a2a2a,#1a1a1a 60%,#111);border-radius:0 0 4px 4px;border-bottom:3px solid #000;box-shadow:-1px 0 2px #0006,1px 0 2px #0006,0 4px 6px #00000080;z-index:2;color:#9ca3af;font-size:.55rem;font-weight:600;padding-bottom:6px}.piano-key-black:hover:not(:disabled){background:linear-gradient(to bottom,#3a3a3a,#2a2a2a 60%,#1a1a1a);box-shadow:-1px 0 2px #0006,1px 0 2px #0006,0 4px 6px #00000080}.piano-key-black:active:not(:disabled){background:linear-gradient(to bottom,#222,#111 60%,#000);border-bottom-width:1px;height:59%;box-shadow:-1px 0 1px #0006,1px 0 1px #0006,0 2px 3px #00000080}.piano-key-label{pointer-events:none;-webkit-user-select:none;user-select:none}.game-layout-single{width:100%}.level-select h2{margin-bottom:1rem}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.level-card{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;border-radius:20px;padding:1.25rem;background:#f8f5ef;text-align:left;box-shadow:0 4px 12px #0000000f}.level-card:hover:not(:disabled){background:#f0ebe0}.level-card-locked{opacity:.5;filter:grayscale(.4)}.level-card-completed{border:2px solid #86efac}.level-lock,.level-check{position:absolute;top:.75rem;right:.75rem;font-size:1.1rem}.level-card{position:relative}.level-badge{display:inline-block;border-radius:999px;padding:.2rem .7rem;color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.level-title{font-size:1.1rem;color:#111827}.level-desc{font-size:.85rem;color:#6b7280;line-height:1.35}.level-steps-preview{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.25rem}.level-step-dot{font-size:.72rem;color:#9ca3af;background:#fff;border-radius:999px;padding:.15rem .6rem}.step-indicator{display:flex;gap:.5rem;margin-bottom:1rem}.step-chip{flex:1;border:2px solid #e5e7eb;border-radius:14px;padding:.55rem .75rem;background:#f8f5ef;text-align:center;opacity:.5}.step-chip-active{opacity:1;border-color:#93c5fd}.step-chip-passed{opacity:.7;border-color:#86efac;background:#dcfce7}.step-chip-failed{opacity:.7;border-color:#fca5a5;background:#fee2e2}.step-chip-clickable{cursor:pointer;opacity:.65}.step-chip-clickable:hover{opacity:1;border-color:#93c5fd}.step-chip-number{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.step-check-icon{color:#16a34a;font-weight:800}.step-chip-label{display:block;font-size:.8rem;color:#4b5563;margin-top:.1rem}.round-info{margin-bottom:1rem;font-size:.9rem;font-weight:700;color:#4b5563}.error-counter{color:#dc2626}.step-outcome{border-radius:22px;padding:1.5rem;margin-bottom:1rem;text-align:center}.step-outcome strong{font-size:1.3rem}.step-outcome p{margin:.5rem 0 1rem}.step-outcome .button-row{justify-content:center}.step-outcome-pass{color:#14532d;background:#dcfce7}.step-outcome-fail{color:#7f1d1d;background:#fee2e2}.back-button{padding:.5rem .9rem;font-size:.85rem;margin-bottom:.75rem}.level-heading{margin-bottom:.75rem;font-size:1.4rem}.level-heading-step{font-weight:400;font-size:.95rem;color:#6b7280}.navbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:#ffffffd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}.navbar-brand{font-size:1.2rem;font-weight:800;color:#111827;letter-spacing:-.03em}.navbar-actions{display:flex;align-items:center;gap:.75rem}.navbar-reset-btn{padding:.45rem .85rem;font-size:.8rem;font-weight:600;border-radius:999px;background:#fee2e2;color:#7f1d1d;box-shadow:none}.navbar-help-btn{width:2rem;height:2rem;padding:0;border-radius:50%;font-size:1rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;background:#e5e7eb;color:#374151;box-shadow:none}.navbar-help-btn:hover:not(:disabled){background:#d1d5db;box-shadow:none;transform:none}.navbar-reset-btn:hover:not(:disabled){background:#fecaca;box-shadow:none;transform:none}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.toggle-text{font-size:.8rem;font-weight:600;color:#4b5563}.toggle-switch{position:relative;display:inline-block;width:38px;height:22px;background:#d1d5db;border-radius:999px;transition:background .2s ease}.toggle-switch-on{background:#16a34a}.toggle-input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;transition:transform .2s ease}.toggle-switch-on .toggle-knob{transform:translate(16px)}.modal-dialog{border:none;border-radius:24px;padding:0;max-width:420px;width:calc(100% - 2rem);box-shadow:0 24px 70px #0003;animation:modal-in .2s ease}.modal-dialog::backdrop{background:#0006;animation:fade-in .2s ease}.modal-content{padding:1.75rem}.modal-content h3{margin:0 0 .5rem;font-size:1.25rem}.modal-content p{margin:0 0 1.25rem;color:#4b5563;line-height:1.5}.modal-actions{justify-content:flex-end;margin-bottom:0}.danger-button{color:#fff;background:#dc2626}.danger-button:hover:not(:disabled){background:#b91c1c}.help-overlay{position:fixed;inset:0;z-index:200;background:#00000080;animation:fade-in .2s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}.help-modal{position:relative;width:100%;min-height:100%;background:#f4f0e8;animation:help-slide-in .25s ease}.help-close{position:fixed;top:.75rem;right:.75rem;z-index:210;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;background:#fff;color:#374151;box-shadow:0 2px 8px #0000001f}.help-close:hover:not(:disabled){background:#f3f4f6;transform:none;box-shadow:0 2px 8px #0000001f}.help-body{max-width:640px;margin:0 auto;padding:2.5rem 1.5rem 4rem}.help-body h2{margin:0 0 .5rem;font-size:1.8rem;color:#111827;letter-spacing:-.03em}.help-intro{color:#4b5563;font-size:1.05rem;line-height:1.6;margin-bottom:2rem}.help-section{margin-bottom:1.75rem}.help-section h3{margin:0 0 .5rem;font-size:1.1rem;color:#111827}.help-section p{margin:0 0 .5rem;color:#4b5563;line-height:1.6}.help-section ul,.help-section ol{margin:.5rem 0;padding-left:1.25rem;color:#4b5563;line-height:1.7}.help-section li{margin-bottom:.35rem}.help-section li strong{color:#111827}@keyframes help-slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes modal-in{0%{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media(max-width:820px){.app-shell{padding:1.5rem 0}.game-layout,.game-layout-single,.guess-form,.score-grid{grid-template-columns:1fr}}@media(max-width:480px){.navbar{padding:.5rem .75rem}.navbar-brand{font-size:1rem}.navbar-actions{gap:.4rem}.toggle-text{display:none}.navbar-reset-btn{padding:.35rem .6rem;font-size:.72rem}.panel{border-radius:20px;padding:1rem}.score-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.score-card{padding:.75rem;border-radius:16px}.score-card strong{font-size:1.3rem}.guess-form{grid-template-columns:1fr 1fr;gap:.5rem}.guess-form button{grid-column:1 / -1}.button-row{gap:.5rem}.button-row button{padding:.65rem .9rem;font-size:.85rem}.step-indicator{gap:.3rem}.step-chip{padding:.4rem .5rem;border-radius:10px}.step-chip-number{font-size:.65rem}.step-chip-label{font-size:.7rem}.level-heading{font-size:1.15rem}.level-heading-step{display:block;font-size:.82rem}.hero h1{font-size:2rem}.hero-copy{font-size:.95rem}.modal-content{padding:1.25rem}.modal-actions{flex-direction:column}.modal-actions button{width:100%}.piano-keyboard-container{padding:.5rem .5rem .35rem}.piano-keys{height:120px}}.singing-card{border-radius:22px;padding:1.25rem;background:#f8f5ef;margin-bottom:1rem}.singing-target-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.singing-target-block{display:flex;flex-direction:column;flex:1}.singing-target-label{font-size:.72rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.1em}.singing-target-note{font-size:2.4rem;font-weight:800;color:#1e1b4b;line-height:1.1}.singing-target-sub{font-size:.78rem;color:#9ca3af}.singing-action-btn{display:flex;align-items:center;gap:.4rem;padding:.55rem 1rem;font-size:.85rem;font-weight:700;border-radius:999px;flex-shrink:0;white-space:nowrap}.singing-mic-stop{background:#fee2e2;color:#991b1b}.singing-mic-stop:hover:not(:disabled){background:#fecaca}.singing-error{font-size:.82rem;color:#991b1b;background:#fee2e2;border-radius:12px;padding:.6rem .85rem;margin-bottom:.75rem}.singing-strip-wrapper{margin-bottom:1rem}.singing-strip-toggle{display:block;width:100%;padding:.45rem .75rem;font-size:.78rem;font-weight:700;color:#6b7280;background:transparent;box-shadow:none;text-align:left;border-radius:12px 12px 0 0}.singing-strip-toggle:hover:not(:disabled){color:#374151;background:#00000008;transform:none;box-shadow:none}.singing-strip{display:flex;gap:3px;padding:.5rem;background:#f8f5ef;border-radius:0 0 16px 16px}.singing-strip-note{flex:1;text-align:center;padding:.45rem 0;border-radius:8px;background:#e5e7eb;transition:background .12s ease,transform .12s ease,box-shadow .12s ease}.singing-strip-label{font-size:.6rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.singing-strip-target{background:#dbeafe;box-shadow:inset 0 -3px #93c5fd}.singing-strip-target .singing-strip-label{color:#1e40af}.singing-strip-active{background:#fef3c7;transform:scaleY(1.15);box-shadow:0 2px 8px #d9770640}.singing-strip-active .singing-strip-label{color:#92400e}.singing-strip-match{background:#dcfce7;transform:scaleY(1.2);box-shadow:0 2px 10px #16a34a4d}.singing-strip-match .singing-strip-label{color:#14532d;font-weight:800}.singing-detector-area{min-height:140px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:.5rem}.singing-placeholder{color:#9ca3af;font-size:.9rem;text-align:center}.singing-placeholder-listening{display:flex;align-items:center;gap:.5rem}.singing-mic-icon{animation:singing-pulse 1.5s ease-in-out infinite}.singing-live{text-align:center;width:100%}.singing-live-note{font-size:2.6rem;font-weight:800;color:#111827;line-height:1.1}.singing-live-freq{font-size:.78rem;color:#9ca3af;margin-top:.15rem;margin-bottom:.5rem}.singing-tuning-bar-container{max-width:240px;margin:0 auto}.singing-tuning-bar{position:relative;height:6px;border-radius:3px;background:linear-gradient(to right,#fca5a5,#fde68a 25%,#86efac 45% 55%,#fde68a 75%,#fca5a5);overflow:visible}.singing-tuning-center{position:absolute;top:-3px;left:50%;width:2px;height:12px;background:#111827;transform:translate(-50%)}.singing-tuning-needle{position:absolute;top:-5px;width:10px;height:16px;background:#1f2937;border-radius:5px;transform:translate(-50%);transition:left .1s ease-out;box-shadow:0 2px 4px #00000040}.singing-tuning-labels{display:flex;justify-content:space-between;margin-top:.25rem;font-size:.65rem;color:#9ca3af;font-weight:700}.singing-confirm-bar{width:100%;max-width:240px;margin:.5rem auto 0;height:5px;border-radius:3px;background:#e5e7eb;overflow:hidden}.singing-confirm-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#86efac,#16a34a);transition:width 80ms linear}.singing-feedback-slot{min-height:2.4rem;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:.5rem .75rem;margin-bottom:.5rem;font-weight:700;font-size:.9rem;text-align:center}.singing-fb-success{color:#14532d;background:#dcfce7}.singing-fb-error{color:#7f1d1d;background:#fee2e2}.singing-actions{display:flex;justify-content:center;gap:.75rem;min-height:2.5rem}.singing-skip-btn{padding:.5rem 1rem;font-size:.82rem;color:#6b7280;background:#e5e7eb}@keyframes singing-pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}