:root{--accent: #4f46e5;--accent-soft: #eef2ff;--ink: #1e293b;--ink-soft: #64748b;--line: #e2e8f0;--bg: #f8fafc;--card: #ffffff;--good: #16a34a;--good-soft: #dcfce7;--bad: #dc2626;--bad-soft: #fee2e2;--radius: 18px;--font: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;line-height:1.45}.app{max-width:720px;margin:0 auto;padding:16px 16px 64px}.topbar{display:flex;align-items:center;gap:10px;margin:6px 0 18px}.topbar h1{font-size:1.3rem;flex:1;min-width:0}.back{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:9px 14px;font:inherit;font-weight:700;cursor:pointer}.back:hover{background:var(--accent-soft)}.hero{text-align:center;padding:8px 0 18px}.hero .big{font-size:3.2rem}.heroimg{width:180px;height:180px;border-radius:28px;object-fit:cover;box-shadow:0 10px 26px #0000002e}.hero h1{font-size:1.7rem;margin-top:8px}.hero p{color:var(--ink-soft);margin-top:4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;cursor:pointer;border:none;border-radius:var(--radius);padding:14px 20px;font-size:1.05rem;background:var(--accent);color:#fff;box-shadow:0 4px #0000001f;transition:transform .08s,box-shadow .08s}.btn:active{transform:translateY(3px);box-shadow:0 1px #0000001f}.btn:disabled{opacity:.5;cursor:default;box-shadow:none}.btn.block{width:100%}.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn.ghost:hover{background:var(--accent-soft)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 480px){.grid{grid-template-columns:1fr}}.tile{display:block;text-align:left;text-decoration:none;color:inherit;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;transition:transform .12s,border-color .12s}.tile:hover{transform:translateY(-3px);border-color:var(--accent)}.tile .emoji{font-size:2.4rem;display:block}.tile h3{font-size:1.15rem;margin:8px 0 2px}.tile .meta{color:var(--ink-soft);font-size:.85rem}.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}.search{flex:1;min-width:0;font:inherit;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}.search:focus{outline:none;border-color:var(--accent)}.viewtoggle{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;flex:0 0 auto}.viewtoggle button{font:inherit;font-size:1.1rem;font-weight:800;padding:8px 12px;background:var(--card);border:none;cursor:pointer;color:var(--ink-soft)}.viewtoggle button.active{background:var(--accent-soft);color:var(--accent)}.yearhead{font-weight:800;color:var(--ink-soft);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:18px 4px 10px}.list{display:flex;flex-direction:column;gap:10px}.row{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:14px 16px;transition:border-color .12s}.row:hover{border-color:var(--accent)}.row .remoji{font-size:1.9rem;flex:0 0 auto}.row .rinfo{flex:1;min-width:0}.row .rinfo h3{font-size:1.05rem}.row .rinfo .meta{font-size:.8rem}.row .rbar{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:6px}.row .rbar>i{display:block;height:100%;background:var(--accent);border-radius:999px}.row .rpct{font-weight:800;color:var(--accent);flex:0 0 auto}.empty{text-align:center;color:var(--ink-soft);padding:24px}.bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:12px}.bar>i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease}.pct{font-weight:800;color:var(--accent)}.steps{display:flex;flex-direction:column;gap:12px}.step{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:16px}.step:not(.locked):hover{border-color:var(--accent);transform:translateY(-2px)}.step.locked{opacity:.55;cursor:not-allowed}.step .ic{font-size:2rem;width:44px;text-align:center;flex:0 0 44px}.step .t{flex:1;min-width:0}.step .t h3{font-size:1.1rem}.step .t small{color:var(--ink-soft)}.step .status{font-size:1.4rem}.choices{display:grid;gap:14px;margin-top:8px}.choice{display:flex;align-items:center;gap:14px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:20px;cursor:pointer;font:inherit;color:inherit;width:100%}.choice:hover:not(:disabled){border-color:var(--accent)}.choice:disabled{opacity:.5;cursor:default}.choice .ic{font-size:2.2rem}.choice h3{font-size:1.15rem}.choice p{color:var(--ink-soft);font-size:.9rem}.summary{display:flex;flex-direction:column;gap:14px}.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}.scard h3{font-size:1.15rem;margin-bottom:10px}.scard ul{list-style:none;display:flex;flex-direction:column;gap:8px}.scard li{position:relative;padding-left:22px}.scard li:before{content:"✦";position:absolute;left:0;color:var(--accent)}.vtable{width:100%;border-collapse:collapse}.vtable td,.vtable th{border:1px solid var(--line);padding:8px 10px;text-align:left;font-size:.95rem}.vtable th{background:var(--accent-soft);font-weight:800}.vtable tr td:first-child{font-weight:700}.hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.chip{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 12px;font-weight:800}.chip.score{background:var(--accent-soft);color:var(--accent);border:none}.chip.combo{background:#fff7ed;color:#c2410c;border:none}.qmeta{color:var(--ink-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.question{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:6px}.qtext{font-size:1.25rem;font-weight:800;margin:4px 0 8px;line-height:1.3}.hint{color:var(--ink-soft);font-size:.95rem;margin-bottom:12px}.opts{display:flex;flex-direction:column;gap:10px}.opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;cursor:pointer;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:13px 15px;font:inherit;font-weight:700;color:var(--ink);transition:border-color .12s,background .12s}.opt:hover:not(:disabled){border-color:var(--accent)}.opt:disabled{cursor:default}.opt .letter{width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800}.opt.correct{background:var(--good-soft);border-color:var(--good)}.opt.correct .letter{background:var(--good);color:#fff}.opt.wrong{background:var(--bad-soft);border-color:var(--bad)}.opt.wrong .letter{background:var(--bad);color:#fff}.textrow{display:flex;gap:10px;margin-top:4px}.textrow input{flex:1;font:inherit;font-weight:700;padding:13px 15px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink)}.textrow input:focus{outline:none;border-color:var(--accent)}.textrow input.ok{border-color:var(--good);background:var(--good-soft)}.textrow input.no{border-color:var(--bad);background:var(--bad-soft)}.feedback{margin-top:14px;border-radius:14px;padding:13px 15px}.feedback.ok{background:var(--good-soft);border:1px solid var(--good)}.feedback.no{background:var(--bad-soft);border:1px solid var(--bad)}.feedback .tt{font-weight:800;display:block;margin-bottom:3px}.feedback .sol{font-weight:800}.next{margin-top:14px;text-align:right}.result{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px}.result .medal{font-size:4.6rem;display:block}.result h2{font-size:1.6rem;margin:6px 0}.result .rank{color:var(--accent);font-weight:800}.stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0}.stat{background:var(--accent-soft);border-radius:14px;padding:12px 16px;min-width:92px}.stat b{font-size:1.5rem;display:block}.stat span{color:var(--ink-soft);font-size:.8rem}.result .actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}.note{color:var(--ink-soft);font-size:.9rem;text-align:center;margin-top:12px}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}