:root{--bg:#fff;--ink:#111;--ink-2:#555;--ink-3:#8f8f8f;--line:#e6e6e6;--panel:#f4f4f4;--hl:#ffe45c;--radius:18px;--col:480px;--bar:96px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);font-family:Nunito,ui-rounded,SF Pro Rounded,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--ink);margin:0}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior-y:none;font-size:17px;font-weight:600;line-height:1.35}button{font:inherit;color:inherit;cursor:pointer}img{display:block}.app{max-width:var(--col);min-height:100dvh;margin:0 auto;position:relative}.screen{padding:calc(12px + var(--safe-t)) 16px calc(var(--bar) + var(--safe-b) + 24px)}.screen.no-bar{padding-bottom:calc(24px + var(--safe-b))}.topbar{align-items:center;gap:10px;min-height:52px;margin-bottom:8px;display:flex}.topbar h1{flex:1;margin:0;font-size:22px;font-weight:800}.topbar .spacer{flex:1}.iconbtn{background:0 0;border:none;border-radius:14px;place-items:center;width:48px;height:48px;font-size:22px;font-weight:800;display:grid}.iconbtn:active{background:var(--panel)}.iconbtn.lib{background:var(--panel);border-radius:50%;position:relative}.pill{background:var(--panel);border-radius:999px;align-items:center;gap:6px;padding:8px 12px;font-size:15px;font-weight:800;display:inline-flex}.btn{border:2px solid var(--ink);background:#fff;border-radius:16px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:64px;padding:14px 18px;font-size:20px;font-weight:800;display:flex}.btn:active{transform:scale(.985)}.btn.primary{background:var(--ink);color:#fff}.btn.quiet{border-color:var(--line)}.btn:disabled{opacity:.35}.btn-row{gap:12px;display:flex}.bottombar{width:100%;max-width:var(--col);height:calc(var(--bar) + var(--safe-b));padding:0 16px var(--safe-b);pointer-events:none;z-index:20;background:linear-gradient(#fff0,#fff 35%);grid-template-columns:1fr auto 1fr;align-items:center;display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottombar>*{pointer-events:none}.bottombar button{pointer-events:auto}.bottombar .left{justify-self:start}.bottombar .right{justify-self:end}.bigbtn{background:var(--ink);color:#fff;border:none;border-radius:50%;place-items:center;width:76px;height:76px;font-size:30px;display:grid;position:relative;box-shadow:0 8px 24px #0003}.bigbtn:active{transform:scale(.96)}.bigbtn-wrap{display:inline-block;position:relative}.bigbtn-wrap .caption{color:var(--ink-3);white-space:nowrap;font-size:12px;font-weight:800;position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%)}.bigbtn.nomic{background:var(--ink-3)}.bigbtn.muted{color:var(--ink);border:3px solid var(--ink);background:#fff}.bigbtn.nudge{animation:1.2s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-4px)}}.btn-pair{gap:8px;display:flex}.btn-pair .sidebtn{padding:8px 12px}.sidebtn.pulse{animation:1.1s ease-in-out infinite nudge}@keyframes nudge{0%,to{transform:translate(0)}50%{transform:translate(4px)}}.screen.fit{height:100dvh;padding-bottom:calc(var(--bar) + var(--safe-b));flex-direction:column;display:flex;overflow:hidden}.screen.fit .topbar{flex:none}.reader-screen .reader-img{width:min(100%, calc(100dvh - var(--bar) - var(--safe-b) - var(--safe-t) - 52px - 210px));flex:none}.reader-screen .reader-text,.quiz-screen .quiz-body{-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding-bottom:8px;overflow-y:auto}.bigbtn.listening{background:#d33;animation:1s ease-in-out infinite pulse}.bigbtn.thinking{background:var(--ink-3)}.bigbtn .lvl{transform:scale(var(--lvl,1));pointer-events:none;border:3px solid #d3333359;border-radius:50%;transition:transform 80ms;position:absolute;inset:-6px}.sidebtn{border:2px solid var(--line);background:#fff;border-radius:14px;align-items:center;gap:6px;min-height:52px;padding:8px 14px;font-size:18px;font-weight:800;display:flex}.sidebtn:disabled{opacity:.3}.sidebtn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.sidebtn svg,.btn svg,.pill svg{flex:none}.iconbtn.lib small{margin-left:2px;font-size:12px}.inline-icon{vertical-align:-3px;margin-left:4px;display:inline-block}.bigbtn svg{display:block}.bigbtn .dots{font-size:28px;line-height:1}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}.feed{flex-direction:column;gap:22px;display:flex}.card{text-align:left;background:0 0;border:none;width:100%;padding:0;display:block}.cover{aspect-ratio:1;border-radius:var(--radius);background:var(--panel);position:relative;overflow:hidden}.cover img{object-fit:cover;width:100%;height:100%}.cover .badge{background:#ffffffeb;border-radius:999px;padding:6px 10px;font-size:14px;font-weight:800;position:absolute;top:12px;right:12px}.card h2{margin:12px 4px 2px;font-size:22px;font-weight:800}.card p{color:var(--ink-2);margin:0 4px;font-size:16px}.empty{text-align:center;color:var(--ink-3);padding:40px 10px}.tiles{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.tile{aspect-ratio:1;border:2px solid var(--line);border-radius:var(--radius);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px;display:flex;overflow:hidden}.tile img{aspect-ratio:1;object-fit:contain;border-radius:12px;width:68%}.tile .emoji{font-size:44px;line-height:1}.tile span{font-size:15px;font-weight:800}.tile.selected{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}.brief{background:var(--panel);border-radius:16px;min-height:52px;margin:12px 0 8px;padding:12px 16px;font-size:18px;font-weight:700}.brief .muted{color:var(--ink-3)}.progress{background:var(--line);border-radius:4px;height:8px;overflow:hidden}.progress>i{background:var(--ink);border-radius:4px;height:100%;transition:width .4s;display:block}.progress.thin{height:6px}.making-cover{aspect-ratio:1;border-radius:var(--radius);background:var(--panel);position:relative;overflow:hidden}.making-cover img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity 1.2s}.making-cover img.in{opacity:1}.making-cover .placeholder{color:var(--ink-3);place-items:center;font-size:44px;display:grid;position:absolute;inset:0}.stage{color:var(--ink-2);min-height:24px;margin:14px 0 8px;font-size:17px}.reader-img{aspect-ratio:1;border-radius:var(--radius);background:var(--panel);width:100%;margin:0 auto;position:relative;overflow:hidden}.reader-img img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .6s;position:absolute;inset:0}.reader-img img.in{opacity:1}.reader-img .prev-zone{width:22%;height:100%;position:absolute;top:0;left:0}.reader-img .drawing{color:var(--ink-3);place-items:center;font-size:18px;display:grid;position:absolute;inset:0}.story-text{margin:14px 4px 0;font-size:clamp(20px,6vw,25px);font-weight:700;line-height:1.45}.w{border-radius:7px;margin:0 -1px;padding:0 3px;transition:background .1s;display:inline-block}.w.active{background:var(--hl)}.w.vocab{text-underline-offset:5px;-webkit-text-decoration:underline #c8c8c8;text-decoration:underline #c8c8c8;text-decoration-thickness:2px}.w:active{background:var(--line)}.minutes{color:var(--ink-3);align-items:center;gap:10px;font-size:14px;font-weight:800;display:flex}.minutes .progress{flex:1}.scrim{z-index:30;background:#0000002e;position:fixed;inset:0}.sheet{width:100%;max-width:var(--col);padding:18px 20px calc(20px + var(--safe-b));z-index:31;background:#fff;border-radius:24px 24px 0 0;animation:.22s ease-out up;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -10px 40px #00000026}@keyframes up{0%{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%)}}.sheet .close{width:44px;height:44px;color:var(--ink-2);background:0 0;border:none;border-radius:12px;place-items:center;display:grid;position:absolute;top:8px;right:6px}.sheet .head{align-items:center;gap:12px;padding-right:44px;display:flex}.sheet .word{flex:1;font-size:34px;font-weight:800}.sheet .meaning{margin:12px 0 4px;font-size:21px;font-weight:700}.sheet .example{color:var(--ink-2);margin:0 0 4px;font-size:17px}.sheet .fact{color:var(--ink-3);margin:8px 0 0;font-size:15px}.speak{border:2px solid var(--line);background:#fff;border-radius:50%;place-items:center;width:56px;height:56px;font-size:22px;display:grid}.speak.on{border-color:var(--ink);background:var(--hl)}.star{border:2px solid var(--line);background:#fff;border-radius:50%;place-items:center;width:56px;height:56px;font-size:24px;display:grid}.star.saved{background:var(--hl);border-color:var(--hl)}.q-prompt{margin:12px 4px 18px;font-size:25px;font-weight:800;line-height:1.35}.q-sentence{color:var(--ink-2);margin:0 4px 18px;font-size:24px;font-weight:700}.q-sentence b{color:var(--ink);background:var(--hl);border-radius:6px;padding:0 6px}.opts{flex-direction:column;gap:12px;display:flex}.opts.tiles3{flex-direction:row}.optrow{align-items:center;gap:10px;display:flex}.optrow .opt{flex:1;min-width:0}.optcol{flex-direction:column;flex:1;align-items:center;gap:8px;display:flex}.optcol .opt{width:100%}.speak.small{flex:none;width:44px;height:44px}.choices{flex-direction:column;gap:12px;margin-top:14px;display:flex}.choices .brief{margin:0 0 4px}.opt{border:2px solid var(--line);text-align:left;background:#fff;border-radius:16px;align-items:center;gap:14px;width:100%;min-height:68px;padding:14px 18px;font-size:21px;font-weight:800;transition:transform .1s,background .15s,border-color .15s;display:flex}.opt .ico{text-align:center;width:34px;font-size:26px}.opt .box{border:2px solid var(--ink);border-radius:8px;place-items:center;width:26px;height:26px;font-size:16px;display:grid}.opt.selected{border-color:var(--ink);background:var(--panel)}.opt .tick{color:var(--ink);place-items:center;margin-left:auto;display:grid}.btn.submit{background:var(--hl);border-color:var(--hl);color:var(--ink)}.btn.submit:disabled{background:var(--panel);border-color:var(--panel);opacity:.7}.w.read{color:var(--ink-3)}.w.err{background:var(--hl);color:var(--ink)}.w.cur{box-shadow:inset 0 -3px 0 var(--ink-3);border-radius:4px}.w.pending{color:var(--ink)}.w.ok{background:var(--hl)}.w.close{background:#ffd9a3}.w.missed{background:#ffc9c9}.mode-btn{border:2px solid var(--ink);background:#fff;border-radius:999px;align-items:center;gap:6px;min-height:44px;padding:6px 12px;font-size:15px;font-weight:800;display:inline-flex}.mode-btn.read{background:var(--ink);color:#fff}.read-panel{margin:10px 4px 0}.read-panel .score{align-items:center;gap:10px;font-size:17px;font-weight:800;display:flex}.read-panel .tips{color:var(--ink-2);margin:6px 0 0;padding:0;font-size:15px;list-style:none}.read-panel .tips li{padding:4px 0}.read-panel .tips b{color:var(--ink)}.opt.correct{background:var(--hl);border-color:var(--hl)}.opt.wrong{border-color:var(--ink-3);animation:.45s shake}.opt.dim{opacity:.45}.opt.tile{text-align:center;flex-direction:column;justify-content:center;gap:4px}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-7px)}40%,80%{transform:translate(7px)}}.feedback{min-height:28px;color:var(--ink-2);margin:14px 4px 0;font-size:17px}.results{text-align:center;padding-top:24px}.results .bigstar{color:#f2c94c;font-size:110px;line-height:1;animation:.8s cubic-bezier(.2,.9,.3,1.3) pop;display:inline-block}@keyframes pop{0%{opacity:0;transform:scale(0)rotate(-30deg)}60%{opacity:1;transform:scale(1.15)rotate(6deg)}to{transform:scale(1)rotate(0)}}.results h2{margin:12px 0 4px;font-size:34px;font-weight:800}.results p{color:var(--ink-2);margin:0 0 6px;font-size:18px}.results .actions{flex-direction:column;gap:12px;margin-top:26px;display:flex}.star-fly{z-index:60;pointer-events:none;font-size:30px;animation:.75s cubic-bezier(.3,.6,.2,1) forwards fly;position:fixed}@keyframes fly{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--dx), var(--dy)) scale(.4);opacity:.2}}.bump{animation:.4s bump}@keyframes bump{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.tabs{gap:8px;margin-bottom:14px;display:flex}.tabs button{border:2px solid var(--line);background:#fff;border-radius:14px;flex:1;min-height:48px;font-size:17px;font-weight:800}.tabs button.on{border-color:var(--ink);background:var(--ink);color:#fff}.wordrow{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:12px 0;display:flex}.wordrow .txt{flex:1}.wordrow .txt b{font-size:21px;display:block}.wordrow .txt span{color:var(--ink-2);font-size:15px}.dev{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:500}.dev table{border-collapse:collapse;width:100%}.dev td,.dev th{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:6px 8px}.dev pre{white-space:pre-wrap;background:var(--panel);border-radius:10px;max-height:60vh;padding:10px;overflow:auto}.dev .thumbs{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.dev .thumbs img{aspect-ratio:1;object-fit:cover;border-radius:8px;width:100%}.fade-in{animation:.3s fadein}@keyframes fadein{0%{opacity:0}to{opacity:1}}.muted{color:var(--ink-3)}.center{text-align:center}