@font-face{font-family:Inter;src:url('assets/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  --ink:#000;--muted:rgba(0,0,0,.6);--soft:rgba(0,0,0,.3);--faint:rgba(0,0,0,.1);
  --surface:#f2f2f2;--accent:#2f59ff;--gutter:24px;--text-size:24px;--line-height:29px;
  --translation-gap:8px;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff;color:var(--ink)}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;font-weight:500;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;padding:0;background:none;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
button:active:not(:disabled){opacity:.65}
button img{pointer-events:none;display:block;flex:none}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid #555;outline-offset:4px}
.app:focus,.library:focus,.movie-menu:focus{outline:none}
[hidden]{display:none!important}

/* Shared shell: video remains 16:9; a single bottom bar owns all modes. */
.app{position:relative;width:100%;height:100vh;height:100dvh;display:grid;grid-template-rows:48px auto minmax(0,1fr);padding-top:var(--safe-top);background:#fff}
.header{display:flex;align-items:center;justify-content:center}
.home{min-width:80px;min-height:48px;display:flex;align-items:center;justify-content:center}
.brand-tablet,.brand-landscape{display:none}
.brand img,.menu-brand img{height:auto;object-fit:contain;max-width:100%}
.player{position:relative;min-width:0}
.video-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-frame video,.video-poster{display:block;width:100%;height:100%;object-fit:contain}
.video-poster{position:absolute;inset:0;pointer-events:none}
.video-hit{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.video-hit img{width:60px;height:40px}
.media-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:400 14px/20px 'Noto Sans SC','PingFang SC',sans-serif;pointer-events:none}
.loading-body{position:absolute;inset:0;z-index:6;pointer-events:none;background:#fff}
.loading-body img{position:absolute;left:calc(50% + .18px);top:calc(50% - 20.64px);transform:translate(-50%,-50%);display:block;object-fit:contain}
.app[data-loading="true"] .video-frame video,.app[data-loading="true"] .video-poster,.app[data-loading="true"] .video-hit,.app[data-loading="true"] .video-progress,.app[data-loading="true"] .transcript-wheel,.app[data-loading="true"] .footer{visibility:hidden;pointer-events:none}
.video-play-mark,.video-restart-mark{display:none}
.app[data-mode="paused"] .video-play-mark,.app[data-mode="speaking-word"] .video-play-mark{display:block}
.app[data-restored="true"] .video-play-mark{display:none}
.app[data-restored="true"][data-mode="paused"] .video-restart-mark,.app[data-restored="true"].is-practicing:not([data-mode="replaying-reading"]) .video-restart-mark{display:block}
.video-progress{position:absolute;left:0;right:0;bottom:0;height:4px;overflow:hidden;pointer-events:none}
.video-progress span{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .1s linear}

/* One fixed selection point, with native momentum and snap below it. */
.practice{min-height:0;display:flex;flex-direction:column;position:relative}
.transcript-wheel{--selection-anchor:53px;position:relative;flex:1;min-height:0;display:flex}
.transcript{flex:1;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;padding:var(--selection-anchor) var(--gutter) 0;scroll-padding-top:var(--selection-anchor);scroll-snap-type:y mandatory;touch-action:pan-y}
.transcript::-webkit-scrollbar{display:none}
.transcript:after{content:'';display:block;height:calc(100dvh - var(--selection-anchor));pointer-events:none}
.sentence{position:relative;min-height:calc(var(--line-height) * 2);margin:0 0 24px;scroll-snap-align:start;scroll-snap-stop:normal;color:var(--muted);transition:color .18s}
.sentence-text{display:block;text-align:left;width:100%;font-size:var(--text-size);line-height:var(--line-height);font-weight:500;overflow-wrap:break-word;min-height:var(--line-height)}
.sentence.current{color:var(--ink)}
.sentence[data-distance="2"]{color:var(--soft)}
.app[data-mode="playing"] .sentence[data-distance="2"]{color:rgba(0,0,0,.2)}
.sentence[data-distance="3"],.sentence[data-distance="far"]{color:var(--faint)}
.sentence-anchor{position:absolute;left:0;top:calc(var(--selection-anchor) - 7px);width:24px;height:44px;display:flex;align-items:center;justify-content:center;z-index:4}
.sentence-anchor img{transform:rotate(90deg);width:12px;height:8px}
.app[data-mode="playing"] .sentence-anchor img,.app[data-mode="ended"] .sentence-anchor img,.app.is-scrolling .sentence-anchor img{display:none}
.app[data-mode="playing"] .sentence-anchor:after,.app[data-mode="ended"] .sentence-anchor:after,.app.is-scrolling .sentence-anchor:after{content:'';width:8px;height:8px;background:var(--ink);transform:translateY(-1px)}
.translation{position:absolute;top:calc(var(--sentence-text-height,58px) + var(--translation-gap));left:0;right:0;z-index:3;max-height:none;overflow:visible;background:#000;color:#fff;padding:16px;font-size:24px;line-height:29px;font-weight:700;overflow-wrap:anywhere}
.translation:before{content:'';position:absolute;left:8px;bottom:100%;width:16px;height:8px;background:url('assets/design/translation-tip.svg') no-repeat center/16px 8px;display:none}
.translation-content{display:block;max-height:min(168px,calc(35dvh - 32px),calc(var(--translation-room,200px) - 32px));overflow-y:auto;overscroll-behavior:contain}
.translation mark{background:none;color:var(--accent)}
.app .sentence.current .word.selected{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sentence-complete{position:absolute;right:-18px;top:4px;width:14px;text-align:center;color:var(--ink);font:600 14px/20px -apple-system,BlinkMacSystemFont,sans-serif;pointer-events:none}
.app.is-practicing .sentence{color:var(--faint)}
.app.is-practicing .sentence.current .word{color:rgba(0,0,0,.2);transition:color .12s}
.app.is-practicing .sentence .word.passed,.app.is-practicing .sentence[data-complete="true"]:not(.current) .word{color:var(--ink)}
.app.is-practicing .sentence.current .word.tentative:not(.passed){color:rgba(0,0,0,.55)}
.app.is-practicing .sentence.current .word.selected{color:var(--accent)}
.end-replay{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);width:80px;height:60px;z-index:4}

/* Playback: countdown. Paused: microphone. Reading: waveform and exit. */
.footer{position:relative;flex:none;height:calc(48px + max(24px,var(--safe-bottom)));padding:0 24px max(24px,var(--safe-bottom));background:#fff;z-index:5}
.actions{position:absolute;left:24px;right:24px;top:0;height:48px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.speak{position:relative;width:165px;height:48px;border-radius:24px;background:rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;transform:translateX(.5px);pointer-events:auto}
.mic-idle{width:15.57px;height:22px}
.wave-static,.wave-live{display:none}
.wave-static{width:28px;height:20px}
.wave-live{height:20px;gap:4px;align-items:center;justify-content:center;width:28px}
.wave-live i{width:4px;height:12px;min-height:4px;max-height:20px;border-radius:2px;background:#fff;transition:height .065s linear;transform-origin:center}
.wave-live i:nth-child(2){height:8px;animation-delay:-.18s}
.wave-live i:nth-child(3){height:20px;animation-delay:-.36s}
.wave-live i:nth-child(4){animation-delay:-.12s}
.app.is-practicing .speak{background:#000;border-radius:32px}
.app.is-practicing .mic-idle{display:none}
.app.is-practicing .wave-static{display:block}
.app.is-practicing[data-meter="true"] .wave-static{display:none}
.app.is-practicing[data-meter="true"] .wave-live{display:flex}
.app[data-mode="reading"][data-speech="true"]:not([data-meter="true"]) .wave-static{display:none}
.app[data-mode="reading"][data-speech="true"]:not([data-meter="true"]) .wave-live{display:flex}
@media(prefers-reduced-motion:no-preference){
  .app[data-mode="reading"][data-speech="true"]:not([data-meter="true"]) .wave-live i{animation-name:speech-wave;animation-duration:.6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
}
@keyframes speech-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.app[data-mode="requesting"] .wave-static{opacity:.45}
.transport{position:absolute;right:-1px;width:48px;height:48px;border-radius:50%;background:url('assets/design/control-circle.svg') no-repeat center/48px 48px;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.transport .play-icon,.transport .pause-icon{display:none}
.close-icon{width:16px;height:16px}
.navigation{height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.navigation button{min-width:48px;height:48px;display:flex;align-items:center;gap:0;font-size:16px;transition:opacity .15s}
.navigation .next{justify-content:flex-end;margin-left:auto}
.navigation button img{width:48px;height:48px}
.navigation button span{display:block;align-self:flex-start;margin-top:11px;margin-right:-4px;font-size:16px;line-height:19px;font-weight:600;letter-spacing:4px;font-variant-numeric:tabular-nums}
.navigation button:disabled{opacity:.12}
.duration{position:absolute;left:50%;top:11px;transform:translateX(calc(-50% - 1px));font-size:24px;line-height:29px;font-weight:600;letter-spacing:4px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.app.is-practicing .navigation button span{visibility:hidden}
.practice-status{position:absolute;left:24px;right:24px;bottom:calc(100% + 4px);min-height:32px;display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 12px;background:var(--surface);font-size:14px;line-height:20px;font-weight:400;z-index:5}
.practice-status button{font-size:inherit;text-decoration:underline;min-height:32px;flex-shrink:0}
.notice{position:fixed;bottom:calc(96px + var(--safe-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:min(400px,calc(100vw - 40px));background:#000;color:#fff;padding:12px 16px;line-height:22px;font-size:14px;font-weight:400;z-index:20;box-shadow:0 2px 12px #0001}
.notice button{color:#fff;text-decoration:underline;margin-left:12px;min-height:36px}

/* Film browsing remains deliberately sparse. */
.library,.movie-menu{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;padding:calc(24px + var(--safe-top)) 24px max(32px,var(--safe-bottom));background:#fff;scrollbar-width:none}
.library-header{position:relative;min-height:104px;padding-bottom:24px}
.library-header h1{margin:0;padding-right:56px;font-size:32px;line-height:40px;font-weight:500;overflow-wrap:anywhere}
.library-header p{margin:8px 0 0;font-size:16px;line-height:19px}
.library-menu{position:absolute;right:-8px;top:0;width:40px;height:40px}
.item-count{position:absolute;right:0;top:69px;font-size:16px;line-height:19px;text-align:right;white-space:nowrap}
.course-list{display:flex;flex-direction:column;gap:16px}
.course-card{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr);gap:16px;width:100%;text-align:left;align-items:start}
.course-meta{display:flex;flex-direction:column;align-items:flex-start;gap:14.5px}
.course-time{font-size:24px;line-height:29px;font-variant-numeric:tabular-nums}
.course-cover{width:354px;height:198px;object-fit:cover;display:block;max-width:none}
.study-status{width:23px;height:23px;margin-left:.5px}
.course-visual{display:block;min-width:0}
.library-sticky{position:sticky;top:calc(-24px - var(--safe-top));height:0;z-index:8}
.library-topbar{position:absolute;left:-24px;right:-24px;top:0;height:calc(82px + var(--safe-top));background:#fff;padding:calc(24px + var(--safe-top)) 24px 18px}
.library-topbar:after{content:'';position:absolute;left:24px;right:0;bottom:0;height:2px;background:rgba(0,0,0,.05)}
.compact-title-row{display:flex;align-items:flex-start;gap:8px;padding-right:56px;white-space:nowrap}
#compact-title{font-size:32px;line-height:40px;overflow:hidden;text-overflow:ellipsis;min-width:157px}
#compact-count{font-size:16px;line-height:19px;margin-top:17px;flex:none}
.library-topbar .library-menu{top:calc(24px + var(--safe-top));right:16px}
.library.is-compact #library-expanded{visibility:hidden;pointer-events:none}
.movie-menu{position:relative;display:flex;flex-direction:column}
.movie-menu .library-header{min-height:106px;flex:none;border-bottom:2px solid rgba(0,0,0,.05);margin-right:-24px;padding-right:24px}
.movie-menu .library-menu{right:16px}
.movie-menu .item-count{right:24px}
.movie-list{padding-top:24px}
.movie-option{position:relative;display:flex;gap:16px;align-items:flex-start;width:100%;min-height:40px;text-align:left;margin-bottom:32px}
.movie-option[aria-current="true"]:before{content:'';position:absolute;width:8px;height:8px;background:#000;left:-16px;top:16px}
.movie-name{min-width:min(157px,calc(100% - 150px));flex:0 1 auto;font-size:32px;line-height:40px;overflow-wrap:anywhere}
.movie-year{font-size:16px;line-height:19px;margin-top:17px;width:38px;flex-shrink:0}
.movie-thumb{margin-left:auto;width:80px;height:40px;object-fit:cover;flex-shrink:0}
.menu-brand{display:flex;align-items:center;justify-content:center;min-height:64px;margin-top:auto;margin-bottom:16px;flex:none;transform:translateX(-.5px)}

@media(max-width:599px){
  .footer{padding-left:8px;padding-right:8px}
  .navigation button{position:relative;width:48px}
  .navigation button span{position:absolute;top:15px;margin:0;transform:translateX(-50%)}
  .navigation .previous span{left:53px}
  .navigation .next span{left:-5.5px}
  .duration{top:10px;transform:translateX(-50%)}
  .app:not(.is-practicing) .sentence-anchor img{display:none}
  .app:not(.is-practicing) .sentence-anchor:after{content:'';width:8px;height:8px;background:var(--ink);transform:translateY(-1px)}
  .app:not(.is-practicing) .sentence[data-before="true"]{color:var(--faint)}
  .app:not(.is-practicing) .sentence[data-distance="far"]{visibility:hidden}
}
@media(min-width:600px){
  :root{--gutter:26px;--translation-gap:11.5px}
  .app{grid-template-rows:72px auto minmax(0,1fr)}
  .brand-mobile{display:none}.brand-tablet{display:block}
  .duration{top:9px;transform:translateX(-50%)}
  .navigation button span{margin-top:14px}
  .translation{font-weight:500}.translation:before{display:block}
  .library,.movie-menu{padding-left:32px;padding-right:32px}
  .library-header,.movie-list,.course-list{width:100%;max-width:1000px;margin-left:auto;margin-right:auto}
  .course-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .course-cover{width:100%;height:auto;aspect-ratio:354/198}
  .library-sticky{max-width:1000px;margin:auto}
  .library-topbar{left:-32px;right:-32px;padding-left:32px;padding-right:32px}
  .library-topbar:after{left:32px}.library-topbar .library-menu{right:24px}
  .movie-menu .library-header{margin-right:auto;padding-right:0}
  .movie-menu .library-menu{right:-8px}.movie-menu .item-count{right:0}
  .menu-brand{min-height:80px}
}
@media(min-width:900px) and (orientation:landscape){
  .app{--media-width:63.54810238%;grid-template-columns:minmax(0,720fr) minmax(0,413fr);grid-template-rows:minmax(0,1fr);padding-top:0}
  .header{position:absolute;left:0;bottom:173px;width:var(--media-width);height:40px;z-index:2}
  .home{transform:translateX(-.5px)}
  .brand-mobile,.brand-tablet{display:none}.brand-landscape{display:block}
  .player{grid-column:1;grid-row:1;align-self:start;margin-top:40px}
  .practice{grid-column:2;grid-row:1;position:static;height:100%;min-height:0}
  .loading-body{left:var(--media-width)}
  .transcript{--gutter:24px}
  .sentence-anchor:after{transform:none!important}
  .footer{position:static}
  .actions{left:calc(var(--media-width) + 24px);right:24px;top:auto;bottom:max(24px,var(--safe-bottom))}
  .speak{transform:none}
  .transport{right:0}
  .navigation{position:absolute;left:24px;right:calc(100% - var(--media-width) + 24px);bottom:max(24px,var(--safe-bottom))}
  .duration{top:9px}
  .app.is-practicing .duration{opacity:.1}
  .app.is-practicing .navigation button span{visibility:visible}
  .movie-menu{padding-left:24px;padding-right:24px}
  .movie-menu .library-header,.movie-list{max-width:354px;margin-left:0;margin-right:0}
  .movie-menu .library-header{border-bottom:0}
  .movie-menu .library-header:after{content:'';position:absolute;left:0;width:378px;bottom:0;height:2px;background:rgba(0,0,0,.05)}
  .movie-menu .menu-brand{width:354px}
}
@media(max-height:560px) and (orientation:landscape){
  .app{--media-width:50%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding-top:0}
  .header{position:absolute;left:0;top:0;bottom:auto;width:50%;height:40px}
  .home{min-height:40px;transform:none}
  .player{grid-column:1;grid-row:1;align-self:center;margin-top:0}
  .practice{grid-column:2;grid-row:1;position:relative;height:100%;min-height:0}
  .loading-body{left:0}
  .footer{position:relative;height:calc(48px + max(8px,var(--safe-bottom)));padding-bottom:max(8px,var(--safe-bottom))}
  .actions{left:24px;right:24px;top:0;bottom:auto}
  .speak{width:145px;transform:none}
  .navigation{position:relative;left:auto;right:auto;bottom:auto}
  .navigation button span{margin-top:11px}
  .duration{top:11px}
  .practice-status{left:16px;right:16px}
  .end-replay{bottom:24px}
}
@media(max-width:374px){
  :root{--gutter:22px;--text-size:22px;--line-height:28px}
  .footer{padding-left:8px;padding-right:8px}
  .actions{left:12px;right:12px}
  .speak{width:145px}
}
@media(min-width:1400px){.app{max-width:1600px;margin:auto}}
@media(prefers-reduced-motion:no-preference){.transcript-wheel{mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 18px),transparent)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}