:root{--ink:#292d51;--muted:#727a9b;--violet:#7255d8;--purple:#8c6bf0;--lavender:#f2edff;--border:#e8e5f4;--bg:#f7f5ff;--mint:#e6f9ed;--mint-ink:#18724b;--pink:#fff0f2;--pink-ink:#b64a67;--white:#fff}*{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%;color:var(--ink);background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 5% 4%,#fcebf4,transparent 45%),radial-gradient(ellipse at 95% 20%,#eae2fe,transparent 48%),var(--bg)}button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}button:focus-visible{outline:3px solid #d3b21b;outline-offset:3px}.shell{max-width:865px;margin:0 auto;padding:14px 16px 30px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:1px 0 20px}.identity{display:flex;align-items:center;gap:11px}.identity-icon{width:49px;height:49px;background:white;border-radius:17px;color:var(--violet);display:grid;place-items:center;font-size:35px;font-weight:900;box-shadow:0 5px 20px #6855bc15}.eyebrow{letter-spacing:1.45px;font-size:10px;font-weight:900;color:#8c74bd}.site-name{font-size:18px;font-weight:950;letter-spacing:-.4px}.score-pill{white-space:nowrap;background:#fff6d9;border:1.5px solid #f2d779;border-radius:100px;display:flex;align-items:center;gap:7px;padding:9px 14px;font-size:15px}.score-pill strong{font-size:19px}.score-label{font-size:12px;font-weight:750}.hero{overflow:hidden;position:relative;border:1px solid #e9e4fc;background:linear-gradient(122deg,#fff 0%,#fff 58%,#f1eaff 100%);padding:25px 30px 24px;border-radius:27px;box-shadow:0 12px 38px #34296708}.hero-decor{position:absolute;right:25px;top:23px;color:#ddcffb;font-size:144px;line-height:1;transform:rotate(-18deg);pointer-events:none;opacity:.65}.lesson-label{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.6px;font-weight:950;color:#7255bd;background:#f1ecff;padding:9px 12px;border-radius:30px}.green-dot{display:inline-block;background:#52ce93;border-radius:50%;width:8px;height:8px}.hero h1{position:relative;max-width:530px;font-size:clamp(27px,5.2vw,45px);letter-spacing:-1.2px;line-height:1.08;margin:18px 0 10px;font-weight:1000}.hero h1 span{color:var(--violet)}.hero p{position:relative;color:#677191;font-size:15px;line-height:1.6;max-width:590px;margin:0}.hero-foot{position:relative;display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.hero-foot span{display:inline-flex;border-radius:10px;padding:7px 10px;background:#f8f6ff;color:#59547c;font-weight:750;font-size:11px}.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:15px 0}.mode-tab{background:#fff;border:1.6px solid #e1deed;min-height:84px;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:#62677f;font-weight:900;box-shadow:0 3px 9px #34296704}.mode-tab.active{background:#ece5ff;border-color:#967ff0;color:#6047bd;box-shadow:0 0 0 2px #b29ffa54 inset}.mode-emoji{font-size:25px;line-height:1.3}.mode-name{font-size:14px}.game-card{background:#fff;border:1px solid #e3e1ef;border-radius:25px;padding:24px;min-height:350px;box-shadow:0 9px 34px #392e7912}.game-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}.game-heading h2{margin:0 0 6px;font-size:24px;line-height:1.14;letter-spacing:-.4px}.game-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;max-width:570px}.small-tag{background:#eee8ff;border-radius:100px;padding:7px 10px;color:#7953bc;font-weight:900;white-space:nowrap;font-size:12px}.staff-container{border:1px solid #e8e7f5;border-radius:17px;padding:12px 8px;background:linear-gradient(#fcfbff,#f8f8ff)}.staff-container svg{display:block;width:100%;height:auto;max-height:258px;overflow:visible}.staff-wrap{position:relative}.note-pickers{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;margin:16px 0 11px}.note-pickers button{border:1px solid #e4def6;background:#f5f1ff;border-radius:12px;min-height:45px;font-size:13px;font-weight:900;color:#6b58bc;padding:4px 2px}.note-pickers button.selected{background:#d9ceff;border-color:#7856d5;box-shadow:0 0 0 1px #7856d5 inset}.note-info{background:#f0ecff;border-radius:14px;padding:14px 16px;color:#5644a5;display:flex;align-items:center;gap:11px;font-size:14px;line-height:1.35}.note-info strong{font-size:19px;min-width:65px}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.btn{min-height:45px;padding:11px 17px;background:var(--violet);color:#fff;border:1px solid var(--violet);border-radius:13px;font-size:14px;font-weight:900;box-shadow:0 4px 11px #7459c82d}.btn:hover{filter:brightness(1.05)}.btn.secondary{background:#f0ecff;border:1px solid #e0d5ff;color:#604eb6;box-shadow:none}.progressline{display:flex;align-items:center;justify-content:space-between;color:#8386a0;font-size:12px;font-weight:850;margin:3px 0 7px}.progressbar{width:100%;height:9px;overflow:hidden;background:#eeeaf6;border-radius:99px;margin-bottom:20px}.progressbar span{display:block;height:100%;background:linear-gradient(90deg,#b29afe,#7659e8);border-radius:99px;transition:width .25s}.question{font-size:20px;font-weight:950;margin:0 0 15px}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:17px}.option{min-height:62px;border:1.5px solid #ddd6f9;background:#f7f4ff;border-radius:15px;color:#5e4daf;font-size:19px;font-weight:900}.option:disabled{opacity:.72;cursor:default}.option.correct,.find-card.correct{border-color:#55b880;background:#e5f8ed;color:#176843}.option.incorrect,.find-card.incorrect{border-color:#e1a5b6;background:#fff0f2;color:#a63e5b}.feedback{min-height:42px;background:#f7f6fa;color:#737995;border-radius:12px;padding:12px 13px;font-weight:800;font-size:13px;line-height:1.35;margin-top:13px}.feedback.good{background:var(--mint);color:var(--mint-ink)}.feedback.bad{background:var(--pink);color:var(--pink-ink)}.find-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.find-card{min-height:116px;background:#faf9ff;border:1.5px solid #e0dcf0;border-radius:16px;padding:4px;position:relative}.find-card svg{display:block;width:100%;height:106px}.find-card .card-index{position:absolute;top:7px;right:9px;font-size:11px;color:#b5a9df;font-weight:900}.goal{background:#fff6db;padding:13px 14px;text-align:center;font-weight:900;font-size:20px;color:#7e5919;border-radius:12px;margin-bottom:15px}.mode-switch{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 15px}.switch-btn{background:#f3efff;border:1px solid #ded7f7;color:#6654ae;border-radius:12px;min-height:41px;padding:7px 11px;font-size:13px;font-weight:900}.switch-btn.on{background:#dfd5ff;border-color:#9079dd}.sing-picks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:15px}.sing-picks button{min-height:48px;border-radius:11px;border:1.4px solid #e6e0f5;background:#f6f3ff;color:#7666aa;font-weight:950;font-size:13px;padding:4px 0}.sing-picks button.current{background:#e0d4ff;border-color:#7860de;color:#5a3fac;box-shadow:0 0 0 1px #7860de inset}.sing-picks button.passed{background:#e2f7ea;border-color:#b4e8c4;color:#258a55}.sing-picks button:disabled{cursor:default;opacity:.8}.intro-play{display:flex;align-items:center;gap:7px;margin:13px 0 4px;color:#747e98;font-weight:750;font-size:12px;line-height:1.45}.result{text-align:center;padding:17px 5px 14px}.result .trophy{font-size:65px;line-height:1.2}.result h2{font-size:28px;margin:10px 0}.result p{color:var(--muted);line-height:1.6}.result .actions{justify-content:center}.help-card{margin:14px 0 0;padding:17px 19px;background:#fefaff;border-radius:18px;border:1px dashed #d8d0ee}.help-card>div{display:flex;align-items:center;gap:9px;color:#65548e;font-size:14px}.help-icon{font-size:22px}.help-card p{font-size:13px;color:#79809b;line-height:1.5;margin:7px 0 0 32px}.footer{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:11px;color:#8585a1;padding:18px 2px}.footer button{border:0;background:transparent;color:#8075aa;text-decoration:underline;font-size:11px}.note-hotspot{cursor:pointer;touch-action:manipulation}.note-hotspot:focus-visible ellipse{stroke:#b7972a}.staff-subtitle{text-align:center;color:#9792b0;font-size:12px;margin-top:8px}.sing-done{font-size:12px;font-weight:900;color:#29854f}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} @media(max-width:520px){.shell{padding:12px 10px 30px}.topbar{margin-bottom:14px}.identity-icon{width:42px;height:42px;font-size:31px;border-radius:13px}.eyebrow{font-size:8px;letter-spacing:.9px}.site-name{font-size:16px}.score-pill{padding:7px 11px;font-size:14px}.score-label{display:none}.hero{padding:19px 18px 18px;border-radius:23px}.hero-decor{font-size:96px;top:19px;right:4px}.lesson-label{font-size:9px;padding:8px 10px}.hero h1{max-width:280px;font-size:30px;margin-top:15px}.hero p{font-size:13px;line-height:1.46}.hero-foot{margin-top:14px;gap:5px}.hero-foot span{font-size:10px;padding:6px 8px}.modes{gap:6px;margin:11px 0}.mode-tab{min-height:70px;border-radius:14px}.mode-emoji{font-size:23px}.mode-name{font-size:11px}.game-card{padding:16px 12px;border-radius:20px;min-height:410px}.game-heading{margin-bottom:12px}.game-heading h2{font-size:21px}.game-heading p{font-size:12px}.small-tag{font-size:10px;padding:6px}.staff-container{padding:9px 3px}.note-pickers{gap:3px;margin:11px 0}.note-pickers button{min-height:42px;font-size:10px;padding:3px 0}.note-info{padding:10px;font-size:12px}.note-info strong{min-width:52px;font-size:16px}.actions{gap:7px}.btn{min-height:43px;padding:10px 12px;font-size:12px}.options{gap:8px;margin-top:12px}.option{font-size:17px;min-height:60px}.find-grid{gap:6px}.find-card{min-height:99px}.find-card svg{height:94px}.sing-picks{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.sing-picks button{min-height:44px;font-size:12px}.help-card{padding:14px 13px}.help-card p{margin-left:0}.game-heading p{line-height:1.45}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}