: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}}