:root{--bg:#fff8ec;--surface:#fffdf7;--surface-2:#fdf3df;--text:#2c2418;--muted:#8a7d68;--accent:#f5b301;--accent-ink:#7a5600;--border:#eaddc4;--user-bg:#f5b301;--user-ink:#3a2a05;--danger:#b23c3c;--nav-h:62px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#1a1712;--surface:#241f18;--surface-2:#2c261d;--text:#f0e7d6;--muted:#a99a80;--accent:#f5b301;--accent-ink:#ffe0a3;--border:#372f24;--user-bg:#b9860a;--user-ink:#fff4dc;--danger:#e88}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{font:inherit;cursor:pointer}.app{background:var(--bg);flex-direction:column;max-width:620px;height:100dvh;margin:0 auto;display:flex;position:relative}.app__main{flex:1;min-height:0;position:relative;overflow:hidden}.app__main>*{height:100%}.page-header{padding:16px 18px 6px}.page-header h1{margin:0;font-size:1.35rem}.page-sub,.page-header .page-sub{color:var(--muted);margin:2px 0 0;font-size:.85rem}.muted{color:var(--muted);font-size:.85rem}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 18px;font-weight:600}.btn--wide{width:100%}.btn--ghost{color:var(--accent-ink);background:0 0;border-style:dashed}.chat{flex-direction:column;height:100%;display:flex}.chat__scroll{flex-direction:column;flex:1;gap:10px;min-height:0;padding:12px 14px 18px;display:flex;overflow-y:auto}.msg{word-break:break-word;border-radius:16px;max-width:86%;padding:10px 14px;line-height:1.55}.msg--assistant{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px;align-self:flex-start}.msg--user{background:var(--user-bg);color:var(--user-ink);border-bottom-right-radius:4px;align-self:flex-end}.dots{color:var(--muted);letter-spacing:2px}.word{color:inherit;background:0 0;border:none;border-radius:4px;padding:0 1px}.word:hover,.word:focus-visible{background:#f5b30138;outline:none}.chat__error{color:var(--danger);text-align:center;align-self:center;font-size:.85rem}.chat__composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0));border-top:1px solid var(--border);background:var(--surface);gap:8px;display:flex}.chat__input{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:22px;flex:1;min-width:0;padding:11px 16px;font-size:1rem}.chat__input:focus-visible{outline:2px solid var(--accent)}.chat__send{background:var(--accent);color:var(--user-ink);border:none;border-radius:22px;padding:0 18px;font-weight:700}.chat__send:disabled{opacity:.5}.cards{flex-direction:column;height:100%;padding-bottom:24px;display:flex;overflow-y:auto}.card{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:20px;margin:12px 16px;padding:28px 20px;box-shadow:0 6px 20px #0000000d}.card__pinyin{color:var(--text);background:0 0;border:none;align-items:center;gap:10px;font-size:2.4rem;font-weight:700;display:inline-flex}.card__speaker{font-size:1.2rem}.card__back{flex-direction:column;gap:8px;margin-top:18px;display:flex}.card__english{font-size:1.4rem;font-weight:600}.card__example{margin-top:8px}.card__example .word{font-size:1.1rem}.cards__ratings{grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px;display:grid}.rate{color:#fff;border:none;border-radius:12px;padding:14px 0;font-weight:700}.rate--again{background:#c0563f}.rate--hard{background:#c98b2e}.rate--good{background:#4c9a5a}.rate--easy{background:#3f8fb0}.cards__done{text-align:center;flex-direction:column;align-items:center;gap:10px;margin-top:40px;display:flex}.cards__done p:first-child{font-size:1.4rem}.progress{height:100%;overflow-y:auto}.tiles{grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px;display:grid}.tile{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;padding:20px}.tile__num{color:var(--accent-ink);font-size:2rem;font-weight:800}.tile__label{color:var(--muted);margin-top:4px;font-size:.8rem}.bottomnav{border-top:1px solid var(--border);background:var(--surface);padding-bottom:env(safe-area-inset-bottom,0);display:flex}.bottomnav__tab{height:var(--nav-h);color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;padding:8px 0;text-decoration:none;display:flex}.bottomnav__tab.is-active{color:var(--accent-ink)}.bottomnav__icon{font-size:1.25rem}.bottomnav__label{font-size:.72rem;font-weight:600}.mascot{right:10px;bottom:calc(var(--nav-h) + 6px);pointer-events:none;z-index:20;flex-direction:column;align-items:flex-end;width:92px;display:flex;position:absolute}.mascot__poodle{pointer-events:auto;filter:drop-shadow(0 4px 6px #0000002e);background:0 0;border:none;width:78px;padding:0;animation:4s ease-in-out infinite bob}.mascot__poodle svg{width:100%;height:auto;display:block}.mascot__bubble{pointer-events:none;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:14px;max-width:210px;margin-bottom:6px;padding:8px 12px;font-size:.82rem;line-height:1.35;animation:.18s ease-out pop;box-shadow:0 6px 18px #00000024}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.mascot__poodle,.mascot__bubble{animation:none}*{scroll-behavior:auto!important}}