:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #0064e0;--primary-deep: #0457cb;--primary-soft: #0091ff;--ink-button: #74c69d;--canvas: #ffffff;--surface-soft: #f1f4f7;--ink-deep: #2d6a4f;--ink: #1c1e21;--charcoal: #444950;--slate: #4b4c4f;--steel: #5d6c7b;--stone: #8595a4;--hairline: #ced0d4;--hairline-soft: #dee3e9;--disabled-text: #bcc0c4;--success: #31a24c;--success-bg: #e6f4ea;--success-text: #1a5c2e;--attention: #f2a918;--warning: #f7b928;--critical: #e41e3f;--critical-bg: #fde8ec;--critical-text: #8b0f22;--fb-blue: #1876f2;--r-sm: 4px;--r-md: 6px;--r-lg: 8px;--r-xl: 16px;--r-xxl: 24px;--r-xxxl: 32px;--r-full: 100px;--r-circle: 9999px;--sp-xs: 8px;--sp-sm: 10px;--sp-md: 12px;--sp-base: 16px;--sp-lg: 20px;--sp-xl: 24px;--sp-xxl: 32px;--sp-xxxl: 40px;--sp-sec: 64px}body{background:var(--surface-soft);color:var(--ink);font-family:Optimistic VF,Montserrat,Helvetica,Arial,Noto Sans,sans-serif;min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem}.start-screen{justify-content:center;background:var(--surface-soft)}.start-card{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xxxl);padding:var(--sp-xxl) var(--sp-xl);max-width:440px;width:100%;text-align:center;box-shadow:#14161a0f 0 2px 8px}.music-icon{font-size:3rem;margin-bottom:.5rem;line-height:1;color:var(--primary)}h1{font-size:2rem;font-weight:500;letter-spacing:-.02em;color:var(--ink-deep);margin-bottom:.2rem;line-height:1.17}.subtitle{color:var(--steel);font-size:.95rem;font-weight:400;margin-bottom:1.5rem}.info-row{display:flex;justify-content:center;gap:.75rem;margin-bottom:1.5rem}.info-item{background:var(--surface-soft);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);padding:.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;flex:1}.info-num{font-size:1.75rem;font-weight:700;color:var(--primary);line-height:1}.info-label{font-size:.7rem;color:var(--steel);margin-top:.25rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.instructions{font-size:.95rem;color:var(--charcoal);margin-bottom:1rem;line-height:1.7}.instructions strong{color:var(--ink-deep);font-weight:700}.term-list{background:var(--surface-soft);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);padding:var(--sp-md) var(--sp-base);margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem;text-align:left}.term-item{display:flex;align-items:baseline;gap:.6rem}.term-name{font-size:.78rem;font-weight:700;color:var(--primary);white-space:nowrap;min-width:90px}.term-desc{font-size:.8rem;color:var(--steel);line-height:1.5;word-break:keep-all}.btn-primary{display:block;width:100%;background:var(--ink-button);color:#0d4028;border:none;border-radius:var(--r-full);padding:14px 30px;font-size:.88rem;font-weight:700;letter-spacing:-.14px;cursor:pointer;transition:background .15s,transform .1s}.btn-primary:hover{background:#52b788}.btn-primary:active{transform:scale(.98);background:#52b788}.setup-hint{margin-top:1rem;font-size:.75rem;color:var(--stone);line-height:1.5}.setup-hint code{background:var(--surface-soft);color:var(--charcoal);padding:.15rem .4rem;border-radius:var(--r-sm);font-size:.72rem;border:1px solid var(--hairline)}.lang-selector{display:flex;justify-content:center;gap:.45rem;margin-bottom:1.25rem}.lang-btn{display:flex;align-items:center;gap:.35rem;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-full);color:var(--ink);cursor:pointer;padding:8px 16px;font-size:.78rem;font-weight:700;letter-spacing:.02em;transition:border-color .12s,background .12s,color .12s}.lang-btn:hover{border-color:var(--ink-deep);color:var(--ink-deep)}.lang-btn.active{background:var(--ink-button);border-color:var(--ink-button);color:#0d4028}.lang-flag{font-size:1.05rem;line-height:1}.lang-label{font-size:.78rem;font-weight:700}.quiz-screen{max-width:580px;width:100%;margin-inline:auto;align-items:stretch;gap:.85rem;padding-bottom:2rem;background:var(--surface-soft)}.quiz-header{display:flex;align-items:center;gap:.6rem;padding:.5rem 0}.progress-text{font-size:.8rem;color:var(--steel);font-weight:700;white-space:nowrap;letter-spacing:-.14px}.progress-bar{flex:1;height:4px;background:var(--hairline-soft);border-radius:var(--r-full);overflow:hidden}.progress-fill{height:100%;background:var(--primary);border-radius:var(--r-full);transition:width .4s ease}.score-badge{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-full);padding:4px 12px;font-size:.78rem;font-weight:700;color:var(--ink-deep);white-space:nowrap;letter-spacing:-.14px}.quiz-lang-flags{display:flex;gap:.1rem;flex-shrink:0}.lang-flag-btn{background:transparent;border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;font-size:1.05rem;line-height:1;opacity:.4;padding:.2rem .25rem;transition:opacity .12s,border-color .12s,background .12s}.lang-flag-btn:hover{opacity:.85}.lang-flag-btn.active{background:#0064e01a;border-color:var(--primary);opacity:1}.btn-stop{background:var(--ink-button);border:none;border-radius:var(--r-full);color:#0d4028;cursor:pointer;font-size:.72rem;font-weight:700;line-height:1;padding:.3rem .6rem;transition:background .12s;white-space:nowrap;flex-shrink:0}.btn-stop:hover{background:#52b788}.stop-confirm-bar{background:var(--critical-bg);border:1px solid var(--critical);border-radius:var(--r-xl);padding:.7rem 1rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.stop-confirm-msg{flex:1;font-size:.82rem;color:var(--critical-text);font-weight:600;min-width:0}.stop-confirm-btns{display:flex;gap:.45rem;flex-shrink:0}.btn-stop-yes{background:var(--critical);border:none;border-radius:var(--r-full);color:#fff;cursor:pointer;font-size:.82rem;font-weight:700;padding:6px 16px;transition:background .12s}.btn-stop-yes:hover{background:#c01535}.btn-stop-no{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-full);color:var(--ink);cursor:pointer;font-size:.82rem;font-weight:700;padding:6px 16px;transition:border-color .12s,color .12s}.btn-stop-no:hover{border-color:var(--ink-deep);color:var(--ink-deep)}.player-area{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xxl);display:flex;justify-content:center;align-items:center;min-height:110px;padding:1.25rem;box-shadow:#14161a0a 0 1px 4px}.youtube-player{width:100%;aspect-ratio:16 / 9;border-radius:var(--r-lg);overflow:hidden;display:block}.youtube-player iframe{width:100%!important;height:100%!important;border:none;display:block}.no-audio{text-align:center}.no-audio-notes{font-size:2rem;letter-spacing:.3em;color:var(--hairline);margin-bottom:.5rem}.no-audio p{color:var(--stone);font-size:.9rem}.no-audio-hint{font-size:.75rem!important;color:var(--disabled-text)!important;margin-top:.25rem}.question-area{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xxl);padding:var(--sp-xl);display:flex;flex-direction:column;gap:1rem;box-shadow:#14161a0a 0 1px 4px}.step-tabs{display:flex;gap:.5rem}.step-tab{flex:1;text-align:center;padding:8px .5rem;border-radius:var(--r-full);font-size:.75rem;font-weight:700;color:var(--steel);background:var(--canvas);border:1px solid var(--hairline);letter-spacing:-.14px;transition:all .15s}.step-tab.active{background:var(--ink-button);border-color:var(--ink-button);color:#0d4028}.step-tab.done{background:var(--success-bg);border-color:var(--success);color:var(--success-text)}.question-text{font-size:1.2rem;font-weight:500;color:var(--ink-deep);text-align:center;line-height:1.28}.question-desc{font-size:.78rem;color:var(--steel);text-align:center;line-height:1.6;word-break:keep-all;margin-top:-.25rem}.hint-row{display:flex;flex-direction:column;gap:.5rem}.btn-hint{align-self:flex-start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-full);color:var(--steel);cursor:pointer;font-size:.75rem;font-weight:700;padding:5px 14px;letter-spacing:-.14px;transition:border-color .12s,color .12s}.btn-hint:hover{border-color:var(--primary);color:var(--primary)}.hint-list{display:flex;flex-direction:column;gap:.4rem}.hint-box{background:#fffbeb;border:1px solid #fde68a;border-left:3px solid var(--warning);border-radius:var(--r-lg);color:#78350f;font-size:.82rem;line-height:1.65;padding:.6rem .9rem;word-break:keep-all;margin:0}.hint-label{background:var(--warning);border-radius:var(--r-full);color:var(--ink-deep);font-size:.65rem;font-weight:700;margin-right:.35rem;padding:2px 8px;vertical-align:middle;letter-spacing:.02em}.hint-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.btn-hint-hide{opacity:.65}.choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.choice{background:var(--surface-soft);border:2px solid transparent;border-radius:var(--r-xl);color:var(--ink);cursor:pointer;font-size:.88rem;font-weight:400;padding:.85rem .75rem;text-align:center;transition:border-color .12s,background .12s;word-break:break-word;line-height:1.4;letter-spacing:-.14px}.choice:hover:not(:disabled){border-color:var(--primary);background:var(--canvas)}.choice:disabled{cursor:default}.choice-correct{background:var(--success-bg)!important;border-color:var(--success)!important;color:var(--success-text)!important;font-weight:700}.choice-wrong{background:var(--critical-bg)!important;border-color:var(--critical)!important;color:var(--critical-text)!important}.choice-dim{opacity:.35}.feedback{text-align:center;padding:.65rem 1rem;border-radius:var(--r-full);font-size:.88rem;font-weight:700;letter-spacing:-.14px}.feedback-correct{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success)}.feedback-wrong{background:var(--critical-bg);color:var(--critical-text);border:1px solid var(--critical)}.btn-next{background:var(--primary);color:#fff;border:none;border-radius:var(--r-full);padding:14px 30px;font-size:.88rem;font-weight:700;cursor:pointer;width:100%;letter-spacing:-.14px;transition:background .15s,transform .1s}.btn-next:hover{background:var(--primary-deep)}.btn-next:active{background:var(--primary-deep);transform:scale(.98)}.notes-card{background:var(--canvas);border:1px solid var(--hairline-soft);border-left:3px solid var(--primary);border-radius:var(--r-xl);padding:var(--sp-base) var(--sp-xl);box-shadow:#14161a0a 0 1px 4px}.notes-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem}.notes-icon{color:var(--primary);font-size:.95rem}.notes-label{font-size:.72rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.08em}.notes-body{font-size:.88rem;color:var(--charcoal);line-height:1.75;word-break:keep-all}.results-screen{max-width:580px;width:100%;margin-inline:auto;align-items:stretch;gap:.85rem;padding-bottom:2rem;background:var(--surface-soft)}.results-header{text-align:center;background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xxxl);padding:var(--sp-xxl) var(--sp-xl);box-shadow:#14161a0a 0 1px 4px}.results-header h1{font-size:1.5rem;font-weight:500;color:var(--ink-deep);margin-bottom:.75rem;line-height:1.28}.final-score{font-size:3.5rem;font-weight:700;line-height:1;margin-bottom:.25rem}.score-big{color:var(--primary)}.score-max{font-size:2rem;color:var(--stone);font-weight:400}.score-grade{color:var(--steel);font-size:.95rem;font-weight:400}.stopped-note{background:var(--critical-bg);border:1px solid var(--critical);border-radius:var(--r-full);color:var(--critical-text);display:inline-block;font-size:.78rem;font-weight:600;margin:0 auto .75rem;padding:5px 14px}.results-list{display:flex;flex-direction:column;gap:.5rem}.result-row{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);padding:var(--sp-base) var(--sp-xl);box-shadow:#14161a08 0 1px 2px}.result-row.perfect{border-color:var(--success)}.result-row.zero{border-color:var(--critical)}.result-row.skipped{opacity:.45}.result-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}.result-composer{font-weight:700;font-size:.95rem;color:var(--ink-deep);letter-spacing:-.16px}.result-pts{font-size:.8rem;color:var(--steel);font-weight:700;background:var(--surface-soft);border-radius:var(--r-full);padding:2px 10px}.result-answers{display:flex;flex-wrap:wrap;gap:.4rem .85rem;font-size:.78rem}.ans-correct{color:var(--success-text);font-weight:600}.ans-wrong{color:var(--critical-text);font-weight:600}.ans-skipped{color:var(--stone);font-size:.78rem}.result-notes{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--hairline-soft);font-size:.78rem;color:var(--charcoal);line-height:1.7;word-break:keep-all}.results-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:.25rem}.btn-retry{display:block;width:100%;background:var(--canvas);color:var(--critical);border:2px solid var(--critical);border-radius:var(--r-full);padding:14px 30px;font-size:.88rem;font-weight:700;letter-spacing:-.14px;cursor:pointer;transition:background .15s,transform .1s}.btn-retry:hover{background:var(--critical-bg)}.btn-retry:active{transform:scale(.98)}.btn-again{margin-top:0}@media(min-width:768px){.screen{padding:2rem 1.5rem}.quiz-screen,.results-screen{max-width:700px;gap:1rem}.start-card{max-width:520px;padding:2.5rem}.question-text{font-size:1.35rem}.question-desc{font-size:.85rem}.choice{font-size:.95rem;padding:1rem .9rem}.notes-body{font-size:.95rem}.result-composer{font-size:1rem}.result-answers{font-size:.85rem}}