#lesson-progress-review{--lp-bg:light-dark(#f5f4ef,#202522);--lp-paper:light-dark(#fffefa,#29312c);--lp-text:light-dark(#293c33,#e4ece5);--lp-muted:light-dark(#64746a,#abbab0);--lp-line:light-dark(#d5ddd5,#4a5a50);--lp-soft:light-dark(#ebefea,#354239);--lp-accent:light-dark(#315d45,#c2dec9);--lp-on:light-dark(#fffefa,#203c2a);--lp-yellow:light-dark(#f7ebbf,#5a5030);--lp-left:3.35fr;color:var(--lp-text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;width:100%;padding-top:52px}
#lesson-progress-review *{box-sizing:border-box}#lesson-progress-review [hidden]{display:none!important}#lesson-progress-review p,#lesson-progress-review h2{margin:0}#lesson-progress-review button{font:inherit;color:var(--lp-text);background:var(--lp-paper);border:1px solid var(--lp-line);border-radius:8px;padding:10px 12px;min-height:44px}#lesson-progress-review button:hover:not(:disabled){background:var(--lp-soft)}#lesson-progress-review button:focus-visible{outline:3px solid var(--lp-accent);outline-offset:3px}#lesson-progress-review strong,#lesson-progress-review b{font-weight:500}
#lesson-progress-review .lp-shell{background:var(--lp-bg);border:1px solid var(--lp-line);border-radius:14px;padding:12px}
#lesson-progress-review .lp-progress{display:grid;grid-template-columns:repeat(8,32px);gap:4px;margin-bottom:10px;width:max-content;max-width:100%}
#lesson-progress-review .lp-progress button{display:flex;align-items:center;justify-content:center;padding:0;min-height:32px;height:32px;width:32px;font-size:13px;border:0;border-radius:6px;background:var(--lp-soft);color:var(--lp-accent)}#lesson-progress-review .lp-progress svg{width:15px;height:15px}
#lesson-progress-review .lp-progress button.lp-current{background:var(--lp-accent);color:var(--lp-on)}#lesson-progress-review .lp-progress button:disabled{background:transparent;color:var(--lp-muted)}
#lesson-progress-review .lp-layout{display:grid;grid-template-columns:minmax(0,var(--lp-left)) minmax(216px,1fr);gap:12px;align-items:stretch}#lesson-progress-review .lp-left{min-width:0}
#lesson-progress-review .lp-board{border:1px solid var(--lp-line);border-radius:10px 10px 0 0;background:var(--lp-paper);overflow:hidden}#lesson-progress-review .lp-board header{height:52px;display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--lp-line)}#lesson-progress-review .lp-board header>strong{white-space:nowrap}#lesson-progress-review #lp-view{font-size:12px;color:var(--lp-muted);margin-left:auto}#lesson-progress-review .lp-media{display:flex;gap:4px}#lesson-progress-review .lp-media button{display:flex;align-items:center;justify-content:center;padding:8px;min-height:36px;width:36px;border:0;background:transparent}#lesson-progress-review .lp-media button:disabled{opacity:.45}
#lesson-progress-review .lp-stage{aspect-ratio:16/9;position:relative;overflow:hidden;container-type:inline-size}#lesson-progress-review .lp-scene-label{position:absolute;left:12px;top:10px;font-size:12px;color:var(--lp-muted)}#lesson-progress-review .lp-ground{position:absolute;left:5%;right:5%;top:34%;bottom:10%;background:var(--lp-soft);border-radius:16px}
#lesson-progress-review .lp-object{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transform:translate(-50%,-50%);width:20%;height:27%;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-paper);font-size:clamp(14px,2.5cqw,20px)}#lesson-progress-review .lp-object small{font-size:clamp(11px,1.8cqw,14px);color:var(--lp-muted)}#lesson-progress-review .lp-ref{left:25%;top:58%}#lesson-progress-review .lp-target{left:68%;top:58%;background:var(--lp-yellow)}#lesson-progress-review .lp-companion{left:50%;top:76%;height:12%;width:20%;font-size:12px}#lesson-progress-review #lp-opening{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--lp-muted)}
#lesson-progress-review .lp-dialogue{display:flex;align-items:center;gap:10px;height:76px;padding:8px 12px;background:var(--lp-paper);border:1px solid var(--lp-line);border-top:0;border-radius:0 0 10px 10px}#lesson-progress-review .lp-avatar{width:38px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--lp-soft);border-radius:6px;font-size:12px;color:var(--lp-muted)}#lesson-progress-review #lp-subtitle{font-size:15px;line-height:1.5}
#lesson-progress-review .lp-answer-panel{background:var(--lp-paper);border:1px solid var(--lp-line);border-radius:10px;padding:16px;display:flex;flex-direction:column;min-width:0}#lesson-progress-review .lp-question-step{font-size:12px;color:var(--lp-muted);margin-bottom:14px}#lesson-progress-review h2{font-size:19px;line-height:1.55;font-weight:500}#lesson-progress-review .lp-options{display:grid;gap:10px;margin-top:20px}#lesson-progress-review .lp-options button{text-align:left;min-height:48px}#lesson-progress-review .lp-options button[aria-pressed="true"]{border:2px solid var(--lp-accent);padding:9px 11px}#lesson-progress-review #lp-feedback{font-size:14px;margin-top:14px;min-height:22px}#lesson-progress-review .lp-end{margin-top:auto;padding-top:12px}#lesson-progress-review .lp-end p{font-size:13px;color:var(--lp-muted);margin-bottom:8px}#lesson-progress-review .lp-end>div{display:flex;gap:8px;flex-wrap:wrap}#lesson-progress-review .lp-end button{flex:1;white-space:nowrap;font-size:14px;padding:10px 8px}#lesson-progress-review button.lp-primary{background:var(--lp-accent);color:var(--lp-on);border-color:var(--lp-accent)}
#lesson-progress-review .lp-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:light-dark(#f5f4ef99,#20252299)}#lesson-progress-review .lp-overlay button{display:flex;align-items:center;gap:10px;background:var(--lp-accent);color:var(--lp-on);padding:12px 20px}
@media(max-width:700px){#lesson-progress-review .lp-layout{grid-template-columns:minmax(0,1fr)}#lesson-progress-review .lp-answer-panel{min-height:240px}#lesson-progress-review .lp-dialogue{height:92px}#lesson-progress-review .lp-board header{gap:6px}#lesson-progress-review #lp-view{font-size:11px}}
@media(pointer:coarse){#lesson-progress-review .lp-progress{grid-template-columns:repeat(8,44px)}#lesson-progress-review .lp-progress button{width:44px;height:44px}}
@media(pointer:coarse) and (max-width:420px){#lesson-progress-review .lp-progress{grid-template-columns:repeat(4,44px)}}

body{margin:0;background:#f5f4ef}#lesson-progress-review{max-width:1450px;margin:auto;padding:4vh 3vw;color-scheme:light}#lesson-progress-review .lp-stage iframe{width:100%;height:100%;border:0;display:block}#lesson-progress-review .lp-overlay:empty{display:none}#lesson-progress-review .lp-avatar.speaking{background:#dae8d9}#lesson-progress-review .lp-options{margin-bottom:15px}#lesson-progress-review #lp-subtitle{flex:1;min-width:0;overflow:hidden;max-height:100%}#lesson-progress-review .lp-current:disabled{background:var(--lp-accent);color:white}#lesson-progress-review .lp-dialogue{height:76px}
#lesson-progress-review{box-sizing:border-box}#lesson-progress-review .lp-progress button.lp-current:disabled{background:var(--lp-accent);color:var(--lp-on)}
#lesson-progress-review button:focus:not(:focus-visible){outline:none}

.answer-check{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e2efdf;color:#285e41;font-weight:700;font-size:20px}

#sound[aria-pressed="false"] .slash, #sound[aria-pressed="true"] .waves{display:none}

#film{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--lp-paper)}
.film-stage{position:relative;flex:1;min-height:0;overflow:hidden}
#film-track,#film-background{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#film-background{pointer-events:none}
#film[data-stage="summary"] #film-background{left:19%;width:81%}
#film-presenter{position:absolute;left:2%;bottom:4%;width:15%;aspect-ratio:0.86;border-radius:12px;background:#808080 url(media/pipi-views.png) no-repeat 1% 63%;background-size:400% auto;pointer-events:none}
.film-controls{display:flex;align-items:center;gap:12px;padding:8px 16px;color:var(--lp-muted);font-size:12px;font-variant-numeric:tabular-nums}
.film-controls input{flex:1;accent-color:var(--lp-accent)}

#film-presenter.has-footage{background:none}

.question-video{position:absolute;inset:0;z-index:3;background:#f4f5f2;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:32px}.video-placeholder{display:flex;flex-direction:column;align-items:center;gap:18px;color:#41584a}.video-placeholder>span{font-size:48px}.video-placeholder strong{font-size:24px}.question-video progress{width:100%;accent-color:var(--lp-accent)}

/* Shared presenter slot stays outside the stage and its seek controls. */
#lesson-progress-review .lp-dialogue{position:relative;z-index:1}
#lesson-progress-review .lp-dialogue #film-presenter{position:relative;left:auto;bottom:auto;width:38px;height:46px;aspect-ratio:auto;flex:none;border-radius:6px;background-color:var(--lp-soft);pointer-events:none}
#film[data-stage="summary"] #film-background{left:0;width:100%}

#lesson-progress-review .lp-avatar,#lesson-progress-review .lp-avatar.speaking{background:transparent;position:relative;overflow:hidden;width:48px;height:60px;pointer-events:none}
#lesson-progress-review .lp-avatar img{width:100%;height:100%;object-fit:contain;transform-origin:50% 90%}
#lesson-progress-review .lp-avatar.speaking img{animation:max-talk .55s ease-in-out infinite alternate}
#lesson-progress-review .lp-avatar.avatar-paused img{animation-play-state:paused}
@keyframes max-talk{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-1px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){#lesson-progress-review .lp-avatar.speaking img{animation:none}}

/* Larger transparent portrait; motion is contained below the player controls. */
#lesson-progress-review .lp-avatar{width:80px;height:98px;flex:0 0 80px;overflow:hidden;align-self:center}
#lesson-progress-review .lp-dialogue{height:116px;min-height:116px}
#lesson-progress-review .lp-avatar img{display:none}
#lesson-progress-review .lp-avatar::before{content:"";display:block;width:80px;height:98px;background:url(media/max-speaking-sprite-v1.png) no-repeat 0 center;background-size:300% 100%}
#lesson-progress-review .lp-avatar.speaking::before{animation:max-expression 1.1s steps(1,end) infinite}
#lesson-progress-review .lp-avatar.avatar-paused::before{animation-play-state:paused}
@keyframes max-expression{0%,25%,65%,100%{background-position:0 center}12%,38%,78%{background-position:50% center}48%{background-position:100% center}}
@media(prefers-reduced-motion:reduce){#lesson-progress-review .lp-avatar.speaking::before{animation:none}}

#lesson-progress-review .lp-dialogue #film-presenter{width:80px;height:98px;flex:0 0 80px;background:transparent;overflow:hidden;align-self:center}
#lesson-progress-review .lp-dialogue #film-presenter::before{content:"";display:block;width:80px;height:98px;background:url(media/pipi-speaking-sprite-v1.png) no-repeat 0 center;background-size:300% 100%}
#lesson-progress-review #film-presenter.speaking::before{animation:max-expression 1.1s steps(1,end) infinite}
#lesson-progress-review #film-presenter.presenter-paused::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#lesson-progress-review #film-presenter.speaking::before{animation:none}}

/* Foreground portraits: square sprite cells retain their native proportions. */
#lesson-progress-review{--portrait-size:112px;--portrait-clearance:140px}
#lesson-progress-review .lp-left{position:relative}
#lesson-progress-review .lp-dialogue{position:relative;z-index:100;height:76px;min-height:76px;overflow:visible;padding-left:var(--portrait-clearance);pointer-events:none}
#lesson-progress-review .lp-dialogue .lp-avatar,
#lesson-progress-review .lp-dialogue #film-presenter{position:absolute;left:12px;bottom:8px;z-index:101;width:var(--portrait-size);height:var(--portrait-size);flex:none;overflow:visible;aspect-ratio:1;background:transparent;border-radius:0;pointer-events:none}
#lesson-progress-review .lp-dialogue .lp-avatar::before,
#lesson-progress-review .lp-dialogue #film-presenter::before{width:100%;height:100%;background-size:300% 100%;background-repeat:no-repeat}
#lesson-progress-review .film-controls{padding-left:var(--portrait-clearance)}
@media(max-width:480px){#lesson-progress-review{--portrait-size:88px;--portrait-clearance:112px}#lesson-progress-review .lp-dialogue{height:92px;min-height:92px}}

/* Question video and opening share the same progress-control geometry. */
#lesson-progress-review .question-video{padding-bottom:52px}
#lesson-progress-review .question-film-controls{position:absolute;left:0;right:0;bottom:0}
#lesson-progress-review .film-controls output{flex:0 0 76px;white-space:nowrap}
#lesson-progress-review .question-film-controls progress{flex:1;min-width:0;width:auto;height:6px}

#lesson-progress-review .question-video-track{position:absolute;inset:0 0 38px;width:100%;height:calc(100% - 38px);object-fit:contain;pointer-events:none}