:root{
  --ink:#20243a;--muted:#6a718a;--bg:#f7f7fd;--panel:#fff;--line:#e2e4ef;
  --primary:#6556d8;--primary2:#8a7cf2;--soft:#efedff;--good:#177b49;--goodBg:#eaf8f0;
  --bad:#b63747;--badBg:#fff0f2;--warn:#9a6400;--warnBg:#fff8e4;--shadow:0 10px 30px rgba(55,45,120,.10)
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink)}
body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;background:
 radial-gradient(circle at 90% -10%,#eae6ff 0,transparent 32%),radial-gradient(circle at 8% 105%,#dff6ef 0,transparent 28%),var(--bg)}
button,input{font:inherit}
button{touch-action:manipulation}
.skip-link{position:absolute;right:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;z-index:100}
.skip-link:focus{right:8px}
.app-shell{width:min(920px,100%);margin:0 auto;min-height:100vh;padding:12px 14px 22px}
.topbar{display:grid;grid-template-columns:48px 1fr 48px;gap:10px;align-items:center;padding:6px 0 10px}
.brand{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-size:21px;box-shadow:var(--shadow)}
.brand h1{font-size:20px;margin:0;line-height:1.2}.brand p{direction:ltr;font-size:12px;color:var(--muted);margin:3px 0 0}
.icon-btn{width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.85);font-size:20px;cursor:pointer}
.icon-btn:focus-visible,.btn:focus-visible,.choice:focus-visible,.tile:focus-visible,.text-btn:focus-visible,input:focus-visible{outline:3px solid #bcb4ff;outline-offset:2px}
.progress-wrap{background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:14px;padding:9px 11px;margin-bottom:12px}
.progress-meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-bottom:6px}.progress-meta span:last-child{color:#9a6c00;font-weight:800}
.progress-track{height:9px;background:#ececf5;border-radius:999px;overflow:hidden}.progress-bar{height:100%;width:12.5%;background:linear-gradient(90deg,var(--primary),#33ad87);border-radius:inherit;transition:width .35s ease}
.screen{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);min-height:560px;padding:20px;overflow:hidden}
.hero{text-align:center;display:grid;gap:12px;justify-items:center;padding:12px 0 4px}.hero-badge{width:84px;height:84px;border-radius:25px;display:grid;place-items:center;font-size:40px;background:linear-gradient(135deg,#f2efff,#e6faf3);border:1px solid #dedbf8}.hero h2{font-size:28px;margin:0}.hero p{max-width:580px;margin:0;color:var(--muted);line-height:1.8}.hero .source-note{font-size:12px;background:#f7f7fb;border:1px solid var(--line);padding:8px 12px;border-radius:12px}
.btn{border:1px solid transparent;border-radius:13px;min-height:46px;padding:10px 16px;cursor:pointer;font-weight:750}.btn.primary{background:linear-gradient(135deg,var(--primary),#7767e6);color:#fff;box-shadow:0 6px 16px rgba(101,86,216,.22)}.btn.secondary{background:#fff;border-color:var(--line);color:var(--ink)}.btn.good{background:var(--good);color:#fff}.btn.danger{background:#c13d4c;color:#fff}.btn:disabled{opacity:.55;cursor:default}
.stage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:6px}.stage-card{border:1px solid var(--line);border-radius:16px;padding:14px;text-align:right;background:#fff;min-height:106px;cursor:pointer;position:relative}.stage-card.locked{background:#f5f5f8;color:#9498a8;cursor:not-allowed}.stage-card.current{border-color:#a89efa;background:#f7f5ff}.stage-card .num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--soft);color:var(--primary);font-weight:900}.stage-card h3{font-size:15px;margin:8px 0 4px}.stage-card p{font-size:12px;color:var(--muted);margin:0;line-height:1.5}.stage-card .stars{position:absolute;left:10px;top:10px;color:#a16c00;font-size:12px}
.stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.stage-title h2{font-size:23px;margin:0 0 4px}.stage-title p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.stage-chip{white-space:nowrap;font-size:12px;font-weight:800;background:var(--soft);color:var(--primary);padding:7px 10px;border-radius:999px}
.task-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:linear-gradient(180deg,#fff,#fbfbff)}.task-count{text-align:center;font-size:12px;color:var(--muted);margin-bottom:8px}.task-prompt{text-align:center;font-size:22px;font-weight:850;min-height:38px;margin:8px 0 14px}.task-prompt.ltr{direction:ltr}.task-sub{text-align:center;color:var(--muted);font-size:13px;margin:-7px 0 13px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.choice{min-height:52px;border:1px solid #d9dce9;border-radius:13px;background:#fff;cursor:pointer;font-weight:750;padding:10px;direction:ltr}.choice:hover{background:#faf9ff}.choice.correct{background:var(--goodBg);border-color:#80c7a2;color:var(--good)}.choice.wrong{background:var(--badBg);border-color:#e7a0aa;color:var(--bad)}
.input-wrap{max-width:520px;margin:0 auto}.answer-input{width:100%;min-height:52px;border:2px solid #d8dae7;border-radius:14px;padding:10px 14px;font-size:21px;font-weight:800;text-align:center;direction:ltr;background:#fff}.answer-input::placeholder{font-weight:500;color:#a3a7b5}.action-row{display:flex;gap:9px;justify-content:center;margin-top:11px;flex-wrap:wrap}.action-row .btn{min-width:120px}
.feedback{margin-top:12px;border-radius:13px;min-height:52px;padding:10px 12px;background:#f5f5fa;color:var(--muted);line-height:1.65;font-size:14px}.feedback.good{background:var(--goodBg);color:var(--good)}.feedback.bad{background:var(--badBg);color:var(--bad)}.feedback.warn{background:var(--warnBg);color:var(--warn)}
.letter-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;direction:ltr;margin:12px auto;max-width:620px}.tile{width:46px;height:46px;border-radius:12px;border:1px solid #d7d9e6;background:#fff;font-weight:900;font-size:18px;cursor:pointer}.tile.used{opacity:.3;pointer-events:none}.build-box{min-height:58px;border:2px dashed #d1ccef;border-radius:14px;display:flex;align-items:center;justify-content:center;direction:ltr;font-size:23px;font-weight:900;letter-spacing:2px;padding:8px}.word-gap{display:inline-block;width:16px}.mask{direction:ltr;text-align:center;font-size:25px;font-weight:900;letter-spacing:3px;margin:10px 0 16px;overflow-wrap:anywhere}.audio-panel{display:grid;justify-items:center;gap:8px}.audio-btn{width:92px;height:92px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--primary),#44b894);color:#fff;font-size:35px;cursor:pointer;box-shadow:0 8px 20px rgba(75,91,180,.25)}.audio-btn.playing{transform:scale(.97)}
.flip-wrap{display:grid;justify-items:center;gap:13px}.flashcard{width:min(420px,100%);min-height:235px;border:0;background:transparent;perspective:1000px;cursor:pointer}.flash-inner{position:relative;width:100%;height:235px;transition:transform .55s;transform-style:preserve-3d}.flashcard.revealed .flash-inner{transform:rotateY(180deg)}.flash-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#f7f5ff,#fff);display:grid;place-items:center;padding:18px;box-shadow:var(--shadow)}.flash-back{transform:rotateY(180deg);background:linear-gradient(145deg,#eaf8f1,#fff)}.flash-ar{font-size:28px;font-weight:900}.flash-en{font-size:31px;font-weight:900;direction:ltr}.flash-note{font-size:12px;color:var(--muted)}
.complete{text-align:center;display:grid;justify-items:center;gap:10px;padding:24px 8px}.trophy{font-size:55px}.complete h2{font-size:27px;margin:0}.complete p{max-width:540px;color:var(--muted);line-height:1.7;margin:0}.starline{font-size:24px;color:#b07800;letter-spacing:4px}.score-pill{display:inline-flex;gap:7px;align-items:center;background:#f4f2ff;border:1px solid #dfdcff;color:#4f43bd;padding:8px 12px;border-radius:999px;font-weight:800}
.final-modes{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}.mini-chip{font-size:11px;background:#f3f3f8;color:#666b7b;border-radius:999px;padding:5px 8px}
.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;padding:10px 4px}.text-btn{border:0;background:transparent;color:#665ac5;cursor:pointer;padding:7px}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,20px);background:#23263a;color:#fff;padding:9px 14px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{border:0;border-radius:18px;padding:0;box-shadow:var(--shadow);max-width:420px;width:calc(100% - 28px)}dialog::backdrop{background:rgba(28,29,43,.45)}.dialog-card{padding:18px}.dialog-card h2{margin:0 0 8px}.dialog-card p{color:var(--muted);line-height:1.7}.dialog-actions{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:620px){.app-shell{padding:8px 9px 18px}.screen{padding:14px;min-height:610px}.brand h1{font-size:17px}.brand-mark{width:38px;height:38px}.topbar{grid-template-columns:44px 1fr 44px}.icon-btn{width:42px;height:42px}.hero h2{font-size:24px}.stage-grid,.choice-grid{grid-template-columns:1fr}.stage-card{min-height:94px}.stage-head{display:grid}.stage-chip{justify-self:start}.task-prompt{font-size:20px}.answer-input{font-size:19px}.tile{width:43px;height:43px}.flashcard,.flash-inner{min-height:245px;height:245px}.footer{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}