@font-face{font-family:EB Sans TC;src:url(../fonts/NotoSansTC-sub.woff2)format("woff2");font-weight:400 900;font-display:swap}@font-face{font-family:EB Latin;src:url(../fonts/Archivo-sub.woff2)format("woff2");font-weight:500 900;font-display:swap}@font-face{font-family:EB Phonetic;src:url(../fonts/NotoSans-sub.woff2)format("woff2");font-weight:400 800;font-display:swap}:root{--bg:#f2f4f5;--surface:#fff;--ink:#0f1b2d;--muted:#4a5666;--blue:#0a4da8;--yel:#ffc800;--ok:#0e6b43;--okbg:#e4f2ea;--hold:#7d8da8;--warn-ink:#765000;--r:4px;--fs:1;--dur:.16s;--zh:"EB Sans TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--en:"EB Latin", Archivo, "Helvetica Neue", Arial, sans-serif;--ipa:"EB Phonetic", "Noto Sans", "Doulos SIL", "Charis SIL", "Lucida Sans Unicode", sans-serif}html[data-fs=l]{--fs:1.125}html[data-fs=xl]{--fs:1.25}html{font-size:calc(16px * var(--fs));-webkit-text-size-adjust:100%}html[data-motion=reduce]{--dur:0s}@media (prefers-reduced-motion:reduce){html:not([data-motion=full]){--dur:0s}}*,:before,:after{box-sizing:border-box}body{font:500 1.125rem/1.6 var(--zh);margin:0;background:var(--bg);max-width:560px;color:var(--ink);margin-inline:auto;padding:0 16px 16px}button{min-width:48px;min-height:48px;font:inherit;cursor:pointer;border-radius:var(--r);border:3px solid var(--ink);background:var(--surface);color:var(--ink);margin:4px 6px 4px 0;padding:8px 14px;font-size:1rem}button:focus-visible,[tabindex]:focus-visible{outline-offset:2px;outline:4px solid #0a64d8}button:disabled{color:var(--muted);cursor:not-allowed;border-style:dashed}.card{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);margin:8px 0;padding:8px 12px}.big{font-size:1.4rem;font-family:var(--en);font-weight:800}.note{color:var(--muted);font-size:.875rem}.warn{border:3px solid var(--ink);background:#fff6d1;border-left-width:10px;padding:8px}.pic{min-width:72px;min-height:72px;font-size:2.2rem}.link{background:0 0;border:none;text-decoration:underline}[lang=en]{font-family:var(--en)}.topbar{background:var(--ink);color:#fff;z-index:5;align-items:center;gap:6px;margin:0 -16px 12px;padding:8px 16px;display:flex;position:sticky;top:0}.topbar h1{flex:1;margin:0;font-size:1.125rem}.topbar button{margin:0}.btn-pron{background:var(--yel);border-color:var(--yel);font-weight:800}.btn-gear{color:#fff;background:0 0;border-color:#fff;position:relative}.backup-tag{max-width:4.5em;color:var(--yel);overflow-wrap:anywhere;flex:none;font-size:.75rem;font-weight:800;line-height:1.2}.dot{background:var(--yel);border:2px solid var(--ink);border-radius:50%;width:14px;height:14px;position:absolute;top:2px;right:2px}.board{background:var(--ink);border-radius:var(--r);flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;padding:12px;display:flex}.board.ok{outline:5px solid var(--ok)}.slot{border:3px dashed var(--hold);color:#fff;min-width:84px;min-height:64px;font-family:var(--en);touch-action:none;background:0 0;justify-content:center;align-items:center;margin:0;font-size:1.625rem;font-weight:800;display:inline-flex;position:relative}.slot .no{font:700 .75rem var(--zh);color:#c9d2e0;position:absolute;top:2px;left:4px}.slot.sel{border:4px solid var(--yel);box-shadow:0 0 0 3px #ffc80059}.slot.over{border:4px solid var(--yel);background:#ffc80033}.slot.filled{border:3px solid var(--ink);background:var(--yel);color:var(--ink)}.slot.wrong{border:3px dashed var(--yel);color:var(--ink);background:#fff}.slot.wrong:after{content:"換";background:var(--yel);color:var(--ink);font:800 .75rem var(--zh);border:2px solid var(--ink);padding:0 6px;position:absolute;top:-10px;right:-6px}.slot.right{background:var(--ok);color:#fff;border-color:var(--ok)}.punct{color:#fff;font:800 1.625rem var(--en)}.bank{flex-wrap:wrap;gap:8px;min-height:76px;margin:8px 0;padding:8px;display:flex}.tile{min-width:64px;min-height:64px;font-family:var(--en);touch-action:none;-webkit-user-select:none;user-select:none;margin:0;font-size:1.625rem;font-weight:800}.tile.gone{color:#0000;background:0 0;border-style:dashed}.drag-ghost{z-index:50;pointer-events:none;box-shadow:6px 6px 0 var(--ink);background:var(--yel);border:3px solid var(--ink);border-radius:var(--r);font:800 1.625rem var(--en);padding:12px 18px;transition:none;position:fixed;transform:scale(1.08)}.hint{background:var(--surface);border:3px solid var(--ink);border-left:10px solid var(--yel);margin:8px 0;padding:8px 12px}.done-card{background:var(--okbg);border:3px solid var(--ok);margin:8px 0;padding:8px 12px}.ipa{font-family:var(--ipa);font-size:2.125rem}.stress{color:var(--yel)}.scrim{z-index:20;background:#0f1b2d8c;position:fixed;inset:0}.panel{background:var(--surface);border:3px solid var(--ink);z-index:21;border-bottom:0;max-width:560px;max-height:85vh;margin-inline:auto;padding:12px 16px 16px;position:fixed;bottom:0;left:0;right:0;overflow:auto}.panel h2{margin:0;font-size:1.25rem}.panel .row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.seg{border:3px solid var(--ink);border-radius:var(--r);display:inline-flex;overflow:hidden}.seg button{border:0;border-radius:0;min-width:72px;margin:0}.seg button[aria-pressed=true]{background:var(--ink);color:#fff}.focus-word{font:800 2.75rem/1.1 var(--en);margin:8px 0 0}.phon{background:var(--ink);color:#fff;border-radius:var(--r);margin:8px 0;padding:8px 12px}.bigbtn{flex:1;min-height:60px;font-weight:800}.chips button[aria-pressed=true]{background:var(--yel)}@media (prefers-reduced-motion:no-preference){html:not([data-motion=reduce]) .slot,html:not([data-motion=reduce]) .tile{transition:background var(--dur), border-color var(--dur)}}.done-card .ipa{font-size:1.25rem}.status-card{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);margin:8px 0;padding:12px}.status-card.tone-ink{background:var(--ink);color:#fff}.status-card.tone-blue{border-left:10px solid var(--blue)}.status-card.tone-yellow{border-left:10px solid var(--yel)}.status-card.tone-green{background:var(--okbg);border-color:var(--ok)}.status-title{margin:0 0 4px;font-size:1.25rem;font-weight:800}.bar{border:3px solid var(--ink);background:#fff;height:14px}.bar span{background:var(--blue);height:100%;display:block}.checklist{margin:8px 0;padding:0;list-style:none}.ck{border:3px solid var(--ink);border-radius:var(--r);background:#fff;align-items:center;gap:10px;min-height:48px;margin:6px 0;padding:8px 12px;display:flex}.ck-pending,.ck-missing{border-style:dashed}.ck .mark{border:3px solid var(--ink);flex:none;justify-content:center;align-items:center;width:28px;height:28px;font-weight:800;display:inline-flex}.ck-done .mark{background:var(--ok);color:#fff;border-color:var(--ok)}.ck-working .mark{background:var(--blue);color:#fff;border-color:var(--blue)}.ck-problem .mark{background:var(--yel)}.ck-label{flex:1;font-weight:700}.ck-state{color:var(--muted);font-size:.875rem}.actions{flex-wrap:wrap;gap:8px;margin:8px 0;display:flex}button.primary{background:var(--blue);color:#fff;border-color:var(--ink);min-height:60px;font-weight:800}button.primary:disabled{color:var(--muted);background:0 0}.steps3{margin:8px 0;padding:0;list-style:none}.steps3>li{border:3px solid var(--ink);border-radius:var(--r);background:#fff;margin:8px 0;padding:8px 12px}.phrase{background:var(--ink);color:#fff;border-radius:var(--r);padding:12px}.rec{font-size:1.25rem}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.play[data-status=playing]{background:var(--blue);color:#fff;border-color:var(--ink);white-space:nowrap;min-height:48px;max-height:48px;line-height:1.25;overflow:hidden}.play[data-status=ended]{background:var(--okbg);border-color:var(--ok)}.play[data-status=error]{background:#fff6d1;border-style:dashed}button[aria-pressed=true]:not(.play):not(.btn-gear):before{content:"✓ ";font-weight:800}button[aria-pressed=true]:not(.play):not(.chips button){background:var(--ink);color:#fff}.seg button[aria-pressed=true]:before{content:""}html{scroll-padding-top:72px;scroll-padding-bottom:max(104px, var(--footer-space,104px))}body{padding-bottom:var(--footer-space,96px)}.hd2{z-index:5;color:#fff;background:var(--ink);margin:0 -16px 12px;position:sticky;top:0}.hd2.tone-blue{background:var(--blue)}.hd2.tone-yellow{background:var(--yel);color:var(--ink)}.hd2-row{align-items:center;gap:8px;min-height:64px;padding:8px 16px;display:flex}.hd2-left{width:48px;color:inherit;background:0 0;border-color:currentColor;flex:none;justify-content:center;align-items:center;margin:0;padding:0;font-size:1.75rem;line-height:1;display:inline-flex}.badge{border-radius:var(--r);border:3px solid;flex:none;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}.hd2-text{flex:1;min-width:0}.hd2-l1{margin:0;font-size:1.0625rem;font-weight:800;line-height:1.25}.hd2-l2{color:#c9d2de;margin:0;font-size:.875rem;line-height:1.3}.tone-yellow .hd2-l2{color:var(--ink)}.hd2-right{flex:none;gap:6px;display:flex}.hd2-right button{margin:0}.hd2-right .seg{border-color:currentColor}.hd2-right .seg button{min-width:48px;padding-inline:8px}.tone-yellow .btn-pron{background:var(--ink);color:var(--yel);border-color:var(--ink)}.segs{gap:2px;height:8px;display:flex}.segs span{background:#ffffff40;flex:1}.segs span.on{background:var(--yel)}.segs span.cur{background:#fff}.ft2,.module-tabs{z-index:6;max-width:560px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:3px solid var(--ink);align-items:center;gap:8px;min-height:80px;margin-inline:auto;display:grid;position:fixed;bottom:0;left:0;right:0}.ft2{grid-template-columns:58px minmax(0,1fr) minmax(0,1.35fr)}.ft2 button{overflow-wrap:anywhere;margin:0}.ft2-back{grid-column:1;width:58px;min-height:60px;padding:0;font-size:1.75rem}.ft2-mid{grid-column:2;gap:8px;min-width:0;display:flex}.ft2-main{grid-column:3;gap:8px;min-width:0;display:flex}.ft2-mid button,.ft2-main button{width:100%;min-width:0;padding-inline:8px}.module-tabs{padding:0 0 env(safe-area-inset-bottom,0px);background:var(--ink);grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.module-tabs button{color:#fff;background:var(--ink);border:0;border-radius:0;min-width:0;height:100%;min-height:77px;margin:0;padding:12px 4px;font-weight:800}.module-tabs button[aria-current=page]{color:var(--ink);box-shadow:inset 0 5px var(--yel);background:#fff}.module-tabs button:focus-visible{outline-offset:-5px}.backup-reminder .link{font-size:inherit;margin:0;padding-inline:4px}.home-card{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);margin:8px 0;padding:12px}.settings-segment button[aria-pressed=true]:not(.play):not(.btn-gear):before{content:none}.trial-audio-note{color:var(--muted);margin:8px 16px;font-size:.75rem;font-weight:700;line-height:1.4;display:block}.home-lesson .trial-audio-note{margin-top:6px}.home-current{font-size:calc(14px * var(--fs));font-weight:800}[data-download-focus-handoff]:focus{outline:none}h1.hd2-l1[tabindex="-1"]:focus:not([data-download-focus-handoff]){outline-offset:2px;outline:4px solid #0a64d8}.msg-line{flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0;display:flex}.msg-line>span{overflow-wrap:anywhere;flex:14em;min-width:0}.msg-close{min-width:44px;min-height:44px}.backup-note{border-left:10px solid var(--yel);background:var(--surface);overflow-wrap:anywhere;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:8px 0;padding:8px 12px;font-size:.875rem;display:flex}.backup-note p{flex:14em;min-width:0;margin:0}.backup-note .link{min-height:44px}.hd2 .hd2-row{gap:10px;min-height:64px;padding:8px 12px}.hd2 .hd2-left{border-radius:4px;height:48px}.hd2 .shell-badge{background:var(--yel);width:40px;height:40px;color:var(--ink);border:0;border-radius:4px}.hd2 .hd2-text{line-height:1.3}.hd2 .hd2-l1{font-size:calc(17px * var(--fs));font-weight:900;line-height:1.3}.hd2 .hd2-l2{font-size:calc(14px * var(--fs));overflow-wrap:anywhere;font-weight:500;line-height:1.3}.hd2.tone-blue .hd2-l2{color:#fff}.hd2.tone-yellow .shell-badge{background:var(--ink);color:var(--yel)}.hd2 .hd2-right{gap:8px}.hd2 .hd2-right>button{min-height:48px;font-size:calc(16px * var(--fs));justify-content:center;align-items:center;gap:6px;padding:0 10px;font-weight:800;display:inline-flex}.hd2 .hd2-right svg{flex:none}.hd2 .hd2-right .btn-gear{width:48px;padding:0}.hd2 .hd2-right .dot{border-width:3px}.hd2:not(:has(.hd2-left,.shell-badge)) .hd2-l1{font-size:calc(19px * var(--fs))}.hd2:not(:has(.hd2-left,.shell-badge)) .btn-pron{color:#fff;background:0 0;border-color:#fff}.hd2 .segs{gap:3px;height:auto;padding:0 12px 8px}.hd2 .segs span{background:#fff6;height:8px}.hd2 .segs span.on{background:var(--yel)}.hd2 .segs span.cur{background:#fff}.hd2.tone-yellow .segs span{background:#0f1b2d40}.hd2.tone-yellow .segs span.on{background:var(--ink)}.hd2.tone-yellow .segs span.cur{background:var(--blue)}.ft2[data-back]{padding:12px 16px calc(18px + env(safe-area-inset-bottom,0px));background:var(--bg);grid-template-columns:58px minmax(0,1fr) minmax(0,1fr);gap:10px}.ft2 .ft2-back{border-radius:4px;place-items:center;display:grid}.ft2 .ft2-back:disabled{border-color:var(--muted);background:0 0}.ft2 .ft2-mid button,.ft2 .ft2-main button{min-height:60px;font-size:calc(19px * var(--fs));font-weight:900;line-height:1.3}.ft2 .ft2-main button.primary:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue);letter-spacing:.03em}.ft2[data-secondary=false] .ft2-mid{display:none}.ft2[data-secondary=false] .ft2-main{grid-column:2/-1}.ft2[data-back=false]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ft2[data-back=false] .ft2-mid{grid-column:1}.ft2[data-back=false] .ft2-main{grid-column:2}.ft2[data-back=false][data-secondary=false] .ft2-main{grid-column:1/-1}.shell-pron-scrim{z-index:20;background:#0f1b2d9e;position:fixed;inset:0}.shell-pron-panel{background:var(--bg);max-width:560px;max-height:92dvh;color:var(--ink);border-top:6px solid var(--yel);box-shadow:0 -8px 0 var(--ink);z-index:21;flex-direction:column;margin-inline:auto;display:flex;position:fixed;inset:auto 0 0}.shell-pron-head{background:var(--ink);color:#fff;flex:none;align-items:center;gap:8px;min-height:60px;padding:8px 8px 8px 16px;display:flex}.shell-pron-head h2{font-size:calc(20px * var(--fs));flex:1;margin:0;font-weight:900}.shell-pron-head button{color:#fff;background:0 0;border-color:#fff;min-height:48px;margin:0;padding:0 10px;font-weight:800}.shell-pron-body{overscroll-behavior:contain;min-height:0;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));overflow:auto}.shell-pron-focus{font:800 calc(44px * var(--fs))/1.05 var(--en);overflow-wrap:anywhere;margin:0}.shell-pron-translation{font-weight:800;font-size:calc(20px * var(--fs));color:var(--muted);margin:10px 0 0}.shell-pron-toggle{margin-top:12px}.shell-pron-seg{border:3px solid var(--ink);background:var(--surface);border-radius:4px;display:inline-flex;overflow:hidden}.shell-pron-seg button{min-width:64px;min-height:48px;font-size:calc(17px * var(--fs));background:0 0;border:0;border-radius:0;margin:0;padding:0 14px;font-weight:800}.shell-pron-seg button+button{border-left:3px solid var(--ink)}.shell-pron-seg button[aria-pressed=true]{background:var(--ink);color:#fff}.shell-pron-seg button[aria-pressed=true]:before,.shell-pron-words button[aria-pressed=true]:before{content:none!important}.shell-pron-phon{background:var(--ink);color:#fff;overflow-wrap:anywhere;border-radius:4px;margin:10px 0;padding:12px 14px}.shell-pron-phon .ipa{font:500 calc(34px * var(--fs))/1.3 var(--ipa);letter-spacing:.01em}.shell-pron-phon .stress{color:var(--yel);font-weight:800}.shell-pron-caption{font-size:calc(14px * var(--fs));color:#c9d2de;margin-top:4px}.shell-pron-plays{gap:10px;margin:8px 0;display:flex}.shell-pron-plays .shell-pron-play{min-width:0;min-height:60px;font-size:calc(19px * var(--fs));overflow-wrap:anywhere;flex:1;margin:0;padding:8px;font-weight:900;line-height:1.3}.shell-pron-note{font-size:calc(14px * var(--fs));color:var(--muted);margin:10px 0 6px;font-weight:700}.shell-pron-words{flex-wrap:wrap;gap:8px;margin:6px 0 4px;display:flex}.shell-pron-words button{min-height:48px;font:800 calc(20px * var(--fs))/1 var(--en);overflow-wrap:anywhere;max-width:100%;margin:0;padding:8px 14px}.shell-pron-words button:not([lang]){font-family:var(--zh)}.shell-pron-words button[aria-pressed=true]{background:var(--ink);color:#fff}.shell-pron-panel.shell-pron-docked{z-index:auto;max-width:none;height:100%;max-height:none;box-shadow:none;border:0;margin:0;position:static;inset:auto}.shell-pron-docked .shell-pron-body{flex:1}.shell-pron-links{gap:calc(8px * var(--fs));margin-top:calc(16px * var(--fs));display:grid}.shell-pron-links button{background:var(--yel);color:var(--ink);min-height:calc(48px * var(--fs));white-space:normal}.shell-desktop,.shell-desktop-course{display:contents}@media (width>=1100px){body:has(.shell-desktop[data-desktop=true]){max-width:1180px;padding-bottom:0}body:has(.shell-desktop[data-desktop=true])>#root>main{flex-direction:column;height:100dvh;min-height:0;display:flex}body:has(.shell-desktop[data-desktop=true]) .hd2{flex:none;margin-bottom:0}.shell-desktop[data-desktop=true]{background:var(--bg);flex:1;grid-template-columns:minmax(0,600px) minmax(0,1fr);min-height:0;margin:0 -16px;display:grid}.shell-desktop[data-desktop=true] .shell-desktop-course{border-right:4px solid var(--ink);min-width:0;scroll-padding:72px 0 max(104px, var(--footer-space,104px));flex-direction:column;padding:14px 16px 0;display:flex;position:relative;overflow:auto}.shell-desktop-course>:not(.ft2):not(.module-tabs){flex-shrink:0}.shell-desktop-course :where(section,div):has(.ft2){flex-direction:column;flex:1 0 auto;display:flex}.shell-desktop-course :where(section,div):has(.ft2)>*{flex-shrink:0}.shell-desktop-course :where(section,div):has(.ft2)>span{align-self:flex-start}.shell-desktop-course .ft2,.shell-desktop-course .module-tabs{flex-shrink:0;width:auto;max-width:none;margin:auto -16px 0;position:sticky;bottom:0;left:auto;right:auto}.shell-desktop-course .home-screen{max-width:none;margin-inline:0}.shell-desktop-sidebar{overscroll-behavior:contain;background:var(--bg);min-width:0;overflow:auto}}.sounds-content{overflow-wrap:anywhere}.sounds-main{scroll-padding-bottom:var(--footer-space,112px)}html:has(.sounds-main){scroll-padding-top:150px;scroll-padding-bottom:var(--footer-space,112px)}.sound-intro{border-left:6px solid var(--yel);background:#fff6d1;padding:12px}.sound-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.sound-grid button{flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0;margin:0;padding:12px 8px;display:flex}.sound-grid button[aria-expanded=true]{background:var(--yel);box-shadow:inset 0 0 0 2px var(--ink)}.sounds-main .sound-symbol{font-family:var(--ipa)}.sound-grid .sound-symbol{font-size:1.8rem}.sound-grid .sound-word-phonetic{font-size:1rem}.sound-detail{border:3px solid var(--ink);border-top:8px solid var(--yel);background:var(--surface);padding:14px;scroll-margin-top:150px}.sound-detail[hidden]{display:none}.sound-detail h2{margin-top:0;scroll-margin-top:150px}.sound-detail h3{margin-bottom:6px}.sound-word{border-bottom:1px solid var(--muted);padding-bottom:10px}.sound-word p{margin-bottom:6px}.sound-play{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px;display:flex}.sound-play button{overflow-wrap:anywhere;min-width:0;max-width:100%;margin:0}.sound-play small{color:var(--muted);font-size:.875rem}.sound-preview{background:#fff6d1;padding:2px 6px}.sounds-main .module-tabs button:disabled{color:#c9d2de}@media (width<=360px){.sounds-main .hd2-row{flex-wrap:wrap}.sounds-main .hd2-right{margin-left:auto}.sounds-main .shell-pron-seg button{min-width:48px;padding-inline:8px}}@media (width>=1100px){.sounds-content{padding-bottom:24px}.sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.phonics-offline{padding:calc(8px * var(--fs)) calc(16px * var(--fs));font-size:calc(14px * var(--fs));align-items:center;gap:calc(8px * var(--fs));flex-wrap:wrap;display:flex}.phonics-offline p{margin:0}.symbol-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.symbol-grid article{border:2px solid var(--ink);background:var(--surface);min-width:0;padding:12px}.symbol-grid h3{margin-top:0;font-size:1.8rem}.symbol-word{font-size:1.5rem}.symbol-word strong{background:var(--yel);color:var(--ink);font-weight:800}.symbol-grid a{padding-block:10px;display:inline-block}.notation-list>div{border-bottom:1px solid var(--muted);padding-block:10px}.notation-list dt{font-weight:700}.notation-list dd{margin-left:0}.notation-list p{margin-block:6px}.symbols-practice{border-top:6px solid var(--yel);margin-top:24px}.symbols-practice h2{scroll-margin-top:160px}.practice-options{flex-wrap:wrap;gap:10px;display:flex}.practice-options button{overflow-wrap:anywhere;min-width:64px;max-width:100%;min-height:48px;margin:0;font-size:1.5rem}.practice-options button.answer-correct{background:var(--yel);color:var(--ink);border-style:solid}.practice-options button.answer-chosen{background:var(--surface);color:var(--ink);border-style:dashed}.answer-label{font-size:1rem;font-weight:700;display:block}.practice-feedback{min-height:2em}@media (width<=600px){.symbol-grid{grid-template-columns:minmax(0,1fr)}}.elective-sections{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.elective-sections button{text-align:left;overflow-wrap:anywhere;min-width:0;margin:0}.elective-sections small{margin-top:8px;display:block}.elective-rules{gap:16px;margin-block:16px;display:grid}.elective-rules article{border:2px solid var(--ink);background:var(--surface);min-width:0;padding:14px}.elective-rules h3{border-left:8px solid var(--yel);margin-top:0;padding-left:10px}.elective-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.elective-content h2{scroll-margin-block:160px}.elective-content .symbol-word small{font-size:1rem}@media (width<=600px){.elective-sections,.elective-examples{grid-template-columns:minmax(0,1fr)}}.option-with-sound{align-items:center;gap:4px;display:inline-flex}.option-with-sound .sound-play{margin:0}.practice-options .option-with-sound .sound-play button{min-width:48px;min-height:48px;font-size:1rem}.recorder-screen{min-width:0}.recorder-sentence{background:var(--ink);color:#fff;border-radius:4px;margin-top:12px;padding:14px}.recorder-english{font:800 1.875rem/1.25 var(--en);overflow-wrap:anywhere}.recorder-english button{font:inherit;color:inherit;border:0;border-bottom:3px dotted var(--yel);background:0 0;border-radius:0;min-width:0;min-height:44px;margin:0;padding:0 2px}.recorder-english button:focus-visible{outline-color:var(--yel)}.recorder-translation{color:#e7ecf2;margin:2px 0 0;font-size:1.1875rem;font-weight:700}.recorder-steps{margin:0;padding:0;list-style:none}.recorder-step{border:3px solid var(--ink);background:var(--surface);border-radius:4px;margin-top:10px;padding:10px 12px}.recorder-step--off{border-style:dashed;border-color:var(--muted);color:var(--muted);background:0 0}.recorder-heading{align-items:center;gap:10px;margin:0;font-size:1.1875rem;font-weight:900;line-height:1.4;display:flex}.recorder-number{background:var(--ink);color:#fff;width:36px;height:36px;font:800 1.125rem/1 var(--en);border-radius:4px;flex:none;place-items:center;display:grid}.recorder-step--off .recorder-number{border:3px dashed var(--muted);color:var(--muted);background:0 0}.recorder-step p{margin:6px 0 0;font-size:1rem}.recorder-screen button{font-weight:900}.recorder-listen{gap:8px;margin-top:8px;display:flex}.recorder-listen button{flex:1;min-width:0;margin:0;padding:6px 8px}.recorder-screen .recorder-record{border:3px solid var(--ink);background:var(--blue);color:#fff;width:100%;min-height:72px;font:900 1.3125rem/1.3 var(--zh);border-radius:4px;justify-content:center;align-items:center;gap:12px;margin:10px 0 0;display:flex}.recorder-record svg{flex:none}.recorder-screen .recorder-record--stop{background:var(--yel);color:var(--ink)}.recorder-screen .recorder-record:disabled{color:var(--muted);border:3px dashed var(--muted);background:0 0}.recorder-note,.recorder-privacy{color:var(--muted)}.recorder-privacy{margin:12px 0;font-size:.9375rem}.recorder-alert{border:3px solid var(--ink);border-left:10px solid var(--yel);background:var(--surface);color:var(--ink);border-radius:4px;margin-top:10px;padding:10px 12px}.recorder-alert p{margin:0;font-size:1.0625rem}.recorder-alert button{width:100%;margin:10px 0 0}.recorder-timing{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.recorder-timing strong{font-family:var(--en);font-variant-numeric:tabular-nums}.recorder-tag{background:var(--yel);color:var(--ink);border-radius:4px;align-items:center;gap:8px;padding:2px 10px;font-weight:900;display:inline-flex}.recorder-tag i{background:var(--ink);border-radius:50%;width:12px;height:12px}.recorder-meter{align-items:flex-end;gap:4px;height:32px;margin-top:8px;display:flex}.recorder-meter i{background:#e9edf0;border-radius:2px;width:12px;min-width:0}.recorder-meter i.recorder-meter--on{background:var(--blue)}.recorder-compare{gap:8px;margin-top:8px;display:grid}.recorder-track{border:3px solid var(--ink);background:var(--surface);border-radius:4px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;display:grid}.recorder-track b{font-weight:900;display:block}.recorder-track button{min-width:56px;max-width:160px;margin:0;padding:0 10px}.recorder-wave{align-items:center;gap:3px;height:30px;margin-top:4px;display:flex}.recorder-wave i{background:var(--ink);border-radius:2px;width:5px;min-width:1px}.recorder-wave--mine i{background:var(--blue)}.recorder-screen .recorder-sequence{justify-content:center;align-items:center;gap:8px;width:100%;margin:8px 0 0;padding:8px;display:flex}.recorder-sequence svg{flex:none}.recorder-redo{width:100%}.recorder-actions{padding:12px 0 max(12px, env(safe-area-inset-bottom));border-top:3px solid var(--ink);background:var(--bg);gap:10px;margin-top:12px;display:flex;position:sticky;bottom:0}.recorder-actions button{flex:1;min-width:0;min-height:60px;margin:0}.recorder-screen button:not(:disabled):active{transform:translate(1px,1px)}.recorder-screen button:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.recorder-screen .recorder-english button:focus-visible{outline-color:var(--yel)}.download-step{min-width:0}.download-step__label{background:var(--yel);border-radius:var(--r);padding:2px 10px;font-size:.875rem;font-weight:900;display:inline-block}.download-step .download-step__title{font:900 2rem/1.2 var(--zh);margin:8px 0 4px}.download-step__meta{color:var(--muted);overflow-wrap:anywhere;margin:0;font-size:1rem}.download-step__meta-line{line-height:1.6;display:block}.download-step__meta-count{display:inline-block}.download-step__card{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);grid-template-columns:64px minmax(0,1fr);gap:14px;margin-top:14px;padding:14px;display:grid}.download-step__icon{border-radius:var(--r);background:var(--ink);width:64px;height:64px;color:var(--yel);place-items:center;display:grid}.download-step__card--blue .download-step__icon{background:var(--blue);color:#fff}.download-step__card--yellow .download-step__icon{background:var(--yel);color:var(--ink)}.download-step__card--green{border-color:var(--ok);background:var(--okbg)}.download-step__card--green .download-step__icon{background:var(--ok);color:#fff}.download-step__card h2,.download-step__card h3{font:900 1.375rem/1.35 var(--zh);overflow-wrap:anywhere;margin:0 0 2px}.download-step__card p{overflow-wrap:anywhere;margin:0;font-size:1.0625rem;line-height:1.55}.download-step__progress{border:3px solid var(--ink);border-radius:var(--r);background:#fff;height:18px;margin-top:10px;overflow:hidden}.download-step__progress span{background:var(--blue);height:100%;display:block}.download-step__percent{font:800 .9375rem/1.3 var(--zh);margin-top:4px}.download-step__card .download-step__detail{color:var(--muted);margin-top:8px;font-size:.875rem}.download-step__checklist{border-top:3px solid var(--ink);margin:12px 0 0;padding:0;list-style:none}.download-step__item{border-bottom:3px solid var(--ink);grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:6px 0;font-size:1.125rem;font-weight:800;display:grid}.download-step__mark{border:3px dashed var(--muted);border-radius:var(--r);width:32px;height:32px;color:var(--muted);font:900 .9375rem/1 var(--zh);place-items:center;display:grid}.download-step__item--done .download-step__mark{background:var(--ok);border:3px solid var(--ok);color:#fff}.download-step__item--working .download-step__mark{background:var(--blue);border:3px solid var(--blue);color:#fff}.download-step__item--problem .download-step__mark{background:var(--yel);border:3px solid var(--ink);color:var(--ink)}.download-step__item-state{text-align:right;max-width:7em;color:var(--muted);font-size:.9375rem;font-weight:500}.download-step__item--problem .download-step__item-state{color:var(--ink);font-weight:800}.download-step__note{color:var(--muted);margin:10px 0 0;font-size:.9375rem}@media (width<=340px){.download-step__card{gap:10px;padding:10px}.download-step__item{gap:6px}}.download-step__phrase{white-space:nowrap;display:inline}.picture-choice{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0;display:grid}.picture-choice .picture-choice__option{box-sizing:border-box;min-height:190px;min-height:calc(190px * var(--fs,1));border:3px solid var(--ink,#0f1b2d);border-radius:var(--r,4px);min-width:48px;color:var(--ink,#0f1b2d);font:800 1rem/1.3 var(--zh,system-ui, sans-serif);cursor:pointer;overflow-wrap:anywhere;background:#fff;flex-direction:column;justify-content:space-between;align-items:center;gap:4px;margin:0;padding:6px 4px 8px;display:flex;position:relative}.picture-choice__image{box-sizing:border-box;aspect-ratio:1;flex:none;justify-content:center;align-items:center;width:100%;max-width:100%;height:auto;display:flex}.picture-choice__drawing,.picture-choice__drawing>svg{width:100%;height:100%;display:block}.picture-choice__image--failed{border:3px dashed var(--hold,#7d8da8);color:var(--ink,#0f1b2d);text-align:center;background:#fff;padding:8px}.picture-choice__name{text-align:center;max-width:100%}.picture-choice__feedback{border-radius:var(--r,4px);justify-content:center;align-items:center;gap:4px;min-height:1.4em;padding:0 6px;font-size:.875rem;display:inline-flex;position:absolute;top:-12px;right:-3px}.picture-choice__check{flex:none;width:20px;height:20px}.picture-choice .picture-choice__option--picked{border-color:var(--blue,#0a4da8)}.picture-choice .picture-choice__option--retry{border-style:dashed;border-color:var(--ink,#0f1b2d);background:#fff}.picture-choice__option--retry .picture-choice__feedback{background:var(--yel,#ffc800);color:var(--ink,#0f1b2d);padding-inline:6px}.picture-choice .picture-choice__option--correct{border-color:var(--ok,#0e6b43);background:var(--okbg,#e4f2ea);box-shadow:0 0 0 3px var(--ok,#0e6b43);border-style:solid}.picture-choice__option--correct .picture-choice__feedback{color:#fff;background:var(--ok,#0e6b43)}.picture-choice .picture-choice__option:disabled{cursor:not-allowed;color:var(--ink,#0f1b2d)}.picture-choice .picture-choice__option:focus-visible{outline:4px solid var(--blue,#0a4da8);outline-offset:3px}.picture-choice__feedback:empty{display:none}.picture-choice__image--failed{min-height:120px}[data-tone=dark]{background:var(--ink,#0f1b2d);color:#fff}[data-tone=dark] h2{color:#fff}.qa-picture-sheet{margin:8px 0 18px}.qa-picture-sheet__art{border:3px solid var(--ink,#0f1b2d);background:#fff;width:min(100%,320px);margin-inline:auto}.qa-picture-sheet__art svg{width:100%;height:auto;display:block}.qa-picture-sheet figcaption{text-align:center;margin-top:4px;font-weight:800}[data-tone=dark] .qa-picture-sheet figcaption{color:#fff}.practice-page,.practice-order{min-width:0}.practice-label{border-radius:var(--r);background:var(--yel);color:var(--ink);font:900 .875rem/1.6 var(--zh);margin:0;padding:2px 10px;display:inline-block}.practice-prompt{font:900 1.75rem/1.35 var(--zh);color:var(--ink);margin:10px 0 6px}.practice-listen{flex-wrap:wrap;gap:8px;display:flex}.practice-listen .play{min-width:0;min-height:48px;font:900 1rem/1.4 var(--zh);border:3px solid var(--ink);flex:140px;margin:0;padding:6px 8px}.practice-resume{color:var(--muted);font:700 .9375rem/1.5 var(--zh);flex:100%;margin:6px 0 0}.practice-count{color:var(--muted);font:500 .875rem/1.4 var(--zh);margin:6px 0 0}.practice-drag-tip{max-width:100%;color:var(--muted);font:500 .8125rem/1.45 var(--zh);overflow-wrap:break-word;text-wrap:pretty;margin:4px 0 0}.practice-drag-tip__line{display:block}.practice-order .practice-board{border:4px solid var(--ink);border-radius:var(--r);background:var(--ink);flex-wrap:wrap;align-items:stretch;gap:10px 8px;margin:12px 0 0;padding:12px;display:flex}.practice-order .practice-board.ok{border-color:var(--ok);box-shadow:0 0 0 4px var(--okbg);outline:0}.practice-slot-wrap{align-items:stretch;gap:2px;max-width:100%;display:inline-flex}.practice-order .practice-slot{min-width:calc(84px * var(--fs));max-width:100%;min-height:calc(64px * var(--fs) + 14px);border:3px dashed var(--hold);border-radius:var(--r);color:#fff;font:800 1.625rem/1 var(--en);overflow-wrap:anywhere;touch-action:manipulation;background:0 0;flex:0 auto;margin:0;padding:6px}.practice-order .practice-slot .no{font:800 .875rem/1 var(--en);color:#c9d2de;position:absolute;top:4px;left:8px}.practice-order .practice-slot.sel{border:4px solid var(--yel);box-shadow:0 0 0 3px #ffc80059}.practice-order .practice-slot.over{border:4px solid var(--yel);background:#ffc8002e}.practice-order .practice-slot.filled{min-width:0;min-height:calc(64px * var(--fs) + 8px);background:var(--yel);border:3px solid var(--yel);color:var(--ink);touch-action:none;padding:0 14px}.practice-order .practice-slot.filled .no{display:none}.practice-order .practice-slot.wrong{border:3px dashed var(--yel);color:var(--ink);background:#fff}.practice-order .practice-slot.wrong:after{content:none}.practice-change{border-radius:var(--r);background:var(--yel);color:var(--ink);font:900 .875rem/1.3 var(--zh);padding:0 6px;position:absolute;top:-12px;right:-3px}.practice-order .practice-slot.right{background:var(--ok);color:#fff;border:3px solid var(--ok);min-height:calc(52px * var(--fs));gap:6px;font-size:1.5rem}.practice-check{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px}.practice-punct{color:#fff;font:800 2.125rem/1 var(--en);align-self:center;padding:0 4px}.practice-fixed{min-height:calc(64px * var(--fs) + 8px);border-radius:var(--r);color:#fff;max-width:100%;font:800 1.625rem/1 var(--en);overflow-wrap:anywhere;background:0 0;border:3px solid #fff;justify-content:center;align-items:center;padding:0 14px;display:inline-flex}.practice-order--swap .practice-slot:not(.filled){min-width:calc(120px * var(--fs))}.practice-order .practice-bank{flex-wrap:wrap;gap:10px;min-height:80px;margin:14px 0 0;padding:0;display:flex}.practice-order .practice-tile{min-width:48px;max-width:100%;min-height:calc(64px * var(--fs));border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);color:var(--ink);font:800 1.625rem/1 var(--en);overflow-wrap:anywhere;touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0 14px;display:inline-flex}.practice-order .practice-tile.gone{color:#5b6676;pointer-events:none;background:0 0;border:3px dashed #5f6b7d}.practice-order .practice-tile--hint,.practice-order .practice-slot--hint{outline:4px solid var(--yel);outline-offset:2px;box-shadow:0 0 0 7px var(--ink)}.practice-feedback{border:0;border-left:10px solid var(--yel);border-radius:var(--r);background:var(--surface);color:var(--ink);font:500 1.125rem/1.6 var(--zh);margin:14px 0 0;padding:12px 14px}.practice-feedback strong{font-weight:900}.practice-feedback--ok{border-left-color:var(--ok);background:var(--okbg)}.practice-result-sound{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}.practice-live:empty{display:none}.practice-live{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:0;position:absolute;overflow:hidden}.practice-order .practice-done{border:3px solid var(--ok);border-radius:var(--r);background:var(--okbg);margin:14px 0 0;padding:14px}.practice-success{background:var(--ok);color:#fff;border-radius:var(--r);font:900 .875rem/1.5 var(--zh);padding:2px 8px;display:inline-block}.practice-translation{font:900 1.375rem/1.4 var(--zh);margin:6px 0 4px}.practice-note{color:var(--muted);margin:6px 0;font-size:.875rem}.practice-answer-words{flex-wrap:wrap;gap:8px;margin:10px 0;display:flex}.practice-answer-words button{max-width:100%;font:800 1.25rem/1.5 var(--en);margin:0;padding:4px 8px}.practice-answer-words .ipa{display:block}.practice-action{min-height:60px;font:900 1.125rem/1.4 var(--zh);margin:0}.practice-action:disabled{border:3px dashed var(--muted);color:var(--muted);background:0 0}.practice-actions{gap:8px;margin-top:16px;display:flex}.practice-actions>button{flex:1}.practice-drag{font:800 1.625rem/1 var(--en);min-height:calc(64px * var(--fs))}.practice-header{border-bottom:1px solid var(--hold);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;width:100%;min-width:0;padding-bottom:8px;display:flex}.practice-header .practice-label{flex:0 auto;min-width:0;max-width:100%}.practice-progress{min-width:0;color:var(--muted);font:700 .875rem/1.6 var(--zh);white-space:nowrap;flex:0 auto;margin:0 0 0 auto}.practice-feedback-title{color:var(--warn-ink);margin:0 0 4px;display:block}.practice-feedback>p{margin:0}.practice-confirm{font:700 1.125rem/1.6 var(--zh);margin:0}.talk-step,.done-step,.basics-lesson{color:var(--ink);font:500 calc(18px * var(--fs))/1.6 var(--zh);overflow-wrap:anywhere;min-width:0;padding-block:2px 14px}.talk-step button,.done-step button,.basics-lesson button{margin:0}.talk-step svg,.done-step svg{vertical-align:middle;flex:none}.talk-step__labels{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.talk-step__label,.basics-lesson__label{border-radius:var(--r);background:var(--yel);font-size:calc(14px * var(--fs));padding:2px 10px;font-weight:900;display:inline-block}.talk-step .talk-step__title,.basics-lesson .basics-lesson__title{font:900 calc(32px * var(--fs))/1.25 var(--zh);margin:8px 0 6px}.basics-lesson .basics-lesson__title{font-family:var(--en)}.talk-step .talk-step__pattern{border-radius:var(--r);background:var(--ink);color:var(--yel);font:800 calc(30px * var(--fs))/1.2 var(--en);text-wrap:balance;margin:8px 0 0;padding:8px 14px 10px}.talk-step__explanation{border-left:10px solid var(--blue);background:var(--surface);border-radius:var(--r);font-size:calc(18px * var(--fs));margin-top:12px;padding:12px 14px;line-height:1.75}.talk-step mark,.basics-lesson mark{background:var(--yel);color:var(--ink);border-radius:var(--r);padding:0 4px}.talk-step .talk-step__button,.done-step .done-step__button{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);min-height:48px;color:var(--ink);font:900 calc(16px * var(--fs))/1.4 var(--zh);padding:6px 14px}.talk-step .talk-step__listen{justify-content:center;align-items:center;gap:8px;width:100%;margin-top:10px;display:flex}.talk-step .talk-step__subtitle,.done-step .done-step__subtitle,.basics-lesson .basics-lesson__subtitle{font:900 calc(22px * var(--fs))/1.35 var(--zh);margin:16px 0 0}.talk-step__examples{margin:0;padding:0;list-style:none}.talk-step__example{border-bottom:3px solid var(--ink);padding:10px 0}.talk-step__english{font:800 calc(24px * var(--fs))/1.3 var(--en)}.talk-step .talk-step__word{min-width:0;min-height:32px;color:inherit;font:inherit;background:0 0;border:0;border-radius:0;padding:0}.talk-step__translation{font:700 calc(17px * var(--fs))/1.4 var(--zh);color:var(--muted);display:block}.talk-step__plays{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.talk-step__plays .play{min-height:48px;font:900 calc(15px * var(--fs))/1.4 var(--zh);padding:0 10px}.talk-step .talk-step__basics{text-align:left;border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);width:100%;min-height:60px;font:900 calc(18px * var(--fs))/1.5 var(--zh);align-items:center;gap:10px;margin-top:14px;padding:6px 14px;display:flex}.talk-step__basics>span{flex:1}.talk-step__alert,.done-step__alert{border:3px solid var(--ink);border-left:10px solid var(--yel);border-radius:var(--r);background:var(--surface);font-size:calc(16px * var(--fs));margin:12px 0 0;padding:12px 14px}.talk-step__alert .talk-step__button{margin-top:8px}.done-step__alert{margin:8px 0 0}.done-step__alert p{margin:0}.done-step__actions{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.done-step .done-step__button--primary{background:var(--blue);color:#fff;border-color:var(--blue)}.done-step__confirm{border:3px solid var(--ok);background:var(--okbg);border-radius:var(--r);animation:done-confirm-in var(--dur) ease-out both;margin-top:8px;padding:16px}@keyframes done-confirm-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}html[data-motion=reduce] .done-step__confirm{animation:none}@media (prefers-reduced-motion:reduce){html:not([data-motion=full]) .done-step__confirm{animation:none}}.done-step__hero h2{font:900 calc(32px * var(--fs))/1.2 var(--zh);color:var(--ok);align-items:center;gap:10px;margin:0;display:flex}.done-step__hero p{color:var(--muted);margin:6px 0 0}.done-step__lesson-meta{font:800 calc(20px * var(--fs))/1.35 var(--zh);color:var(--ink);flex-wrap:wrap;align-items:center;gap:8px;display:flex}.done-step__saved{border-radius:var(--r);border:2px solid var(--ok);background:var(--surface);color:var(--ok);font-size:calc(14px * var(--fs));padding:2px 8px;font-weight:900;display:inline-block}.done-step__pattern-line{margin:4px 0 0;font-weight:700}.done-step__pattern-line [lang=en]{font-family:var(--en);font-weight:800}.done-step__hero--unsaved{background:var(--surface);border-color:var(--ink)}.done-step__hero--unsaved h2{color:var(--ink)}.done-step__hero--pending{background:var(--surface);border-color:var(--ink)}.done-step__hero--pending h2{color:var(--ink)}.done-step .done-step__button--secondary{color:var(--muted);border-style:dashed;margin-top:8px;font-weight:800}.done-step__summary{border-top:3px solid var(--ink);margin:12px 0 0;padding:0;list-style:none}.done-step__summary li{border-bottom:3px solid var(--ink);grid-template-columns:36px auto minmax(0,1fr);align-items:center;gap:10px;min-height:52px;padding-block:6px;font-weight:800;display:grid}.done-step__mark{border-radius:var(--r);background:var(--ok);color:#fff;place-items:center;width:32px;height:32px;display:grid}.done-step__summary--skipped .done-step__mark{background:var(--yel);color:var(--ink);border:3px solid var(--ink);font:900 calc(16px * var(--fs))/1 var(--zh)}.done-step__detail{font:500 calc(15px * var(--fs))/1.5 var(--zh);color:var(--muted);text-align:right}.done-step .done-step__mic{grid-column:2/-1;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin:0;display:grid}.done-step .done-step__subtitle{margin-bottom:4px}.done-step__words{flex-wrap:wrap;gap:8px;display:flex}.done-step__words button{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);min-height:48px;font:800 calc(20px * var(--fs))/1 var(--en);padding:0 14px}.done-step__word-detail,.done-step__review{border:3px solid var(--ink);border-left:10px solid var(--blue);border-radius:var(--r);background:var(--surface);margin-top:16px;padding:12px 14px}.done-step__review-title{font-size:inherit;margin:0;font-weight:900}.done-step__review p{margin:4px 0}.done-step__review .done-step__button{margin-top:8px}.done-step__word-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.done-step__word-heading strong{font:800 calc(30px * var(--fs))/1.2 var(--en)}.done-step__word-detail p{margin:6px 0}.done-step__phonetic{background:var(--ink);color:#fff;border-radius:var(--r);padding:8px 12px}.done-step__phonetic [lang=en]{font-family:var(--ipa)}.done-step__backup{color:var(--muted);font-size:calc(14px * var(--fs));margin:14px 0 0}.done-step .done-step__backup-link{color:var(--blue);font:inherit;background:0 0;border:0;padding:0 4px;text-decoration:underline}.basics-lesson{flex-direction:column;min-height:650px;display:flex}.basics-lesson__content{flex:1}.basics-lesson .basics-lesson__intro{color:var(--muted);margin:0}.basics-lesson .basics-lesson__options .basics-lesson__option[aria-pressed=true]:before{content:none}.basics-lesson__rule{border-left:10px solid var(--blue);background:var(--surface);border-radius:var(--r);padding:12px 14px}.basics-lesson .basics-lesson__example{font:800 calc(26px * var(--fs))/1.35 var(--en);margin:8px 0}.basics-lesson__example mark{padding:0 6px}.basics-lesson .basics-lesson__subtitle{margin:14px 0 8px}.basics-lesson .basics-lesson__question{margin:0}.basics-lesson__options{gap:8px;margin-top:8px;display:flex}.basics-lesson .basics-lesson__option{border:3px solid var(--ink);background:var(--surface);min-width:0;min-height:64px;font:800 calc(26px * var(--fs))/1.2 var(--en);box-shadow:0 3px 0 var(--ink);flex:1}.basics-lesson .basics-lesson__options .basics-lesson__option--retry[aria-pressed=true]{background:var(--yel);color:var(--ink);border-style:dashed}.basics-lesson .basics-lesson__options .basics-lesson__option--correct[aria-pressed=true]{background:var(--ok);color:#fff;border-color:var(--ok)}.basics-lesson__feedback,.basics-lesson__audio-note{border:3px solid var(--ink);border-left:10px solid var(--yel);border-radius:var(--r);background:var(--surface);margin-top:10px;padding:10px 12px}.basics-lesson__feedback--correct{border-color:var(--ok);background:var(--okbg)}.basics-lesson__audio-note{font-size:calc(15px * var(--fs))}.basics-lesson__audio-note button{margin-top:6px;display:block}.basics-lesson__footer{border-top:3px solid var(--ink);background:var(--bg);z-index:1;gap:8px;margin:32px -16px -14px;padding:12px 16px;display:flex;position:sticky;bottom:0}.basics-lesson__footer button{min-width:0;min-height:60px;font-weight:900;font-size:calc(19px * var(--fs));flex:1}.basics-lesson .basics-lesson__next{background:var(--blue);color:#fff;border-color:var(--blue)}.basics-lesson .basics-lesson__footer button:disabled{color:var(--muted);border:3px dashed var(--muted);background:0 0}.foundation__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0;display:grid}.foundation__cards--two{grid-template-columns:repeat(2,minmax(0,1fr))}.foundation__cards figure{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);text-align:center;margin:0;padding:8px}.foundation__cards figcaption{font:800 calc(18px * var(--fs))/1.2 var(--en);margin-top:4px}.foundation__cards figcaption strong{background:var(--yel);border-radius:4px;padding:0 4px}.foundation__cards small{color:var(--muted);font:700 calc(13px * var(--fs))/1.3 var(--zh);margin-top:4px;display:block}.foundation__pics{justify-content:center;gap:4px;display:flex}.foundation__pic{width:64px;display:block}.foundation__pic svg{width:100%;height:auto;display:block}.foundation__sounds{font:800 calc(18px * var(--fs))/1.2 var(--en);gap:8px;margin:8px 0;display:flex}.foundation__sounds span{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);text-align:center;overflow-wrap:anywhere;flex-direction:column;flex:1;align-items:center;padding:8px 4px;display:flex}.foundation__sounds b{color:var(--blue);font-size:calc(22px * var(--fs))}.foundation__examples{flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none;display:flex}.foundation__examples li{border:2px solid var(--ink);border-radius:var(--r);font:700 calc(17px * var(--fs))/1.4 var(--en);background:var(--surface);padding:4px 10px}.foundation__question{margin:10px 0 14px}.foundation__listen{flex-wrap:wrap;gap:8px;margin:8px 0;display:flex}.foundation__question .foundation__pics{justify-content:flex-start}.foundation__blank{min-width:3ch;display:inline-block}.foundation .basics-lesson__rule p{margin:0 0 8px}.foundation .basics-lesson__rule p:last-child{margin:0}.foundation__optional{color:var(--muted);font-size:calc(14px * var(--fs));margin:0 0 6px}.foundation-scene{max-width:100%;margin:12px 0}.foundation-scene__badge{background:var(--yel);border:3px solid var(--ink);border-radius:var(--r);font:800 calc(14px * var(--fs))/1.3 var(--zh);margin:0 0 8px;padding:4px 8px;display:inline-block}.foundation-scene__motion{max-width:100%;position:relative}.foundation-scene__shot,.foundation-scene__frame svg{border:3px solid var(--ink);border-radius:var(--r);background:var(--bg);width:100%;height:auto;display:block}.foundation-scene__shot text,.foundation-scene__frame text{font-family:var(--en)}.foundation-scene__static{grid-template-columns:minmax(0,1fr);gap:8px;display:none}.foundation-scene__frame{min-width:0;margin:0}.foundation-scene__steps{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.foundation-scene__steps li{white-space:normal}.foundation-scene__later{background:var(--yel);border:2px solid var(--ink);border-radius:var(--r);font:800 calc(13px * var(--fs))/1.3 var(--zh);margin:0;padding:2px 6px;position:absolute;bottom:8px;right:8px}.foundation-scene__later--static{justify-self:end;position:static}.foundation-scene__controls{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.foundation-scene__pause,.foundation-scene__replay{width:100%;margin:0;display:block}button.foundation-scene__pause[aria-pressed=true]:not(.play):not(.btn-gear):before{content:none}.foundation-scene--paused .f3-frame,.foundation-scene--paused .f4-frame,.foundation-scene--paused .f4-filling,.foundation-scene--paused .f4-dot,.foundation-scene--paused .foundation-scene__later{animation-play-state:paused}.f3-frame,.f4-frame{opacity:0}.f3-frame-1,.f4-frame-1{animation:12s linear forwards scene-1}.f3-frame-2,.f4-frame-2{animation:12s linear forwards scene-2}.f3-frame-3,.f4-frame-3{animation:12s linear forwards scene-3}.f3-frame-4,.f4-frame-4{animation:12s linear forwards scene-4}.foundation-scene__later:not(.foundation-scene__later--static){opacity:0;animation:12s linear forwards scene-4}.f4-filling{transform-box:fill-box;transform-origin:50%;animation:12s linear forwards f4-pop}.f4-dot{animation:12s linear forwards f4-flash}@keyframes scene-1{0%,20%{opacity:1}26%,to{opacity:0}}@keyframes scene-2{0%,22%{opacity:0}28%,44%{opacity:1}50%,to{opacity:0}}@keyframes scene-3{0%,46%{opacity:0}52%,68%{opacity:1}74%,to{opacity:0}}@keyframes scene-4{0%,70%{opacity:0}76%,to{opacity:1}}@keyframes f4-pop{0%{opacity:0;transform:translateY(8px)}10%,24%{opacity:1;transform:translateY(0)}}@keyframes f4-flash{0%,74%{opacity:0}78%,86%,94%,to{opacity:1}82%,90%{opacity:.2}}html[data-motion=reduce] .foundation-scene__motion{display:none}html[data-motion=reduce] .foundation-scene__static{display:grid}html[data-motion=reduce] .foundation-scene__pause{display:none}html[data-motion=full] .foundation-scene__motion{display:block}html[data-motion=full] .foundation-scene__static{display:none}@media (prefers-reduced-motion:reduce){html:not([data-motion=full]) .foundation-scene__motion{display:none}html:not([data-motion=full]) .foundation-scene__static{display:grid}html:not([data-motion=full]) .f3-frame,html:not([data-motion=full]) .f4-frame,html:not([data-motion=full]) .f4-filling,html:not([data-motion=full]) .f4-dot,html:not([data-motion=full]) .foundation-scene__later{animation:none}html:not([data-motion=full]) .foundation-scene__pause{display:none}}.review{flex-direction:column;gap:8px;display:flex}.review h2,.review-hint,.review-progress,.review-en,.review-zh{margin:0}.review-hint{color:var(--muted)}.review-progress{font-size:calc(14px * var(--fs));font-weight:700}.review-sentence{flex-direction:column;gap:4px;display:flex}.review .big{overflow-wrap:anywhere}.review-zh{font-weight:700}.review .review-button{width:100%;margin:4px 0 0}.settings-screen{min-width:0}.settings-title{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;display:flex}.settings-title h2{font:900 2rem/1.3 var(--zh);margin:0}.settings-backup-banner{border:3px solid var(--yel);border-radius:var(--r);background:#fff6d1;border-left-width:10px;margin:0 0 12px;padding:8px 12px;font-size:.9375rem;font-weight:800;line-height:1.45}.settings-card{border:3px solid var(--ink);background:var(--surface);border-radius:4px;margin:0 0 14px;padding:14px}.settings-card h3{margin:0 0 4px;font-size:1.25rem;font-weight:900}.settings-card p{margin:4px 0 8px}.settings-muted,.settings-detail,.settings-version{color:var(--muted)}.settings-detail{font-size:.9375rem}.settings-segment{border:3px solid var(--ink);background:var(--surface);border-radius:4px;max-width:100%;display:inline-flex;overflow:hidden}.settings-segment button{background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;gap:4px;min-width:64px;min-height:48px;margin:0;padding:0 12px;font-size:1.0625rem;font-weight:800;display:inline-flex}.settings-segment button+button{border-left:3px solid var(--ink)}.settings-segment button[aria-pressed=true]{background:var(--ink);color:#fff}.settings-check{flex:none}.settings-segment--motion{display:flex}.settings-segment--motion button{flex-wrap:wrap;flex:1;min-width:0;padding:6px 4px}.settings-card .settings-sample{border:3px dashed var(--muted);overflow-wrap:anywhere;border-radius:4px;margin:8px 0 0;padding:8px 12px}.settings-sample strong{font-weight:800}.settings-line{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;display:flex}.settings-speak{cursor:pointer}.settings-toggle{appearance:none;border:3px solid var(--ink);background:var(--surface);cursor:pointer;border-radius:24px;flex:none;width:76px;height:48px;margin:0;padding:4px}.settings-toggle:before{content:"";background:var(--ink);border-radius:50%;width:34px;height:34px;display:block}.settings-toggle:checked{background:var(--blue);border-color:var(--blue)}.settings-toggle:checked:before{background:#fff;transform:translate(28px)}.settings-screen input:focus-visible,.settings-screen button:focus-visible,.settings-tools button:focus-visible,.settings-sheet button:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.settings-segment button:focus-visible{outline-offset:-5px;outline-color:var(--yel)}.settings-card .settings-status{background:var(--yel);color:var(--ink);overflow-wrap:anywhere;border-radius:4px;align-items:center;margin:8px 0;padding:8px 12px;font-weight:800;display:flex}.settings-card .settings-status--ok{background:var(--okbg);color:var(--ok);border:2px solid var(--ok)}.settings-card .settings-source{border-left:10px solid var(--hold);overflow-wrap:anywhere;background:#e9edf0;border-radius:4px;margin-top:8px;padding:10px 12px;font-size:1rem;line-height:1.6}.settings-version{margin:0 0 16px;font-size:.9375rem}.settings-tools{min-width:0}.settings-tools button{font-weight:900}.settings-tool-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.settings-tool-actions button{justify-content:center;align-items:center;gap:8px;margin:0;padding:8px 10px;display:inline-flex}.settings-tool-actions svg{flex:none}.settings-tools>button{width:100%;margin:10px 0 0}.settings-backup-confirm,.settings-warning{border:3px solid var(--ink);border-left:10px solid var(--yel);background:var(--surface);overflow-wrap:anywhere;border-radius:4px;margin:8px 0;padding:10px 12px;font-size:1.0625rem}.settings-backup-confirm button{width:100%;margin:8px 0 0}.settings-backup-confirm code{overflow-wrap:anywhere}.settings-message{border-left:6px solid var(--blue);overflow-wrap:anywhere;background:#e9edf0;padding:10px 12px}.settings-modal{z-index:100;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.settings-scrim{background:#0f1b2d9e;position:absolute;inset:0}.settings-sheet{background:var(--bg);width:100%;max-width:560px;max-height:92dvh;color:var(--ink);border-top:6px solid var(--yel);box-shadow:0 -8px 0 var(--ink);flex-direction:column;display:flex;position:relative}.settings-sheet-head{background:var(--ink);color:#fff;align-items:center;gap:8px;min-height:60px;padding:8px 8px 8px 16px;display:flex}.settings-sheet-head h2{flex:1;margin:0;font-size:1.25rem;font-weight:900}.settings-sheet-head button{color:#fff;background:0 0;border-color:#fff;flex:none;place-items:center;width:48px;height:48px;margin:0;padding:0;display:grid}.settings-sheet-head button:focus-visible{outline-color:var(--yel)}.settings-sheet-body{overscroll-behavior:contain;padding:14px 16px max(18px, env(safe-area-inset-bottom));overflow-y:auto}.settings-sheet-body p{margin:4px 0 10px}.settings-sheet-body button{width:100%;min-height:60px;margin:0 0 10px;font-size:1.1875rem;font-weight:900}.settings-sheet-body button:last-child{margin-bottom:0}.settings-sheet-body .settings-destructive{background:var(--yel);color:var(--ink)}@media (width>=1100px){.settings-sheet{max-width:600px}}@media (forced-colors:active){.settings-toggle{appearance:auto}}.home-screen{color:var(--ink);font:500 calc(18px * var(--fs))/1.65 var(--zh);min-width:0}.home-screen h2,.home-screen h3,.home-screen p{margin:0}.home-screen button{white-space:normal;overflow-wrap:anywhere;min-height:calc(48px * var(--fs))}.home-hero{border:calc(4px * var(--fs)) solid var(--ink);border-radius:var(--r);background:var(--surface);padding:calc(14px * var(--fs));margin-bottom:calc(20px * var(--fs))}.home-sign{gap:calc(8px * var(--fs));font-size:calc(14px * var(--fs));flex-wrap:wrap;font-weight:800;display:flex}.home-date{color:var(--muted);font-size:calc(15px * var(--fs));margin-left:auto}.home-title{margin:calc(6px * var(--fs)) 0;font:800 calc(24px * var(--fs))/1.35 var(--zh)}.home-screen .home-pattern{margin-top:calc(10px * var(--fs));background:var(--ink);color:var(--yel);padding:calc(8px * var(--fs)) calc(12px * var(--fs));border-radius:var(--r);font:800 calc(22px * var(--fs))/1.3 var(--en);overflow-wrap:anywhere}.home-screen .home-primary{width:100%;min-height:calc(62px * var(--fs));margin-top:calc(14px * var(--fs));font-size:calc(20px * var(--fs))}.home-review-note,.home-view-done{font-size:calc(16px * var(--fs))}.home-screen .home-review-note{margin-top:calc(10px * var(--fs))}.home-view-done{color:var(--blue)}.home-segments,.home-meter{gap:calc(4px * var(--fs));margin-top:calc(10px * var(--fs));display:flex}.home-segments span,.home-meter span{min-height:calc(10px * var(--fs));background:var(--hold);flex:1}.home-segments .done,.home-meter .home-meter-done{background:var(--ok)}.home-segments .current{background:var(--blue)}.home-foundation{border:calc(3px * var(--fs)) solid var(--ink);border-radius:var(--r);background:var(--surface);margin-bottom:calc(24px * var(--fs));overflow:hidden}.home-foundation-heading{justify-content:space-between;align-items:center;gap:calc(12px * var(--fs));text-align:left;background:var(--blue);color:#fff;width:100%;padding:calc(10px * var(--fs)) calc(14px * var(--fs));font-size:calc(19px * var(--fs));border:0;border-radius:0;margin:0;display:flex}.home-foundation-name>span{font-size:calc(14px * var(--fs));display:block}.home-foundation-label{padding:calc(10px * var(--fs)) calc(14px * var(--fs));font-size:calc(15px * var(--fs))}.home-foundation-row{border:0;border-top:calc(1px * var(--fs)) solid var(--hold);text-align:left;width:100%;padding:calc(12px * var(--fs)) calc(14px * var(--fs));font-size:calc(18px * var(--fs));background:#fff;border-radius:0;display:block}.home-foundation-row small{color:var(--muted);font-size:calc(14px * var(--fs));display:block}.home-meter{margin:0 calc(14px * var(--fs)) calc(8px * var(--fs))}.home-courses h2{font-size:calc(22px * var(--fs))}.home-courses-note{margin-top:calc(6px * var(--fs));color:var(--muted);font-size:calc(16px * var(--fs));line-height:1.5}.home-courses progress{width:100%;accent-color:var(--ok)}.home-step-now{margin-top:calc(12px * var(--fs));font-size:calc(16px * var(--fs));font-weight:700}.home-list-tools{gap:calc(8px * var(--fs));margin:calc(12px * var(--fs)) 0;flex-wrap:wrap;display:flex}.home-list-tools button{font-size:calc(16px * var(--fs));padding:calc(6px * var(--fs)) calc(12px * var(--fs))}.home-course-group{margin-bottom:calc(12px * var(--fs));border:calc(3px * var(--fs)) solid var(--ink);border-radius:var(--r);overflow:hidden}.home-course-group h3 button{gap:calc(8px * var(--fs));width:100%;padding:calc(10px * var(--fs));color:var(--ink);text-align:left;font-size:calc(18px * var(--fs));min-height:calc(64px * var(--fs));background:#fff;border:0;border-radius:0;flex-wrap:nowrap;align-items:center;display:flex}.home-week-trail{align-items:center;gap:calc(4px * var(--fs));flex:none;min-width:0;max-width:48%;margin-left:auto;display:flex}.home-week-state{min-width:0;font-size:calc(14px * var(--fs));text-align:right;overflow-wrap:anywhere;flex:auto}.home-course-group ol{margin:0;padding:0;list-style:none}.home-course-path{padding:calc(8px * var(--fs)) calc(10px * var(--fs)) calc(4px * var(--fs))}.home-course-path>li{margin:0 0 0 calc(19px * var(--fs));padding:0 0 calc(10px * var(--fs)) calc(17px * var(--fs));border-left:calc(3px * var(--fs)) solid var(--hold);position:relative}.home-course-path>li:last-child{border-left-color:#0000;padding-bottom:0}.home-screen [hidden]{display:none!important}.home-course-row{align-items:center;gap:calc(12px * var(--fs));width:100%;padding:calc(12px * var(--fs));border:calc(2px * var(--fs)) solid var(--hold);border-radius:var(--r);text-align:left;font-size:calc(18px * var(--fs));background:#fff;display:flex;min-height:calc(72px * var(--fs))!important}.home-course-path .home-course-row{border-top-width:calc(2px * var(--fs))}.home-row-mark{z-index:1;min-width:calc(48px * var(--fs));min-height:calc(48px * var(--fs));border:calc(3px * var(--fs)) solid var(--hold);margin-left:calc(-52px * var(--fs));background:#fff;border-radius:50%;flex-shrink:0;place-items:center;font-weight:800;display:grid;position:relative}.home-course-done .home-row-mark{color:#fff;background:var(--ok);border-color:var(--ok)}.home-course-next{background:var(--bg)}.home-course-current-ring,.home-course-row[aria-current=true]{background:var(--bg);border-color:var(--blue);box-shadow:0 0 0 calc(1px * var(--fs)) var(--blue)}.home-row-status{color:var(--muted);display:block}.home-row-status-glyph{margin-right:calc(4px * var(--fs));font-weight:800}.home-course-current .home-row-status,.home-course-current-ring .home-row-status{color:var(--blue);font-weight:700}.home-row-copy{min-width:0}.home-row-copy>span,.home-row-copy>small{display:block}.home-row-copy>span,.home-screen small{font-size:calc(14px * var(--fs))}.home-review-tag{background:var(--yel);color:var(--ink);border-radius:var(--r);padding:0 calc(4px * var(--fs))}.home-later-icon{color:var(--muted)}html,.shell-desktop-course{scroll-padding-top:72px;scroll-padding-bottom:max(104px, var(--footer-space,104px))}.home-course-row[aria-current=true] .home-row-mark{background:var(--blue);border-color:var(--blue);color:#fff}.home-course-path>li .home-course-row{margin-left:calc(-4px * var(--fs));width:calc(100% + 4px * var(--fs));max-width:none}.home-chevron,.home-row-go{flex:none}[aria-expanded=true]>.home-chevron,[aria-expanded=true]>.home-week-trail>.home-chevron{transform:rotate(90deg)}.home-row-go{color:var(--muted);margin-left:auto}.home-row-copy{flex:1}.home-week-name{flex:8em;min-width:0}.home-week-name>.home-review-tag{margin-top:calc(4px * var(--fs));display:inline-block}.home-week-name small{color:var(--muted);font-size:calc(14px * var(--fs));font-weight:400;display:block}.home-week-done{color:var(--ok)}.home-week-active{color:var(--blue)}.home-screen .home-foundation-row{align-items:center;gap:calc(12px * var(--fs));min-height:calc(72px * var(--fs));display:flex}.home-foundation-copy{flex:1;min-width:0}.home-foundation-mark{min-width:calc(48px * var(--fs));min-height:calc(48px * var(--fs));border:calc(3px * var(--fs)) solid var(--blue);border-radius:var(--r);color:var(--blue);font:800 calc(17px * var(--fs))/1 var(--en);flex:none;order:-1;place-items:center;display:grid}.home-gate-hint{color:var(--blue);font-weight:700}.home-week-summary{padding:0 calc(10px * var(--fs)) calc(10px * var(--fs));background:#fff}.home-week-lesson{font-size:calc(16px * var(--fs));overflow-wrap:anywhere;margin:0;line-height:1.6}.home-week-lesson+.home-week-lesson{margin-top:calc(6px * var(--fs))}.home-week-lesson [lang=en]{font-family:var(--en)}.home-pron-section{border-top:calc(1px * var(--fs)) solid var(--hold)}.home-pron-label{background:var(--yel);font-weight:800}.home-pron-row .home-foundation-mark{background:var(--yel);border-color:var(--ink);color:var(--ink)}.video-step{min-width:0}.video-step__labels{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.video-step__label{background:var(--yel);border-radius:var(--r);padding:2px 10px;font-size:.875rem;font-weight:900;display:inline-block}.video-step__frame{aspect-ratio:16/9;border:3px solid var(--ink);border-radius:var(--r);background:#e4e8ea;margin-top:12px;position:relative;overflow:hidden}.video-step .video-scene{width:100%;height:auto;display:block}.video-step__frame>.video-scene{height:100%}.video-step__lesson-visual{background:var(--yel);height:100%;color:var(--ink);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex}.video-step__lesson-visual strong{font:900 2rem/1.2 var(--en);text-wrap:balance}.video-step__story .video-step__lesson-visual{min-height:140px}.video-step__overlay{color:#fff;text-align:center;background:#0f1b2d9e;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:10px;font-size:1.125rem;font-weight:800;display:flex;position:absolute;inset:0}.video-step__overlay button{margin:0}.video-step__overlay .video-step__bigplay{background:var(--blue);color:#fff;border:4px solid #fff;border-radius:50%;place-items:center;width:64px;height:64px;min-height:64px;padding:0;display:grid}.video-step__overlay--ready .video-step__bigplay{position:absolute;top:58%;left:62%;transform:translate(-50%,-50%)}.video-step__overlay--ready>span{width:100%;font-size:.875rem;line-height:1.2;position:absolute;bottom:8px;left:0}.video-step__bigplay svg{width:40px;height:40px}.video-step__overlay-help{font-size:.9375rem}.video-step__controls{align-items:center;gap:6px;margin-top:10px;display:flex}.video-step__controls button{border:3px solid var(--ink);background:var(--surface);width:48px;min-width:48px;min-height:48px;color:var(--ink);place-items:center;margin:0;padding:0 8px;display:grid}.video-step__controls .video-step__play{background:var(--yel);min-width:64px;min-height:56px}.video-step__controls button:disabled{color:var(--muted);border-style:dashed}.video-step__timeline{align-items:center;gap:6px;margin-top:8px;display:flex}.video-step__progress{border:3px solid var(--ink);border-radius:var(--r);background:#fff;flex:1;min-width:30px;height:16px;overflow:hidden}.video-step__progress span{background:var(--blue);height:100%;display:block}.video-step__time{font:800 .875rem/1.2 var(--en);white-space:nowrap;font-variant-numeric:tabular-nums}.video-step__loading{border:3px solid var(--ink);border-radius:var(--r);background:linear-gradient(to right, var(--yel) 35%, #fff 35%);width:70%;height:18px}.video-step__subtitles{background:var(--ink);color:#fff;border-radius:var(--r);margin-top:12px;padding:12px 14px}.video-step__english{font:800 1.625rem/1.3 var(--en)}.video-step__english button{border:0;border-bottom:3px dotted var(--yel);min-width:44px;min-height:44px;color:inherit;font:inherit;overflow-wrap:anywhere;background:0 0;border-radius:0;margin:0 3px 0 0;padding:0 2px}.video-step__chinese{color:#e7ecf2;margin-top:2px;font-size:1.1875rem;font-weight:700}.video-step__note{color:var(--muted);margin:10px 0 0;font-size:.9375rem}.video-step__alert{border:3px solid var(--ink);border-left:10px solid var(--yel);border-radius:var(--r);background:var(--surface);margin:12px 0 0;padding:12px 14px;font-size:1.0625rem;line-height:1.55}.video-step__alert-actions{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.video-step__alert-actions button{margin:0}.video-step__story{gap:10px;margin-top:12px;display:none}.video-step__story .video-step__alert{margin:0}.video-step__story figure{border:3px solid var(--ink);border-radius:var(--r);background:var(--surface);margin:0;overflow:hidden}.video-step__story figcaption{padding:8px 12px;font-size:1.0625rem;font-weight:700}.video-step__story figcaption p{margin:4px 0}.video-step__story .video-step__subtitles{color:var(--ink);background:0 0;margin:4px 0;padding:0}.video-step__story .video-step__english{font-size:1.0625rem}.video-step__story .video-step__english button{border-bottom-color:var(--blue)}.video-step__story .video-step__chinese{color:var(--ink);font-size:1.0625rem}.video-step__narration{min-height:48px;font-size:.9375rem}.video-step__word{background:var(--surface);border:3px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 var(--ink);margin-top:12px;padding:12px 14px}.video-step__word>div{justify-content:space-between;align-items:center;gap:8px;display:flex}.video-step__word strong{font:800 1.625rem var(--en);overflow-wrap:anywhere}.video-step__phonetic{margin:4px 0}.video-step__phonetic span{font:500 1.5rem var(--ipa)}.video-step button:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.video-step__subtitles button:focus-visible{outline-color:var(--yel)}.video-step--reduced .video-step__player,html[data-motion=reduce] .video-step__player{display:none}.video-step--reduced .video-step__story,html[data-motion=reduce] .video-step__story{display:grid}@media (prefers-reduced-motion:reduce){.video-step__player{display:none}.video-step__story{display:grid}}