*{box-sizing:border-box}body{margin:0;background:#f7f9fc;color:#2d3544;font-family:Inter,'Segoe UI','Microsoft YaHei',sans-serif}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer;border:1px solid #e0e6ef;background:#fff;border-radius:8px;padding:9px 12px;color:inherit}button:hover{background:#edf4fd}button:focus-visible,a:focus-visible{outline:3px solid #739bd4;outline-offset:3px}header{max-width:1420px;margin:auto;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1e7f0}.brand{font-size:26px;font-weight:750;text-decoration:none;color:inherit;letter-spacing:2px}.brand span{font-size:12px;letter-spacing:1px;margin-left:17px;font-weight:400;color:#737f91}.pill{font-size:12px;border:1px solid #d8e4f4;border-radius:20px;padding:8px 14px;color:#59769f}main{max-width:1420px;margin:auto;padding:34px 5% 60px}.intro{display:flex;justify-content:space-between;align-items:center;padding-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:#7e90aa}.intro h1{font-size:34px;font-weight:600;margin:12px 0}.intro p:not(.eyebrow){color:#7a8596;font-size:14px}.flower{font-size:72px;color:#a9c6ed;margin-right:20px}.layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(310px,1fr);gap:30px}.video{aspect-ratio:16/9;min-height:230px;background:#222b3a;border-radius:14px;overflow:hidden}.video iframe{width:100%;height:100%;border:0}.transport{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:15px 0 0;font-size:12px}.transport label{display:flex;gap:4px;align-items:center;color:#626f82}input{accent-color:#769fd8}#clock{margin-left:auto;font-variant-numeric:tabular-nums}#status{font-size:12px;color:#72829a;min-height:18px;margin:10px 0 16px}.subtitle-card{padding:22px 26px;background:#fff;border:1px solid #dce7f5;border-radius:12px;min-height:175px}.caption-top{display:flex;justify-content:space-between;font-size:11px;color:#7c95b8;letter-spacing:1px}#caption{font-size:24px;line-height:1.9;padding-top:10px;font-family:'Yu Gothic','Meiryo',sans-serif}#chinese{font-size:14px;color:#748198;line-height:1.8;margin:6px 0}.word{display:inline;border:0;background:transparent;border-bottom:1px dashed #9db9df;border-radius:0;padding:0 1px;font:inherit;line-height:inherit}.word:hover{background:#fce7ef;color:#9a526e}.grammar-link{padding:0;margin-top:12px;border:0;font-size:12px;color:#6084b8;background:transparent}.detail{padding:25px 0}.tag{font-size:10px;letter-spacing:1px;color:#6688b8;background:#eaf2fd;border-radius:4px;padding:5px 7px}.detail h2{font-size:17px;font-weight:600}.detail p{font-size:12px;color:#7d899b;line-height:1.9}.detail a{font-size:12px;color:#5d82b5}.detail .fine{font-size:11px}aside{border:1px solid #e1e8f2;border-radius:14px;background:#ffffff;padding:25px;align-self:start}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel-head h2{font-size:16px;margin:0}.panel-head span{font-size:11px;color:#8295b0}.hint{font-size:11px;color:#8b98ab;margin:12px 0 20px}.cue{padding:17px 14px;margin:8px -10px;border-radius:10px;border:1px solid transparent;transition:background .2s}.cue.active{background:#eaf3ff;border-color:#cfdef3}.seek{color:#7b97bc;background:transparent;border:0;padding:0;font-size:11px;font-variant-numeric:tabular-nums}.cue p{font-size:16px;line-height:1.95;margin:7px 0;font-family:'Yu Gothic','Meiryo',sans-serif}.tip{border-top:1px solid #e2e9f2;margin-top:24px;padding-top:20px}.tip span{font-size:11px;color:#7d93b2}.tip p{font-size:12px;color:#8b97a8;line-height:1.9}dialog{border:1px solid #dce5f2;border-radius:17px;padding:32px;max-width:510px;width:calc(100% - 32px);box-shadow:0 20px 100px #26385425;color:inherit}dialog::backdrop{background:#22334d55;backdrop-filter:blur(3px)}.close{position:absolute;right:13px;top:10px;border:0;font-size:24px;background:transparent}dialog h2{font-size:27px;margin:20px 0 5px}#reading{font-size:13px;color:#8997ac;margin:0 0 18px}#meaning{font-weight:600;font-size:17px}.explanation{font-size:14px;line-height:1.9;background:#f0f5fc;padding:16px;border-radius:8px}.example-label{font-size:10px;color:#8c9bb0;margin-top:23px}#example{font-size:16px;line-height:1.8}#exampleZh{font-size:13px;color:#8897aa}.note-actions{display:flex;gap:10px;margin-top:24px}.note-actions button{flex:1;font-size:13px}.primary{background:#648bc4;color:white;border-color:#648bc4}.primary:hover{background:#4f75ae}.hidden{display:none!important}@media(max-width:850px){.layout{grid-template-columns:1fr}.intro h1{font-size:27px}.flower{font-size:50px}.pill{font-size:10px}.brand span{display:none}#caption{font-size:21px}main{padding-top:22px}aside{padding:22px}.video{min-height:210px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

:root{--highlight:#eaf3ff;--highlight-border:#cfdef3;--accent:#6084b8;--primary:#648bc4;--primary-hover:#4f75ae;--tint:#f0f5fc;--hover:#fce7ef;--hover-text:#9a526e;--accent-line:#9db9df}
:root[data-theme="pink"]{--highlight:#fff0f5;--highlight-border:#f2d3df;--accent:#a36783;--primary:#b27792;--primary-hover:#965c76;--tint:#fff6f9;--hover:#eaf3ff;--hover-text:#5074a5;--accent-line:#d6a4ba}
header{gap:18px;flex-wrap:wrap}.header-options{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.theme-switch{display:flex;gap:3px;border:1px solid #e0e6ef;padding:3px;border-radius:24px;background:#fff}.theme-switch button{border:0;border-radius:20px;background:transparent;font-size:11px;padding:7px 10px;color:#7d899b;display:flex;align-items:center;gap:5px}.theme-switch button[aria-pressed="true"]{background:var(--highlight);color:var(--accent)}.swatch{width:8px;height:8px;border-radius:50%;display:inline-block}.swatch.blue{background:#a9c9f3}.swatch.pink{background:#efbbd1}.cue{position:relative;transition:background .3s,border-color .3s,box-shadow .3s}.cue.active{background:var(--highlight);border-color:var(--highlight-border);box-shadow:0 3px 14px #617da409}.cue.active::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:4px;background:var(--accent);opacity:.5}.subtitle-card{background:linear-gradient(135deg,#fff 25%,var(--tint));border-color:var(--highlight-border)}.word{border-bottom-color:var(--accent-line);transition:background .16s,color .16s}.word:hover{background:var(--hover);color:var(--hover-text)}.primary{background:var(--primary);border-color:var(--primary)}.primary:hover{background:var(--primary-hover)}.grammar-link,.seek,.caption-top,.detail a{color:var(--accent)}.tag{color:var(--accent);background:var(--highlight)}.explanation{background:var(--tint)}input{accent-color:var(--primary)}button:focus-visible,a:focus-visible{outline-color:var(--accent)}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Dark reading surface; pastel colors are reserved for accents. */
:root{color-scheme:dark;--highlight:#24354d;--highlight-border:#3b5475;--accent:#b2cdee;--primary:#9bbce5;--primary-hover:#b1cdef;--tint:#202c3e;--hover:#493245;--hover-text:#f4d1e2;--accent-line:#6785ac}
:root[data-theme="pink"]{--highlight:#3b2c3a;--highlight-border:#69465f;--accent:#e6bfd4;--primary:#dfb4cc;--primary-hover:#ecc9dd;--tint:#2d2431;--hover:#2c425c;--hover-text:#cee2fd;--accent-line:#af7f99}
body{background:#131722;color:#dce3ee}header{border-bottom-color:#2b3444}button{background:#222b3a;border-color:#39465a}button:hover{background:#303c50}button:focus-visible,a:focus-visible{outline-color:var(--accent)}.brand span,.intro p:not(.eyebrow),.transport label,.detail p,.hint,.tip p,#reading,#exampleZh{color:#a4b0c2}.pill{border-color:#3a4860;color:var(--accent)}.eyebrow,.panel-head span,.tip span,.example-label{color:#92a5be}.theme-switch{background:#1b2230;border-color:#344155}.theme-switch button{background:transparent;color:#a4b0c2}.theme-switch button[aria-pressed="true"]{background:var(--highlight);color:var(--accent)}.video{background:#0d111a}.subtitle-card{background:linear-gradient(130deg,#1b2230 20%,var(--tint));border-color:var(--highlight-border)}aside{background:#191f2c;border-color:#2d394d}.cue.active{box-shadow:none}.cue.active::before{opacity:.8}.word{background:transparent;border-bottom:1px dotted var(--accent-line);border-radius:3px;padding:0 1px}.word:hover{background:var(--hover);color:var(--hover-text)}#caption{line-height:2.55;padding-top:17px}.cue p{line-height:2.6}.grammar-link,.seek{background:transparent;color:var(--accent)}.grammar-link:hover,.seek:hover{background:var(--highlight)}#chinese{color:#aebed3;margin-top:14px;padding-top:13px;border-top:1px solid #35435b}.tip{border-top-color:#303b4e}.tag{background:var(--highlight);color:var(--accent)}dialog{background:#1b2230;border-color:#3c4a60;color:#dce3ee;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#070b13bb}.explanation{background:var(--tint);color:#c5cfde}.close{background:transparent}.primary{background:var(--primary);border-color:var(--primary);color:#172132}.primary:hover{background:var(--primary-hover)}ruby{ruby-position:over;ruby-align:center}rt{font-size:.5em;color:#a5b7cf;line-height:1.2;font-weight:400;letter-spacing:.035em}dialog h2{line-height:2.25;margin-top:18px}#example{line-height:2.4}#translation[aria-expanded="true"]{background:var(--highlight);border-color:var(--highlight-border);color:var(--accent)}[hidden]{display:none!important}

/* Let the player use the available window, with a readable transcript rail. */
header{max-width:none;margin:0;padding:14px clamp(16px,2.3vw,42px);gap:12px}
main{max-width:none;margin:0;padding:18px clamp(16px,2.3vw,42px) 36px}
.brand{font-size:22px}.brand span{font-size:11px}
.intro{padding-bottom:18px}
.intro .eyebrow{display:none}
.intro h1{font-size:20px;margin:0;line-height:1.5}
.intro p:not(.eyebrow){font-size:12px;margin:5px 0 0}
.layout{grid-template-columns:minmax(0,1fr) clamp(300px,25vw,420px);gap:22px;align-items:start}
.watch{min-width:0}
.video{width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 270px);min-height:280px;border-radius:12px}
.transport{padding-top:12px}
#status{margin:8px 0 12px}
.subtitle-card{padding:18px 22px;min-height:140px}
#caption{font-size:clamp(23px,1.6vw,31px);padding-top:10px;line-height:2.4}
aside{position:sticky;top:18px;max-height:calc(100dvh - 140px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#44536b transparent;padding:22px}
.cue p{font-size:17px;line-height:2.5}
.detail{padding:20px 0}
@media(min-width:2200px){.layout{grid-template-columns:minmax(0,1fr) clamp(420px,22vw,640px);gap:28px}.cue p{font-size:20px}.panel-head h2{font-size:18px}}
@media(max-width:850px){
  header{padding:12px 16px}.brand{font-size:21px}
  main{padding:14px 16px 28px}.intro{padding-bottom:14px}.intro h1{font-size:18px}
  .layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .video{max-height:none;min-height:200px}
  aside{position:static;max-height:none;padding:20px}
  #caption{font-size:22px}
}

.video-shell{width:85%;max-width:100%;margin:0 0 18px}.video-shell .video{width:100%;height:auto;aspect-ratio:16/9;max-height:none;min-height:200px}@media(max-width:850px){.video-shell{width:100%}}

/* Keep the video and current-caption card in the same grid track. */
.layout{--transcript-width:clamp(300px,25vw,420px);--column-gap:22px;grid-template-columns:minmax(0,calc((100% - var(--transcript-width) - var(--column-gap)) * .85)) minmax(0,1fr);gap:var(--column-gap)}
.video-shell,.subtitle-card{width:100%}.watch,aside{min-width:0}
@media(min-width:2200px){.layout{--transcript-width:clamp(420px,22vw,640px);--column-gap:28px}}
@media(max-width:850px){.layout{grid-template-columns:minmax(0,1fr);gap:20px}}

/* Light canvas and music-player-style reading progress. */
:root{color-scheme:light;--highlight:#eaf3ff;--highlight-border:#cddff6;--accent:#567dac;--primary:#7ca5da;--primary-hover:#6793cc;--tint:#f1f6fd;--hover:#fceaf2;--hover-text:#a85e81;--accent-line:#b3c7e2;--karaoke-color:#427ec7;--karaoke-read:#668ab7;--upcoming-color:#5c6575}
:root[data-theme="pink"]{--highlight:#fff0f6;--highlight-border:#efd2e0;--accent:#ac6c8c;--primary:#cc97b4;--primary-hover:#ba82a1;--tint:#fff5f9;--hover:#eaf3ff;--hover-text:#557fb5;--accent-line:#dab4c8;--karaoke-color:#bc5b90;--karaoke-read:#ad7c99;--upcoming-color:#686273}
body{background:#f7f9fc;color:#30394a}header{border-bottom-color:#e1e7f0}button{background:#fff;border-color:#dce4ef}button:hover{background:#edf3fb}.brand span,.intro p:not(.eyebrow),.transport label,.detail p,.hint,.tip p,#reading,#exampleZh{color:#77859a}.pill{border-color:#d8e3f2}.eyebrow,.panel-head span,.tip span,.example-label{color:#8192ab}.theme-switch{background:#fff;border-color:#dce4ef}.theme-switch button{color:#7c899c}.theme-switch button[aria-pressed="true"]{color:var(--accent);background:var(--highlight)}.subtitle-card{background:linear-gradient(130deg,#fff 20%,var(--tint));border-color:var(--highlight-border)}aside{background:#fff;border-color:#e0e7f1}.word{border-bottom-color:var(--accent-line)}.word:hover{background:var(--hover);color:var(--hover-text)}.tip{border-top-color:#e2e8f1}#chinese{color:#78879e;border-top-color:#e2e9f3}dialog{background:#fff;border-color:#dae3ef;color:#30394a;box-shadow:0 20px 100px #2a42652b}dialog::backdrop{background:#24334966}.explanation{background:var(--tint);color:#566379}.close,.seek,.grammar-link{background:transparent}.primary{background:var(--primary);border-color:var(--primary);color:#fff}.primary:hover{background:var(--primary-hover)}rt{color:#8b9cb4}aside{scrollbar-color:#ccd8e9 transparent}
#caption .word,#caption .word.current,#caption .word.spoken{display:inline-block;vertical-align:baseline;border:0;border-bottom:0;text-decoration:none;box-shadow:none;background:transparent;padding:0 2px;color:var(--upcoming-color);font-weight:400}
#caption .word:hover{background:var(--hover)}
#caption .karaoke-ink{display:inline-block;vertical-align:baseline;background:none;color:inherit;-webkit-text-fill-color:currentColor}
#caption .reading-glyph{display:inline-block;vertical-align:baseline;margin-inline:.015em;color:var(--upcoming-color);color:color-mix(in srgb,var(--karaoke-color) var(--glyph-progress,0%),var(--upcoming-color));font-weight:400;-webkit-text-fill-color:currentColor;-webkit-text-stroke:var(--glyph-stroke,0px) currentColor;transform:scale(var(--glyph-scale,1));transform-origin:50% 85%;transition:transform .7s cubic-bezier(.16,1,.3,1),color .55s ease,-webkit-text-stroke-width .65s ease}
#caption .word.spoken .reading-glyph{color:var(--karaoke-color);font-weight:400}
#caption rt{color:#8b9cb4;-webkit-text-fill-color:currentColor}

/* Video, live caption, controls, then transcript; learning notes on the side. */
.video-shell{margin-bottom:0}.video-shell .video{border-radius:12px 12px 0 0}
.subtitle-card{border-radius:0 0 12px 12px;border-top:0;min-height:135px}
.transport{margin-top:0;padding:14px 0 0}#status{margin:9px 0 18px}
.transcript-panel{background:#fff;border:1px solid #e0e7f1;border-radius:12px;padding:20px 22px}
.transcript-panel .hint{margin-bottom:12px}
#transcript{position:relative;max-height:350px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ccd8e9 transparent;padding:0 10px}
#transcript:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
#transcript .cue{padding:13px 14px;margin:5px -7px}
#transcript .cue p{font-size:17px;line-height:2.55;margin:5px 0}
.detail summary{font-size:12px;color:#8190a4;cursor:pointer}.detail[open] summary{margin-bottom:14px}
.learning-panel{padding:24px;max-height:calc(100dvh - 40px)}
.learning-section{margin-top:24px}.learning-section h3{font-size:12px;font-weight:600;letter-spacing:.04em;color:#667b98;margin:0 0 12px;display:flex;justify-content:space-between;gap:12px}.learning-section h3 span{font-size:10px;font-weight:400;color:#92a0b4}
.vocab-card{display:block;text-align:left;width:100%;padding:13px 14px;background:#f8faff;border:1px solid #e4ebf5;border-radius:10px;margin:9px 0;transition:background .16s,border-color .16s}
.vocab-card:hover{background:var(--highlight);border-color:var(--highlight-border)}
.vocab-word{display:block;font-size:20px;line-height:2.1;font-family:'Yu Gothic','Meiryo',sans-serif;color:#3d506d}
.vocab-meaning{display:block;font-size:13px;line-height:1.7;color:#78879c;margin-top:2px}
.vocab-type{display:block;font-size:10px;color:#95a2b5;margin-top:6px}
.pattern-section{padding-top:20px;border-top:1px solid #e5ebf3}
.learning-pattern{width:100%;text-align:left;font-size:18px;line-height:2.2;color:var(--accent);border-color:var(--highlight-border);background:var(--tint);padding:9px 12px}
.learning-pattern:hover{background:var(--highlight)}.learning-hint{font-size:12px;line-height:1.9;color:#7b899e;margin:12px 0 0}
.learning-panel .tip{margin-top:22px;padding-top:18px}.learning-panel .tip p{font-size:12px}
@media(max-width:850px){.transcript-panel{padding:18px}#transcript{max-height:320px}.learning-panel{max-height:none;padding:20px}.learning-section{margin-top:20px}}
.subtitle-card{min-height:0;padding:9px 20px 12px}.caption-top{justify-content:flex-end;font-size:10px;line-height:1.2;letter-spacing:0}#caption{padding-top:2px;line-height:1.95}#chinese{margin-top:8px;padding-top:8px}@media(max-width:850px){.subtitle-card{padding:8px 14px 10px}#caption{line-height:2.05}}
#caption .reading-kana{--upcoming-color:#8b9cb4;margin-inline:0;transform-origin:50% 100%}#caption .caption-punctuation{display:inline-block;vertical-align:baseline;white-space:nowrap}

/* Full lesson review markers */
.review-badge{display:inline-block;margin-left:9px;padding:2px 6px;border-radius:5px;background:#fff4df;color:#96703d;font-size:10px;line-height:1.5;vertical-align:middle}.caption-top .review-badge{margin-left:0;margin-right:auto}.explanation{white-space:pre-line}