@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--green:#1b5e4b;--dark:#19382e;--muted:#546e63;--line:#dce6df;--cream:#f6f8f4;--reading:21px;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--dark);background:var(--cream);font-size:15px;line-height:1.65}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{outline-offset:4px}button{cursor:pointer;background:#e8f1eb;color:#28513e;border:1px solid transparent;border-radius:8px;padding:10px 14px;line-height:1.45}button:hover:not(:disabled){background:#dbece1}button:disabled{opacity:.45;cursor:default}a{color:var(--green)}[hidden]{display:none!important}input,select,textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:white;padding:11px 12px;color:var(--dark)}textarea{resize:vertical;line-height:1.7}input[type=checkbox]{accent-color:var(--green);width:17px;height:17px;margin:0;flex-shrink:0}.primary{background:var(--green);border-color:var(--green);color:white;font-weight:500}.primary:hover:not(:disabled){background:#164d3e}.secondary{background:#eef5ee;border-color:#d2e3d5}.muted{color:var(--muted)}label{display:block;color:var(--muted);font-size:14px;margin:15px 0 7px}.eyebrow,.step{font-size:11px;letter-spacing:1.3px;color:#527363;font-weight:500}.app-rail{position:fixed;left:16px;top:18px;width:210px;max-height:calc(100dvh - 36px);overflow:auto;background:white;border:1px solid var(--line);border-radius:14px;padding:19px 14px;display:flex;flex-direction:column;gap:20px;z-index:8;scrollbar-width:thin}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:20px;font-weight:700;letter-spacing:-.6px}.brand img{width:46px;height:46px;object-fit:contain}.brand small{display:block;font-size:8px;letter-spacing:1px;color:var(--muted);font-weight:500;white-space:nowrap}.site-home{font-size:12px;display:inline-block;margin-top:7px;text-decoration:none;padding:5px 0}.app-rail>button{font-size:14px;min-height:43px;width:100%;text-align:left}nav{display:flex;flex-direction:column;gap:7px}nav button{text-align:left;min-height:44px;font-size:14px;background:transparent;padding:10px;white-space:nowrap}nav button.active{background:#e2efe5;color:#1b5e4b;font-weight:600}nav button span{font-size:11px;border-radius:5px;padding:2px 5px;background:#e4f1e8;float:right}.rail-transfer{display:grid;gap:8px;border-block:1px solid var(--line);padding:16px 0}.rail-transfer button{font-size:13px;background:white;border-color:var(--line);min-height:39px}.rail-transfer span,.rail-note{font-size:11px;line-height:1.8;color:#728777}.rail-note{margin:0;padding-top:12px;border-top:1px solid var(--line)}.oldtool{font-size:12px;text-decoration:none}.app-rail #settingsBtn{background:white;border-color:var(--line);font-size:13px}main{max-width:1720px;margin:0 auto 0 248px;padding:20px 26px 0 0}.pagehead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.pagehead h1{font-size:24px;line-height:1.4;letter-spacing:-.6px;font-weight:600;margin:0 0 3px}.pagehead p{font-size:13px;color:var(--muted);margin:0}.local-pill{font-size:11px;color:#587968;border:1px solid var(--line);border-radius:25px;padding:7px 11px;white-space:nowrap}.study-grid{display:grid;grid-template-columns:minmax(270px,355px) minmax(0,1fr);gap:22px;align-items:start}.video-card{min-width:0}.video-top{display:flex;justify-content:space-between;align-items:center;background:white;border:1px solid var(--line);border-bottom:0;border-radius:13px 13px 0 0;padding:11px 15px}.badge{font-size:10px;letter-spacing:.8px;background:#edf4ec;border-radius:5px;padding:5px 8px;color:#527363}.video-top a{font-size:12px;text-decoration:none}.screen{position:relative;height:auto;aspect-ratio:9/13.8;background:#17271f;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:0 0 13px 13px;overflow:hidden}.screen video{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}.screen.audio{height:auto;aspect-ratio:9/10;background:#e8f0e7}.screen.audio video{height:70px;top:auto;bottom:12px;z-index:1}#audioNotice{text-align:center;color:#2e6047;font-size:19px;line-height:1.9}#audioNotice small{font-size:13px;color:#5d7868}#videoEmpty{text-align:center;padding:25px}.empty-icon{display:grid;place-items:center;margin:auto;width:60px;height:60px;border:1px solid #bfd6c8;border-radius:50%;color:var(--green);font-size:22px;background:#f8fbf7}#videoEmpty h2{font-size:20px;margin:19px 0 9px;font-weight:500}#videoEmpty p{font-size:14px;line-height:1.8;color:var(--muted)}#emptyAdd{font-size:14px;margin-top:7px}.video-bottom{padding:10px 0 0}#lessonTitle{padding:8px 0;font-size:16px;font-weight:500;border:0;background:transparent}.video-info{font-size:11px;color:#718776;display:flex;justify-content:space-between;gap:10px;margin:0 0 11px}.lesson-controls{margin-top:12px;padding:13px;background:white;border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column;gap:12px}.practice-controls{display:flex;align-items:center;gap:7px}.practice-controls button{min-height:42px;font-size:15px;padding:8px 12px}.practice-controls>button:first-child,.practice-controls>button:nth-child(3){font-size:27px;width:40px;flex-shrink:0;padding:0}.practice-controls #playSentence{flex:1;white-space:nowrap}.practice-controls #speed{width:76px;height:40px;font-size:14px;padding:5px 8px}#clock{font-size:13px;font-variant-numeric:tabular-nums;color:#315b49;margin-left:auto;white-space:nowrap}.video-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.video-actions button{font-size:13px;padding:8px 10px;min-height:38px;white-space:nowrap}#loop{border-color:var(--line);background:white}#loop[aria-pressed=true]{background:#deeee3;border-color:#8cba9d;color:#1b5e4b}.follow-label{display:flex;align-items:center;gap:6px;font-size:12px;margin:0;white-space:nowrap}.video-actions #saveLesson{margin-left:auto}.recent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;border-top:1px solid var(--line);padding-top:11px}.recent label{font-size:12px;white-space:nowrap;margin:0}.recent select{font-size:13px;padding:8px 10px;background:#f7faf6}#saveState{font-size:11px;color:#6e8474;line-height:1.8;margin:9px 2px 0}.learning-card{min-width:0;border:1px solid var(--line);background:white;border-radius:14px;overflow:hidden;box-shadow:0 3px 18px #173d3205;display:flex;flex-direction:column;padding:0 20px 14px;min-height:730px}.learning-head{display:flex;align-items:center;justify-content:space-between;padding:20px 0 12px;gap:10px}.learning-head h2{font-size:22px;font-weight:600;line-height:1.5;margin:4px 0 0}.step{font-size:9px}#sentenceCount{font-size:12px;background:#e4f1e8;padding:3px 8px;border-radius:6px;color:#276047}.mode-tabs{display:flex;gap:25px;border-bottom:1px solid var(--line)}.mode-tabs button{border:0;background:none;border-radius:0;font-size:15px;color:var(--muted);padding:13px 0}.mode-tabs button[aria-selected=true]{border-bottom:2px solid #267655;color:var(--green);font-weight:500}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 0 10px;flex-wrap:wrap}.toolbar>div{display:flex;gap:7px;flex-wrap:wrap}.toolbar button{font-size:12px;padding:9px 10px;border:1px solid var(--line);background:white}.toolbar button[aria-pressed=true]{background:#e3f0e5;border-color:#9dbda7}#status{font-size:12px;line-height:1.8;color:#587568;overflow-wrap:anywhere;margin:2px 0 9px}#status.error{color:#a9513f}progress{width:100%;height:5px;accent-color:var(--green)}.lookup-bar{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;background:#f7faf6;padding:4px 5px 4px 10px;margin:3px 0 6px}.lookup-bar>span{font-size:11px;color:#5b7664;white-space:nowrap}.lookup-bar input{border:0;background:none;font-size:12px;min-width:0;flex:1;padding:7px 0}.lookup-bar button{font-size:12px;white-space:nowrap;padding:8px 10px}.sentence-list{height:max(340px,calc(100dvh - 345px));min-height:340px;max-height:780px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#afc9b9 transparent;margin:8px -8px 0;padding:0 8px;scroll-behavior:smooth}.no-sentences{min-height:340px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:28px 10px}.no-sentences>span{font-family:Georgia,serif;font-size:58px;color:#aec7b3;line-height:1}.no-sentences h3{font-size:20px;font-weight:500;margin:17px 0 7px}.no-sentences p{font-size:14px;line-height:1.85;color:var(--muted);margin:0}.sentence{display:grid;grid-template-columns:48px minmax(0,1fr) 32px;gap:10px;padding:18px 11px;border-bottom:1px solid #e4ebe5;border-left:3px solid transparent;border-radius:7px;margin-bottom:2px}.sentence.active{background:#e5f2e9;border-left-color:#2c8961}.sentence.playing{box-shadow:inset 0 0 0 1px #d2e6d8}.sentence .time{align-self:start;background:none;color:#376f55;font-size:11px;padding:5px 0;line-height:1.8;font-variant-numeric:tabular-nums}.sentence .words{display:block;width:100%;text-align:left;border:0;background:none;color:#19382e;padding:0;font-size:var(--reading);font-weight:400;line-height:1.75;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}.sentence .words:hover{background:transparent}.sentence.active .words{color:#164a32}.sentence .meaning{font-size:15px;color:#617e69;margin-top:8px;line-height:1.75;white-space:pre-wrap}.sentence .star{align-self:start;padding:0;background:none;font-size:25px;color:#7a9885;line-height:1.6}.sentence .star[aria-pressed=true]{color:#9e843a}.sentence .edits{grid-column:2/4;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.edits textarea{grid-column:1/-1;min-height:65px;font-size:15px}.edits label{font-size:12px;margin:0}.edits input{font-size:14px;margin-top:5px;padding:8px}.edits .delete-row{grid-column:2;justify-self:end;font-size:12px;background:none;color:#9a6552}.bottom-tools{border-top:1px solid var(--line);margin-top:13px;padding-top:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.bottom-tools>div{display:flex;gap:12px}.bottom-tools button{padding:5px 0;border:0;background:none;font-size:12px;color:var(--green)}.hint{font-size:11px;line-height:1.8;color:#6e8274;margin:11px 0 0}.speaking-box{background:#f1f7ee;border:1px solid #d5e5d4;border-radius:10px;margin-top:14px;padding:19px;text-align:center}.speaking-box>p:not(.hint){font-size:var(--reading);line-height:1.7;margin:13px 0}.speaking-box>button{font-size:13px}.collection-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:25px}.collection-head h2{font-size:25px;font-weight:600;margin:0}.collection-head>div{display:flex;gap:10px}.collection-head select{width:auto;font-size:14px}.collection-note{font-size:14px;color:var(--muted);line-height:1.9}.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin:25px 0;min-height:360px}.lesson-tile{background:white;border:1px solid var(--line);border-radius:12px;padding:22px;align-self:start}.lesson-tile h3{font-size:19px;font-weight:500;line-height:1.65;overflow-wrap:anywhere;margin:15px 0 8px}.lesson-tile p{font-size:12px;color:var(--muted)}.tile-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}.tile-actions button{font-size:13px}.phrase-list{display:flex;flex-direction:column;gap:15px;margin-top:25px;min-height:360px}.phrase-card{background:#fbfdf9;border:1px solid var(--line);border-radius:11px;padding:23px 25px}.phrase-card p{font-size:calc(var(--reading) + 1px);font-weight:400;line-height:1.75;margin:0 0 10px;overflow-wrap:anywhere}.phrase-card small{display:block;font-size:13px;color:var(--muted);line-height:1.8}.phrase-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.phrase-actions button{font-size:13px}.empty-collection{font-size:16px;color:var(--muted);line-height:1.9;padding:45px 20px;grid-column:1/-1;text-align:center}.textbutton,.guide-link{border:0;background:none;padding:6px 0;font-size:12px;margin-top:10px}.textbutton{color:var(--green)}footer{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#5c7868;padding:22px 0;margin-top:25px;border-top:1px solid var(--line)}footer>span:last-child{font-size:11px}dialog{width:min(620px,calc(100% - 32px));max-height:88dvh;overflow:auto;border:1px solid #d3e2d7;border-radius:15px;background:white;color:var(--dark);padding:28px;box-shadow:0 20px 120px #173d3226}dialog::backdrop{background:#173d3259;backdrop-filter:blur(5px)}dialog h2{font-size:25px;font-weight:600;line-height:1.5;margin:10px 0 16px}dialog>p,details p{font-size:14px;color:var(--muted);line-height:1.85}.close{position:absolute;right:14px;top:11px;font-size:26px;background:none;padding:2px 8px;color:#688373}.fieldnote{display:block;font-size:12px;line-height:1.8;color:#688373;margin:7px 0}.upload{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;border:1px dashed #a5c8b0;background:#f0f7ef;border-radius:10px;padding:28px 15px;cursor:pointer;margin:20px 0}.upload>span{font-size:28px;color:#518562}.upload strong{font-size:16px;font-weight:500}.upload small{font-size:12px}.upload.drag{border-color:#377c50;background:#dfeeDF}details{border:1px solid var(--line);border-radius:9px;padding:14px;margin:18px 0}summary{font-size:14px;cursor:pointer}details button{margin-top:12px}.file-button{display:block;font-size:14px;text-align:center;padding:13px;cursor:pointer;border-radius:8px}#startTranscribe,#applyCaptions{width:100%;margin-top:18px;min-height:45px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);padding:0;margin:-1px}.font-preview{font-size:var(--reading);padding:20px;background:#edf6ec;border-radius:8px;margin-top:16px}.setting-check{display:flex;gap:9px;align-items:center}.research-topics{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.research-topics button{font-size:13px;border:1px solid var(--line);background:#f4f8f1}.research-topics button[aria-pressed=true]{background:#dfeee3;border-color:#7eaf91}#researchTerm{font-size:21px;color:#204c36;background:#edf6ec;border:1px solid #d2e3d5;border-radius:8px;padding:14px;max-height:150px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.research-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}.research-actions a{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;text-decoration:none;border-radius:8px;font-size:14px}.research-actions button{font-size:14px}#selectionBubble{position:fixed;z-index:20;display:flex;align-items:center;gap:3px;border:1px solid #bcd4c4;border-radius:8px;background:#f4faf5;box-shadow:0 6px 35px #173d3233;padding:4px;max-width:95vw}#selectionBubble a,#selectionBubble button{font-size:13px;padding:8px 10px;background:transparent;color:#214d36;white-space:nowrap;text-decoration:none}#selectionBubble button{border-left:1px solid #d4e3d8;border-radius:0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;z-index:100;background:#e7f4e9;color:#214d36;border:1px solid #bad7c3;border-radius:10px;box-shadow:0 7px 40px #173d3226;padding:13px 20px;font-size:14px}::selection{background:#cce7d1;color:#173d32}@media(min-width:1850px){main{margin-left:auto;width:calc(100% - 270px);padding-right:30px}.study-grid{grid-template-columns:minmax(270px,355px) minmax(0,1fr)}}@media(max-width:1200px) and (min-width:981px){.app-rail{width:185px;padding:17px 11px;left:12px}.brand{font-size:18px}.brand img{width:40px;height:40px}.brand small{font-size:7px}.app-rail nav button{font-size:13px;padding-inline:8px}main{margin-left:217px;padding-right:18px}.study-grid{gap:16px;grid-template-columns:minmax(230px,290px) minmax(0,1fr)}.learning-card{padding-inline:16px}.toolbar button{font-size:11px}.practice-controls #speed{width:66px}.practice-controls button{font-size:14px;padding-inline:9px}.follow-label{font-size:11px}.lookup-bar>span{display:none}.sentence{grid-template-columns:40px minmax(0,1fr) 28px;gap:7px;padding-inline:7px}.lesson-grid{grid-template-columns:1fr 1fr}}
@media(max-width:980px){.app-rail{position:relative;left:auto;top:auto;width:auto;max-height:none;border-radius:0;border:0;border-bottom:1px solid var(--line);padding:16px 22px;display:grid;grid-template-columns:1fr auto;gap:12px 18px;overflow:visible}.brand-block{grid-column:1;grid-row:1}.app-rail #newLesson{grid-column:2;grid-row:1;align-self:center;width:auto;min-height:43px;font-size:14px}.app-rail nav{grid-column:1/-1;grid-row:2;flex-direction:row;gap:8px}.app-rail nav button{flex:1;font-size:14px;text-align:center}.app-rail nav button span{float:none;margin-left:5px}.rail-transfer,.rail-note,.oldtool{display:none}.app-rail #settingsBtn{grid-column:2;grid-row:3;padding:8px;min-height:34px}.site-home{font-size:11px;margin-top:3px}.app-rail .brand img{width:43px;height:43px}.app-rail .brand small{font-size:8px}main{margin:0 auto;padding:20px 20px 0;max-width:1250px}.pagehead{margin-bottom:17px}.study-grid{gap:18px;grid-template-columns:minmax(230px,290px) minmax(0,1fr)}.screen{height:auto;aspect-ratio:9/13.8}.learning-card{padding-inline:17px}.lookup-bar>span{display:none}.sentence{grid-template-columns:40px minmax(0,1fr) 28px;gap:7px;padding-inline:6px}.sentence .words{font-size:var(--reading)}.toolbar{gap:7px}.toolbar button{font-size:12px}.practice-controls #speed{width:67px}.practice-controls button{font-size:14px;padding-inline:9px}.lesson-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.app-rail{padding:14px 16px;gap:10px}.brand{font-size:19px}.app-rail #newLesson{font-size:12px;padding:10px}.app-rail nav{gap:4px}.app-rail nav button{font-size:12px;padding:10px 5px;min-height:40px}.app-rail #settingsBtn{font-size:12px}.app-rail .brand small{font-size:7px}.pagehead h1{font-size:23px}.pagehead p{font-size:12px}.local-pill{display:none}main{padding:18px 14px 0}.study-grid{grid-template-columns:1fr}.screen{height:auto;aspect-ratio:9/12;max-height:480px;min-height:0}.video-info{font-size:11px}.learning-card{min-height:650px;padding-inline:16px}.sentence-list{height:490px;max-height:65dvh}.learning-head h2{font-size:22px}.mode-tabs{gap:24px}.mode-tabs button{font-size:15px}.toolbar button{font-size:12px}.lookup-bar input{font-size:13px}.lookup-bar button{font-size:12px}.sentence{grid-template-columns:41px minmax(0,1fr) 30px;gap:8px;padding:17px 5px}.sentence .time{font-size:11px}.sentence .words{font-size:var(--reading);line-height:1.7}.sentence .meaning{font-size:15px}.practice-controls #speed{width:76px}.practice-controls #playSentence{font-size:15px}.video-actions #saveLesson{margin-left:auto}.follow-label{font-size:12px}.lesson-grid{grid-template-columns:1fr}.collection-head{flex-wrap:wrap;gap:12px}.collection-head>div{flex-wrap:wrap}.collection-head h2{font-size:23px}.collection-note{font-size:13px}.phrase-card{padding:19px}.phrase-card p{font-size:var(--reading)}footer{font-size:11px;flex-direction:column;gap:8px}footer>span:last-child{font-size:10px}dialog{padding:24px 20px}.bottom-tools>div{gap:13px}.bottom-tools button{font-size:12px}#selectionBubble a,#selectionBubble button{font-size:12px;padding:8px}.no-sentences h3{font-size:19px}.no-sentences p{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Three balanced columns, with native-ratio media and controls above it. */
@media(min-width:981px){
 body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;max-width:1720px;margin:0 auto;padding:16px 24px;align-items:start}
 .app-rail{position:sticky;left:auto;top:16px;width:100%;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);padding:20px 16px;gap:18px;grid-column:1;grid-row:1}
 .rail-note{margin-top:auto}.brand{font-size:20px}.brand img{width:45px;height:45px}
 main{margin:0;padding:0;max-width:none;width:100%;min-width:0;grid-column:2;grid-row:1}
 .pagehead{display:none}
 .study-grid{grid-template-columns:minmax(340px,.95fr) minmax(400px,1.05fr);gap:24px;align-items:start}
 .video-card{display:flex;flex-direction:column;align-items:center;min-width:0;--media-ratio:.5625;--screen-height:calc(100dvh - 265px)}
 .video-bottom{width:100%;padding:0 0 12px;flex:none}
 #lessonTitle{font-size:15px;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;padding:4px 2px 6px}
 .video-info{font-size:10px;margin-bottom:8px;padding-inline:2px}.video-info>span:last-child{font-size:10px}
 .lesson-controls{margin:0;padding:10px 12px;gap:9px;background:#fff}
 .practice-controls{gap:7px}.practice-controls #playSentence{flex:0 1 auto;min-width:110px;font-size:14px}.practice-controls>button:first-child,.practice-controls>button:nth-child(3){width:36px;min-height:36px;font-size:25px}
 .practice-controls button{min-height:36px}.practice-controls #speed{height:36px;width:72px;font-size:13px}
 .video-actions{gap:8px 10px}.video-actions button{font-size:12px;min-height:33px;padding:6px 9px}.follow-label{font-size:11px;gap:5px}.follow-label input{width:15px;height:15px}
 .recent{padding-top:8px;gap:9px}.recent label{font-size:11px}.recent select{font-size:12px;padding:6px 8px}
 #saveState{font-size:10px;line-height:1.6;margin:6px 2px 0}
 .video-top{width:min(100%,calc(var(--screen-height) * var(--media-ratio)));padding:8px 11px;flex:none}
 .screen{width:min(100%,calc(var(--screen-height) * var(--media-ratio)));height:auto;min-height:0;max-height:none;aspect-ratio:var(--media-ratio);background:#18231d;border-color:#d7e1d9;flex:none}
 .screen video{object-fit:contain;background:#16231c}.screen.audio{width:100%;height:300px;aspect-ratio:auto;background:#e8f0e7}.screen.audio video{height:70px;inset:auto 0 12px;background:transparent}
 .video-card.is-landscape .screen,.video-card.is-landscape .video-top{width:100%}
 .learning-card{height:calc(100dvh - 32px);min-height:620px;max-height:none;position:sticky;top:16px;padding-inline:19px}
 .learning-head{padding-top:18px}.learning-head h2{font-size:22px}.mode-tabs{gap:23px}.mode-tabs button{font-size:14px;padding:12px 0}
 .toolbar{padding-top:12px;gap:7px}.toolbar button{font-size:12px;padding:8px 9px}
 .lookup-bar>span{display:none}.lookup-bar input{font-size:12px}
 .sentence-list{flex:1;height:auto;min-height:180px;max-height:none;margin-top:7px}
 .sentence{grid-template-columns:42px minmax(0,1fr) 29px;gap:8px;padding:16px 7px}
 .sentence .words{font-size:var(--reading);line-height:1.7}.sentence .time{font-size:10px}.sentence .star{font-size:23px}
 .bottom-tools{gap:8px;margin-top:10px;padding-top:9px;flex:none}.bottom-tools button{font-size:11px}.bottom-tools>div{gap:10px}.learning-card>.hint{font-size:10px;line-height:1.7;flex:none;margin-top:8px}
 .speaking-box{flex:none;padding:14px}.speaking-box .hint{font-size:10px}
 footer{font-size:11px;margin-top:20px}.collection-head{margin-top:8px}
}
@media(min-width:981px) and (max-width:1250px){
 body{grid-template-columns:190px minmax(0,1fr);gap:18px;padding:14px 18px}.app-rail{padding:18px 12px;height:calc(100dvh - 28px);top:14px}
 .brand{font-size:18px}.brand img{width:38px;height:38px}.brand small{font-size:7px}nav button{font-size:13px;padding-inline:8px}
 .study-grid{grid-template-columns:minmax(290px,.9fr) minmax(340px,1.1fr);gap:18px}.video-card{--screen-height:calc(100dvh - 290px)}
 .learning-card{height:calc(100dvh - 28px);top:14px;padding-inline:14px}.follow-label{font-size:10px}.video-actions #saveLesson{margin-left:0}.toolbar button{font-size:11px}.learning-head h2{font-size:20px}.bottom-tools>div{gap:9px}.lookup-bar button{padding-inline:8px;font-size:11px}
}
@media(max-width:980px){
 .video-card{display:flex;flex-direction:column;--media-ratio:.5625}.video-bottom{order:0;width:100%;padding:0 0 12px}.video-top{order:1;width:100%;max-width:460px;margin-inline:auto}.screen{order:2;width:100%;max-width:460px;height:auto;max-height:none;aspect-ratio:var(--media-ratio);margin-inline:auto}
 .screen.audio{aspect-ratio:auto;height:260px}.video-card.is-landscape .screen,.video-card.is-landscape .video-top{max-width:none}
 .screen video{object-fit:contain}.pagehead{margin-bottom:16px}.learning-card{min-height:640px}
}
@media(max-width:700px){
 .video-top,.screen{width:min(100%,calc(70dvh * var(--media-ratio)));max-width:none}.screen{height:auto;max-height:none;aspect-ratio:var(--media-ratio)}
 .screen.audio{width:100%;height:260px;aspect-ratio:auto}.video-card.is-landscape .screen,.video-card.is-landscape .video-top{width:100%}
 .video-bottom{padding-bottom:14px}#lessonTitle{font-size:15px}.video-actions{gap:8px}.lesson-controls{margin-top:7px}.recent label{font-size:11px}.recent select{font-size:12px}#saveState{font-size:10px}
}

/* TikTok-sized native frame with tools over the video, at the two edges. */
.video-card{--media-ratio:.5625;--screen-height:calc(100dvh - 32px)}
.video-card .screen{position:relative;display:block;width:min(100%,calc(var(--screen-height) * var(--media-ratio)));max-width:none;height:auto;max-height:none;aspect-ratio:var(--media-ratio);border:0;border-radius:16px;background:#14241c;isolation:isolate;margin-inline:auto;order:0}
.video-card .screen video{z-index:0;object-fit:contain}
.screen .video-top{position:absolute;inset:0 0 auto;width:100%;max-width:none;z-index:2;display:flex;flex-wrap:wrap;gap:4px 10px;padding:15px 16px 35px;border:0;border-radius:0;background:linear-gradient(#000a,#0007 65%,transparent);color:white;pointer-events:none}
.screen .video-top>*{pointer-events:auto}.screen .video-top .badge{background:#ffffff26;color:white;border:1px solid #ffffff26;font-size:10px}.screen .video-top a{color:white;font-size:11px;margin-left:auto}
.screen #lessonTitle{order:-2;width:100%;font-size:15px;font-weight:500;color:white;background:transparent;padding:0;text-shadow:0 1px 4px #0008}.screen #lessonTitle::placeholder{color:#eee}.screen .video-info{order:-1;width:100%;color:#eee;margin:0;font-size:10px;padding:0}.screen .video-info>span:last-child{display:none}
.screen .video-bottom{position:absolute;inset:auto 0 50px;width:100%;z-index:2;padding:35px 12px 5px;background:linear-gradient(transparent,#0007 25%,#000b);color:white;pointer-events:none}
.screen .video-bottom>*{pointer-events:auto}.screen .lesson-controls{margin:0;padding:9px;border:1px solid #ffffff30;border-radius:12px;gap:8px;background:#15231f9c;backdrop-filter:blur(12px)}
.screen .practice-controls{gap:5px}.screen .practice-controls button{min-height:34px;padding:6px 9px;background:#ffffff24;color:white}.screen .practice-controls #playSentence{background:#f6faf1;color:#20513d;flex:1;min-width:90px;font-size:13px}.screen .practice-controls>button:first-child,.screen .practice-controls>button:nth-child(3){width:30px;font-size:24px;padding:0}.screen #clock{color:white;font-size:11px}.screen #speed{background:#ffffff20;border-color:#ffffff30;color:white;width:61px;height:34px;font-size:12px}.screen #speed option{background:#fff;color:#19382e}
.screen .video-actions{gap:6px;justify-content:space-between}.screen .video-actions button{background:#ffffff20;color:white;border-color:#ffffff38;font-size:11px;padding:5px 8px;min-height:31px}.screen #loop[aria-pressed=true]{background:#e2f2df;color:#174a32}.screen .follow-label{font-size:10px;color:#f2f6ef;gap:4px}.screen .follow-label input{width:13px;height:13px}.screen .video-actions #saveLesson{margin-left:0}
.screen .recent{border-color:#ffffff26;padding-top:7px;gap:7px}.screen .recent label{font-size:10px;color:#eee}.screen .recent select{background:#ffffff17;color:white;border-color:#ffffff2b;font-size:11px;padding:5px 7px}.screen .recent option{background:white;color:#19382e}.screen #saveState{font-size:9px;line-height:1.5;color:#e1e9df;margin:5px 3px 0;text-shadow:0 1px 3px #000}
.screen #videoEmpty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:white;padding:130px 18px 220px}.screen #videoEmpty p{color:#c2d2c7}.screen.audio{width:100%;height:420px;aspect-ratio:auto}.screen.audio #audioNotice{padding-top:100px}.screen.audio video{z-index:3}
@media(min-width:981px){.study-grid{grid-template-columns:minmax(360px,1.05fr) minmax(370px,1fr)}.video-card.is-landscape .screen{width:100%;margin-top:0}.video-card.is-landscape .screen .video-bottom{bottom:46px}}
@media(min-width:981px) and (max-width:1250px){.study-grid{grid-template-columns:minmax(320px,1fr) minmax(340px,1fr);gap:18px}}
@media(max-width:980px){.video-card .screen{width:min(100%,calc(var(--screen-height) * var(--media-ratio)));margin-inline:auto}.screen .video-bottom{order:initial}.video-card.is-landscape .screen{width:100%}}
@media(max-width:700px){.screen .video-top{padding:12px 13px 28px}.screen .video-bottom{padding-inline:9px}.screen .practice-controls #playSentence{min-width:75px}.screen .follow-label{font-size:9px}}

.screen #loop{background:#ffffff20;color:white;border-color:#ffffff38}.screen #loop[aria-pressed=true]{background:#e2f2df;color:#174a32;border-color:#d1e6ca}

/* Let both side panels meet the native video with one consistent gutter. */
@media(min-width:981px){body{grid-template-columns:var(--study-rail-width,220px) minmax(0,1fr)}.study-grid{grid-template-columns:var(--study-video-width,minmax(360px,1.05fr)) minmax(0,1fr)}.video-card{width:100%}.video-card .screen{margin-inline:0}.app-rail{width:100%}}

/* Compact transcript header: keep the reading area close to the top. */
.learning-card .learning-head{padding:14px 0 10px;min-height:55px;border-bottom:1px solid var(--line);margin-bottom:10px}.learning-head .step{display:none}.learning-card .learning-head h2{font-size:21px;line-height:1.4;margin:0}.learning-card #sentenceCount{font-size:11px;padding:3px 8px;white-space:nowrap}
.learning-card .toolbar{padding:0;margin:0 0 8px;gap:8px}.learning-card .toolbar>div{gap:7px}.learning-card .toolbar button{font-size:12px;padding:7px 10px;min-height:34px}.learning-card #status{font-size:11px;line-height:1.6;margin:0 0 7px}.learning-card .lookup-bar{margin:0 0 7px;padding:3px 4px 3px 10px;min-height:36px}.learning-card .lookup-bar input{font-size:12px;padding:5px 0}.learning-card .lookup-bar button{font-size:11px;padding:6px 9px}.learning-card .sentence-list{margin-top:0}.learning-card .sentence{padding-top:13px;padding-bottom:13px}
@media(max-width:700px){.learning-card .learning-head h2{font-size:20px}.learning-card .toolbar button{font-size:11px;padding-inline:8px}}

/* Larger, easier-to-read controls across the wider native video. */
.screen .video-bottom{bottom:58px;padding:42px 14px 7px}.screen .lesson-controls{padding:12px;gap:11px;border-radius:13px;background:#15231fb0}
.screen .practice-controls{gap:8px}.screen .practice-controls button{min-height:44px;padding:9px 12px}.screen .practice-controls #playSentence{font-size:16px;min-height:44px}.screen .practice-controls>button:first-child,.screen .practice-controls>button:nth-child(3){width:40px;font-size:30px}.screen #clock{font-size:13px}.screen #speed{width:74px;height:44px;font-size:14px;padding:6px 8px}
.screen .video-actions{gap:8px}.screen .video-actions button{font-size:14px;min-height:39px;padding:8px 11px}.screen .follow-label{font-size:12px;gap:6px}.screen .follow-label input{width:16px;height:16px}.screen .recent{padding-top:10px;gap:10px}.screen .recent label{font-size:12px}.screen .recent select{font-size:13px;padding:7px 9px;min-height:36px}.screen #saveState{font-size:11px;margin-top:7px}
@media(max-width:1250px){.screen .practice-controls{gap:5px}.screen .practice-controls #playSentence{font-size:14px;min-width:75px}.screen .practice-controls>button:first-child,.screen .practice-controls>button:nth-child(3){width:32px}.screen #speed{width:63px}.screen .video-actions button{font-size:12px}.screen .follow-label{font-size:11px}}
@media(max-width:700px){.screen .video-bottom{padding-inline:8px}.screen .lesson-controls{padding:8px;gap:9px}.screen .practice-controls #playSentence{font-size:13px}.screen .practice-controls>button:first-child,.screen .practice-controls>button:nth-child(3){width:28px}.screen #clock{font-size:11px}.screen #speed{font-size:12px;width:58px}.screen .video-actions{gap:5px}.screen .video-actions button{font-size:11px;padding:6px 7px}.screen .follow-label{font-size:10px}.screen .recent label{font-size:10px}.screen .recent select{font-size:11px}.screen #saveState{font-size:10px}}

@media(min-width:981px){.app-rail #newLesson{font-size:13px;padding-inline:9px;white-space:nowrap}}

/* Align the three lower edges and lift tools clear of native player controls. */
.screen .video-bottom{bottom:52px}
@media(min-width:981px){.app-rail{height:var(--study-panel-height,calc(100dvh - 32px));max-height:var(--study-panel-height,calc(100dvh - 32px))}.learning-card{height:var(--study-panel-height,calc(100dvh - 32px));min-height:0}}
@media(max-width:700px){.screen .video-bottom{bottom:52px}}

/* Accessible volume controls and a persistent saved-heart state. */
.screen .volume-controls{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid #ffffff26;color:white}
.screen .volume-controls button{display:grid;place-items:center;flex:none;min-width:32px;height:32px;padding:0;border:1px solid #ffffff30;border-radius:7px;background:#ffffff18;color:white;font-size:18px;line-height:1}
.screen .volume-controls #muteVideo{font-size:16px}.screen #videoVolume{flex:1;width:0;min-width:35px;height:28px;padding:0;border:0;background:transparent;accent-color:#d9edd4;cursor:pointer}.screen #volumeValue{flex:none;min-width:40px;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.screen #saveLesson{display:inline-flex;align-items:center;justify-content:center;gap:6px}.heart-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.screen #saveLesson.is-saved{color:#ffe4ec;border-color:#eaa4b775;background:#a847662b}.screen #saveLesson.is-saved .heart-icon{fill:#ffa9c2;stroke:#ffa9c2}
@media(max-width:700px){.screen .volume-controls{gap:6px;padding-bottom:7px}.screen .volume-controls button{min-width:30px;height:30px}.screen #volumeValue{min-width:35px;font-size:11px}.heart-icon{width:15px;height:15px}}

/* Two short rows: everyday actions stay visible; volume opens on demand. */
.screen .video-bottom{padding:16px 12px 5px;background:linear-gradient(transparent,#0005)}
.screen .lesson-controls{position:relative;padding:9px;gap:7px;border-radius:12px;background:#14211dd9;backdrop-filter:blur(10px)}
.screen .practice-controls{gap:7px}.screen .practice-controls button{min-height:38px}.screen .practice-controls #playSentence{min-height:38px;font-size:14px;padding:7px 10px;min-width:95px;flex:1}.screen .practice-controls>button:first-child,.screen .practice-controls>button:nth-child(3){width:34px;min-height:38px;font-size:26px;padding:0}.screen #speed{width:65px;height:38px;font-size:13px;padding:5px 6px}.screen #clock{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen .practice-controls #saveLesson{flex:none;width:38px;height:38px;min-height:38px;padding:0;gap:0;border-color:#ffffff30;border-radius:8px}.screen #saveLessonLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.screen .practice-controls .heart-icon{width:21px;height:21px}
.screen .video-actions{display:flex;align-items:center;justify-content:space-between;gap:7px;border-top:1px solid #ffffff1c;padding-top:7px}.screen .video-actions button{min-height:32px;font-size:12px;padding:5px 9px}.screen .follow-label{font-size:11px;gap:5px}.screen .follow-label input{width:15px;height:15px}.screen #volumeMenu{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:#ffffff13;border-color:#ffffff24;font-variant-numeric:tabular-nums}.screen #volumeMenu[aria-expanded=true]{background:#ffffff2c;border-color:#ffffff65}.screen #updateLesson{font-size:11px}
.screen #volumePopover{position:absolute;right:0;left:0;bottom:calc(100% + 8px);border:1px solid #ffffff36;border-radius:10px;padding:10px;background:#14211df2;box-shadow:0 4px 18px #0003;backdrop-filter:blur(12px);z-index:4}.screen #volumePopover .volume-controls{padding:0;border:0;gap:8px}
.app-rail .rail-recent{border-top:1px solid var(--line);padding-top:12px;min-width:0}.app-rail .recent{display:block;border:0;margin:0;padding:0}.app-rail .recent label{margin:0 0 5px;font-size:11px}.app-rail .recent select{font-size:12px;padding:7px 8px;width:100%;min-width:0}.app-rail #saveState{font-size:10px;color:var(--muted);line-height:1.6;margin:6px 0 0}
@media(max-width:980px){.app-rail .rail-recent{grid-column:1;grid-row:3;border:0;padding:0}.app-rail .recent label{display:none}.app-rail #saveState{font-size:9px;max-width:45ch}.screen .practice-controls #playSentence{min-width:75px}}
@media(max-width:700px){.screen .video-bottom{padding-inline:8px}.screen .lesson-controls{padding:8px;gap:6px}.screen .practice-controls{gap:5px}.screen .practice-controls #playSentence{font-size:13px;min-width:65px}.screen .practice-controls>button:first-child,.screen .practice-controls>button:nth-child(3){width:28px}.screen #speed{width:58px;font-size:12px}.screen .practice-controls #saveLesson{width:34px}.screen .video-actions{gap:5px}.screen .video-actions button{font-size:11px;padding-inline:7px}.screen .follow-label{font-size:10px}}

/* Add a source: one clear path for links and one for local files. */
.add-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f1f5ef;padding:5px;border-radius:10px;margin:18px 0}.add-tabs button{background:transparent;border:1px solid transparent;min-height:43px}.add-tabs [aria-selected=true]{background:white;border-color:#ccded0;box-shadow:0 2px 6px #173d3209;color:#18533e}.link-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}.link-actions .primary{flex:1;min-height:46px}.link-actions a{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d2e3d5;border-radius:8px;padding:11px 13px;text-decoration:none;font-size:14px}.helper-steps{font-size:13px;line-height:1.9;color:var(--muted);padding-left:21px}.helper-steps li{margin-bottom:7px}#helperDetails code{background:#edf3ed;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}#downloadHelper{display:inline-block;font-size:14px;margin-top:5px}#checkHelper{width:100%;margin-top:10px}#addStatus:not(:empty){font-size:14px;line-height:1.8;background:#f0f7ef;border:1px solid #d3e3d5;padding:12px 14px;border-radius:8px;white-space:pre-line}

.storage-settings{margin-top:24px;padding-top:20px;border-top:1px solid #dce5dc}.storage-settings h3{font-size:20px;margin:0 0 12px}.storage-path{padding:12px;background:#eff5ec;border-radius:12px;overflow-wrap:anywhere;white-space:pre-wrap}.storage-settings button{margin:4px 6px 8px 0}.storage-settings #storageStatus{min-height:2.8em}#settingsDialog{max-height:90dvh;overflow-y:auto}

/* Named video lists share metadata only; videos are not copied. */
.video-collections{padding:22px;border:1px solid #d6e2d8;background:#f0f5ec;border-radius:18px;margin:20px 0}.video-collections-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.video-collections-head h3,.collection-current h3{margin:0}.video-collections-head p{font-size:13px;color:var(--muted);margin:7px 0 0}.collection-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.collection-chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;text-align:left;overflow-wrap:anywhere;background:#fff;border:1px solid #cddbd0;border-radius:99px;padding:9px 13px;font-size:13px}.collection-chip[aria-pressed=true]{background:#18533e;color:white;border-color:#18533e}.collection-count{font-variant-numeric:tabular-nums;opacity:.75;flex:none}.collection-current{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;margin-top:18px;border-top:1px solid #d6e2d8}.collection-current h3{overflow-wrap:anywhere}.collection-current>div{display:flex;gap:8px;flex:none}.video-list-tags{font-size:12px;color:#246148;overflow-wrap:anywhere}.collection-check{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #e2e8df;overflow-wrap:anywhere}.collection-check input{width:18px;height:18px;flex:none;accent-color:#18533e}.collection-check span{min-width:0}.list-error{color:#a32626;min-height:20px;font-size:14px}#collectionName,#collectionPickerChoices{width:100%;max-width:100%}#collectionPickerChoices{max-height:45vh;overflow:auto}#collectionVideoTitle{overflow-wrap:anywhere;color:#53645b}#collectionNameDialog,#collectionPickerDialog,#deleteCollectionDialog{max-width:calc(100vw - 32px)}@media(max-width:650px){.video-collections{padding:16px}.video-collections-head,.collection-current{align-items:flex-start;flex-direction:column}.collection-chip{font-size:12px}.tile-actions{flex-wrap:wrap}.video-collections-head>button{min-height:44px}.collection-current>div>button{min-height:40px}}
.collection-filters{flex-direction:row;align-items:flex-start;justify-content:flex-start}.collection-filters .collection-chip{width:auto;flex:0 1 auto;white-space:normal}.collection-filters .collection-chip span{float:none;font:inherit;padding:0;background:transparent;color:inherit}.collection-filters .collection-chip .collection-count{font-size:12px;padding:2px 6px;border-radius:8px;background:#18533e0d}.collection-filters .collection-chip[aria-pressed=true] .collection-count{background:#ffffff25}.lesson-tile .tile-actions{flex-wrap:wrap;justify-content:flex-start;gap:8px}.lesson-tile .tile-actions button{white-space:nowrap;padding:10px 12px;min-height:42px}
/* Study workspace is isolated from the video and saved-library layouts. */
.tb-study{width:min(940px,calc(100vw - 28px));max-width:940px;max-height:90vh;padding:28px;color:#18392e;background:#f8faf5;border:1px solid #cddbcf;border-radius:20px;overflow:auto}.tb-study::backdrop{background:#10241fb3}.tb-study .study-close{float:right}.tb-study h2{font-size:28px;margin:12px 0}.tb-study h3{font-size:20px}.tb-study .study-eyebrow{font-size:11px;letter-spacing:2px;color:#45705b}.tb-study p{line-height:1.7}.tb-study .study-title{font-weight:700}.tb-study .study-status{padding:12px;background:#e7efe4;border-radius:10px}.tb-study .study-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.tb-study button{width:auto;white-space:normal;min-height:40px}.tb-study details{border:1px solid #dbe3d7;border-radius:10px;padding:14px;margin:12px 0;background:#fffef9}.tb-study summary{cursor:pointer;font-weight:700;line-height:1.5}.tb-study pre{font:inherit;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin:14px 0}.tb-study label{display:block;margin:12px 0}.tb-study select,.tb-study textarea{display:block;width:100%;margin-top:8px;box-sizing:border-box}.tb-study textarea{font:inherit;line-height:1.6;resize:vertical}.tb-study .study-check{display:flex;align-items:center;gap:10px}.tb-study .study-check input{width:18px;height:18px;margin:0}.tb-study .study-note{font-size:13px;color:#52675c}.tb-study .study-warning{background:#fff0d2;padding:12px;border-radius:10px}.tb-study .study-manager{padding:18px;border:1px solid #a8bca8;border-radius:12px;margin:18px 0}.tb-study .study-empty{padding:30px;text-align:center}.tb-study li{line-height:1.7;margin:8px 0}.tb-study.study-busy button{pointer-events:none;opacity:.65}.tb-study [hidden]{display:none!important}@media(max-width:600px){.tb-study{padding:17px}.tb-study h2{font-size:23px}.tb-study .study-actions button{flex:1 1 44%;font-size:13px}.tb-study .study-manager{padding:12px}}
/* Reading tabs: stay next to the transcript, without opening a modal. */
.learning-card .learning-head{flex:none;min-width:0;gap:8px;padding-bottom:0;margin-bottom:10px}.lesson-tabs{display:flex;flex-wrap:wrap;align-items:stretch;gap:3px;overflow-x:visible;min-width:0;flex:1;scrollbar-width:thin;padding-bottom:5px}.lesson-tabs [role=tab]{flex:none;white-space:nowrap;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;padding:10px 9px;font-size:13px;font-weight:500;color:#5a7064;min-height:43px}.lesson-tabs [role=tab][aria-selected=true]{border-bottom-color:#1b5e4b;color:#174b39;background:#eff6ef;font-weight:700}.lesson-tabs #study-tab-transcript{font-size:18px;padding-left:0;padding-right:12px}#transcriptPanel{display:flex;flex-direction:column;flex:1;min-height:0}#transcriptPanel>.hint{font-size:10px;line-height:1.7;flex:none;margin-top:8px}.inline-study-panel{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:3px 4px 10px 0;scrollbar-width:thin}.inline-study{min-width:0}.inline-study-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 12px}.inline-study-head h2{font-size:22px;margin:0}.inline-study-head button{font-size:11px;padding:7px 10px;white-space:nowrap;background:#f4f7f2;border-color:var(--line)}.inline-study-status,.inline-footnote{font-size:11px;line-height:1.7;color:#647a6c}.inline-study-setup{display:flex;align-items:end;gap:10px;background:#f3f7ef;padding:12px;border-radius:10px;margin:14px 0}.inline-study-setup label{flex:1;margin:0;font-size:12px}.inline-study-setup select{margin-top:5px;font-size:12px;padding:8px}.inline-study-setup button{font-size:12px}.inline-study-card{padding:18px;border:1px solid #dce6df;border-radius:12px;margin:12px 0;background:#fcfdf9}.inline-study-card h3{font-size:19px;line-height:1.6;margin:0 0 10px;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere}.inline-study-card p{font-size:17px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.inline-practice-prompt{font-size:13px;color:#5b7163;line-height:1.7}.inline-warning{padding:12px;background:#fff0d2;border-radius:9px;font-size:13px}.inline-empty{padding:35px 16px;text-align:center;color:#607567}@media(max-width:980px){.inline-study-panel{max-height:65dvh;min-height:430px}.lesson-tabs #study-tab-transcript{font-size:17px}}@media(max-width:700px){.lesson-tabs [role=tab]{font-size:12px;padding-inline:9px}.inline-study-head h2{font-size:20px}.inline-study-card{padding:14px}.inline-study-card p{font-size:16px}.inline-study-setup{align-items:stretch;flex-direction:column}}

/* Landscape videos: separate the image from lesson information and controls.
   Every rule is scoped to landscape; the portrait player remains unchanged. */
.video-card.is-landscape .screen:not(.audio){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;width:100%;aspect-ratio:auto;height:auto;background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.video-card.is-landscape .screen:not(.audio) .video-top{grid-row:1;order:0;position:static;inset:auto;width:100%;margin:0;padding:14px 16px;gap:5px 10px;background:white;border:0;border-bottom:1px solid var(--line);color:var(--dark);pointer-events:auto}
.video-card.is-landscape .screen:not(.audio) #lessonTitle{color:var(--dark);text-shadow:none;font-size:15px;line-height:1.5;text-overflow:ellipsis;min-height:24px}
.video-card.is-landscape .screen:not(.audio) #lessonTitle::placeholder{color:var(--muted)}
.video-card.is-landscape .screen:not(.audio) .video-info{width:auto;flex:1;color:var(--muted);font-size:11px;line-height:1.7;margin:0;align-self:center}
.video-card.is-landscape .screen:not(.audio) .video-top .badge{background:#e8f2eb;border-color:#dce9df;color:#286049;font-size:10px;padding:4px 7px;align-self:center}
.video-card.is-landscape .screen:not(.audio) .video-top a{color:var(--green);font-size:11px;align-self:center}
.video-card.is-landscape .screen:not(.audio) video{grid-row:2;order:1;position:static;inset:auto;display:block;width:100%;height:auto;min-height:0;aspect-ratio:var(--media-ratio);object-fit:contain;background:#102119;z-index:0}
.video-card.is-landscape .screen:not(.audio) .video-bottom{grid-row:3;order:2;position:static;inset:auto;width:100%;padding:14px 16px;background:white;color:var(--dark);pointer-events:auto}
.video-card.is-landscape .screen:not(.audio) .lesson-controls{background:#f3f7f2;border:1px solid #e0e9df;backdrop-filter:none;padding:12px;gap:11px;border-radius:11px}
.video-card.is-landscape .screen:not(.audio) .practice-controls{gap:8px}
.video-card.is-landscape .screen:not(.audio) .practice-controls button{background:white;color:var(--green);border-color:#dce6df;min-height:42px}
.video-card.is-landscape .screen:not(.audio) .practice-controls #playSentence{background:var(--green);color:white;border-color:var(--green);font-size:14px;min-height:42px}
.video-card.is-landscape .screen:not(.audio) .practice-controls>button:first-child,.video-card.is-landscape .screen:not(.audio) .practice-controls>button:nth-child(3){width:36px;font-size:27px}
.video-card.is-landscape .screen:not(.audio) #speed{background:white;color:var(--dark);border-color:#dce6df;width:68px;height:42px;font-size:13px}
.video-card.is-landscape .screen:not(.audio) #clock{color:var(--muted);font-size:12px}
.video-card.is-landscape .screen:not(.audio) .video-actions{justify-content:space-between;gap:9px}
.video-card.is-landscape .screen:not(.audio) .video-actions button{background:white;color:var(--green);border-color:#dce6df;font-size:12px;min-height:34px;padding:6px 9px}
.video-card.is-landscape .screen:not(.audio) #loop[aria-pressed=true]{background:#dceee1;color:#174a32;border-color:#94bea2}
.video-card.is-landscape .screen:not(.audio) .follow-label{color:var(--muted);font-size:11px}
.video-card.is-landscape .screen:not(.audio) #saveLesson{background:white;color:var(--green);border-color:#dce6df}
.video-card.is-landscape .screen:not(.audio) #saveLesson.is-saved{color:#b85975;background:#fff1f5;border-color:#ecc9d3}
@media(min-width:981px){.video-card.is-landscape .screen:not(.audio){height:var(--landscape-height);grid-template-rows:auto minmax(0,1fr) auto}.video-card.is-landscape .screen:not(.audio) video{height:100%;aspect-ratio:auto}.landscape-study .app-rail{height:var(--study-panel-height,calc(100dvh - 32px));max-height:var(--study-panel-height,calc(100dvh - 32px))}}
@media(min-width:981px) and (max-width:1250px){.video-card.is-landscape .screen:not(.audio) .video-top,.video-card.is-landscape .screen:not(.audio) .video-bottom{padding:12px}.video-card.is-landscape .screen:not(.audio) .lesson-controls{padding:9px}.video-card.is-landscape .screen:not(.audio) .practice-controls{gap:5px}.video-card.is-landscape .screen:not(.audio) .practice-controls #playSentence{font-size:13px}.video-card.is-landscape .screen:not(.audio) .follow-label{font-size:10px}}
@media(max-width:700px){.video-card.is-landscape .screen:not(.audio) .video-top,.video-card.is-landscape .screen:not(.audio) .video-bottom{padding:12px}.video-card.is-landscape .screen:not(.audio) .lesson-controls{padding:9px}.video-card.is-landscape .screen:not(.audio) .practice-controls{gap:5px}.video-card.is-landscape .screen:not(.audio) .practice-controls #playSentence{font-size:13px}.video-card.is-landscape .screen:not(.audio) #speed{width:59px}.video-card.is-landscape .screen:not(.audio) .follow-label{font-size:10px}}

.video-card.is-landscape .screen:not(.audio) #loop{background:white;color:var(--green);border-color:#dce6df}.video-card.is-landscape .screen:not(.audio) #loop[aria-pressed=true]{background:#dceee1;color:#174a32;border-color:#94bea2}

/* Desktop landscape utilities stay compact without changing the portrait rail. */
@media(min-width:981px){
 .landscape-study .app-rail .oldtool{display:none}
 .landscape-rail-group{margin:0;padding:0;flex:none;border:1px solid var(--line);border-radius:9px;background:#fbfdf9;min-width:0}
 .landscape-rail-group summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;padding:10px 12px;font-size:13px;font-weight:600;min-height:42px}
 .landscape-rail-group summary::-webkit-details-marker{display:none}
 .landscape-rail-group summary::after{content:'⌄';font-size:16px;color:var(--muted)}
 .landscape-rail-group[open] summary::after{content:'⌃'}
 .landscape-rail-group[open] summary{border-bottom:1px solid var(--line)}
 .landscape-rail-group .rail-transfer button{margin:0}
 .landscape-rail-group .rail-transfer{margin:0 11px;padding:11px 0;border:0}
 .landscape-rail-group .rail-recent{margin:0 11px 11px;padding-top:10px}
 .landscape-rail-group #settingsBtn,.landscape-rail-group form{margin:10px 11px;width:calc(100% - 22px)}
 .landscape-rail-group #settingsBtn,.landscape-rail-group form button{display:block;width:calc(100% - 22px);min-height:39px;text-align:left;font-size:12px}
 .landscape-rail-group form button{width:100%}
}