:root{--paper:#fff7ed;--card:#ffffff;--ink:#1c1917;--muted:#78716c;--line:#e7e5e4;--accent:#ea580c;--accent-soft:#ffedd5;--good:#15803d;--mid:#b45309;--bad:#b91c1c;--shadow:0 2px 8px rgb(28 25 23/8%),0 12px 32px rgb(28 25 23/6%)}@media (prefers-color-scheme:dark){:root{--paper:#1c1917;--card:#292524;--ink:#fafaf9;--muted:#a8a29e;--line:#44403c;--accent:#fb923c;--accent-soft:#431407;--good:#4ade80;--mid:#fbbf24;--bad:#f87171;--shadow:0 2px 8px rgb(0 0 0/40%),0 12px 32px rgb(0 0 0/30%)}}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;-webkit-text-size-adjust:100%}.wrap{max-width:520px;margin:0 auto;padding:24px 16px calc(32px + env(safe-area-inset-bottom))}.wrap.wide{max-width:980px}h1{font-size:26px;margin:0 0 8px;letter-spacing:-.01em}h2{font-size:18px;margin:32px 0 10px}.lead{margin:0 0 20px}.lead,.muted{color:var(--muted)}.footnote{margin-top:24px;text-align:center;font-size:14px}.footnote a,.primary-link{color:var(--accent);text-decoration:none;font-weight:600}.footnote a:hover,.primary-link:hover{text-decoration:underline}.primary-link.big{display:inline-block;padding:14px 28px;border-radius:999px;background:var(--accent);color:#fff;font-size:18px}.primary-link.big:hover{text-decoration:none;filter:brightness(1.05)}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 20px 28px;box-shadow:var(--shadow);text-align:center}.card.done{padding-top:32px}.bigemoji{font-size:56px;line-height:1;margin-bottom:8px}.progress{display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:20px}.count{font-size:13px;color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.dots{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.dot{width:8px;height:8px;border-radius:50%;background:var(--line)}.dot.filled{background:var(--accent)}.dot.here{outline:2px solid var(--accent);outline-offset:2px}.english{font-size:15px;color:var(--muted);margin:0 0 12px}.hanzi{font-size:clamp(34px,11vw,46px);line-height:1.25;margin:0 0 8px;font-weight:600;letter-spacing:.02em}.jyutping{font-size:16px;color:var(--muted);margin:0 0 20px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}button{font:inherit;cursor:pointer}button:disabled{cursor:default}.listen{border:1px solid var(--line);background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:10px 20px;font-size:15px;font-weight:600}.recordwrap{margin-top:24px}.record{width:104px;height:104px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgb(234 88 12/35%);transition:transform .12s ease}.record:active{transform:scale(.95)}.record .mic{font-size:40px}.record.on{background:var(--bad);animation:pulse 1.3s ease-in-out infinite}.record .square{width:30px;height:30px;border-radius:6px;background:#fff}.record .spinner{width:30px;height:30px;border-radius:50%;border:3px solid rgb(255 255 255/35%);border-top-color:#fff;animation:spin .8s linear infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgb(185 28 28/45%)}50%{box-shadow:0 0 0 18px rgb(185 28 28/0)}}@keyframes spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.record.on{animation:none}.record .spinner{animation-duration:2s}}.hint{margin:14px 0 0;font-size:15px;color:var(--muted);min-height:1.5em}.after{margin-top:20px}.playback{width:100%;max-width:320px;margin-bottom:14px}.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.primary,.secondary{border-radius:999px;padding:12px 24px;font-size:16px;font-weight:600;border:1px solid transparent}.primary{background:var(--accent);color:#fff}.secondary{background:transparent;color:var(--ink);border-color:var(--line)}.tiles{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 8px}.tile{flex:1 1 140px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px}.tilenum{font-size:30px;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tilelabel{font-size:13px;color:var(--muted)}.grid{width:100%;border-collapse:collapse;font-size:14px}.grid td,.grid th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}.grid th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}.cell-hanzi{display:block;font-size:17px}.cell-note{display:block;font-size:12px;color:var(--muted);margin-top:4px}.mini{width:180px;height:32px}.v-heard{color:var(--good);font-weight:600}.v-partial{color:var(--mid);font-weight:600}.v-missed{color:var(--bad);font-weight:600}code{background:var(--accent-soft);padding:1px 5px;border-radius:4px;font-size:.9em}@media (max-width:700px){.grid .cell-note{display:none}.mini{width:130px}}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:13px}.topbar .who{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar nav a{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}.talkwrap{max-width:620px;display:flex;flex-direction:column;min-height:100dvh}.talk{min-height:0}.talk,.thread{flex:1 1;display:flex;flex-direction:column}.thread{overflow-y:auto;gap:12px;padding-bottom:16px}.empty{text-align:center;padding:32px 8px}.empty h1{margin-bottom:8px}.bubble{max-width:88%;padding:12px 16px;border-radius:18px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}.bubble.learner{align-self:flex-end;background:var(--accent-soft);border-color:transparent}.bubble.buddy{align-self:flex-start}.b-hanzi{margin:0;font-size:21px;line-height:1.5}.b-jyut{font-size:13px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.b-eng,.b-jyut{margin:6px 0 0;color:var(--muted)}.b-eng{font-size:14px}.b-fix{margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;color:var(--mid)}.dots3{display:inline-flex;gap:4px;align-items:center;height:24px}.dots3 i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}.dots3 i:nth-child(2){animation-delay:.2s}.dots3 i:nth-child(3){animation-delay:.4s}@keyframes blink{0%,60%,to{opacity:.25}30%{opacity:1}}.controls{position:-webkit-sticky;position:sticky;bottom:0;padding:16px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--paper) 28%);text-align:center}.mic,.record{position:relative;width:92px;height:92px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgb(234 88 12/35%);transition:background .2s ease}.mic .glyph,.record .mic{font-size:34px;position:relative;z-index:1}.mic.on,.record.on{background:var(--bad)}.record.busy{background:var(--muted)}.ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid;opacity:.35;transition:transform .08s linear}.mic.hot .ring{opacity:.6}@media (prefers-reduced-motion:reduce){.ring{transition:none}}.linky{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;text-decoration:underline;padding:6px}.hint.bad{color:var(--bad)}.help{font-size:13px;color:var(--muted);max-width:380px;margin:4px auto 0}