:root{--ink:#284238;--green:#26745f;--line:#e3e8df;--muted:#8b9688}*{box-sizing:border-box}body{margin:0;background:#f7f8f2;color:var(--ink);font:14px 'Segoe UI','Microsoft YaHei',sans-serif}button,select{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}button:disabled{opacity:.35;cursor:not-allowed}a{color:inherit;text-decoration:none;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #86b785;outline-offset:3px}header{height:84px;display:flex;align-items:center;padding:0 5%;gap:76px;background:#fff;border-bottom:1px solid var(--line)}.brand{font-size:32px;font-weight:750;letter-spacing:-1.5px;display:flex;align-items:center;gap:9px}.brand i{width:34px;height:34px;border-radius:12px;background:var(--green);color:#fff;font:italic 34px Georgia;text-align:center;line-height:32px}.brand span{color:#8fa86c;margin-left:-8px}nav{display:flex;align-items:center;gap:35px;color:var(--green);font-size:13px}nav button{color:#8b9588}header em{margin-left:auto;color:#95a18f;font:italic 15px Georgia}main{max-width:1280px;padding:28px 38px 0;margin:auto}.breadcrumb{font-size:11px;color:#94a08e}.heading{display:flex;justify-content:space-between;align-items:center;margin:35px 0 29px}.heading small{font-size:9px;letter-spacing:2.2px;color:#6e947b;font-weight:700}h1{font-size:29px;letter-spacing:-.7px;margin:13px 0}.heading p{font-size:13px;color:var(--muted);margin:12px 0 18px}.tags{display:flex;gap:8px;font-size:10px;color:#7f8b77}.tags span{padding:6px 10px;background:#eef0e7;border-radius:5px}.tags span:first-child{background:#e4eddb;color:#62804d}.number{font-size:9px;letter-spacing:2px;color:#92a18c;text-align:center}.number strong{display:block;font:64px Georgia;color:#d1dcc8;letter-spacing:0}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:25px;align-items:start}.video-box{aspect-ratio:16/9;position:relative;background:#214739;border-radius:13px 13px 0 0;overflow:hidden}video{display:block;width:100%;height:100%;object-fit:contain}.video-label{position:absolute;top:17px;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none;color:#f4ecd8;font-size:8px;letter-spacing:1.8px}.video-label span:last-child{letter-spacing:0;opacity:.65}#bigPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:#fffffff0;color:var(--green);font-size:22px;padding-left:10px;box-shadow:0 5px 20px #0002}#caption{position:absolute;bottom:16px;left:14px;right:14px;background:#14291baf;color:white;padding:8px;text-align:center;border-radius:5px;font-size:15px;pointer-events:none}#caption:empty{display:none}.controls{background:white;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;padding:0 17px 12px}#seek{display:block;width:100%;height:3px;accent-color:var(--green);margin:0 0 13px;cursor:pointer}.control-row{display:flex;align-items:center;gap:13px}#play{padding:0;font-size:17px;color:var(--green);width:22px}#time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:11px}select{border:0;border-radius:4px;background:#f1f4ec;padding:4px}.practice{background:white;border:1px solid var(--line);border-radius:12px;padding:22px 24px 0;margin-top:20px}.card-title{display:flex;justify-content:space-between;font-size:12px}.card-title b{font-weight:550}.card-title>span{font-size:10px;letter-spacing:1px;color:#97a28f}.current{padding:22px 0}.current small{font-size:9px;letter-spacing:1.5px;color:#a29972}.current h2{font-size:22px;font-weight:550;line-height:1.5;margin:9px 0}.current p{font-size:12px;color:var(--muted);margin:8px 0}.actions{display:flex;justify-content:center;gap:10px}.actions button,.bottom button{border:1px solid #dfe5d9;border-radius:7px;padding:11px 18px;font-size:12px}.primary,.actions .primary{background:var(--green);color:white;border:0;border-radius:7px;padding:12px 25px}.actions .recording{background:#b64f49}.record-info{border-top:1px solid #eef1e7;margin-top:21px;min-height:54px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;color:#98a18f}.record-info a{color:var(--green)}.tip{display:flex;gap:12px;align-items:center;color:#a0ad88;font-size:23px;padding:8px 4px}.tip p{font-size:11px;color:#929d87;line-height:1.9;margin:7px 0}.tip b{display:block;color:#78896b;font-weight:500}aside{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.aside-heading{padding:24px 23px 17px;display:flex;justify-content:space-between;align-items:center}.aside-heading h2{font-size:16px;margin:0 0 8px}.aside-heading p{font-size:11px;color:#94a08c;margin:0}.aside-heading>span{border:1px solid var(--line);border-radius:5px;padding:5px 9px;font-size:10px;color:var(--muted)}.toggles{display:flex;gap:9px;padding:0 23px 17px;border-bottom:1px solid var(--line)}.toggles button{font-size:10px;border:1px solid var(--line);padding:7px 10px;border-radius:5px}.toggles button[aria-pressed=true]{background:#edf3e7;color:#648351;border-color:#dfe8d5}#sentences{max-height:460px;overflow:auto;padding:10px 12px;scrollbar-width:thin;scrollbar-color:#d8e1d0 transparent}.sentence{display:flex;width:100%;text-align:left;gap:12px;padding:15px 12px;border:1px solid transparent;border-radius:7px;margin:2px 0;position:relative}.sentence:hover{background:#f7f9f2}.sentence.active{background:#edf3e6;border-color:#dfe8d5}.sentence.active:before{content:'';position:absolute;left:-1px;top:15px;bottom:15px;width:3px;background:#729453;border-radius:3px}.idx{font-size:10px;color:#a1ac96;padding-top:4px;min-width:16px}.en{display:block;font-size:13px;color:#53604a;line-height:1.7}.zh{display:block;font-size:11px;line-height:1.5;margin-top:5px;color:#95a08a}.sentence.done .idx{font-size:0}.sentence.done .idx:after{content:'✓';font-size:13px;color:var(--green)}.progress{border-top:1px solid var(--line);padding:19px 23px}.progress>div:first-child{font-size:10px;color:#909c83;display:flex;justify-content:space-between}.progress strong{font-weight:500;color:var(--green)}.track{height:4px;background:#eef1e7;margin:12px 0 16px;border-radius:5px}.track div{height:100%;background:#8eaa70;width:0;transition:width .3s;border-radius:5px}#complete{border:1px solid #dce7d0;background:#f4f7ed;border-radius:6px;width:100%;padding:10px;font-size:11px;color:#6a8751}.bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0;margin-top:16px}.bottom>span{font-size:10px;color:#98a18c}kbd{font:10px 'Segoe UI';padding:3px 5px;border:1px solid #dfe5d7;border-radius:4px;background:white}.bottom button{background:white;margin-left:8px;padding:9px 16px}footer{display:flex;gap:16px;align-items:center;padding:23px 0;border-top:1px solid var(--line);font-size:10px;color:#a4ae98}footer b{font-size:20px;color:#809773;letter-spacing:-1px}footer span:last-child{margin-left:auto}dialog{max-width:480px;border:1px solid var(--line);border-radius:14px;padding:30px;color:var(--ink);line-height:1.9}dialog::backdrop{background:#173c2d77}dialog h2{font-size:20px}dialog p{font-size:13px;color:#7e8c74}#notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;background:#28533d;color:white;padding:14px 22px;border-radius:8px;font-size:13px;z-index:20}[hidden]{display:none!important}@media(max-width:850px){header{padding:0 22px;height:70px;gap:32px}header em{display:none}main{padding:23px 20px 0}.workspace{grid-template-columns:1fr}.heading{margin-top:26px}h1{font-size:24px}.number strong{font-size:50px}#sentences{max-height:360px}.bottom>span,footer span:last-child{display:none}.bottom{justify-content:flex-end}}@media(max-width:440px){header{gap:24px}nav{gap:14px}h1{font-size:20px}.number{display:none}.tags{gap:5px}.tags span{padding:5px 7px}.practice{padding:18px 16px 0}.actions{gap:7px}.actions button{padding:11px 13px}.current h2{font-size:20px}.video-label{font-size:7px}}

#sentences{height:460px;max-height:none;overflow-anchor:none;overscroll-behavior:contain;position:relative;scroll-behavior:auto}.spoken-word{border-radius:3px}.word-current{outline:2px solid #d93c39;outline-offset:2px;background:#fff0ed;color:#b32825}@media(max-width:850px){#sentences{height:360px;max-height:none}}

.spoken-word{display:inline-block}.sentence .spoken-word.word-current,#english .spoken-word.word-current{outline:none;border-radius:3px;box-shadow:0 0 0 2px #e12626;background:#ffe8e5;color:#b71919;position:relative;z-index:1}

/* Transcript text: English +70%, Chinese +80%. */
#sentences .en{font-size:19.89px}#sentences .zh{font-size:13.86px}#sentences .sentence>span:last-child{min-width:0;overflow-wrap:anywhere}
.sentence .spoken-word{cursor:pointer;border-radius:3px}.sentence .spoken-word:hover,.sentence .spoken-word:focus-visible{background:#e6f2e5;outline:2px solid #7eaa73;outline-offset:2px}.dictionary-dialog{width:min(480px,calc(100vw - 32px));max-width:480px;max-height:min(80vh,700px);overflow:auto;position:relative;padding:28px;color:var(--ink);border:1px solid var(--line);border-radius:10px;background:#fff}.dictionary-dialog::backdrop{background:#173c2d88}.dictionary-close{position:absolute;right:14px;top:8px;font-size:28px;color:#718173}.dictionary-entry{display:flex;align-items:center;gap:12px;padding-right:28px}.dictionary-entry h2{font-size:28px;margin:0;overflow-wrap:anywhere}.dictionary-audio{width:34px;height:34px;border-radius:50%;background:#e9f2e7;color:var(--green)}.dictionary-meta{display:flex;gap:12px;align-items:center;margin:8px 0 17px;color:#82907e;font-size:13px}.dictionary-translation{font-size:20px;font-weight:600;margin:0 0 14px;color:#2d5847}.dictionary-dialog ul{list-style:none;margin:0;padding:0}.dictionary-dialog li{display:grid;grid-template-columns:58px 1fr;gap:8px;padding:10px 0;border-top:1px solid #edf0e9;font-size:13px;line-height:1.6}.dictionary-dialog li b{font-weight:500;color:#71876e}.dictionary-dialog #dictionaryStatus{font-size:12px;color:#899488;min-height:18px}.dictionary-done{display:block;margin:12px 0 0 auto;padding:8px 18px;border-radius:6px;background:var(--green);color:white}

.sentence .spoken-word.word-current,#english .spoken-word.word-current{box-shadow:0 0 0 2px #27945c;background:#e2f5e8;color:#176a3c}
.toggles button{background:#edf3e7;color:#648351;border-color:#dfe8d5;transition:background-color .15s,color .15s}
.toggles button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}

.workspace>aside>.toggles{padding:12px 26px;align-items:center;margin:0}.sentence-total{margin-left:auto;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:5px 9px;white-space:nowrap}


/* Keep the desktop seek handle clear of the video edge. */
.controls{padding-top:14px}#seek{position:relative;z-index:1;height:6px;margin:0 0 13px}
@media(max-width:850px){
 .video-box{border-radius:13px}
 .video-box>.controls{position:absolute;left:0;right:0;bottom:0;padding:15px 15px 12px;border:0;border-radius:0;background:linear-gradient(transparent,rgba(0,0,0,.78));color:white;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
 .video-box.controls-visible>.controls{opacity:1;visibility:visible;pointer-events:auto}
 .video-box #seek{accent-color:#76c6a8;height:5px;margin-bottom:10px}
 .video-box #play,.video-box #time{color:white}
 .video-box #speed{color:white;background:#ffffff25;border:1px solid #ffffff55}
 .video-box #speed option{color:#284238;background:white}
 .video-box #caption{bottom:18px;transition:bottom .2s}
 .video-box.controls-visible #caption{bottom:86px}
 .video-box #bigPlay{width:48px;height:48px;font-size:18px}
}

.workspace>aside>.toggles{gap:7px;padding-left:14px;padding-right:14px;flex-wrap:wrap}.toggles button{white-space:nowrap}.toggles button:disabled{cursor:not-allowed}.toggles #sentencePrev,.toggles #sentenceNext{background:#edf3e7;color:#648351;border-color:#dfe8d5}
#dictionaryDefinitions{display:none}.dictionary-translation{white-space:pre-line}
@media(max-width:850px){.aside-tabs{flex-wrap:wrap;gap:4px;padding:7px 8px}.aside-tabs .toggles{margin-left:auto;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;min-width:0;overflow:visible;padding:2px 0 3px}.aside-tabs .toggles button{flex:none}.aside-tabs>button[role=tab]{min-height:34px}.aside-tabs>button[role=tab][aria-selected=true]:after{bottom:-7px}}
.aside-tabs{display:flex;align-items:center;gap:5px;min-height:54px;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}.aside-tabs>button[role=tab]{align-self:stretch;min-height:38px;padding:7px 9px;border:0;border-radius:0;color:#626b60;font-size:13px;position:relative}.aside-tabs>button[role=tab][aria-selected=true]{background:transparent;color:#374b3c;font-weight:650}.aside-tabs>button[role=tab][aria-selected=true]:after{content:'';position:absolute;left:5px;right:5px;bottom:-8px;height:3px;border-radius:3px 3px 0 0;background:#27945c}.aside-tabs .toggles{display:flex;align-items:center;gap:6px;margin-left:auto;padding:0;border:0;white-space:nowrap}.aside-tabs .toggles button{padding:6px 8px;font-size:10px;border-radius:4px}.aside-tabs .sentence-total{display:none}.aside-tabs button:focus-visible{outline-offset:1px}#practicePanel .practice{margin:0;padding:5px 22px 0;border:0;border-radius:0;background:transparent}#practicePanel .current{padding-top:5px}#practicePanel .record-info{padding:8px 0}
#sentences .en{font-weight:500}#practicePanel #chinese{font-size:13.86px;line-height:1.5}.dictionary-entry .dictionary-audio{display:grid;place-items:center;align-content:center;justify-content:center;flex:none;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:#e9f2e7;color:var(--green)}.dictionary-entry .dictionary-audio svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dictionary-entry .dictionary-audio[aria-pressed=true]{background:#285f49;color:white}

.desktop-transport{display:contents}.desktop-action{display:none}
@media(min-width:851px){
.controls .control-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;min-height:72px}
.controls #time{grid-column:1;grid-row:1;justify-self:start;white-space:nowrap}
.controls .right{grid-column:3;grid-row:1;justify-self:end;margin-left:0}
.desktop-transport{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;gap:10px}
.desktop-transport .desktop-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px 8px;min-width:58px;border-radius:8px;color:#1c3028;font-size:13px;white-space:nowrap}
.desktop-action svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.desktop-action:hover{background:#eef4ee}.desktop-action[aria-pressed=true]{background:#e2eee6;color:#176b50}
.desktop-transport #play{flex:none;width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:#176b50;color:white;font-size:32px;line-height:1;padding:0 0 0 3px}
.desktop-transport #play[aria-label=暂停]{padding-left:0}
}
@media(min-width:851px) and (max-width:1150px){.desktop-transport{gap:2px}.desktop-transport .desktop-action{min-width:45px;padding:6px 3px;font-size:11px}.desktop-transport #play{width:48px;height:48px;font-size:27px}.controls #time{font-size:9px}}

#desktopSubtitles{display:none}
@media(min-width:851px){
#desktopSubtitles{display:block;background:#fff;border-inline:1px solid var(--line);border-bottom:1px solid var(--line);padding:21px 28px 20px;text-align:left}
#desktopEnglish{margin:0;color:#284238;font-family:'Segoe UI',Arial,sans-serif;font-size:21px;font-weight:550;line-height:1.7;overflow-wrap:anywhere;letter-spacing:.1px}
#desktopEnglish .spoken-word{cursor:pointer;border-radius:4px;padding:2px 0;transition:background .15s,color .15s}
#desktopEnglish .spoken-word:hover{background:#e5f0e8;color:#176b50}
#desktopChinese{margin:9px 0 0;color:#718173;font-size:17px;line-height:1.85;font-weight:400;overflow-wrap:anywhere}
#desktopChinese[hidden]{display:none}
.controls{padding-bottom:15px}.desktop-transport .desktop-action{border:1px solid transparent;border-radius:9px;line-height:1.45}.desktop-transport .desktop-action[aria-pressed=true]{border-color:#d3e4d8}.desktop-transport #play{box-shadow:0 2px 5px #174b3512}
}

#mobilePlayerDock[hidden],#overlayPlay[hidden]{display:none!important}
@media(max-width:850px){
body{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
#mobilePlayerDock{position:fixed;inset:auto 0 0;z-index:900;display:block;padding:10px max(10px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:#fffffff5;border-top:1px solid #e0e8df;box-shadow:0 -4px 22px #2447380a;backdrop-filter:blur(12px);margin:0}
#mobilePlayerDock .desktop-transport{display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:center;gap:3px;width:min(100%,600px);margin:auto}
#mobilePlayerDock .desktop-action{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:62px;min-width:0;padding:5px 1px;border:1px solid transparent;border-radius:10px;color:#284238;font-size:12px;line-height:1.4;white-space:nowrap;-webkit-tap-highlight-color:transparent}
#mobilePlayerDock .desktop-action svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#mobilePlayerDock .desktop-action[aria-pressed=true]{background:#e5f0e8;color:#176b50;border-color:#d8e7dc}
#mobilePlayerDock #play{justify-self:center;display:grid;place-items:center;width:64px;height:64px;padding:0 0 0 3px;border-radius:50%;background:#176b50;color:white;font-size:34px;line-height:1;box-shadow:0 3px 8px #176b5018}
#mobilePlayerDock #play[aria-label=暂停]{padding-left:0}
#overlayPlay{color:white;padding:3px;font-size:19px;min-width:32px;min-height:32px}
html{scroll-padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:350px){#mobilePlayerDock .desktop-transport{grid-template-columns:1fr 1fr 62px 1fr 1fr}#mobilePlayerDock .desktop-action{font-size:11px}#mobilePlayerDock #play{width:56px;height:56px;font-size:30px}}

#sentences .sentence{display:block;position:relative;padding:29px 12px 14px;text-align:left}
#sentences .sentence .sentence-text{display:block;width:100%;min-width:0}
#sentences .sentence .idx{position:absolute;top:8px;right:39px;left:auto;min-width:0;padding:0;font-size:10px;line-height:18px;color:#99a78e}
#sentences .sentence .en,#sentences .sentence .zh{width:100%;overflow-wrap:anywhere}
#sentences .sentence .sentence-star{position:absolute;top:7px;right:11px;display:grid;place-items:center;width:20px;height:20px;color:#85968a;cursor:default}
#sentences .sentence-star svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
#sentences .sentence.active .sentence-star{color:#658575}

/* Edge-to-edge lesson video on phones; desktop and library remain unchanged. */
@media(max-width:850px){
body.lesson-page main{padding:0;max-width:none;width:100%}
body.lesson-page .workspace{gap:10px}
body.lesson-page .workspace>section{min-width:0}
body.lesson-page .video-box{width:100%;border-radius:0;margin:0}
body.lesson-page .workspace>aside{width:calc(100% - 12px);margin:0 6px;border-radius:12px}
body.lesson-page #sentences .en{font-size:17.901px}
body.lesson-page .bottom,body.lesson-page footer{margin-left:12px;margin-right:12px}
}

/* Compact mobile dock: scale the visible controls and spacing by 20%. */
@media(max-width:850px){
body.lesson-page{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
#mobilePlayerDock{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
#mobilePlayerDock .desktop-transport{grid-template-columns:1fr 1fr 61px 1fr 1fr;gap:2px}
#mobilePlayerDock .desktop-action{min-height:49.6px;gap:4px;padding:4px 1px;font-size:9.6px;border-radius:8px}
#mobilePlayerDock .desktop-action svg{width:20px;height:20px}
#mobilePlayerDock #play{width:51.2px;height:51.2px;font-size:27.2px;padding-left:2.4px}
#mobilePlayerDock #play[aria-label=暂停]{padding-left:0}
}
@media(max-width:350px){
#mobilePlayerDock .desktop-transport{grid-template-columns:1fr 1fr 50px 1fr 1fr}
#mobilePlayerDock .desktop-action{font-size:8.8px}
#mobilePlayerDock #play{width:44.8px;height:44.8px;font-size:24px}
}

/* Desktop focus belongs to the subtitle panel beneath the video. */
@media(min-width:851px){
#sentences .sentence.active{background:#edf3e6;border-color:#dfe8d5}
#sentences .sentence.active:before{display:block}
#sentences .sentence .spoken-word.word-current{box-shadow:0 0 0 2px #27945c;outline:none;background:#e2f5e8;color:#176a3c}
#desktopSubtitles{background:#edf3e6;border-bottom-color:#dfe8d5;box-shadow:inset 3px 0 #729453}
#desktopEnglish .spoken-word.word-current{outline:none;box-shadow:0 0 0 2px #23965c;background:#e5f4e8;color:#176b50;border-radius:3px;position:relative;z-index:1}
}

@media(min-width:851px){
#desktopSubtitles{min-width:0;overflow:hidden}
#desktopEnglish,#desktopChinese{display:block;white-space:nowrap;overflow:hidden;overflow-wrap:normal;word-break:normal;max-width:100%;padding:3px;scroll-behavior:auto;scrollbar-width:none}
#desktopEnglish .spoken-word{white-space:pre;flex:none}
#desktopChinese[hidden]{display:none}
}

@media(min-width:851px){
body.lesson-page .workspace>aside{height:var(--player-height,auto);display:flex;flex-direction:column;min-height:0}
body.lesson-page .workspace>aside>.aside-tabs{flex:none}
body.lesson-page #sentencePanel,body.lesson-page #practicePanel{flex:1;min-height:0;overflow:hidden}
body.lesson-page #sentencePanel #sentences{height:100%;max-height:none;box-sizing:border-box}
body.lesson-page #practicePanel{overflow:auto}
}

/* Consistent pause and repeat-one symbols, independent of system glyph fonts. */
.desktop-transport #play[aria-label=暂停],#overlayPlay[aria-label=暂停]{font-size:0}
.desktop-transport #play[aria-label=暂停]::before,#overlayPlay[aria-label=暂停]::before{content:'';display:block;width:22px;height:28px;background:linear-gradient(to right,currentColor 0 35%,transparent 35% 65%,currentColor 65% 100%)}
#desktopLoop .loop-one{display:none;fill:currentColor;stroke:none;font:600 8px Arial,sans-serif}
#desktopLoop[aria-pressed=true] .loop-one{display:block}
@media(max-width:850px){
#mobilePlayerDock #play[aria-label=暂停]{font-size:0}
#mobilePlayerDock #play[aria-label=暂停]::before{width:18px;height:23px}
#overlayPlay[aria-label=暂停]::before{width:12px;height:16px;margin:auto}
}
@media(max-width:350px){#mobilePlayerDock #play[aria-label=暂停]::before{width:16px;height:20px}}

.aside-tabs .toggles .sentence-play{display:none}
@media(min-width:851px){.aside-tabs .toggles .sentence-play{display:inline-flex;align-items:center;justify-content:center;flex:none;width:29px;height:29px;padding:5px;border-radius:5px}.sentence-play svg{display:block;width:17px;height:17px;fill:currentColor}}

/* Mobile video overlay contains only the seek bar; speed lives in the tabs. */
.mobile-seek-row{display:contents}.mobile-seek-time{display:none}
@media(max-width:850px){
 .lesson-page .mobile-seek-row{display:flex;align-items:center;gap:9px;width:100%;min-width:0}
 .lesson-page .mobile-seek-time{display:block;flex:none;font-size:10px;line-height:20px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}
 .lesson-page .mobile-seek-row #seek{flex:1;min-width:0;width:0}
 .lesson-page .video-box>.controls{padding:0 14px 6px;bottom:0}
 .lesson-page .video-box>.controls .control-row{display:none}
 .lesson-page .video-box #seek{margin:0;height:16px}
 .lesson-page .aside-tabs .toggles :is(#sentencePrev,#sentenceNext){display:none}
 .lesson-page .aside-tabs #speed{height:29px;padding:4px 6px;font-size:11px;border:1px solid var(--line);border-radius:5px;background:#edf3e7;color:#285f49}
 .lesson-page .video-box.controls-visible #caption{bottom:30px}
 html[data-theme=dark] .lesson-page .aside-tabs #speed{background:#25372c;color:#c0d4c5;border-color:#435a49}
}

#caption{pointer-events:auto}
#caption .cc-line{display:block;white-space:nowrap;overflow:hidden;max-width:100%;text-align:center;scrollbar-width:none;line-height:1.65}
#caption .cc-line::-webkit-scrollbar{display:none}
#caption .cc-en{font-family:var(--caption-en-font,Arial,sans-serif);font-size:var(--caption-en-size,15px);color:var(--caption-en-color,#fff);background:var(--caption-en-background,transparent);-webkit-text-stroke:var(--caption-en-outline-width,0px) var(--caption-en-outline-color,#000);paint-order:stroke fill}
#caption .cc-zh{font-family:var(--caption-zh-font,'Microsoft YaHei',sans-serif);font-size:var(--caption-zh-size,13px);color:var(--caption-zh-color,#e0eadb);background:var(--caption-zh-background,transparent);-webkit-text-stroke:var(--caption-zh-outline-width,0px) var(--caption-zh-outline-color,#000);paint-order:stroke fill;margin-top:2px}
#caption .spoken-word{cursor:pointer}
#caption .spoken-word:hover,#caption .spoken-word:focus-visible{background:#456c50;outline:1px solid #9acd9d;outline-offset:1px}

@media(min-width:851px){body.lesson-page #desktopSubtitles{display:none}}

/* Center transport symbols; offset the triangle to align its visual center. */
.desktop-transport #play[aria-label]{display:flex;align-items:center;justify-content:center;padding:0;font-size:0;line-height:1}
.desktop-transport #play[aria-label]::before{content:'';display:block;flex:none;margin:0;transform:none}
.desktop-transport #play[aria-label=播放]{position:relative}
.desktop-transport #play[aria-label=播放]::before{position:absolute;left:50%;top:50%;transform:translate(-33.333333%,-50%);width:25.6px;height:25.6px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.desktop-transport #play[aria-label=暂停]::before{width:17.6px;height:22.4px;clip-path:none;background:linear-gradient(to right,currentColor 0 35%,transparent 35% 65%,currentColor 65% 100%)}
@media(min-width:851px) and (max-width:1150px){.desktop-transport #play[aria-label=播放]::before{width:21.6px;height:21.6px}}
@media(max-width:850px){
#mobilePlayerDock #play[aria-label]{display:flex;align-items:center;justify-content:center;padding:0;font-size:0}
#mobilePlayerDock #play[aria-label=播放]::before{width:21.76px;height:21.76px}
#mobilePlayerDock #play[aria-label=暂停]::before{width:14.4px;height:18.4px}
}
@media(max-width:350px){
#mobilePlayerDock #play[aria-label=播放]::before{width:19.2px;height:19.2px}
#mobilePlayerDock #play[aria-label=暂停]::before{width:12.8px;height:16px}
}
#caption{background:transparent}
#caption .cc-en{padding-inline:4px}
#caption .cc-zh{padding-inline:4px;margin-top:0}
#caption .cc-en{font-weight:var(--caption-en-weight,400)}
#caption .cc-zh{font-weight:var(--caption-zh-weight,400)}

/* The lesson shortcut bar follows the player column and defines the aside bottom. */
body.lesson-page .workspace>section{min-width:0}
body.lesson-page .workspace>section>.bottom{width:100%;box-sizing:border-box;margin:16px 0 0;padding:16px 0;justify-content:flex-start}
@media(max-width:850px){body.lesson-page .workspace>section>.bottom{display:none}}