:root{--ink:#202435;--muted:#9295a4;--accent:#5552dc;--line:#e9eaf0;--ease:cubic-bezier(.2,.7,.2,1)}*{box-sizing:border-box}body{margin:0;background:#f7f8fb;color:var(--ink);font:16px/1.6 Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif;-webkit-font-smoothing:antialiased}.shell{max-width:920px;margin:auto;padding:46px 40px 200px}.heading{display:flex;align-items:center;justify-content:space-between;gap:16px}h1{margin:0;font-size:23px;letter-spacing:-.7px;font-weight:650}h1 span{display:block;font-size:12px;font-weight:450;letter-spacing:1.2px;color:var(--muted);margin-top:3px}.source{font-size:12px;color:#818596;text-decoration:none;transition:color .2s}.source:hover{color:var(--accent)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:27px 0 24px}.modes{display:flex;background:#eceef4;border-radius:12px;padding:4px;gap:3px}button{font:inherit;border:0;cursor:pointer;color:inherit;background:transparent;border-radius:9px;padding:9px 16px;min-height:40px;transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}button:active{transform:scale(.97)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a7a5f7;outline-offset:4px}.modes button{font-size:13px;min-width:96px;color:#8a8e9e}.modes .selected{background:white;box-shadow:0 2px 5px #20243509;color:#34344a;font-weight:600}#hint{font-size:12px;color:var(--muted)}#dialogue{background:white;border:1px solid #e6e8f0;border-radius:20px;padding:8px;box-shadow:0 6px 28px #282c4503}.sentence{position:relative;padding:20px 20px 18px;border-radius:12px;transition:background .3s var(--ease)}.sentence:after{content:'';position:absolute;bottom:0;left:56px;right:20px;height:1px;background:#f0f1f5;transition:opacity .3s}.sentence:last-child:after,.sentence.active:after{opacity:0}.sentence:hover{background:#f8f9fd}.sentence.active{background:#f1f1fc}.sentence-top{display:flex;gap:20px;align-items:flex-start}.number{font-size:12px;line-height:28px;width:17px;flex-shrink:0;font-variant-numeric:tabular-nums;font-weight:500;color:#b2b5c3;padding-top:3px;transition:color .25s}.active .number{color:#7873d9}.sentence-button{flex:1;min-width:0;text-align:left;padding:0;font-weight:450;letter-spacing:-.35px;font-size:22px;line-height:1.65;color:#74798b;transition:color .25s var(--ease)}.sentence-button:hover,.active .sentence-button{color:#282b43}.sentence-button:active{transform:none}.phrase{border-radius:3px;color:inherit;transition:color .2s var(--ease);background-repeat:no-repeat;background-position:left calc(100% - 1px);background-size:var(--read,0%) 2px}.phrase.speaking{color:var(--accent);background-image:linear-gradient(90deg,#aba7f1,#6861df)}.cue{visibility:hidden;margin:9px 0 0 37px;font-size:12px;letter-spacing:.1px;line-height:18px;color:#8b89ae;min-height:18px;opacity:0;transition:opacity .25s var(--ease)}.active .cue{visibility:visible;opacity:1}.hide-cues .cue{visibility:hidden;opacity:0}.player{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;width:calc(100% - 48px);max-width:840px;z-index:10;background:#ffffffed;backdrop-filter:blur(20px);border:1px solid #e5e7f0;border-radius:20px;box-shadow:0 12px 45px #282f5510,0 2px 6px #282f5505;padding:17px 22px 18px}.status-row{display:flex;gap:9px;align-items:center;font-size:12px;min-height:20px;line-height:20px}.phase{color:#4c4c64;font-weight:550}#status{color:#9295a6;font-variant-numeric:tabular-nums}#position{margin-left:auto;font-size:12px;color:#a1a5b4;letter-spacing:1px;font-variant-numeric:tabular-nums}.progress{height:2px;border-radius:3px;overflow:hidden;background:#eff0f6;margin:11px 0 15px}#progress-fill{height:100%;background:#7972e8;width:0}.controls{display:flex;gap:9px;align-items:center}.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:105px;color:white;background:#25263a;border-radius:11px;box-shadow:0 3px 8px #2324390c;min-height:46px;font-size:13px}.primary:hover{background:#3c3a59}.primary svg{width:18px;height:18px}#previous,#next{display:flex;align-items:center;justify-content:center;width:40px;height:42px;padding:10px;color:#8f93a4}#previous:hover,#next:hover{color:var(--accent);background:#f0f0fb}#all{color:#787d8d;font-size:13px;margin-left:6px}#all:hover{background:#f4f4fa;color:#36364f}.settings{position:relative;margin-left:auto;font-size:12px}.settings summary{padding:10px 7px;color:#9296a7;cursor:pointer;list-style:none;min-height:40px}.settings summary::-webkit-details-marker{display:none}.settings[open] summary,.settings summary:hover{color:var(--accent)}.settings-panel{position:absolute;right:-4px;bottom:56px;width:245px;background:#fff;padding:20px;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 32px #232c4812;display:grid;gap:16px;animation:reveal .18s var(--ease)}label{display:flex;align-items:center;gap:9px;font-size:13px;color:#62677c;cursor:pointer}input{accent-color:var(--accent);width:15px;height:15px}select{font:inherit;font-size:12px;min-width:0;max-width:145px;padding:6px;border:1px solid var(--line);border-radius:6px;background:white;color:#62677c}#gap-label{display:none}body.shadow #gap-label{display:flex}.audio-indicator{display:flex;align-items:center;gap:2px;height:16px;width:14px;margin-right:2px}.audio-indicator i{width:2px;height:3px;border-radius:2px;background:#acaabd;transform-origin:center;transition:background .2s}.is-playing .audio-indicator i{background:#8881df;animation:listen .8s ease-in-out infinite}.is-playing .audio-indicator i:nth-child(2){animation-delay:-.3s}.is-playing .audio-indicator i:nth-child(3){animation-delay:-.55s}.is-shadowing .audio-indicator i{height:5px;background:#9290ab;animation:breathe 1.6s ease-in-out infinite}.is-shadowing .audio-indicator i:nth-child(2){height:9px}@keyframes listen{0%,100%{transform:scaleY(1)}50%{transform:scaleY(3.3)}}@keyframes breathe{50%{opacity:.35}}@keyframes reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.shell{padding:26px 16px 185px}h1{font-size:21px}.toolbar{margin:24px 0 17px;gap:10px}#hint{max-width:120px;font-size:12px;text-align:right}.modes button{min-width:77px;padding:8px 12px}.sentence{padding:17px 12px 15px}.sentence-top{gap:14px}.sentence-button{font-size:19px;letter-spacing:-.15px}.sentence:after{left:43px;right:12px}.cue{margin-left:31px;font-size:12px}.player{bottom:12px;width:calc(100% - 24px);padding:14px 16px 15px;border-radius:17px}.controls{gap:4px}.primary{min-width:90px}#all{margin-left:0;padding:9px 10px}.settings summary{padding:10px 4px}#status{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Compact transport: the transcript remains the main surface. */
.player{max-width:800px;padding:11px 16px 10px;border-radius:14px;bottom:18px;box-shadow:0 5px 24px #282f550b}.player-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'controls status' 'progress progress';gap:8px 18px}.controls{grid-area:controls;gap:4px}.status-row{grid-area:status;gap:7px;justify-content:flex-end}.progress{grid-area:progress;margin:0;height:2px}.primary{min-width:84px;min-height:36px;border-radius:8px;padding:7px 11px}.primary svg{width:16px;height:16px}#previous,#next{width:30px;height:34px;min-height:34px;padding:7px}#all{font-size:12px;padding:7px 10px;min-height:34px}.settings{margin-left:8px}.settings summary{min-height:34px;padding:7px}#position{display:none}.audio-indicator{display:none}.settings-panel{bottom:46px}#phase{font-size:11px}#status{font-size:11px}.shell{padding-bottom:130px}@media(max-width:600px){.player{width:calc(100% - 24px);bottom:12px;padding:10px 12px}.player-inner{gap:8px}.controls{gap:1px}.primary{min-width:69px;gap:6px;font-size:12px}#all{padding:7px 6px}.settings{margin-left:3px}.status-row{gap:0}#phase{display:none}#status{max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell{padding-bottom:125px}}
/* One quiet surface: the transport itself fills with playback progress. */
.player{max-width:328px;width:calc(100% - 32px);padding:6px 10px;border-radius:999px;bottom:20px;background:#fffffff5;box-shadow:0 5px 25px #282f550b;isolation:isolate}.player-inner{position:relative;display:block;z-index:1}.controls{display:flex;justify-content:center;align-items:center;gap:5px}.progress{position:absolute;inset:0;height:auto;margin:0;border-radius:inherit;background:transparent;z-index:0;pointer-events:none}.progress #progress-fill{height:100%;background:#8f88e722}.primary{min-width:40px;width:40px;height:40px;min-height:40px;padding:10px;border-radius:50%;background:transparent;color:#333146;box-shadow:none;gap:0}.primary:hover{background:#7770d914;color:#5552dc}.primary svg{width:19px;height:19px}#previous,#next,#all{display:flex;align-items:center;justify-content:center;width:38px;height:40px;min-height:40px;margin:0;padding:9px;border-radius:50%;color:#8a8b9e}#all:hover{background:#7770d910;color:#5552dc}.settings{margin:0}.settings summary{display:flex;align-items:center;justify-content:center;width:38px;height:40px;min-height:40px;padding:9px;border-radius:50%;color:#8a8b9e}.settings summary:hover{background:#7770d910}.settings-panel{bottom:53px;right:-8px}.repeat{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.5px;color:#9994b8;min-width:25px;text-align:center;margin:0 5px}.repeat:empty{display:none}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}#hint{display:none}.shell{padding-bottom:115px}@media(max-width:600px){.player{max-width:290px;bottom:16px;padding:5px 8px}.controls{gap:3px}.primary{min-width:40px}.settings{margin:0}.repeat{margin:0 3px}.settings-panel{right:-10px}.shell{padding-bottom:110px}}
/* Settings use the same quiet, tactile language as the transport. */
.settings-panel{width:272px;max-width:calc(100vw - 32px);padding:9px 18px 12px;border:1px solid #e9e9f1;border-radius:19px;background:#fffffff7;backdrop-filter:blur(24px);box-shadow:0 18px 60px #23263f12,0 3px 12px #23263f06;display:block;transform-origin:bottom right;animation:settings-reveal .2s cubic-bezier(.16,1,.3,1)}.settings-heading{display:flex;align-items:center;justify-content:space-between;height:43px;border-bottom:1px solid #efeff5;margin-bottom:4px}.settings-heading>span{font-size:12px;letter-spacing:.5px;color:#9a9aa9}.settings-heading button{display:flex;align-items:center;justify-content:center;min-height:32px;width:32px;padding:7px;margin-right:-7px;border-radius:50%;color:#9999ab}.settings-heading button:hover{background:#f3f3f8;color:#323244}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:51px;margin:0;color:#505064;font-size:14px;cursor:pointer}.setting-row:hover{color:#252539}.toggle{appearance:none;-webkit-appearance:none;position:relative;flex-shrink:0;width:36px;height:22px;margin:0;border:1px solid #e0e0eb;border-radius:999px;background:#e8e8ef;cursor:pointer;transition:background .22s var(--ease),border-color .22s var(--ease)}.toggle:after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #25263b1a;transition:transform .24s cubic-bezier(.2,.8,.2,1)}.toggle:checked{background:#6661c9;border-color:#6661c9}.toggle:checked:after{transform:translateX(14px)}.toggle:active:after{transform:scale(.9)}.toggle:checked:active:after{transform:translateX(14px) scale(.9)}.toggle:focus-visible{outline:2px solid #a6a0ea;outline-offset:4px}#gap-label.gap-row{padding:0 0 13px;margin:0;border-bottom:1px solid #efeff5;margin-bottom:3px;display:block}#gap-label.gap-row[hidden]{display:none}.gap-caption{display:block;font-size:12px;color:#9a99ad;margin:0 0 10px}.gap-options{display:flex;background:#f1f1f7;border-radius:9px;padding:3px;gap:3px}.gap-options button{flex:1;min-height:32px;padding:5px 8px;border-radius:7px;font-size:12px;font-variant-numeric:tabular-nums;color:#9997ad;transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}.gap-options button[aria-pressed="true"]{background:white;color:#595484;box-shadow:0 1px 4px #28263e09}.gap-options button:hover{color:#555069}.settings[open] summary{background:#7770d910;color:#5552dc}@keyframes settings-reveal{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.settings-panel{animation:none}.toggle,.toggle:after,.gap-options button{transition:none}}
/* Course library and the quiet return path. */
.back-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:#9b9bac;font-size:12px;margin:0 0 20px}.back-link:hover{color:var(--accent)}.home .shell{max-width:900px;padding-top:64px}.library-overline{font-size:10px;letter-spacing:2px;color:#a0a0b4;font-weight:550}.library-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:12px 0 34px}.library-title h1{font-size:30px;font-weight:550;letter-spacing:-1px}.library-title>span{font-size:12px;color:#a4a4b6}.course-link{display:flex;align-items:center;gap:25px;padding:30px 25px;margin:0 0 13px;border:1px solid #e8e9f1;background:#fff;border-radius:18px;color:inherit;text-decoration:none;transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}.course-link:hover{background:#fcfcff;border-color:#d5d3ef;box-shadow:0 6px 25px #35345406}.course-link:active{background:#f4f3fd}.course-number{align-self:flex-start;margin-top:2px;color:#acaac2;font-size:12px;font-variant-numeric:tabular-nums}.course-content{flex:1;min-width:0}.course-meta{display:flex;align-items:center;gap:16px;color:#aaa9ba;font-size:11px}.course-meta time{font-variant-numeric:tabular-nums}.course-content h2{font-size:23px;font-weight:550;letter-spacing:-.5px;margin:8px 0 4px;color:#37354d}.course-content p{font-size:15px;color:#8b899e;margin:0 0 12px}.course-duration{font-size:11px;color:#aeabbf}.course-open{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#b3afc8;transition:background .25s,color .25s}.course-link:hover .course-open{background:#f1effb;color:#7970ca}.library-search{margin-top:-12px;margin-bottom:24px}.library-search input{width:100%;height:44px;padding:10px 14px;background:#fff;border:1px solid #e8e9f1;border-radius:10px;font:inherit;font-size:14px;color:var(--ink)}.library-search[hidden],#no-results[hidden]{display:none}#no-results{font-size:14px;color:#9290a5;padding:20px}@media(max-width:600px){.home .shell{padding-top:38px}.library-title h1{font-size:26px}.library-title{margin-bottom:25px}.course-link{padding:24px 18px;gap:16px}.course-content h2{font-size:21px}.course-content p{font-size:14px}.course-open{width:27px}.course-meta{font-size:11px;gap:10px}.back-link{margin-bottom:17px}}

.translation{margin:7px 0 0 37px;font-size:14px;line-height:1.8;color:#9693a7;font-weight:400}.translation[hidden]{display:none}.active .translation{color:#827e9d}@media(max-width:600px){.translation{font-size:13px}}
/* Recognizable video covers, with a compact library grid. */
.home .shell{max-width:1160px;padding-bottom:70px}#course-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}.course-link{display:block;margin:0;padding:0;border:0;background:transparent;border-radius:14px;box-shadow:none}.course-link:hover{background:transparent;box-shadow:none}.course-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e6e5ef;border-radius:14px}.course-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}.course-link:hover img{transform:scale(1.035)}.course-length{position:absolute;right:10px;bottom:10px;padding:2px 7px;border-radius:5px;background:#161622bd;color:#fff;font-size:11px;line-height:1.7;font-variant-numeric:tabular-nums;backdrop-filter:blur(8px)}.cover-play{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:#fff;background:#16162216;opacity:0;transition:opacity .25s}.cover-play svg{box-sizing:content-box;padding:12px;background:#20202c88;border-radius:50%;backdrop-filter:blur(8px)}.course-link:hover .cover-play,.course-link:focus-visible .cover-play{opacity:1}.course-content{padding:12px 2px 0}.course-content h2{font-size:18px;line-height:1.4;margin:0 0 6px;letter-spacing:-.25px;font-weight:550}.course-meta{font-size:11px;line-height:1.7;gap:12px;flex-wrap:wrap;color:#9693a8}@media(max-width:1000px){#course-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){#course-list{grid-template-columns:1fr;gap:28px}.course-link{padding:0}.course-content h2{font-size:19px}.course-cover{border-radius:12px}.course-meta{font-size:12px}.home .shell{padding-bottom:40px}}@media(prefers-reduced-motion:reduce){.course-cover img,.cover-play{transition:none}}

.sync-courses{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:10px;color:#9693a8;border-radius:50%;margin-left:-10px}.sync-courses:hover{background:#eeecf8;color:var(--accent)}.home .library-title>span{margin-left:auto}