:root{--color-primary:#f0563e;--color-primary-shadow:#cf4129;--color-reading:#2d6fe0;--color-reading-shadow:#2356b5;--color-reward:#fbb914;--color-correct:#3dae54;--color-correct-shadow:#2f9143;--color-accent:#8e4fd0;--color-ink:#2b2533;--color-muted:#8a8178;--color-faint:#b6a79f;--bg-app:#fff6f1;--bg-card:#fff;--bg-parent:#f7f8fa;--border-parent:#eceef2;--tone-1:#d62828;--tone-2:#e08a00;--tone-3:#2e8b3d;--tone-4:#2d5fd0;--tone-neutral:#8a8a8a;--tint-correct:#eaf8ee;--tint-wrong:#fff1ee;--tint-selected:#eaf1ff;--tint-needshelp:#fbe3e1;--tint-learning:#fcefd6;--radius-card:24px;--radius-tile:20px;--radius-pill:999px;--radius-phone:42px;--font-display:"Baloo 2", sans-serif;--font-body:"Nunito", sans-serif;--font-han-trad:"Noto Sans TC", sans-serif;--font-han-simp:"Noto Sans SC", sans-serif;--font-character:var(--font-han-simp);--font-hand:"Ma Shan Zheng", cursive;--font-session:"Manrope", sans-serif}body{font-family:var(--font-body);color:var(--color-ink);background:var(--bg-app,var(--bg-card,#fff));margin:0}ruby{ruby-align:center}rt{font-size:.42em}.bpmf{font-family:var(--font-han-trad);flex-direction:column;align-items:center;line-height:1;display:inline-flex;position:relative}.bpmf>.tone{position:absolute;top:50%;right:-.62em;transform:translateY(-50%)}.bpmf>.neu{position:absolute;top:-.58em;left:50%;transform:translate(-50%)}
*,:before,:after{box-sizing:border-box}.screen{background:var(--bg-app);flex-direction:column;gap:1.05rem;max-width:27rem;min-height:100dvh;margin:0 auto;padding:1.5rem 1.4rem 1.4rem;display:flex}.screen--parent{background:var(--bg-parent)}.screen h1{font-family:var(--font-display);letter-spacing:-.01em;text-wrap:balance;margin:0;font-size:clamp(1.7rem,6.2vw,2rem);font-weight:800;line-height:1.1}.screen h2{font-family:var(--font-display);margin:0;font-size:1.15rem;font-weight:700}.screen p{margin:0}.screen .lede{color:var(--color-muted)}.screen .spacer{flex-grow:1}.screen form{flex-direction:column;gap:.6rem;display:flex}.screen label{font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);font-size:.72rem;font-weight:800}.screen input{font-family:var(--font-body);background:var(--bg-card);min-height:48px;color:var(--color-ink);border:2px solid #f0ded6;border-radius:16px;width:100%;padding:0 .9rem;font-size:1rem}.screen--parent input{border-color:var(--border-parent)}.screen input:focus-visible{outline:3px solid var(--color-reward);outline-offset:1px;border-color:#0000}.screen button,.screen .btn{font-family:var(--font-body);border-radius:var(--radius-pill);color:#fff;background:var(--color-primary);min-height:44px;box-shadow:0 4px 0 var(--color-primary-shadow);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:0 1.25rem;font-size:1rem;font-weight:800;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.screen button:active,.screen .btn:active{box-shadow:none;transform:translateY(4px)}.screen button:focus-visible,.screen .btn:focus-visible{outline:3px solid var(--color-reward);outline-offset:2px}.screen .btn--quiet{background:var(--bg-card);color:var(--color-ink);box-shadow:inset 0 0 0 2px #f0ded6}.screen--parent .btn--quiet{box-shadow:inset 0 0 0 2px var(--border-parent)}.screen .btn--quiet:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #f0ded6}.screen .btn--bare{color:var(--color-muted);box-shadow:none;background:0 0;font-size:.88rem}.screen .card{background:var(--bg-card);border-radius:var(--radius-card);box-shadow:inset 0 0 0 2px var(--border-parent);flex-direction:column;gap:.55rem;padding:1rem;display:flex}.screen .card h2{margin:0}.screen .card .lede{font-size:.88rem;line-height:1.45}.screen .card>button{margin-top:.15rem}.screen select{font:inherit;border:2px solid var(--border-parent);background:var(--bg-card);color:var(--color-ink);border-radius:14px;min-height:44px;padding:.7rem .8rem;font-size:1rem}.screen select:focus-visible{outline:3px solid var(--color-reward);outline-offset:2px}.screen .readback{align-items:baseline;gap:.5rem;display:flex}.screen .readback span{letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);font-size:.72rem;font-weight:800}.screen .timezone-display{font-family:var(--font-display);font-size:1.1rem;font-weight:700}.screen .settings-message{color:var(--color-muted);font-size:.9rem}.screen .group{border:none;flex-direction:column;gap:.5rem;margin:0;padding:0;display:flex}.screen .group legend{letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);padding:0;font-size:.72rem;font-weight:800}.screen .pick input[type=radio],.screen .choice input[type=radio]{appearance:none;border:2px solid var(--border-parent);background:var(--bg-card);border-radius:50%;flex:none;width:1.15rem;height:1.15rem;min-height:0;margin:0;padding:0}.screen .pick input[type=radio]:checked,.screen .choice input[type=radio]:checked{border-color:var(--color-primary);background:radial-gradient(var(--color-primary) 0 42%, transparent 46%)}.screen .pick input[type=radio]:focus-visible,.screen .choice input[type=radio]:focus-visible{outline:3px solid var(--color-reward);outline-offset:2px}.screen .avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem .55rem;display:grid}.screen .avatar-option{cursor:pointer;text-transform:none;letter-spacing:0;color:var(--color-muted);justify-items:center;gap:.35rem;font-size:.78rem;display:grid}.screen .avatar-option .pick{align-items:center;gap:.3rem;display:flex}.screen .avatar-chip{border-radius:50%;place-items:center;width:3.1rem;height:3.1rem;font-size:1.65rem;line-height:1;display:grid}.screen .choice-row{flex-wrap:wrap;gap:.5rem;display:flex}.screen .choice{border-radius:var(--radius-pill);box-shadow:inset 0 0 0 2px var(--border-parent);cursor:pointer;text-transform:none;letter-spacing:0;color:var(--color-ink);flex:9rem;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .85rem;font-size:.95rem;display:flex}.screen .choice:has(input:checked){box-shadow:inset 0 0 0 2px var(--color-primary);background:var(--tint-selected)}.screen .choice .glyph{font-family:var(--font-character);font-size:1.2rem;font-weight:700}.screen .switch-row{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.screen .switch-row label{margin:0}.screen button[role=switch]{background:var(--bg-card);min-width:5rem;min-height:44px;color:var(--color-ink);box-shadow:inset 0 0 0 2px var(--border-parent);padding:.5rem 1rem;font-size:.95rem}.screen button[role=switch][aria-checked=true]{background:var(--color-correct);color:#fff;box-shadow:none}.screen .danger{box-shadow:inset 0 0 0 2px #f6d5d1}.screen .danger h2{color:#b3241a}.screen .btn--danger{color:#fff;background:#b3241a;box-shadow:0 4px #8a1b13}.screen .error-message{background:var(--tint-wrong);color:#b3241a;border-radius:14px;padding:.7rem .9rem;font-size:.92rem;font-weight:700}.screen .magic-link-confirmation{background:var(--tint-selected);color:var(--color-reading);border-radius:14px;padding:.7rem .9rem;font-size:.92rem;font-weight:700}.screen .divider{color:var(--color-faint);align-items:center;gap:.75rem;font-size:.8rem;font-weight:700;display:flex}.screen .divider:before,.screen .divider:after{content:"";background:#f0ded6;flex-grow:1;height:1px}.screen .skeleton-shell{min-height:40dvh;color:var(--color-muted);place-items:center;font-weight:700;display:grid}.shell{text-align:center;flex-grow:1;place-content:center;justify-items:center;gap:.85rem;padding:1.5rem 0;display:grid}.shell .face{font-size:2.8rem;line-height:1}.shell h1{font-size:1.45rem}.shell p{color:var(--color-muted);max-width:26ch;line-height:1.5}.shell--needshelp{background:var(--tint-needshelp);border-radius:var(--radius-card);flex-grow:0;gap:.4rem;padding:.85rem 1rem;font-weight:800}.celebrate{flex-direction:column;flex-grow:1;display:flex;position:relative}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti i{border-radius:2px;width:9px;height:14px;animation:2.6s cubic-bezier(.25,.6,.4,1) forwards bopo-fall;position:absolute;top:-24px}@keyframes bopo-fall{0%{opacity:0;transform:translateY(0)rotate(0)}12%{opacity:1}to{opacity:0;transform:translateY(105vh)rotate(540deg)}}.pop{animation:.62s cubic-bezier(.2,1.5,.4,1) both bopo-pop}@keyframes bopo-pop{0%{opacity:0;transform:scale(.3)translateY(24px)}60%{opacity:1;transform:scale(1.12)translateY(-6px)}to{transform:scale(1)translateY(0)}}.rise{animation:.5s ease-out both bopo-rise}@keyframes bopo-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.stat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;display:grid}.stat{background:var(--bg-card);border-radius:var(--radius-tile);text-align:center;padding:.85rem .5rem}.stat b{font-family:var(--font-display);font-size:1.6rem;display:block}.stat span{color:var(--color-muted);letter-spacing:.05em;font-size:.7rem;font-weight:800}.praise{background:var(--bg-card);border-radius:var(--radius-card);align-items:center;gap:.75rem;padding:.85rem 1rem;display:flex}.praise .say{font-family:var(--font-character);font-size:1.55rem;font-weight:700;line-height:1}@media (prefers-reduced-motion:reduce){.confetti{display:none}.pop,.rise{animation:none}}body:has(.screen--parent){background:var(--bg-parent)}body:has(.screen--child){background:var(--bg-app)}.screen--parent.screen--wide{max-width:72rem;padding:1.5rem 1.6rem 2.5rem}@media (min-width:60rem){.screen--parent.screen--wide{grid-template-columns:13.5rem minmax(0,1fr);align-items:start;gap:2rem;display:grid}.screen--parent.screen--wide>.parent-nav{position:sticky;top:1.5rem}}.parent-nav{flex-direction:column;gap:.2rem;display:flex}.parent-nav .parent-nav__brand{font-family:var(--font-display);padding:0 .7rem .6rem;font-size:1.05rem;font-weight:800}.screen .parent-nav a{min-height:44px;color:var(--color-ink);box-shadow:none;background:0 0;border-radius:.7rem;align-items:center;gap:.6rem;padding:.5rem .7rem;font-size:.95rem;font-weight:700;text-decoration:none;display:flex}.screen .parent-nav a:hover{background:var(--border-parent)}.screen .parent-nav a[aria-current=page]{background:var(--bg-card);box-shadow:inset 0 0 0 2px var(--border-parent)}.parent-nav__icon{font-size:1.05rem;line-height:1}.screen .linkish{min-height:44px;box-shadow:none;color:var(--color-reading);background:0 0;align-items:center;width:auto;padding:0 .2rem;font-weight:700;text-decoration:none;display:inline-flex}.screen .linkish:hover{text-decoration:underline}.screen .linkish:active{transform:none}@media (min-width:48rem){.screen--child{gap:1.3rem;max-width:44rem;padding:2rem 2rem 2.5rem}.screen--child h1{font-size:2.3rem}.screen--child button,.screen--child .btn{min-height:56px;font-size:1.05rem}}.session-player,.session-player button,.session-player input,.session-player select,.session-player textarea{font-family:var(--font-session)}.session-player.script-trad{--font-character:var(--font-han-trad)}.session-player.script-simp{--font-character:var(--font-han-simp)}.session-player .label{letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);font-size:.72rem;font-weight:800}.session-player .sp-head{align-items:center;gap:.6rem;display:flex}.session-player .sp-close{background:var(--bg-card);width:44px;height:44px;min-height:44px;color:var(--color-muted);border-radius:50%;flex:none;padding:0;font-size:1.05rem;font-weight:800;box-shadow:inset 0 0 0 2px #f0ded6}.session-player .sp-close:active{transform:translateY(2px)}.session-player .sp-bar{border-radius:var(--radius-pill);background:#f0ded6;flex-grow:1;height:12px;overflow:hidden}.session-player .sp-bar>i{border-radius:var(--radius-pill);background:var(--color-primary);height:100%;display:block}.session-player .sp-count{text-align:right;min-width:2.6rem;color:var(--color-muted);font-size:.9rem;font-weight:800}.session-player .ask{align-items:center;gap:.7rem;display:flex}.session-player .panda{flex:none;font-size:2.4rem;line-height:1}.session-player .bubble{background:var(--bg-card);border-radius:18px;padding:.6rem .85rem;font-size:.95rem;font-weight:700;line-height:1.35;position:relative}.session-player .bubble:before{content:"";background:var(--bg-card);border-radius:3px;width:14px;height:14px;position:absolute;top:50%;left:-6px;transform:translateY(-50%)rotate(45deg)}.session-player .ruby-card{background:var(--bg-card);border-radius:var(--radius-card);justify-items:center;gap:.8rem;padding:1rem;display:grid}.session-player .ruby-row{justify-content:center;align-items:center;gap:1.1rem;display:flex}.session-player .hanzi{font-family:var(--font-character);margin:0;font-size:5.6rem;line-height:1}.session-player .ruby-card--build .hanzi{font-size:7rem}.session-player .hanzi--frame{font-size:2.4rem;font-weight:700}.session-player .say-this{text-align:center;margin:0;font-size:1.25rem;font-weight:800;line-height:1.3}.session-player .meet-glyph{justify-content:center;align-items:center;font-size:5.6rem;line-height:1;display:flex}.session-player .meet-glyph [data-role=bopomofo-column]{font-size:.3em}.session-player .meet-glyph rt{font-size:.3em;font-weight:700}.session-player .meet-glyph>span>[data-role=tone-mark]{font-size:.32em}.session-player .meet-glyph>span>[data-role=tone-label]{margin-left:.1em;font-size:.28em;font-weight:800}.session-player .meet-gloss{text-align:center;color:var(--color-ink);margin:0;font-size:1.15rem;font-weight:800;line-height:1.3}.session-player .ruby-build{align-items:center;gap:.5rem;display:flex}.session-player .build-col{justify-items:center;gap:.35rem;display:grid}.session-player .slot{border:3px dashed var(--color-faint);border-radius:var(--radius-tile);background:var(--bg-card);width:64px;height:64px;min-height:64px;box-shadow:none;color:var(--color-ink);font-family:var(--font-han-trad);place-items:center;padding:0;font-size:2.2rem;font-weight:500;line-height:1;display:grid}.session-player .slot--tone{border-radius:14px;gap:0;width:52px;height:52px;min-height:52px}.session-player .slot.is-filled{border:3px solid var(--color-reading);background:var(--tint-selected)}.session-player .slot.is-next{border-color:var(--color-reward);background:var(--tint-learning)}.session-player .slot:disabled{opacity:1}.session-player .slot--tone [data-role=tone-label]{font-size:.72rem;font-weight:800}.session-player .pieces{gap:.5rem;display:grid}.session-player .tray{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;display:grid}.session-player .tones{grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;display:grid}.session-player .tiles,.session-player .choices{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.session-player .tile{background:var(--bg-card);min-height:60px;color:var(--color-ink);font-family:var(--font-han-trad);cursor:grab;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:16px;padding:0 .4rem;font-size:1.9rem;font-weight:500;line-height:1;box-shadow:inset 0 0 0 2px #f0ded6,0 4px #f0ded6}.session-player .tray .tile,.session-player .tones .tile{touch-action:none}.session-player .tile:active{transform:translateY(4px);box-shadow:inset 0 0 0 2px #f0ded6}.session-player .tile.is-used,.session-player .tile:disabled{opacity:.45;cursor:default;box-shadow:inset 0 0 0 2px #f0ded6}.session-player .tile--tone{font-family:var(--font-session);align-content:center;place-items:center;gap:2px;font-size:.8rem;font-weight:800;display:grid}.session-player .tile--word,.session-player .tile--choice{min-width:4.5rem;font-family:var(--font-session);padding:0 .9rem;font-size:1.15rem;font-weight:700}.session-player .tile--word{font-family:var(--font-character);font-size:1.5rem}.session-player .hear{background:var(--tint-selected);min-height:44px;color:var(--color-reading);box-shadow:none;font-size:.95rem}.session-player .type-row{gap:.3rem;width:100%;margin:0;display:grid}.session-player .fb{justify-items:center;gap:.6rem;display:grid}.session-player .fb p{text-align:center;margin:0;font-size:.95rem;font-weight:700;line-height:1.4}.session-player .check{width:100%;min-height:52px;font-size:1.05rem}.session-player .check:disabled,.session-player .actions button:disabled{opacity:.45;cursor:default}.session-player .check:disabled:active,.session-player .actions button:disabled:active{box-shadow:0 4px 0 var(--color-primary-shadow);transform:none}.session-player .actions{gap:.5rem;width:100%;display:grid}.session-player .drag-ghost{z-index:5;pointer-events:none;background:var(--bg-card);min-width:60px;min-height:60px;font-family:var(--font-han-trad);border-radius:16px;align-content:center;place-items:center;gap:2px;padding:0 .4rem;font-size:1.9rem;font-weight:500;line-height:1;display:grid;position:fixed;transform:translate(-50%,-60%);box-shadow:inset 0 0 0 2px #f0ded6,0 6px #f0ded6}.session-player .drag-ghost .ghost-label{font-family:var(--font-session);font-size:.8rem;font-weight:800}@media (min-width:48rem){.session-player .ruby-build{gap:.7rem}.session-player .build-col{gap:.45rem}.session-player .slot{width:80px;height:80px;min-height:80px;font-size:2.8rem}.session-player .slot--tone{width:64px;height:64px;min-height:64px}.session-player .tile{border-radius:18px;min-height:72px;font-size:2.3rem}.session-player .tile--tone{font-size:.9rem}.session-player .tile--word{font-size:1.8rem}.session-player .tile--choice{font-size:1.3rem}.session-player .drag-ghost{min-width:72px;min-height:72px;font-size:2.3rem}.session-player .check{min-height:64px;font-size:1.15rem}.session-player .hear{min-height:56px}.session-player .bubble{padding:.7rem 1rem;font-size:1.05rem}}