:root{--primary: #4f46e5;--primary-dark: #3730a3;--secondary: #818cf8;--accent: #16a34a;--accent-soft: #dcfce7;--bg: #eef2ff;--surface: #ffffff;--fg: #312e81;--muted: #eef0fb;--muted-text: #64748b;--border: #d8ddf7;--danger: #dc2626;--danger-soft: #fee2e2;--amber: #d97706;--radius-lg: 32px;--radius-md: 22px;--radius-sm: 14px;--clay: 0 1px 2px rgba(49, 46, 129, .06), 0 8px 16px -6px rgba(49, 46, 129, .12), 0 24px 48px -24px rgba(49, 46, 129, .28), inset 0 1px 0 rgba(255, 255, 255, .9);--clay-press: inset 0 3px 8px rgba(49, 46, 129, .14), inset 0 1px 0 rgba(255, 255, 255, .6);--font-head: "Baloo 2", system-ui, sans-serif;--font-body: "Nunito", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font-body);color:var(--fg);background:var(--bg);background-image:radial-gradient(circle at 12% 8%,#dbeafe 0%,transparent 46%),radial-gradient(circle at 88% 4%,#e9d5ff 0%,transparent 42%),radial-gradient(circle at 78% 92%,#d1fae5 0%,transparent 46%);background-attachment:fixed;-webkit-font-smoothing:antialiased;line-height:1.55}h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;margin:0;font-weight:700;letter-spacing:-.01em}p{margin:0}button{font-family:inherit;cursor:pointer}.shell{width:min(940px,100% - 2rem);margin:0 auto;padding:1.75rem 0 4rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--clay)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.hero{text-align:center;padding:2.5rem 1.5rem 2rem;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;inset:auto -20% -60% -20%;height:60%;background:radial-gradient(circle,rgba(129,140,248,.22),transparent 70%);pointer-events:none}.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.25rem}.chip{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--muted);color:var(--primary);border:1px solid var(--border);padding:.35rem .8rem;border-radius:999px}.hero h1{font-size:clamp(1.9rem,5.2vw,3rem);font-weight:800;max-width:22ch;margin:0 auto}.hero h1 em{font-style:normal;color:var(--primary)}.hero-sub{max-width:46ch;margin:1rem auto 0;color:var(--muted-text);font-size:1.02rem;font-weight:600}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.9rem 0 1.6rem}.stat{background:var(--muted);border-radius:var(--radius-md);padding:.9rem .5rem}.stat b{display:block;font-family:var(--font-head);font-size:1.6rem;color:var(--primary);line-height:1}.stat span{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--muted-text)}.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;position:relative;z-index:1}.btn{border:none;border-radius:var(--radius-md);padding:.95rem 1.6rem;font-weight:800;font-size:1rem;display:inline-flex;align-items:center;gap:.55rem;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,background .18s ease;box-shadow:var(--clay)}.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.96);box-shadow:var(--clay-press)}.btn:focus-visible{outline:3px solid var(--primary);outline-offset:3px}.btn-primary{background:linear-gradient(135deg,#6366f1,#4338ca);color:#fff}.btn-ghost{background:var(--surface);color:var(--primary);border:1px solid var(--border)}.btn-accent{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.section-list{margin-top:1.5rem;display:grid;gap:.6rem}.section-row{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--clay);text-align:left;width:100%;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}.section-row:hover{transform:translateY(-2px)}.sec-ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;background:var(--muted);color:var(--primary);box-shadow:inset 0 1px #fff}.sec-txt{flex:1;min-width:0}.sec-txt strong{display:block;font-family:var(--font-head);font-size:1.02rem}.sec-txt span{font-size:.8rem;color:var(--muted-text);font-weight:700}.sec-count{font-size:.78rem;font-weight:800;color:var(--muted-text);white-space:nowrap}.tint-green .sec-ico{background:#dcfce7;color:#15803d}.tint-indigo .sec-ico{background:#e0e7ff;color:#4338ca}.tint-amber .sec-ico{background:#fef3c7;color:#b45309}.tint-rose .sec-ico{background:#ffe4e6;color:#be123c}.topbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.topbar-info{flex:1;min-width:0}.topbar-info strong{font-family:var(--font-head);font-size:1rem;display:block}.topbar-info span{font-size:.78rem;font-weight:800;color:var(--muted-text);text-transform:uppercase;letter-spacing:.05em}.icon-btn{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:42px;height:42px;display:grid;place-items:center;color:var(--primary);box-shadow:var(--clay);transition:transform .18s,background .18s}.icon-btn:hover{transform:translateY(-2px);background:var(--muted)}.progress-wrap{height:12px;background:#dfe3f7;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 4px #312e811f}.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#6366f1,#22c55e);transition:width .45s cubic-bezier(.34,1.2,.64,1)}.progress-meta{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;color:var(--muted-text);margin:.45rem 0 1.25rem}.streak{display:inline-flex;align-items:center;gap:.3rem;color:#b45309}.q-card{padding:1.5rem;animation:fadeUp .35s ease both}.q-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;padding:.3rem .7rem;border-radius:999px;background:var(--muted);color:var(--primary);margin-bottom:.9rem}.q-text{font-family:var(--font-head);font-size:clamp(1.12rem,2.6vw,1.42rem);font-weight:700;margin-bottom:.3rem}.q-hint{font-size:.86rem;color:var(--muted-text);font-weight:700;margin-bottom:1.1rem}.options{display:grid;gap:.6rem}.opt{display:flex;align-items:flex-start;gap:.8rem;width:100%;text-align:left;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-md);padding:.85rem 1rem;font-size:.98rem;font-weight:700;color:var(--fg);transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,background .16s,box-shadow .16s}.opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--secondary);box-shadow:0 8px 20px -12px #4f46e580}.opt:disabled{cursor:default}.opt-key{width:26px;height:26px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;background:var(--muted);color:var(--primary);font-size:.78rem;font-weight:900;font-family:var(--font-head)}.opt.chosen{border-color:var(--primary);background:#eef2ff}.opt.correct{border-color:var(--accent);background:var(--accent-soft)}.opt.wrong{border-color:var(--danger);background:var(--danger-soft)}.opt.dim{opacity:.55}.gap-input{width:100%;font-family:var(--font-head);font-size:1.15rem;font-weight:700;color:var(--fg);padding:.9rem 1.1rem;border-radius:var(--radius-md);border:2px dashed var(--secondary);background:#f8f9ff;outline:none;transition:border-color .18s,box-shadow .18s}.gap-input:focus{border-color:var(--primary);border-style:solid;box-shadow:0 0 0 4px #6366f126}.gap-input.ok{border-color:var(--accent);border-style:solid;background:var(--accent-soft)}.gap-input.no{border-color:var(--danger);border-style:solid;background:var(--danger-soft)}.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.match-col{display:grid;gap:.5rem;align-content:start}.match-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);padding:.7rem .8rem;font-size:.88rem;font-weight:700;text-align:left;color:var(--fg);transition:transform .16s,border-color .16s,background .16s;line-height:1.35}.match-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--secondary)}.match-btn.active{border-color:var(--primary);background:#eef2ff;box-shadow:0 0 0 3px #6366f126}.match-btn.done{border-color:var(--accent);background:var(--accent-soft);opacity:.85}.match-btn.miss{border-color:var(--danger);background:var(--danger-soft)}.match-btn:disabled{cursor:default}.match-line{font-size:.72rem;font-weight:900;color:var(--muted-text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem}.sort-bins{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.bin{border-radius:var(--radius-md);border:2px dashed var(--border);padding:.7rem;min-height:92px;background:#fbfbff;transition:border-color .18s,background .18s}.bin h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-text);margin-bottom:.5rem}.bin-items{display:flex;flex-wrap:wrap;gap:.35rem}.pill{font-size:.82rem;font-weight:800;padding:.3rem .65rem;border-radius:999px;background:var(--surface);border:1.5px solid var(--border);color:var(--fg)}.pill.good{border-color:var(--accent);background:var(--accent-soft);color:#15803d}.pill.bad{border-color:var(--danger);background:var(--danger-soft);color:#b91c1c}.sort-pool{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem;min-height:40px}.pool-word{font-size:.88rem;font-weight:800;padding:.5rem .9rem;border-radius:999px;background:var(--surface);border:2px solid var(--border);color:var(--fg);transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,background .16s}.pool-word:hover:not(:disabled){transform:translateY(-2px) scale(1.03);border-color:var(--secondary)}.pool-word.sel{border-color:var(--primary);background:#eef2ff;box-shadow:0 0 0 3px #6366f129}.pool-word:disabled{cursor:default;opacity:.5}.feedback{margin-top:1rem;border-radius:var(--radius-md);padding:.85rem 1rem;display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;font-weight:700;animation:popIn .28s ease both}.feedback.good{background:var(--accent-soft);color:#14532d;border:1px solid #86efac}.feedback.bad{background:var(--danger-soft);color:#7f1d1d;border:1px solid #fca5a5}.feedback b{display:block;font-family:var(--font-head)}.feedback .ans{font-weight:800;text-decoration:underline;text-underline-offset:3px}.q-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.1rem;flex-wrap:wrap}.kbd-hint{font-size:.72rem;color:var(--muted-text);font-weight:700;margin-right:auto;align-self:center}.result-top{padding:2rem 1.5rem;text-align:center}.score-ring{width:150px;height:150px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p) * 1%),#e2e8f7 0);box-shadow:var(--clay);position:relative}.score-ring:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;background:var(--surface);border-radius:50%}.score-ring div{position:relative;text-align:center}.score-ring b{font-family:var(--font-head);font-size:2.1rem;display:block;line-height:1;color:var(--primary)}.score-ring span{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-text)}.result-top h2{font-size:clamp(1.4rem,4vw,1.9rem)}.result-top p{color:var(--muted-text);font-weight:700;margin-top:.4rem}.breakdown{display:grid;gap:.55rem;margin:1.5rem 0;text-align:left}.bd-row{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:center}.bd-row span{font-size:.84rem;font-weight:800}.bd-row em{font-style:normal;font-size:.8rem;font-weight:900;color:var(--muted-text)}.bd-track{grid-column:1 / -1;height:8px;border-radius:999px;background:#e6eaf8;overflow:hidden}.bd-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#6366f1,#22c55e)}.review{text-align:left;display:grid;gap:.6rem;margin-top:.5rem}.review-item{background:#fbfbff;border:1px solid var(--border);border-left:4px solid var(--danger);border-radius:var(--radius-sm);padding:.75rem .9rem;font-size:.88rem}.review-item strong{display:block;font-weight:800;margin-bottom:.2rem}.review-item em{font-style:normal;color:var(--accent);font-weight:800}.review-item small{display:block;color:var(--muted-text);font-weight:700;margin-top:.25rem}.section-label{font-family:var(--font-head);font-size:1.05rem;margin:1.6rem 0 .2rem}.drawer-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e1b4b73;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:40;animation:fadeIn .2s ease both}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:41;background:var(--bg);box-shadow:-20px 0 60px #1e1b4b40;overflow-y:auto;padding:1.25rem;animation:slideIn .28s cubic-bezier(.3,.9,.4,1) both}.drawer-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;position:sticky;top:0;background:var(--bg);padding-bottom:.6rem;z-index:1}.drawer-head h3{flex:1;font-size:1.2rem}.rule-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem;margin-bottom:.7rem;box-shadow:var(--clay)}.rule-card h4{font-size:1rem;margin-bottom:.45rem;color:var(--primary)}.rule-card ul{margin:0;padding-left:1.1rem}.rule-card li{font-size:.86rem;font-weight:600;margin-bottom:.35rem;color:#3f3d6b}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:none}}@keyframes popIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@media (max-width: 640px){.shell{width:calc(100% - 1.25rem);padding-top:1rem}.hero{padding:1.75rem 1rem 1.5rem}.stat-grid{gap:.45rem}.stat b{font-size:1.3rem}.q-card{padding:1.1rem;border-radius:var(--radius-md)}.match-grid,.sort-bins{grid-template-columns:1fr}.btn{padding:.85rem 1.15rem;font-size:.94rem}.q-actions .kbd-hint{display:none}.btn-row .btn{flex:1 1 100%;justify-content:center}}@media (max-width: 380px){.stat span{font-size:.64rem}.opt{font-size:.92rem;padding:.7rem .8rem}}