/* 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((100vw - 1200px)/2 + 24px))}
body.focus-layout .shell{max-width:1200px;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 .workspace{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:16px;align-items:start}
body.focus-layout .video-column{min-width:0}
body.focus-layout .study-stage{border-radius:16px}
body.focus-layout .stage-header{min-height:36px;padding:0 12px}
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 .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 .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}
@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:216px}}
@media(max-width:900px){body.focus-layout .workspace{grid-template-columns:minmax(0,1fr)}body.focus-layout .transcript{height:330px}body.focus-layout .shell{padding:16px}body.focus-layout .layout-toolbar{align-items:flex-start;flex-direction:column}}