/* The learning page at a 1024px browser viewport. */
html,body{min-width:0}
body.focus-layout .topbar{min-height:61px;padding:0 max(24px,calc((100% - 1600px)/2 + 24px))}
body.focus-layout .shell{max-width:1600px;margin:auto;padding:18px 24px 28px}
body.focus-layout .intro{margin-bottom:10px}
body.focus-layout .intro h1{font-size:clamp(20px,2.3vw,26px);line-height:1.3}
body.focus-layout .intro .eyebrow{font-size:10px}
body.focus-layout .intro .muted{font-size:12px}
body.focus-layout .settings{margin:0 0 10px;border-radius:12px}
body.focus-layout .settings summary{padding:8px 13px;font-size:12px}
body.focus-layout .layout-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;color:var(--accent);font-size:11px;font-weight:800}
body.focus-layout .layout-controls{display:flex;gap:7px;align-items:center;margin:0}
body.focus-layout .layout-controls button{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent);font-size:11px;font-weight:800;white-space:nowrap}
body.focus-layout .layout-controls button:hover,body.focus-layout .layout-controls button:focus-visible{border-color:var(--accent)}
body.focus-layout .layout-controls .help-link{padding:7px 5px;color:var(--accent);font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}
body.focus-layout .layout-controls .help-link:hover,body.focus-layout .layout-controls .help-link:focus-visible{text-decoration:underline}
body.focus-layout .workspace{display:grid;grid-template-columns:minmax(0,1fr) clamp(286px,24vw,360px);gap:16px;align-items:start}
body.focus-layout .video-column{min-width:0}
body.focus-layout .study-stage{border-radius:16px}
body.focus-layout .seek-controls{position:relative;z-index:16;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"play current progress duration cc full";align-items:center;gap:10px;padding:8px 14px;background:#142238;color:#e5effb;font-size:12px;font-variant-numeric:tabular-nums}
body.focus-layout .seek-controls button{border:1px solid #6687a9;border-radius:7px;background:#203c5b;color:#f0f6ff;padding:6px 9px;font:inherit;font-weight:700;line-height:1.3;white-space:nowrap}
body.focus-layout .seek-controls button:disabled{opacity:.55;cursor:default}
body.focus-layout .seek-controls #play-pause{grid-area:play}
body.focus-layout .seek-controls #cc-toggle{grid-area:cc}
body.focus-layout .seek-controls #seek-current{grid-area:current}
body.focus-layout .seek-controls #video-progress{grid-area:progress}
body.focus-layout .seek-controls #seek-duration{grid-area:duration;text-align:right}
body.focus-layout .seek-controls #fullscreen{grid-area:full}
body.focus-layout .seek-controls span{min-width:3.5em}
body.focus-layout #video-progress{width:100%;min-width:0;height:20px;margin:0;accent-color:#7bb9ff;cursor:pointer}
body.focus-layout #video-progress:disabled{cursor:default;opacity:.5}
body.focus-layout #video-progress:focus-visible{outline:2px solid #b5d9ff;outline-offset:3px}
body.focus-layout .player-actions{gap:8px;flex-wrap:wrap;padding:8px 0}
body.focus-layout .player-actions button{font-size:11px}
body.focus-layout .player-actions a,body.focus-layout .player-actions .time{font-size:11px}
body.focus-layout .analysis{display:block;margin-top:10px;padding:16px 18px;overflow-wrap:anywhere;border-radius:15px}
body.focus-layout .analysis .eyebrow{font-size:calc(10px * var(--study-text-scale,1))}
body.focus-layout .analysis h2{font-size:calc(16px * var(--study-text-scale,1));line-height:1.45}
body.focus-layout .analysis .meaning,body.focus-layout .analysis .grammar{font-size:calc(12px * var(--study-text-scale,1))}
body.focus-layout .analysis .detail-heading,body.focus-layout .analysis .word{font-size:calc(10px * var(--study-text-scale,1))}
body.focus-layout .transcript{height:min(625px,calc(100vh - 180px));min-height:320px;display:flex;flex-direction:column;overflow:hidden;border-radius:16px}
body.focus-layout .transcript-head{flex:none;flex-wrap:wrap;gap:8px;padding:15px 15px 13px}
body.focus-layout .transcript-head .eyebrow{font-size:calc(9px * var(--study-text-scale,1))}
body.focus-layout .transcript-head h2{font-size:calc(16px * var(--study-text-scale,1))}
body.focus-layout .count{font-size:calc(10px * var(--study-text-scale,1))}
body.focus-layout .sentence-list{flex:1;min-height:0;height:auto;padding:6px 7px;overflow:auto}
body.focus-layout .sentence-row{grid-template-columns:calc(37px * var(--study-text-scale,1)) minmax(0,1fr);gap:8px;overflow-wrap:anywhere;padding:11px 8px}
body.focus-layout .sentence-row.last-visited:not(.active){box-shadow:inset 3px 0 var(--accent)}
body.focus-layout .stamp{font-size:calc(10px * var(--study-text-scale,1))}
body.focus-layout .line{font-size:calc(11px * var(--study-text-scale,1))}
body.focus-layout .translation{font-size:calc(10px * var(--study-text-scale,1))}
body.focus-layout[data-study-text-scale="3"] .sentence-row{grid-template-columns:1fr}
body.focus-layout.wide-video .workspace{grid-template-columns:minmax(0,1fr)}
body.focus-layout.wide-video .shell{max-width:none;width:100%;padding-left:clamp(16px,2vw,36px);padding-right:clamp(16px,2vw,36px)}
body.focus-layout.wide-video .topbar{padding-left:clamp(16px,2vw,36px);padding-right:clamp(16px,2vw,36px)}
body.focus-layout.wide-video .transcript{height:320px}
body.focus-layout.wide-video .typing-card{max-width:min(92%,700px);max-height:340px}
body.focus-layout .study-stage .typing-card{max-height:240px;overflow:auto}
body.focus-layout .study-stage .typing-source{max-height:none;overflow:visible}
body.focus-layout .study-stage .typing-space{background:transparent;color:inherit}
body.focus-layout .study-stage .typed-correct.typing-space{background:transparent;color:#168052}
body.focus-layout .study-stage .typing-current.typing-space{background:#dbeedb;color:#173936}
body.focus-layout .study-stage .stage-subtitles{max-height:100%;overflow:auto;pointer-events:auto}
body.focus-layout .study-stage #stage-sentence{font-size:calc(18px * var(--study-text-scale,1))}
body.focus-layout .study-stage #stage-prev,body.focus-layout .study-stage #stage-next,body.focus-layout .study-stage #stage-meaning{font-size:calc(12px * var(--study-text-scale,1))}
body.focus-layout.wide-video .study-stage #stage-sentence{font-size:calc(23px * var(--study-text-scale,1))}
body.focus-layout.wide-video .study-stage #stage-prev,body.focus-layout.wide-video .study-stage #stage-next,body.focus-layout.wide-video .study-stage #stage-meaning{font-size:calc(14px * var(--study-text-scale,1))}
body.focus-layout .study-stage #stage-sentence{max-height:8em;overflow:auto}
body.focus-layout .study-stage .explain{max-height: min(340px,60vh);overflow:auto}
body.focus-layout.wide-video .study-stage .typing-card,body.focus-layout.wide-video .study-stage .explain{max-width:min(88%,1300px);max-height:min(62vh,680px)}
@media(min-width:601px){
  body.focus-layout .study-stage.explaining:not(:fullscreen):has(.narration-panel:not([hidden])) .video-overlay{left:calc(320px + 24px);right:3%}
  body.focus-layout .study-stage.explaining:not(:fullscreen):has(.narration-panel.small:not([hidden])) .video-overlay{left:calc(232px + 24px);right:3%}
}
@media(min-width:901px) and (max-width:1199px){body.focus-layout .narration-panel{width:260px}body.focus-layout.wide-video .narration-panel{width:320px}}
body.focus-layout .narration-panel.small{width:232px;min-width:232px}
@media(max-width:1100px){
  body.focus-layout .workspace{grid-template-columns:minmax(0,1fr)}
  body.focus-layout .transcript,body.focus-layout.wide-video .transcript{height:clamp(300px,42vh,430px);min-height:0}
  body.focus-layout .layout-toolbar{justify-content:flex-end}
  body.focus-layout .layout-toolbar>span,body.focus-layout #layout-switch{display:none}
  body.focus-layout .study-stage #stage-sentence{font-size:calc(23px * var(--study-text-scale,1))}
  body.focus-layout .study-stage #stage-prev,body.focus-layout .study-stage #stage-next,body.focus-layout .study-stage #stage-meaning{font-size:calc(14px * var(--study-text-scale,1))}
  body.focus-layout .study-stage .typing-card,body.focus-layout .study-stage .explain{max-width:min(88%,1300px);max-height:min(62vh,680px)}
}
@media(max-width:700px){body.focus-layout .shell{padding:16px}body.focus-layout .layout-toolbar{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){
  body.focus-layout .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand theme" "back back";gap:8px 12px;min-height:0;padding:12px 16px}
  body.focus-layout .topbar .brand{grid-area:brand;font-size:18px}
  body.focus-layout .topbar .catalog-return{grid-area:back;margin:0;font-size:13px;white-space:nowrap}
  body.focus-layout .topbar .theme-toggle{grid-area:theme;margin:0;padding:8px 10px;font-size:11px}
  body.focus-layout .shell{padding:12px 12px 28px}
  body.focus-layout .intro h1{font-size:20px}
  body.focus-layout .intro .muted{font-size:11px}
  body.focus-layout .settings{margin-bottom:7px}
  body.focus-layout .layout-toolbar{margin-bottom:8px}
  body.focus-layout .seek-controls{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"play . cc full" "current progress progress duration";gap:6px 8px}
  body.focus-layout .study-stage:not(.has-selection) .stage-subtitles{display:none}
  body.focus-layout .study-stage .video-overlay{left:4%;right:4%;bottom:6%;max-height:82%}
  body.focus-layout .study-stage #stage-sentence{font-size:calc(16px * var(--study-text-scale,1))}
  body.focus-layout .study-stage #stage-prev,body.focus-layout .study-stage #stage-next{display:none}
  body.focus-layout .study-stage.typing-active:has(.typing-card:not([hidden])) .player-frame{aspect-ratio:auto;height:clamp(300px,55vh,520px)}
  body.focus-layout .study-stage.explaining .player-frame{aspect-ratio:auto;height:clamp(300px,55vh,520px)}
  body.focus-layout .narration-panel,body.focus-layout .narration-panel.small{position:static;width:100%;min-width:0;border-radius:0;box-shadow:none;padding:10px 12px}
  body.focus-layout .study-stage:not(.explaining) .narration-panel:not([hidden]){position:absolute;left:-10000px;top:0;width:216px;min-width:216px;visibility:hidden}
  body.focus-layout .narration-panel #narration-slot,body.focus-layout .narration-panel.small #narration-slot{height:200px}
  body.focus-layout .player-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}
  body.focus-layout .player-actions button{padding:8px 5px}
  body.focus-layout .player-actions a{grid-column:1}
  body.focus-layout .player-actions .time{grid-column:2;justify-self:end;margin:0}
  body.focus-layout .video-column:has(.study-stage:not(.has-selection)) .analysis{display:none}
  body.focus-layout .transcript{height:min(46vh,430px)}
}

/* Scale the learning UI with the screen when the website enters fullscreen. */
body.focus-layout .study-stage:fullscreen{width:100vw;height:100vh;padding:clamp(8px,min(1vw,1.5vh),20px);overflow:hidden}
body.focus-layout .study-stage:fullscreen .seek-controls{flex:none;gap:clamp(10px,1vw,20px);min-height:clamp(45px,5.5vh,65px);padding:8px clamp(12px,1.5vw,30px);font-size:clamp(14px,min(1vw,1.8vh),21px)}
body.focus-layout .study-stage:fullscreen .seek-controls button{font-size:clamp(13px,min(.95vw,1.7vh),20px);padding:clamp(7px,.8vh,12px) clamp(9px,.9vw,18px)}
body.focus-layout .study-stage:fullscreen:has(.narration-panel:not([hidden])) .seek-controls{padding-left:calc(min(40vw,760px) + clamp(12px,1.3vw,28px) + 16px)}
body.focus-layout .study-stage:fullscreen:has(.narration-panel.small:not([hidden])) .seek-controls{padding-left:calc(232px + clamp(12px,1.3vw,28px) + 16px)}
body.focus-layout .study-stage:fullscreen #video-progress{height:28px}
body.focus-layout .study-stage:fullscreen .player-frame{min-height:0}
body.focus-layout .study-stage:fullscreen .video-overlay{left:4%;right:4%;bottom:clamp(24px,6vh,90px);max-height:78%;gap:clamp(4px,.6vh,9px)}
body.focus-layout .study-stage:fullscreen.typing-active .stage-subtitles{display:none}
body.focus-layout .study-stage:fullscreen:has(.narration-panel:not([hidden])) .video-overlay{left:calc(min(40vw,760px) + clamp(12px,1.3vw,28px) + 16px)}
body.focus-layout .study-stage:fullscreen:has(.narration-panel.small:not([hidden])) .video-overlay{left:calc(232px + clamp(12px,1.3vw,28px) + 16px)}
body.focus-layout .study-stage:fullscreen #stage-sentence{font-size:calc(clamp(18px,min(1.55vw,2.6vh),30px) * var(--study-text-scale,1));max-height:min(50vh,7em)}
body.focus-layout .study-stage:fullscreen #stage-prev,body.focus-layout .study-stage:fullscreen #stage-next,body.focus-layout .study-stage:fullscreen #stage-meaning{font-size:calc(clamp(12px,min(1vw,1.8vh),20px) * var(--study-text-scale,1))}
body.focus-layout .study-stage:fullscreen .typing-card,body.focus-layout .study-stage:fullscreen .explain{box-sizing:border-box;width:min(90vw,1600px);max-width:100%;max-height:76vh;overflow:auto;padding:clamp(18px,min(1.7vw,2.7vh),36px)}
body.focus-layout .study-stage:fullscreen .typing-card .typing-source{font-size:calc(clamp(16px,min(1.35vw,2.3vh),27px) * var(--study-text-scale,1));padding:clamp(10px,1vw,20px)}
body.focus-layout .study-stage:fullscreen .typing-card #typing-prompt,body.focus-layout .study-stage:fullscreen .typing-card #typing-feedback,body.focus-layout .study-stage:fullscreen .typing-heading{font-size:clamp(13px,min(.95vw,1.7vh),20px)}
body.focus-layout .study-stage:fullscreen .typing-card .typing-entry button,body.focus-layout .study-stage:fullscreen .explain button{font-size:clamp(13px,min(.95vw,1.7vh),20px);padding:clamp(8px,1vh,13px) clamp(12px,1vw,22px)}
body.focus-layout .study-stage:fullscreen .explain p{font-size:calc(clamp(16px,min(1.3vw,2.2vh),26px) * var(--study-text-scale,1))}
body.focus-layout .study-stage:fullscreen .narration-panel{left:clamp(12px,1.3vw,28px);bottom:clamp(12px,1.3vw,28px);width:min(40vw,760px);min-width:216px;padding:clamp(12px,1.1vw,22px);font-size:clamp(15px,min(1.2vw,2vh),24px)}
body.focus-layout .study-stage:fullscreen .narration-panel.small{width:232px;min-width:232px;padding:12px;font-size:14px}
body.focus-layout .study-stage:fullscreen .narration-heading,body.focus-layout .study-stage:fullscreen #narration-status{font-size:inherit}
body.focus-layout .study-stage:fullscreen #narration-slot,body.focus-layout .study-stage:fullscreen .narration-panel.small #narration-slot{height:auto;aspect-ratio:16/9}
body.focus-layout .study-stage:fullscreen .narration-panel.small #narration-slot{height:200px;aspect-ratio:auto}
body.focus-layout .study-stage:fullscreen #fullscreen-hint{font-size:clamp(13px,min(1vw,1.8vh),20px)}
@media(max-width:600px){
  body.focus-layout .study-stage:fullscreen{padding:0;border-radius:0}
  body.focus-layout .study-stage:fullscreen .player-frame{order:0;flex:none;width:100%;min-height:0;aspect-ratio:16/9;margin-block:auto}
  body.focus-layout .study-stage:fullscreen.typing-active:not(.explaining):has(.typing-card:not([hidden])) .player-frame{flex:1;aspect-ratio:auto;height:auto;margin:0}
  body.focus-layout .study-stage:fullscreen.explaining .player-frame{flex:1;aspect-ratio:auto;height:auto;margin:0}
  body.focus-layout .study-stage:fullscreen .narration-panel,body.focus-layout .study-stage:fullscreen .narration-panel.small{order:1;position:relative;left:auto;bottom:auto;width:100%;min-width:0;padding:8px 12px;font-size:13px}
  body.focus-layout .study-stage:fullscreen:not(.explaining) .narration-panel:not([hidden]){position:absolute;left:-10000px;top:0;width:216px;min-width:216px;visibility:hidden}
  body.focus-layout .study-stage:fullscreen .narration-panel #narration-slot,body.focus-layout .study-stage:fullscreen .narration-panel.small #narration-slot{width:100%;height:200px;aspect-ratio:auto}
  body.focus-layout .study-stage:fullscreen .seek-controls{order:2;min-height:0;padding:8px 10px;gap:6px 8px;font-size:12px}
  body.focus-layout .study-stage:fullscreen .seek-controls button{font-size:12px;padding:6px 7px}
  body.focus-layout .study-stage:fullscreen:has(.narration-panel:not([hidden])) .seek-controls,body.focus-layout .study-stage:fullscreen:has(.narration-panel.small:not([hidden])) .seek-controls{padding-left:10px}
  body.focus-layout .study-stage:fullscreen .video-overlay,body.focus-layout .study-stage:fullscreen:has(.narration-panel:not([hidden])) .video-overlay,body.focus-layout .study-stage:fullscreen:has(.narration-panel.small:not([hidden])) .video-overlay{left:4%;right:4%;bottom:6%;max-height:100%}
  body.focus-layout .study-stage:fullscreen.typing-active:not(.explaining):has(.typing-card:not([hidden])) .video-overlay,body.focus-layout .study-stage:fullscreen.explaining .video-overlay{top:0;bottom:0;max-height:none;justify-content:center}
  body.focus-layout .study-stage:fullscreen .typing-card,body.focus-layout .study-stage:fullscreen .explain{max-height:calc(100% - 16px)}
  body.focus-layout .study-stage:fullscreen #stage-sentence{font-size:calc(18px * var(--study-text-scale,1))}
  body.focus-layout .study-stage:fullscreen #fullscreen-hint{order:3}
}
@media(min-width:601px) and (max-height:500px){
  body.focus-layout .study-stage:fullscreen:not(.has-selection) .stage-subtitles{display:none}
  body.focus-layout .study-stage:fullscreen .seek-controls,body.focus-layout .study-stage:fullscreen:has(.narration-panel:not([hidden])) .seek-controls,body.focus-layout .study-stage:fullscreen:has(.narration-panel.small:not([hidden])) .seek-controls{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"play progress cc full";gap:8px;padding:7px 10px;min-height:48px}
  body.focus-layout .study-stage:fullscreen #seek-current,body.focus-layout .study-stage:fullscreen #seek-duration{display:none}
  body.focus-layout .study-stage:fullscreen .narration-panel{bottom:58px}
  body.focus-layout .study-stage:fullscreen:not(.explaining) .narration-panel:not([hidden]){position:absolute;left:-10000px;visibility:hidden}
}