@import url('/style.css?v=films13');
:root{--zh-ink:#173e47;--zh-muted:#5c7071;--zh-paper:#fffef9;--zh-line:#d7dfd8;--zh-green:#356e63;--zh-gold:#aa783b}
body{margin:0;background:#faf8f1;color:var(--zh-ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;font-size:16px;line-height:1.7}
*{box-sizing:border-box}button,a,input,select,textarea{touch-action:manipulation}button,select,textarea{font:inherit}button,a,summary,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.6}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b98642;outline-offset:4px}button svg,a svg{width:21px;height:21px;flex-shrink:0}.zh-shell{max-width:1120px;margin:auto;padding:0 24px}.zh-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:88px}.zh-brand{display:flex;align-items:center;gap:10px;text-decoration:none}.zh-brand img{width:64px;height:50px;object-fit:contain;border-radius:10px}.zh-brand strong{display:block;font-size:18px;line-height:1.4;letter-spacing:.04em}.zh-brand small{font-size:12px;letter-spacing:.12em}.zh-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border:1px solid #cbd6cf;border-radius:12px;background:var(--zh-paper);color:var(--zh-ink);text-decoration:none;font-weight:600;min-height:48px;line-height:1.45}.zh-button:hover{background:#edf3ec}.zh-button.primary{background:var(--zh-ink);border-color:var(--zh-ink);color:#fff}.zh-button.primary:hover{background:#2b5860}.zh-button.subtle{background:transparent;border-color:transparent;padding:9px 12px}.zh-button.small{padding:9px 12px;font-size:14px;min-height:44px}.zh-button.full{width:100%}.zh-button.active,.zh-button[aria-pressed="true"]{background:#e5efeb;border-color:#346e64}.zh-button.recording{background:#9c4438;color:#fff;border-color:#9c4438}.zh-direction{display:flex;justify-content:center;gap:5px;padding:5px;background:#edece4;border-radius:13px;margin:4px 0 25px}.zh-direction a,.zh-direction span{flex:1;max-width:310px;text-decoration:none;padding:9px 14px;text-align:center;line-height:1.45;font-size:14px;border-radius:9px}.zh-direction span{background:#fffef9;box-shadow:0 2px 6px #173e4709;font-weight:600}.zh-eyebrow{font-size:13px;letter-spacing:.11em;color:#567167;font-weight:600;text-transform:uppercase}.zh-home-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;margin:32px 0 38px}.zh-home-hero h1{font-size:clamp(26px,3.8vw,41px);line-height:1.5;margin:12px 0 18px;letter-spacing:.02em}.zh-lead{color:var(--zh-muted);font-size:16px;margin:0 0 24px;max-width:37em}.zh-hero-photo{position:relative;border-radius:20px;overflow:hidden;background:#21464a;box-shadow:0 12px 35px #143f4215}.zh-hero-photo img{width:100%;display:block;aspect-ratio:1.23;object-fit:cover;object-position:52% center}.zh-hero-caption{background:#173e47ee;color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}.zh-hero-caption strong{font-size:18px}.zh-hero-caption span{font-size:13px;color:#d4e4db}.zh-actions{display:flex;gap:10px;flex-wrap:wrap}.zh-actions>*{flex:1}.zh-little{font-size:13px;color:var(--zh-muted);line-height:1.7;margin:12px 0}.zh-progress-row{display:flex;gap:15px;align-items:center;justify-content:space-between;margin:0 0 16px}.zh-progress-row h2{font-size:21px;margin:0}.zh-progress-row span{font-size:14px;color:var(--zh-muted)}.zh-phrases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.zh-phrase-card{display:flex;flex-direction:column;text-align:left;background:var(--zh-paper);border:1px solid var(--zh-line);border-radius:15px;padding:18px 17px;color:var(--zh-ink);min-height:183px;position:relative}.zh-phrase-card:hover{border-color:#467566;background:#f3f7ef}.zh-phrase-card .number{font-size:13px;color:var(--zh-muted);margin-bottom:14px;display:flex;justify-content:space-between;gap:4px;align-items:center}.zh-phrase-card strong{font-size:22px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;font-family:system-ui,sans-serif}.zh-phrase-card .meaning{font-size:14px;margin:9px 0 auto;color:#506760}.zh-phrase-card .level{font-size:12px;margin-top:14px;color:#637772}.zh-done{color:var(--zh-green);font-size:13px;display:flex;align-items:center;gap:4px}.zh-done svg{width:16px}.zh-film-invite{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:22px;margin:27px 0;padding:20px;background:#edf2e9;border:1px solid #d1ddce;border-radius:16px}.zh-film-invite img{width:130px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.zh-film-invite h2{font-size:19px;line-height:1.5;margin:4px 0}.zh-film-invite p{font-size:14px;color:var(--zh-muted);margin:4px 0}.zh-step-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:12px 0 18px}.zh-step-head h1{font-size:22px;margin:2px 0}.zh-step-head span{font-size:14px;color:var(--zh-muted)}.zh-steps{display:flex;gap:4px;padding:5px;background:#eaece2;border-radius:11px;margin:0 0 20px}.zh-steps button{flex:1;border:0;background:transparent;padding:10px 5px;min-height:45px;border-radius:8px;color:#59706a;font-size:14px}.zh-steps .current{background:var(--zh-paper);box-shadow:0 2px 8px #173e4709;color:var(--zh-ink);font-weight:600}.zh-card{background:var(--zh-paper);border:1px solid var(--zh-line);border-radius:18px;padding:28px}.zh-study{max-width:760px;margin:auto}.zh-study h2{font-size:21px;line-height:1.6;margin:0 0 16px}.zh-word{font-size:clamp(28px,4.8vw,42px);font-weight:600;line-height:1.6;font-family:system-ui,sans-serif;word-break:normal;overflow-wrap:anywhere;margin:15px 0 5px}.zh-pinyin{font-size:18px;color:#a56d2f;line-height:1.65;overflow-wrap:anywhere;margin:5px 0;font-family:system-ui,sans-serif}.zh-meaning{font-size:16px;color:var(--zh-muted);line-height:1.8;margin:8px 0 18px}.zh-word-card{text-align:center;padding:8px 0 18px}.zh-word-card .zh-button{margin:15px 4px 0}.zh-listen-choices{display:grid;gap:12px;margin-top:22px}.zh-listen-choices button{justify-content:flex-start;text-align:left;min-height:58px;font-weight:400}.zh-listen-choices button.correct{background:#e6f0e7;border-color:#609079}.zh-feedback{padding:14px 16px;background:#edf4ec;border-radius:11px;font-size:15px;margin:15px 0;color:#2d5c50;line-height:1.7}.zh-feedback.wait{background:#faf0dc;color:#785d32}.zh-feedback:empty{display:none}.zh-chunks{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0}.zh-chunk{flex-direction:column;gap:1px;min-width:100px;padding:10px 15px;font-weight:400}.zh-chunk b{font-family:system-ui,sans-serif;font-size:20px}.zh-chunk small{font-size:14px;color:#95632a}.zh-chunk svg{width:15px;height:15px}.zh-tip{border-left:3px solid #c9a368;padding:12px 16px;background:#fbf3e2;border-radius:0 10px 10px 0;color:#6c5d42;font-size:15px;line-height:1.8;margin:20px 0}.zh-recorder{border-top:1px solid var(--zh-line);padding-top:18px;margin-top:22px}.zh-recorder p{font-size:14px;color:var(--zh-muted);margin:8px 0 12px}.zh-recorder .zh-actions{justify-content:center}.zh-recorder .zh-actions>*{flex:initial}.zh-next{margin-top:20px}.zh-context{background:#eaf1ec;border:1px solid #d2dfd6;border-radius:12px;padding:17px 20px;margin:0 0 20px;font-size:16px}.zh-context strong{display:block;color:#4e7566;font-size:13px;margin-bottom:5px}.zh-reveal{border:1px solid #dfd6bd;border-radius:12px;background:#fff9ed;margin:16px 0;overflow:hidden}.zh-reveal>summary{padding:13px 16px;min-height:48px;cursor:pointer;font-size:15px;font-weight:600}.zh-reveal>div{padding:0 18px 17px}.zh-reveal .zh-word{font-size:25px;margin-top:0}.zh-reveal .zh-pinyin{font-size:17px}.zh-write{margin:16px 0}.zh-write>summary{cursor:pointer;min-height:44px;padding:10px 0;font-size:14px;text-decoration:underline;text-underline-offset:4px;color:#536f67}.zh-write textarea{width:100%;display:block;min-height:86px;border:1px solid #bbcec1;border-radius:9px;background:#fff;padding:12px;color:var(--zh-ink);font-size:17px;margin:6px 0 10px}.zh-live{margin:9px 0;line-height:1.6;color:var(--zh-muted);font-size:14px}.zh-live:not(:empty){min-height:24px}.zh-live-text{font-size:20px;color:var(--zh-ink);font-family:system-ui,sans-serif;margin:5px 0 15px}.zh-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;margin:15px 0}.zh-controls label{display:inline-flex;align-items:center;gap:8px}.zh-controls select,.zh-setting select{border:1px solid #c5d4c8;border-radius:9px;background:#fffef9;min-height:42px;font-size:14px;padding:8px 25px 8px 10px;color:var(--zh-ink)}.zh-toggle{display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}.zh-toggle input{width:18px;height:18px;accent-color:#285b51}.zh-film{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:25px}.zh-video-box{border-radius:15px;overflow:hidden;background:#163d44;position:relative}.zh-video-box video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#163d44}.zh-video-box video::cue{font-size:clamp(14px,2.6vw,22px);color:white;background:#102e36de;line-height:1.5}.zh-video-box video:fullscreen::cue{font-size:clamp(18px,2.5vw,32px)}.zh-video-box img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.zh-video-note{padding:8px 14px;margin:0;color:#e4eee9;background:#1a424b;font-size:12px}.zh-film-current{padding:15px 0;min-height:152px}.zh-film-current .zh-word{font-size:21px;margin:7px 0}.zh-film-current .zh-pinyin{font-size:16px}.zh-film-current .zh-meaning{font-size:15px;margin-bottom:8px}.zh-chapters{max-height:530px;overflow:auto;overscroll-behavior:contain}.zh-chapters h2{font-size:19px;margin:0 0 12px}.zh-chapters button{display:flex;gap:12px;align-items:center;width:100%;padding:12px 9px;min-height:48px;border:0;border-bottom:1px solid #dbe1d7;background:transparent;color:var(--zh-ink);text-align:left;font-size:14px}.zh-chapters button:hover,.zh-chapters button.current{background:#eaf1e7}.zh-chapters .stamp{font-size:12px;color:#5d7770;min-width:35px;font-variant-numeric:tabular-nums}.zh-transcript{border:1px solid #c0d2c7;border-radius:14px;overflow:hidden;margin:30px 0 22px;background:var(--zh-paper)}.zh-transcript>summary{display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer;min-height:72px;background:#edf2e8;padding:16px 21px;list-style:none}.zh-transcript>summary::-webkit-details-marker{display:none}.zh-transcript>summary strong{font-size:17px}.zh-transcript>summary small{display:block;font-size:13px;color:#61766c;font-weight:400}.zh-transcript>summary .disclosure{font-size:14px;white-space:nowrap}.zh-transcript[open]>summary .disclosure{display:none}.zh-transcript-body{padding:20px;max-width:830px;margin:auto}.zh-round{border:0;margin:24px 0;padding:0}.zh-round>h3{font-size:14px;font-weight:400;color:#64776f;margin:0 0 12px;border-bottom:1px solid #d9e1d6;padding-bottom:9px}.zh-line{border:1px solid #d4e1d7;border-radius:13px;background:#f1f6f0;padding:16px;margin:0 0 12px}.zh-line.staff{background:#fcf6e8;border-color:#e7dbbe;margin-left:20px}.zh-line-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;color:#517063}.zh-line.staff .zh-line-head{color:#8a6b39}.zh-line .zh-word{font-size:21px;line-height:1.7;margin:7px 0}.zh-line .zh-pinyin{font-size:16px}.zh-line .zh-meaning{font-size:15px;margin:8px 0 0}.zh-audio-icon{width:44px;height:44px;padding:10px;border-radius:50%}.zh-footer{text-align:center;font-size:13px;color:#698074;padding:16px 0 30px}.zh-footer button{border:0;background:transparent;color:inherit;text-decoration:underline;text-underline-offset:4px;min-height:40px;font-size:13px}.zh-back{position:fixed;bottom:0;left:0;right:0;background:#fffef9f7;backdrop-filter:blur(8px);z-index:30;border-top:1px solid #d7dfd2;padding:8px max(15px,calc((100vw - 1072px)/2)) calc(5px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 18px #173e4709}.zh-back .zh-button{width:100%;min-height:46px}.zh-back small{display:block;font-size:11px;text-align:center;color:#61796f;line-height:1.4;margin-top:3px}body.zh-has-back{padding-bottom:calc(83px + env(safe-area-inset-bottom,0px))}.zh-setting{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 0;border-bottom:1px solid #e0e5d9}.zh-setting>div{flex:1}.zh-setting strong{display:block;font-size:16px}.zh-setting small{display:block;font-size:13px;color:var(--zh-muted);margin-top:5px}.zh-setting>input{width:23px;height:23px;accent-color:#285b51}.zh-info{font-size:14px;line-height:1.85;color:#5b7067}.zh-info h2{font-size:19px;color:var(--zh-ink);margin:22px 0 8px}.zh-info p{margin:12px 0}.zh-completion{text-align:center;max-width:680px;margin:35px auto}.zh-completion h1{font-size:29px;line-height:1.6}.zh-stamp{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border:1px solid #b6cbb9;background:#e8f2e7;border-radius:50%;color:#407157;font-size:27px}.zh-completion .zh-phrases{grid-template-columns:1fr 1fr;margin:25px 0}.zh-completion .zh-phrase-card{min-height:125px}.zh-conversation{max-width:860px;margin:auto}.zh-conversation-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:start}.zh-turn-reading{min-width:0}.zh-turn-reading h2{font-size:17px;margin:3px 0 10px}.zh-turn-reading .zh-word{font-size:22px;margin:5px 0}.zh-turn-reading .zh-pinyin{font-size:16px}.zh-turn-reading .zh-meaning{font-size:15px;margin:6px 0 12px}.zh-turn-reading .zh-context{font-size:14px;padding:10px 13px;margin:0 0 12px}.zh-turn-dock{margin-top:10px}.zh-turn-dock .zh-button.primary{width:100%}.zh-turn-progress{height:4px;margin:12px 0 18px;background:#dce7d9;border-radius:4px;overflow:hidden}.zh-turn-progress>span{height:100%;display:block;background:#679879}.zh-self{font-size:14px;text-decoration:underline;text-underline-offset:4px;display:block;width:100%;margin-top:10px}.zh-pill{display:inline-block;background:#edf2e6;border:1px solid #d8e1ce;color:#507459;font-size:12px;padding:4px 10px;border-radius:20px}.zh-missing{padding:20px;font-size:15px;color:#fff}.zh-hidden-pinyin .zh-pinyin{display:none}.zh-hidden-ja .zh-meaning{display:none}.voice-playing svg{animation:zh-voice 1s ease-in-out infinite}.voice-playing{border-color:#367b69;background:#e5f2e5;box-shadow:0 0 0 3px #4a8c7120}.voice-playing.primary{background:#356d65}.zh-recording-dot{display:inline-block;width:8px;height:8px;background:currentColor;border-radius:50%;margin-right:6px}#zh-toast{position:fixed;z-index:80;bottom:calc(100px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,15px);background:#173e47;color:white;padding:14px 20px;border-radius:13px;width:max-content;max-width:min(480px,90vw);font-size:15px;line-height:1.6;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}#zh-toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes zh-voice{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.84)}}
@media(max-width:760px){.zh-shell{padding:0 16px}.zh-header{min-height:72px;gap:8px}.zh-brand img{width:53px;height:41px}.zh-brand strong{font-size:16px}.zh-brand small{font-size:10px}.zh-header>.zh-button{font-size:14px;padding:9px 12px}.zh-direction{margin:0 0 22px}.zh-direction a,.zh-direction span{font-size:13px;padding:9px 5px}.zh-home-hero{grid-template-columns:1fr;gap:22px;margin:25px 0 27px}.zh-home-hero h1{font-size:28px;margin:9px 0 15px}.zh-lead{font-size:15px;margin-bottom:19px}.zh-hero-photo img{aspect-ratio:16/8;object-position:center 32%}.zh-hero-caption{padding:11px 15px}.zh-hero-caption strong{font-size:16px}.zh-hero-caption span{font-size:12px}.zh-phrases{grid-template-columns:1fr 1fr;gap:10px}.zh-phrase-card{padding:14px;min-height:173px}.zh-phrase-card strong{font-size:22px}.zh-phrase-card .meaning{font-size:14px}.zh-phrase-card .number{margin-bottom:8px}.zh-progress-row{gap:6px}.zh-progress-row h2{font-size:20px}.zh-progress-row span{font-size:13px}.zh-film-invite{grid-template-columns:80px 1fr;gap:12px;padding:15px}.zh-film-invite img{width:80px;height:76px;object-fit:cover}.zh-film-invite h2{font-size:17px}.zh-film-invite p{font-size:13px}.zh-film-invite>.zh-button{grid-column:1/-1;width:100%}.zh-card{padding:20px 17px;border-radius:15px}.zh-step-head{margin:10px 0 13px}.zh-step-head h1{font-size:20px}.zh-step-head span{font-size:13px}.zh-steps{margin-bottom:14px}.zh-steps button{font-size:13px;padding:9px 3px}.zh-study h2{font-size:19px}.zh-word{font-size:32px}.zh-pinyin{font-size:18px}.zh-meaning{font-size:15px}.zh-tip{padding:11px 13px;font-size:14px;margin:15px 0}.zh-chunks{gap:7px;margin:17px 0}.zh-chunk{min-width:90px;padding:9px 11px}.zh-film{grid-template-columns:1fr;gap:22px}.zh-chapters{max-height:300px}.zh-controls{font-size:13px}.zh-controls select{font-size:14px}.zh-transcript>summary{padding:15px}.zh-transcript-body{padding:15px}.zh-line{padding:13px}.zh-line.staff{margin-left:10px}.zh-line .zh-word{font-size:20px}.zh-transcript>summary strong{font-size:16px}.zh-transcript>summary .disclosure{font-size:13px}.zh-setting{align-items:start}.zh-setting select{max-width:142px}.zh-back{padding:6px 14px calc(4px + env(safe-area-inset-bottom,0px))}.zh-completion{margin:22px 0}.zh-completion h1{font-size:25px}.zh-conversation-layout{display:flex;flex-direction:column;gap:0;height:calc(100svh - 217px - env(safe-area-inset-bottom,0px));min-height:470px}.zh-conversation-layout>.zh-media-side{flex-shrink:0;width:100%}.zh-conversation-layout .zh-video-box{border-radius:12px}.zh-conversation-layout .zh-video-note{display:none}.zh-conversation-layout .zh-controls{margin:5px 0}.zh-conversation-layout .zh-controls select{min-height:36px;padding-top:4px;padding-bottom:4px}.zh-conversation-layout .zh-turn-reading{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:5px 3px 0;width:100%}.zh-conversation-layout .zh-turn-dock{width:100%;flex-shrink:0;background:#faf8f1}.zh-conversation-layout .zh-turn-dock .zh-little{margin:6px 0;font-size:12px}.zh-conversation-layout .zh-word{font-size:20px}.zh-conversation-layout .zh-pinyin{font-size:16px}.zh-conversation-layout .zh-context{margin-bottom:7px;padding:8px 11px}.zh-conversation-layout .zh-reveal{margin:7px 0}.zh-conversation-layout .zh-write{margin:3px 0}.zh-conversation-layout .zh-feedback{padding:9px 11px;margin:7px 0;font-size:14px}.zh-conversation-layout .zh-self{margin-top:3px;min-height:38px}.zh-turn-progress{margin:8px 0 12px}.zh-turn-dock .zh-live:empty{display:none}.zh-turn-dock .zh-live{font-size:12px;margin:4px 0}.zh-turn-dock .zh-button.primary{min-height:48px;padding:9px 14px}.zh-turn-dock .zh-live-text{max-height:42px;overflow:auto;font-size:16px;margin:3px 0}.zh-conversation>.zh-step-head{margin:4px 0}.zh-conversation>.zh-step-head h1{font-size:17px}.zh-conversation>.zh-step-head .zh-button{min-height:40px;font-size:13px}.zh-film-current{min-height:130px}.zh-film-current .zh-word{font-size:20px}}
@media(max-width:760px) and (max-height:600px), (max-width:760px) and (orientation:landscape){.zh-conversation-layout{height:auto;min-height:0}.zh-conversation-layout .zh-turn-reading{overflow:visible}}
@media(prefers-reduced-motion:reduce){.voice-playing svg{animation:none}.voice-playing svg{color:#2b7760}.voice-playing{outline:2px solid #47816b}#zh-toast{transition:none}}
/* Keep the media above the microphone on phones and alongside it on desktop. */
.zh-transcript>summary svg{width:21px;height:21px;vertical-align:-4px;margin-right:5px}.zh-stamp svg{width:31px;height:31px}.zh-conversation-layout>.zh-media-side{grid-row:1 / 3}.zh-conversation-layout>.zh-turn-dock{grid-column:2}
.zh-hidden-pinyin .zh-chunk small{display:none}
@media(max-width:760px){.zh-conversation-layout{min-height:400px}}
/* A compact learning directory: imagery is confined to the video control. */
.zh-dashboard-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:22px 0 18px}
.zh-dashboard-head .zh-eyebrow{margin:0 0 5px;letter-spacing:.04em}
.zh-dashboard-head h1{font-size:28px;line-height:1.45;margin:0}
.zh-progress-badge{white-space:nowrap;font-size:29px;font-weight:600;color:var(--zh-green)}
.zh-progress-badge small{font-size:13px;color:var(--zh-muted);font-weight:400}
.zh-start-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 24px;background:#eaf0e6;border:1px solid #cbd9c6;border-radius:16px;margin-bottom:27px}
.zh-start-panel h2{font-size:21px;margin:5px 0 3px;line-height:1.5}
.zh-start-panel p{font-size:14px;margin:0;color:var(--zh-muted);line-height:1.7}
.zh-start-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;text-align:center}
.zh-start-actions>span{font-size:13px;color:var(--zh-muted)}
.zh-section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 13px}
.zh-section-heading h2{font-size:21px;margin:0;line-height:1.5}
.zh-section-heading p{margin:4px 0 0;font-size:14px;line-height:1.65;color:var(--zh-muted)}
.zh-section-heading>span{white-space:nowrap;font-size:13px;color:var(--zh-muted)}
.zh-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.zh-topic-card{display:flex;flex-direction:column;gap:6px;min-width:0;text-align:left;background:var(--zh-paper);border:1px solid #ccd7ce;border-radius:14px;padding:17px;color:var(--zh-ink);transition:border-color .15s,background .15s}
.zh-topic-card:hover,.zh-tool-card:hover{background:#f0f5ec;border-color:#6c927c}
.zh-topic-top{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:3px}
.zh-topic-no{font-size:12px;color:#668476;letter-spacing:.1em}
.zh-topic-status{font-size:12px;color:#68796f}
.zh-topic-card>strong{font-size:18px;line-height:1.5}
.zh-topic-description{font-size:14px;line-height:1.65;color:var(--zh-muted)}
.zh-topic-example{font-size:16px;line-height:1.6;margin:3px 0 4px;font-family:system-ui,sans-serif}
.zh-topic-open{font-size:13px;margin-top:auto;padding-top:9px;border-top:1px solid #e0e7dc;color:#356e63;font-weight:600}
.zh-topic-open::after{content:' ›';font-size:17px}
.zh-practice-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.zh-tool-card{display:flex;align-items:center;gap:12px;background:#fffef9;border:1px solid #cbd7cd;border-radius:14px;color:var(--zh-ink);padding:18px;text-align:left;min-width:0}
.zh-tool-card>span:nth-child(2){flex:1;min-width:0}
.zh-tool-card strong{display:block;font-size:17px;line-height:1.5}
.zh-tool-card small{display:block;font-size:13px;color:var(--zh-muted);line-height:1.7;margin-top:4px}
.zh-tool-mark{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:58px;height:58px;border-radius:12px;background:#f5eddd;color:#8a6937;font-size:22px;letter-spacing:.04em}
.zh-tool-open{font-size:13px;color:#356e63;font-weight:600;white-space:nowrap}
.zh-movie-tool img{display:block;width:80px;height:58px;object-fit:cover;flex-shrink:0;border-radius:8px}
.zh-home-dialogue{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 23px;background:#edf2ef;border-radius:14px;margin:22px 0}
.zh-home-dialogue h2{font-size:19px;margin:0 0 5px}
.zh-home-dialogue p{font-size:14px;color:var(--zh-muted);margin:0;max-width:42em}
.zh-home-dialogue .zh-button{flex-shrink:0}
.zh-course-intro{color:var(--zh-muted);font-size:15px;line-height:1.85;margin:0 0 20px}
.zh-course-phrases{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.zh-course-phrase{display:flex;flex-direction:column;background:var(--zh-paper);border:1px solid var(--zh-line);border-radius:15px;padding:20px}
.zh-course-phrase .zh-word{font-size:26px;margin-top:9px}
.zh-course-phrase .zh-pinyin{font-size:17px}
.zh-course-phrase .zh-meaning{margin-bottom:8px}
.zh-course-context{font-size:14px;background:#eff4eb;border-radius:8px;padding:10px 12px;color:#557060;margin:6px 0 17px}
.zh-course-phrase>.zh-button{margin-top:auto}
.zh-related-scenes{margin:29px 0 24px}
.zh-related-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--zh-line)}
.zh-related-row>strong{font-size:15px;font-weight:500}
.zh-related-row>div{display:flex;gap:8px;flex-shrink:0}
.zh-numbers-start{margin:0 0 22px}
.zh-number-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zh-number-card{background:var(--zh-paper);border:1px solid var(--zh-line);border-radius:14px;padding:18px}
.zh-number-card .zh-word{font-size:27px;margin:9px 0 4px}
.zh-number-card .zh-pinyin{font-size:17px;margin-bottom:15px}
.zh-number-card>.zh-button{width:100%}
.zh-number-answer{padding:12px 17px;margin-top:19px;border-radius:12px;background:#f4efe2;text-align:center}
.zh-number-answer .zh-word{font-size:28px}
.zh-completion .zh-lead{margin-left:auto;margin-right:auto}
@media(max-width:1000px){.zh-practice-tools{grid-template-columns:1fr}.zh-tool-card{padding:16px}}
@media(max-width:760px){
 .zh-direction{margin-bottom:16px}.zh-dashboard-head{align-items:flex-start;gap:9px;margin:16px 0 15px}.zh-dashboard-head .zh-eyebrow{font-size:12px}.zh-dashboard-head h1{font-size:24px}.zh-progress-badge{font-size:22px;padding-top:2px}.zh-progress-badge small{display:block;font-size:11px;line-height:1.4}
 .zh-start-panel{display:block;padding:17px;margin-bottom:24px}.zh-start-panel h2{font-size:20px;margin:6px 0}.zh-start-panel .zh-pill{font-size:12px;padding:2px 8px}.zh-start-actions{margin-top:14px;gap:5px}.zh-start-actions .zh-button{width:100%;min-height:48px}.zh-start-actions>span{font-size:12px}
 .zh-section-heading{margin-bottom:12px;align-items:flex-start}.zh-section-heading h2{font-size:20px}.zh-section-heading p{font-size:13px}.zh-topics{grid-template-columns:1fr 1fr;gap:10px}.zh-topic-card{padding:13px 12px;gap:5px}.zh-topic-card>strong{font-size:17px}.zh-topic-description{font-size:13px;line-height:1.65}.zh-topic-example{font-size:15px;margin:3px 0}.zh-topic-top{gap:3px}.zh-topic-status{font-size:11px}.zh-topic-open{font-size:12px;padding-top:8px}
 .zh-practice-tools{margin:21px 0;gap:10px}.zh-tool-card{padding:14px 12px;gap:10px}.zh-tool-card strong{font-size:16px}.zh-tool-card small{font-size:12px}.zh-tool-open{font-size:12px}.zh-tool-mark{width:48px;height:48px;font-size:20px}.zh-movie-tool img{width:68px;height:52px}.zh-home-dialogue{display:block;padding:18px;margin:21px 0}.zh-home-dialogue .zh-button{width:100%;margin-top:14px}.zh-home-dialogue h2{font-size:18px}
 .zh-course-phrases{grid-template-columns:1fr;gap:13px}.zh-course-phrase{padding:17px}.zh-course-phrase .zh-word{font-size:27px}.zh-course-page>.zh-step-head{align-items:flex-start}.zh-course-page>.zh-step-head .zh-button{white-space:nowrap;font-size:12px;padding:8px 9px}.zh-related-row{gap:9px}.zh-related-row>strong{font-size:14px}.zh-related-row>div{gap:6px}.zh-related-row .zh-button{font-size:12px;padding:8px}.zh-related-row .zh-button svg{width:17px;height:17px}
 .zh-number-grid{gap:10px}.zh-number-card{padding:13px}.zh-number-card .zh-word{font-size:24px}.zh-number-card .zh-pinyin{font-size:16px;min-height:27px}.zh-number-card .zh-line-head{font-size:14px}.zh-number-card .zh-audio-icon{width:38px;height:38px;padding:8px;min-height:38px}.zh-number-card>.zh-button{font-size:12px;padding:9px 6px}.zh-number-card>.zh-button svg{width:18px;height:18px}
}
@media(max-width:350px){.zh-tool-card{flex-wrap:wrap}.zh-tool-open{margin-left:auto}.zh-related-row{flex-wrap:wrap}.zh-related-row>div{width:100%}.zh-related-row .zh-button{flex:1}.zh-topic-top{flex-wrap:wrap}}
.zh-reply-result{margin:17px 0;padding:18px;border:1px solid #cad9d1;border-radius:14px;background:#f1f6ef;text-align:left}
.zh-reply-result.review{background:#fff9ee;border-color:#e4d7bd}
.zh-reply-status{display:flex;align-items:center;gap:8px;color:#346c56;font-size:16px;line-height:1.5;margin-bottom:17px}
.review .zh-reply-status{color:#816339}.zh-reply-status svg{width:22px;height:22px;flex-shrink:0}
.zh-reply-label{font-size:13px;font-weight:600;color:#5a7167;margin:13px 0 5px}
.zh-reply-chinese{font-family:system-ui,sans-serif;font-size:25px;line-height:1.65;margin:0;overflow-wrap:anywhere}
.zh-reply-ja{font-size:17px;line-height:1.8;margin:0 0 9px;color:#173e47}
.zh-reply-segment>span{font-size:16px;color:#5d6d64;line-height:1.7;display:block}
.zh-reply-advice{font-size:15px;line-height:1.85;margin:14px 0;padding-top:12px;border-top:1px solid #d4dfcf}
.zh-reply-example{background:#fffef9;border:1px solid #e4dcc9;padding:14px;border-radius:10px;margin:15px 0}
.zh-reply-example>strong{font-size:14px;color:#866936}.zh-reply-example>p{font-size:16px;line-height:1.8;margin:6px 0}.zh-reply-example>p[lang=zh-CN]{font-size:21px}.zh-reply-example>small{font-size:16px;color:#956b36;display:block;line-height:1.7}
.zh-reply-result .zh-actions>.zh-button{min-width:0}.zh-reply-result .zh-little{margin:12px 0}
.zh-live-text:empty{display:none}
.zh-theme-video{max-width:780px;margin:22px auto 32px;padding:21px;background:#fffef9;border:1px solid #c7d8cd;border-radius:16px}
.zh-theme-video .zh-section-heading h2{font-size:21px}.zh-theme-video .zh-section-heading p{font-size:14px}
.zh-sequence-player{border-radius:12px;overflow:hidden;background:#173e47;color:#fff}
.zh-sequence-screen{position:relative;aspect-ratio:16/9;background:#0e2429}
.zh-sequence-screen video{display:block;width:100%;height:100%;object-fit:contain}
.zh-sequence-screen video::cue{color:#fff;background:#0c2932e8;font-size:clamp(15px,2.7vw,23px);line-height:1.5}
.zh-sequence-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;border:0;color:#fff;background:linear-gradient(0deg,#09232ba6,#09232b25);font-size:17px;font-weight:600}
.zh-sequence-overlay svg{width:42px;height:42px;padding:10px;border:1px solid #ffffffe0;border-radius:50%;background:#173e47b8}
.zh-sequence-overlay[hidden]{display:none}
.zh-sequence-controls{padding:12px 15px}.zh-sequence-controls button{border:1px solid #aec9c5;border-radius:8px;color:#fff;background:transparent;min-height:40px;padding:8px 13px;font:inherit;font-size:14px;line-height:1.4}.zh-sequence-controls button:hover{background:#ffffff17}.zh-sequence-controls button:disabled{opacity:.45}
.zh-sequence-toolbar{display:flex;align-items:center;gap:12px;justify-content:space-between}.zh-sequence-toolbar>span{font-size:14px;font-variant-numeric:tabular-nums}.zh-sequence-toolbar [data-player=toggle]{min-width:76px}
.zh-sequence-controls input[type=range]{width:100%;height:34px;margin:4px 0;accent-color:#cbd9ad;cursor:pointer;display:block}
.zh-sequence-nav{display:flex;justify-content:space-between;gap:12px}.zh-sequence-nav button{font-size:13px;border-color:#91aba375;flex:1}
.zh-sequence-controls [data-player=status]{font-size:13px;line-height:1.7;margin:10px 0 0;color:#e8efe3}.zh-sequence-controls [data-player=status]:empty{display:none}
.zh-scene-current{margin:12px 0 17px}.zh-scene-current .zh-word{font-size:22px;margin:8px 0}.zh-scene-current .zh-pinyin{font-size:16px}.zh-scene-current .zh-meaning{font-size:16px;margin-bottom:10px}
.zh-sequence-player:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#071519;width:100vw;height:100vh;border-radius:0}.zh-sequence-player:fullscreen .zh-sequence-screen{min-height:0;max-height:calc(100vh - 160px);flex:1}.zh-sequence-player:fullscreen .zh-sequence-controls{flex-shrink:0;width:min(100%,900px);align-self:center}
@media(max-width:760px){.zh-theme-video{padding:14px;margin:16px 0 26px}.zh-theme-video .zh-section-heading h2{font-size:19px}.zh-theme-video .zh-section-heading p{font-size:13px}.zh-sequence-controls{padding:10px}.zh-sequence-controls button{font-size:13px;padding:7px 10px;min-height:38px}.zh-sequence-toolbar{gap:8px}.zh-sequence-overlay{font-size:16px}.zh-scene-current .zh-word{font-size:21px}.zh-scene-current .zh-eyebrow{font-size:12px}.zh-scene-current .zh-pinyin{font-size:16px}.zh-theme-video .zh-controls{gap:7px}.zh-theme-video .zh-controls select{max-width:178px}.zh-theme-video>.zh-little{font-size:13px}}
@media(max-width:760px){.zh-reply-result{padding:14px;margin:12px 0}.zh-reply-chinese{font-size:23px}.zh-reply-ja{font-size:16px}.zh-reply-status{font-size:15px;margin-bottom:12px}.zh-reply-result .zh-actions{flex-direction:column;gap:8px}.zh-reply-result .zh-actions>.zh-button{width:100%}.zh-conversation-layout .zh-reply-result .zh-little{font-size:13px}}

/* v19: two decoded video buffers, only the active frame is visible. */
.zh-sequence-screen{isolation:isolate}
.zh-sequence-screen video.zh-sequence-buffer{position:absolute;inset:0;opacity:1}
.zh-sequence-screen video[data-media-standby="true"]{opacity:0;pointer-events:none}
.zh-sequence-overlay{z-index:2}
.zh-sequence-player[data-loading="true"] .zh-sequence-screen:after{content:"";position:absolute;right:12px;top:12px;width:22px;height:22px;border:3px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:zh-buffer-spin .8s linear infinite;z-index:3;pointer-events:none}
@keyframes zh-buffer-spin{to{transform:rotate(360deg)}}
.zh-sequence-screen video::cue,.zh-video-box video::cue{font-size:clamp(12px,2.2vw,18px);line-height:1.25;color:#fff;background:#0c2932e8}
.zh-expanded{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:center;background:#071519;border-radius:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.zh-expanded .zh-sequence-screen{flex:initial;width:100%;max-height:calc(100dvh - 170px);aspect-ratio:16/9}
.zh-expanded .zh-sequence-controls{width:min(100%,900px);align-self:center}
.zh-sequence-player:is(:fullscreen,.zh-expanded) video::cue,.zh-video-box video:fullscreen::cue{font-size:clamp(14px,2.2vw,26px);line-height:1.25}

/* v20: compact directory and one, always-readable shadowing workflow. */
.zh-home-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 12px}
.zh-home-heading h1{font-size:23px;line-height:1.4;margin:0}.zh-home-heading .zh-progress-badge{font-size:16px;white-space:nowrap}.zh-home-heading .zh-progress-badge small{font-size:12px}
.zh-start-inline{width:100%;justify-content:space-between;background:#ebf1e7;font-size:15px;margin:0 0 20px;padding:11px 15px;min-height:46px;font-weight:500}
.zh-shadow-study{max-width:880px;margin:auto}.zh-shadow-role{display:flex;gap:8px;margin:12px 0}.zh-shadow-role .zh-button{flex:1;min-height:42px;font-size:14px;padding:8px 10px}
.zh-shadow-reading{background:#fffef9;border:1px solid #cbd9cf;border-radius:16px;padding:24px;text-align:left;overflow:visible}
.zh-shadow-speaker{display:block;font-size:13px;color:#50756b;margin-bottom:14px;font-weight:600}
.zh-shadow-reading .zh-word{font-size:30px;font-weight:600;line-height:1.65;margin:0 0 18px;overflow-wrap:anywhere}
.zh-shadow-reading .zh-pinyin{display:block;font-size:21px;line-height:1.75;margin:0 0 20px;color:#94672e}
.zh-shadow-reading .zh-meaning{display:block;font-size:19px;line-height:1.9;color:#42625c;border-top:1px solid #dce4d8;padding-top:16px;margin:0}
.zh-shadow-recorder{border:0;padding:16px 0 0;margin:0}.zh-shadow-recorder .zh-shadow-instruction{font-size:14px;margin:0 0 10px;color:#4b6b61}
.zh-shadow-main,.zh-shadow-replay{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.zh-shadow-recorder .zh-button{font-size:15px;padding:11px 9px;min-height:48px}.zh-shadow-recorder .recording svg{animation:zh-voice 1s ease-in-out infinite}.zh-record-status{font-size:13px;line-height:1.65;min-height:22px;margin:5px 0;color:#5b756a}
.zh-shadow-next{margin:15px 0 8px}.zh-shadow-chunks{margin:16px 0;background:#f3f4e9;border-radius:10px}.zh-shadow-chunks summary{padding:12px 14px;font-size:14px;cursor:pointer}.zh-shadow-chunks .zh-chunks{padding:0 12px 12px;margin:0}
.zh-shadow-study .zh-conversation-layout{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,1.4fr);gap:20px;height:auto;min-height:0;align-items:start}
.zh-shadow-study .zh-conversation-layout>.zh-media-side{grid-row:auto;position:static}.zh-shadow-study .zh-turn-reading{height:auto;max-height:none;overflow:visible;min-height:0;width:100%;padding:0}
.zh-simulation-note{font-size:13px;color:#64796e;margin:18px 0}.zh-simulation-note summary{cursor:pointer;padding:10px 0}.zh-simulation-note p{font-size:13px;line-height:1.7;margin:0}
@media(max-width:760px){
 .zh-direction{margin:0 0 12px;padding:4px}.zh-direction a,.zh-direction span{font-size:13px;padding:7px 5px}
 .zh-home-heading{margin:10px 0}.zh-home-heading h1{font-size:21px}.zh-home-heading .zh-progress-badge{font-size:14px}.zh-home-heading .zh-progress-badge small{display:none}
 .zh-start-inline{font-size:14px;margin-bottom:18px;min-height:44px;padding:9px 12px}.zh-start-inline svg{width:18px}
 .zh-shadow-study .zh-step-head{gap:10px;margin:5px 0 10px}.zh-shadow-study .zh-step-head h1{font-size:20px}.zh-shadow-study .zh-step-head>div{min-width:0}.zh-shadow-study .zh-step-head>.zh-button{white-space:nowrap;flex:none;font-size:12px;padding:8px;min-height:40px}
 .zh-shadow-study .zh-conversation-layout{display:block;height:auto;min-height:0}.zh-shadow-study .zh-media-side{width:100%;margin-bottom:12px}
 .zh-shadow-study .zh-media-side .zh-video-box{width:min(100%,250px);margin:auto}.zh-shadow-study .zh-media-side .zh-video-box video{height:auto;max-height:142px;aspect-ratio:16/9;object-fit:contain}.zh-shadow-study .zh-media-side .zh-video-note{display:none}
 .zh-shadow-study .zh-controls{margin:6px 0;justify-content:center}.zh-shadow-study .zh-controls select{font-size:12px;min-height:32px;padding:4px 24px 4px 8px}
 .zh-shadow-reading{padding:21px 19px}.zh-conversation .zh-shadow-reading{min-height:50svh}
 .zh-shadow-study .zh-turn-reading{flex:initial;height:auto;min-height:0;max-height:none;overflow:visible;overscroll-behavior:auto;padding:0}
 .zh-shadow-reading .zh-word{font-size:27px;line-height:1.7;margin-bottom:20px}.zh-shadow-reading .zh-pinyin{font-size:20px;line-height:1.8;margin-bottom:20px}.zh-shadow-reading .zh-meaning{font-size:18px;line-height:1.9}
 .zh-shadow-main{grid-template-columns:1fr}.zh-shadow-replay{gap:8px}.zh-shadow-replay .zh-button{font-size:13px;padding:10px 6px}.zh-shadow-recorder .zh-record-status{font-size:13px;margin:8px 0}.zh-shadow-recorder .zh-shadow-instruction{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.zh-shadow-recorder .recording svg{animation:none}}

/* v22: a compact, ordered first course, from short greetings to a question. */
.zh-topic-order{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;margin:5px 0;font-size:14px;line-height:1.5;color:#44675e}
.zh-beginner-steps{margin:0 0 14px}.zh-beginner-steps ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0;margin:0}
.zh-beginner-steps .zh-button{width:100%;min-height:48px;padding:7px 5px;font-size:13px;gap:6px;border-radius:9px;font-weight:500}
.zh-step-number{display:inline-flex;align-items:center;justify-content:center;flex:none;width:25px;height:25px;border-radius:50%;background:#eaf0e6;color:#42665b;font-size:13px;font-weight:600}
.zh-beginner-steps [aria-current=step]{background:#173e47;color:#fff;border-color:#173e47}.zh-beginner-steps [aria-current=step] .zh-step-number{background:#ffffff24;color:#fff}
.zh-basics-page{max-width:780px;margin:auto}.zh-basics-page .zh-course-intro{font-size:15px;margin:10px 0 15px}.zh-basics-page>.zh-button{font-size:16px;min-height:48px}
.zh-beginner-list{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:9px}.zh-beginner-list .zh-course-phrase{padding:0;border-radius:12px;overflow:hidden}.zh-beginner-list .is-next{border-color:#5a8373;background:#f0f5eb}
.zh-beginner-list button{display:flex;align-items:center;gap:13px;width:100%;padding:15px;background:transparent;border:0;text-align:left;color:inherit;font:inherit;cursor:pointer}.zh-beginner-list button:hover{background:#e9f0e680}.zh-beginner-list button:focus-visible{outline:3px solid #98703c;outline-offset:-3px;border-radius:12px}
.zh-beginner-copy{flex:1;min-width:0}.zh-beginner-copy strong{display:block;font-size:22px;line-height:1.5;font-weight:600}.zh-beginner-copy small{display:block;font-size:14px;line-height:1.6;color:#62766c;margin-top:3px}
.zh-beginner-status{display:flex;gap:4px;align-items:center;white-space:nowrap;font-size:12px;color:#547167}.zh-beginner-status svg{width:16px;height:16px}
.zh-basics-video{border-top:1px solid #d2dbcd;padding-top:5px;margin:20px 0}.zh-basics-video>summary{padding:15px 2px;font-size:15px;line-height:1.6;cursor:pointer;color:#45685d}
@media(max-width:760px){.zh-topic-order{grid-template-columns:1fr;font-size:13px;gap:2px}.zh-beginner-steps .zh-button{flex-direction:column;gap:4px;padding:7px 3px;font-size:12px;min-height:55px}.zh-beginner-steps .zh-step-number{width:21px;height:21px;font-size:12px}.zh-basics-page .zh-step-head h1{font-size:22px}.zh-beginner-list button{padding:13px 11px;gap:9px}.zh-beginner-copy strong{font-size:21px}.zh-beginner-copy small{font-size:13px}.zh-beginner-status{font-size:11px}.zh-basics-video>summary{font-size:14px}}
@media(max-width:360px){.zh-beginner-status{white-space:normal;max-width:40px;line-height:1.5}.zh-beginner-status svg{display:none}.zh-beginner-copy strong{font-size:20px}}

/* v23: 120 basics, twelve compact lessons with ten items each. */
.zh-basic-units{display:grid;gap:9px;margin:22px 0}.zh-basic-level{font-size:17px;line-height:1.5;margin:18px 0 2px;color:#496c60}.zh-basic-level:first-child{margin-top:0}
.zh-basic-unit{display:flex;align-items:center;gap:13px;padding:16px;text-align:left;background:#fffef9;border:1px solid #cbd7cd;border-radius:12px;color:var(--zh-ink);width:100%}.zh-basic-unit.is-next{background:#edf4e7;border-color:#648976}.zh-basic-unit:hover{background:#f0f5eb}.zh-basic-unit .zh-step-number{width:30px;height:30px;font-size:14px}
.zh-unit-copy{flex:1;min-width:0}.zh-unit-copy strong{display:block;font-size:18px;line-height:1.6}.zh-unit-copy small{display:block;font-size:14px;line-height:1.7;margin-top:2px;color:#60756b}
.zh-unit-count{font-size:16px;text-align:right;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}.zh-unit-count small{display:block;font-size:12px;color:#5d7669}
.zh-unit-progress{display:flex;align-items:center;gap:16px;margin:0 0 15px}.zh-unit-progress>span{font-size:14px;white-space:nowrap;color:#597467}.zh-unit-progress progress{flex:1;min-width:0;width:100%;height:6px;accent-color:#4e7c66;border:0;border-radius:5px;background:#dce6d6}.zh-unit-progress progress::-webkit-progress-bar{background:#dce6d6;border-radius:5px}.zh-unit-progress progress::-webkit-progress-value{background:#4e7c66;border-radius:5px}
.zh-beginner-copy .zh-unit-pinyin{display:block;font-size:16px;line-height:1.65;color:#956b36;overflow-wrap:anywhere;margin:3px 0}.zh-beginner-copy small{font-size:15px}.zh-word-context{font-size:14px;color:#60786a;line-height:1.7;margin:10px 0 0}.zh-basic-completion .zh-lead{margin-left:auto;margin-right:auto}
@media(max-width:760px){.zh-basic-unit{padding:13px 11px;gap:10px}.zh-unit-copy strong{font-size:17px}.zh-unit-copy small{font-size:14px}.zh-unit-count{font-size:14px}.zh-basics-page .zh-beginner-copy small{font-size:14px}.zh-basics-page .zh-beginner-list button{align-items:flex-start}.zh-basic-completion .zh-actions{flex-direction:column}.zh-basic-units{margin-top:18px}}

/* v24: one vocabulary module, followed by six conversation scenes. */
.zh-vocabulary-home{border:1px solid #cbd9cf;border-radius:14px;background:#eef3e9;padding:16px;margin:0 0 24px}.zh-vocabulary-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.zh-vocabulary-heading h2{font-size:20px;line-height:1.5;margin:0}.zh-vocabulary-progress{text-align:right;white-space:nowrap;font-size:16px;color:#3d6c5d;font-weight:600}.zh-vocabulary-progress small{display:block;font-size:12px;font-weight:400;color:#64786e}.zh-vocabulary-home>p{font-size:14px;color:#587166;line-height:1.6;margin:6px 0 12px}.zh-vocabulary-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.zh-vocabulary-actions .zh-button{font-size:15px;min-height:44px;padding:10px}
@media(max-width:760px){.zh-vocabulary-home{padding:13px;margin-bottom:22px}.zh-vocabulary-heading{gap:8px}.zh-vocabulary-heading h2{font-size:18px}.zh-vocabulary-progress{font-size:14px}.zh-vocabulary-actions .zh-button{font-size:14px;padding:10px 7px}.zh-vocabulary-home>p{margin-top:5px;font-size:14px}}

/* v25: phrase-card paging keeps vertical scrolling and the explicit back menu. */
.zh-shadow-reading[data-phrase-card]{touch-action:pan-y pinch-zoom}
.zh-shadow-reading[data-phrase-card]:focus-visible{outline:3px solid #b98642;outline-offset:3px}
.zh-swipe-guide{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid #dce4d8;padding-top:12px;margin:18px 0 0;font-size:14px;line-height:1.6;color:#42665b}
.zh-phrase-pager{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:10px 0 12px}.zh-phrase-pager .zh-button{font-size:14px;min-height:44px;padding:9px 10px;font-weight:500}
.zh-transcript-intro{font-size:15px;line-height:1.8;color:#4b6b61;margin:0 0 14px}
.zh-transcript>summary small{font-size:14px;line-height:1.65;margin-top:4px}

/* v26: vocabulary pages end with direct entry to the twelve vocabulary groups. */
.zh-vocabulary-groups{max-width:880px;margin:28px auto 22px;padding-top:20px;border-top:1px solid #cbd9cf}
.zh-vocabulary-groups .zh-section-heading{margin:0 0 8px;gap:10px}.zh-vocabulary-groups .zh-section-heading h2{font-size:21px;line-height:1.5}.zh-vocabulary-groups .zh-section-heading>span{font-size:14px;white-space:nowrap}
.zh-group-guide{font-size:14px;line-height:1.7;margin:0 0 15px;color:#587166}
.zh-vocab-group-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.zh-vocab-group{display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;padding:14px 12px;border:1px solid #cbd9cf;border-radius:12px;background:#fffef9;color:var(--zh-ink)}
.zh-vocab-group:hover{background:#edf3e9}.zh-vocab-group.is-current{background:#edf3e9;border-color:#719483}.zh-vocab-group-copy{flex:1;min-width:0}.zh-vocab-group-copy strong{display:block;font-size:16px;line-height:1.6}.zh-vocab-group-copy small{display:block;margin-top:3px;font-size:13px;line-height:1.6;color:#587166}
.zh-vocab-group-progress{flex:none;white-space:nowrap;text-align:right;font-size:14px;font-variant-numeric:tabular-nums;color:#4b7062}.zh-vocab-group-progress small{display:block;font-size:12px;line-height:1.6}
@media(max-width:600px){.zh-vocab-group-list{grid-template-columns:minmax(0,1fr)}.zh-vocabulary-groups .zh-section-heading h2{font-size:19px}.zh-vocab-group{gap:10px}.zh-vocabulary-progress small{font-size:12px;white-space:normal}.zh-vocabulary-heading h2{min-width:0}}