.page{max-width:1080px;margin:0 auto;padding:26px 28px 90px}.crumb{font-size:13px;color:var(--grey);margin-bottom:22px}.crumb a{color:var(--grey)}.title-row{display:flex;gap:20px;align-items:flex-start}.title-row>div{flex:1}h1{font-size:clamp(28px,4.4vw,40px);font-weight:900;color:var(--navy);margin-bottom:12px}.lead{font-size:16px;max-width:720px}.record-line{font-size:13px;color:var(--grey);margin-top:10px;font-weight:700}.char-img{width:118px;height:auto;flex:none}.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}.stage-card{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:20px;text-align:left;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px}.stage-card:hover{box-shadow:0 8px 22px #1e24301a}.stage-card.soon{opacity:.55;cursor:default}.stage-card.soon:hover{box-shadow:none}.stage-no{font-size:12.5px;font-weight:900;color:var(--blue)}.stage-card strong{font-size:19px;font-weight:900;color:var(--navy)}.stage-desc{font-size:13.5px;color:var(--grey)}.quiz-panel{background:var(--beige);border-radius:24px;padding:22px;margin-top:26px}.quiz-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}.quiz-stage{font-weight:900;color:var(--navy);font-size:16px}.quiz-progress{font-weight:800;color:var(--grey);font-size:14px}.dots{display:inline-flex;gap:6px;margin-left:auto}.dots i{width:13px;height:13px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:block}.dots i.ok{background:var(--note-fa);border-color:var(--note-fa)}.dots i.ng{background:var(--note-do);border-color:var(--note-do)}.quiz-q{font-size:17px;font-weight:900;color:var(--navy);margin-bottom:14px}.intro-text{font-size:14.5px;margin-bottom:10px}#introArea{margin-bottom:16px}.sound-dots{display:flex;gap:10px;margin-bottom:14px}.sound-dot{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:900;color:var(--grey);font-size:14px}.sound-dot.on{background:var(--blue);border-color:var(--blue);color:#fff}.btn-dark{background:var(--navy);color:#fff;border:none;font-weight:800;font-size:14.5px;padding:12px 20px;border-radius:999px;cursor:pointer;font-family:inherit}.btn-dark:disabled{opacity:.45;cursor:default}.btn-listen{background:#fff;border:1.5px solid var(--line);font-weight:800;font-size:13.5px;padding:10px 16px;border-radius:999px;cursor:pointer;font-family:inherit;color:var(--navy)}.choices{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}.choice{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:12px 22px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;color:var(--navy)}.choice.correct{border-color:var(--note-fa);background:#e7f6ec}.choice.wrong{border-color:var(--note-do);background:#fdecec}.piano-keys{display:flex;gap:8px}.piano-key{flex:1;max-width:130px;height:128px;background:#fff;border:1.5px solid var(--line);border-bottom-width:5px;border-radius:0 0 12px 12px;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;gap:6px}.piano-key .kname{font-size:19px;font-weight:900;color:var(--navy)}.piano-key .kdot{width:15px;height:15px;border-radius:50%}.piano-key.lit{box-shadow:0 0 0 3px #2e4bd759}.piano-key.correct{border-color:var(--note-fa);background:#e7f6ec}.piano-key.wrong{border-color:var(--note-do);background:#fdecec}.feedback{font-weight:800;min-height:24px;margin-top:6px}.after-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.back-link{background:none;border:none;color:var(--grey);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;margin-top:18px;padding:0;text-decoration:underline}.result-panel{background:var(--beige);border-radius:24px;padding:28px 22px;margin-top:26px;text-align:center}.result-char{width:130px;height:auto}.result-score{font-size:30px;font-weight:900;color:var(--navy);margin:8px 0 4px}.result-msg{font-size:15.5px}.result-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}@media(max-width:900px){.page{padding:20px 16px 70px}.stage-grid{grid-template-columns:1fr}.char-img{width:84px}}