:root{--ink:#193c34;--muted:#5f6c65;--paper:#f7f8f2;--line:#dce2d8;--green:#204e40;--serif:Georgia,'Times New Roman',serif;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-size:18px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:48px;border:1px solid var(--line);border-radius:9px;padding:13px 20px;font-weight:600;background:#fff;color:var(--ink)}button:disabled{opacity:.5;cursor:not-allowed}button:hover:not(:disabled){filter:brightness(.95)}:focus-visible{outline:3px solid #bd7737;outline-offset:4px}a{color:inherit}.topbar{max-width:1320px;margin:auto;padding:27px 42px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:21px;font-weight:600}.brandmark{background:var(--green);color:#fff;border-radius:10px;padding:6px 10px;font-weight:700;font-size:25px;letter-spacing:-2px}.brand small{display:block;font-size:11px;font-weight:400;letter-spacing:.5px;margin-top:5px;color:var(--muted)}.topnote{font-size:10px;letter-spacing:2px;color:var(--muted)}main{max-width:1320px;margin:auto;padding:0 42px}.view{padding:54px 0 24px}[hidden]{display:none!important}.intro{text-align:center;padding:13px 0 40px}.eyebrow,.step{font-size:11px;letter-spacing:1.7px;font-weight:bold;color:#597565}.intro h1{font-family:var(--serif);font-size:clamp(40px,4.4vw,64px);line-height:1.1;letter-spacing:-2px;font-weight:400;margin:24px 0}.intro em{font-weight:400;color:#657c55}.intro p{line-height:1.65;font-size:17px;color:var(--muted)}.entrygrid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;max-width:1090px;margin:auto}.card{border:1px solid var(--line);border-radius:17px;background:#fff;padding:32px}.teachcard,.warm{background:#eaf0e3}.card h2{font-family:var(--serif);font-size:30px;line-height:1.2;font-weight:400;letter-spacing:-.5px;margin:20px 0 12px}.card p{font-size:16px;line-height:1.65;color:var(--muted)}label{display:block;font-size:14px;font-weight:600;margin:22px 0 10px}.joinrow,.inputrow{display:flex;gap:10px}.joinrow input{min-width:0;flex:1}.joinrow button{white-space:nowrap}.primary{background:var(--green);color:#fff;border-color:var(--green)}.primary span,.secondary span{margin-left:15px}.secondary{background:transparent;border-color:#b5c4b0}.danger{color:#963e32;border-color:#d4b7af}.textbutton{border:0;background:transparent;padding-left:0;padding-right:0;text-decoration:underline;font-size:15px}input,select,textarea{width:100%;padding:14px 15px;border:1px solid #bac6b7;border-radius:8px;background:#fff;color:#243d32;min-height:51px}input::placeholder,textarea::placeholder{color:#758073;font-size:15px}.footnote{display:block;font-size:12px!important;color:var(--muted);line-height:1.6;margin-top:18px}.teachcard .secondary{margin-top:10px}.bottomnotes{display:flex;justify-content:center;gap:50px;margin:37px 0 13px;font-size:12px;color:#5c6f5c}.sitefooter{max-width:1236px;margin:30px auto 0;padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}h1{font-family:var(--serif);font-weight:400;font-size:38px;letter-spacing:-1px;margin:12px 0}.narrow{max-width:500px;margin:auto}.narrow form button{width:100%;margin-top:24px}.pageheading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.pageheading p{color:var(--muted);font-size:16px}.setupgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:25px}.wide{width:100%;margin-top:20px}.routine{padding:0;list-style:none;counter-reset:steps}.routine li{counter-increment:steps;position:relative;padding:5px 0 24px 42px;margin-top:15px}.routine li:before{content:counter(steps);position:absolute;left:0;top:3px;width:27px;height:27px;border:1px solid #a8bba0;border-radius:50%;display:grid;place-items:center;font-size:12px}.routine strong{display:block;font-size:16px}.routine span{display:block;font-size:14px;line-height:1.6;margin-top:7px;color:var(--muted)}.notice{background:#f0f3eb;padding:12px 15px;border-radius:7px;font-size:14px!important;line-height:1.5}.optional{font-weight:400}.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;line-height:1.5}.check input{width:20px;min-height:20px;flex-shrink:0;margin:2px 0}.inputrow select{min-width:0}.inputrow button{white-space:nowrap;padding:10px}.meter{height:12px;background:#e7ece3;border-radius:10px;overflow:hidden;margin-top:18px}.meter>div{background:#477c4b;height:100%;width:0%;transition:width .1s}.broadcastgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:25px}.actions{display:flex;gap:10px}.panelhead{display:flex;justify-content:space-between;align-items:center}.badge{font-size:11px;border:1px solid #bdcbb4;border-radius:30px;padding:6px 10px}.preview{height:270px;overflow:auto;font-family:var(--serif);font-size:27px;line-height:1.5;border-bottom:1px solid var(--line);margin-top:20px}.preview p{font:inherit;color:var(--ink)}.roomcode{font-size:30px;letter-spacing:4px;font-weight:600;padding:12px 0;overflow-wrap:anywhere}#shareLink{font-size:13px}.reader{height:calc(100dvh - 110px);display:flex;flex-direction:column;padding-top:25px}.readerhead{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-bottom:10px}.readerhead h1{font-size:30px}.readerhead p{font-size:14px;color:var(--muted)}.readercontrols{display:flex;gap:8px;flex-wrap:wrap}.readercontrols button{font-size:14px;padding:10px 12px}.captionarea{flex:1;overflow:auto;min-height:200px;border:1px solid var(--line);border-radius:15px;padding:28px 40px;background:white;font-size:var(--caption-size,40px);line-height:1.5;color:#18291f}.captionarea p{margin:0 0 .65em;overflow-wrap:anywhere}.interim{opacity:.6}.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);font:18px/1.6 Arial,sans-serif}.empty>span{font-size:50px;font-weight:bold;border:2px solid #b6c4af;border-radius:15px;line-height:1;padding:10px}.empty h2{font:32px var(--serif);color:var(--ink)}.readerfooter{display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:12px;color:var(--muted);gap:12px}.readerfooter button{font-size:14px}.dark .captionarea{background:#111;color:#fff;border-color:#333}.reader:fullscreen{background:var(--paper);padding:20px 35px}.reader:fullscreen .captionarea{font-size:var(--caption-size,52px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#message{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:min(650px,92vw);width:max-content;background:#203e33;color:white;border-radius:10px;padding:17px 24px;box-shadow:0 8px 30px #0003;z-index:99;font-size:16px;line-height:1.5}
@media(min-width:1500px){.intro{padding-top:40px;padding-bottom:50px}.view{padding-top:65px}}@media(max-width:800px){.topbar{padding:20px}.topnote{display:none}main{padding:0 20px}.view{padding-top:30px}.intro h1{letter-spacing:-1px}.entrygrid,.setupgrid,.broadcastgrid{grid-template-columns:1fr}.bottomnotes{gap:15px;flex-wrap:wrap}.card{padding:25px}.sitefooter{margin:20px;padding:20px 0}.pageheading,.readerhead{align-items:flex-start;flex-direction:column}.pageheading h1{font-size:34px}.reader{height:calc(100dvh - 100px)}.readerhead{gap:0}.readercontrols{margin-bottom:15px}.captionarea{padding:22px;font-size:var(--caption-size,32px)}.readerhead h1{margin:5px 0}.readerhead .eyebrow{display:none}.readerhead p{margin:7px 0 15px}.readerfooter span{max-width:55%}.joinrow{flex-direction:column}.joinrow button{width:100%}.readercontrols button{min-height:44px}.reader:fullscreen{padding:12px}.entrygrid .card h2{font-size:29px}}

.accountrow{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}.accountrow strong,.accountrow small{display:block;overflow-wrap:anywhere}.accountrow small{font-size:14px;color:var(--muted);margin-top:6px}#accountListPanel{margin-top:25px}#resetPasswordForm{max-width:550px;margin-top:30px}

.readerbody{display:flex;flex:1;min-height:0;gap:24px}.readerbody>.captionarea{min-width:0}.presenter-qr{text-align:center;margin-top:22px}.presenter-qr canvas{width:min(100%,230px);height:auto;background:#fff}.qr-placeholder{aspect-ratio:1;max-width:260px;width:100%;margin:0 auto;padding:25px;border:2px dashed #a6b39c;border-radius:12px;background:#f8faf5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;text-align:center}.qr-placeholder strong{font-size:28px}.qr-placeholder span{font-size:17px;line-height:1.4}.classroom-invite{width:320px;flex:0 0 320px;border:1px solid var(--line);background:#edf2e8;border-radius:15px;padding:25px;text-align:center;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.classroom-invite h2{font:36px var(--serif);margin:0 0 5px}.classroom-invite canvas{width:100%;max-width:270px;height:auto;background:#fff}.classroom-invite p{font-size:16px;line-height:1.5;margin:0}.classroom-url{display:block;font-size:15px;overflow-wrap:anywhere;max-width:100%;line-height:1.5}.classroom-code{font-size:28px;letter-spacing:2px;overflow-wrap:anywhere;max-width:100%}.joincode-label{font-size:11px;letter-spacing:2px;margin-top:6px}.classroom-invite .screen-instruction{padding-top:14px;border-top:1px solid #cbd6c3}.classroom.qr-only .readerbody{justify-content:center}.classroom.qr-only .classroom-invite{width:100%;flex:1;max-width:780px;display:grid;grid-template-columns:1fr 1fr;gap:14px 35px;text-align:left;padding:30px}.classroom.qr-only .classroom-invite canvas,.classroom.qr-only .classroom-invite .qr-placeholder{grid-column:1;grid-row:1/8;max-width:350px;justify-self:center}.classroom.qr-only .classroom-invite>*{grid-column:2}.classroom.qr-only .screen-instruction{display:none}.classroom.qr-only .readerfooter{visibility:hidden}.readercontrols #classroomMode{font-size:14px;min-height:48px;padding:8px;width:auto}.classroom:fullscreen .readerhead h1{font-size:30px}.classroom:fullscreen .readerhead{padding-bottom:6px}.classroom:fullscreen .readerfooter{padding:8px 0}.classroom.captions-only .readerbody{gap:0}
@media(max-width:900px){.classroom .readerbody{gap:12px}.classroom-invite{width:240px;flex-basis:240px;padding:18px}.classroom-invite h2{font-size:28px}.classroom-invite .eyebrow{font-size:9px}.classroom-invite p{font-size:14px}.classroom-code{font-size:23px}.classroom .captionarea{padding:20px}}
@media(max-width:600px){.classroom .readerbody{flex-direction:column;overflow:auto}.classroom-invite{width:100%;flex-basis:auto;flex-shrink:0;overflow:visible}.classroom-invite canvas,.classroom-invite .qr-placeholder{max-width:200px}.classroom .captionarea{min-height:45vh;overflow:visible}.classroom.qr-only .classroom-invite{display:flex;text-align:center}.classroom.qr-only .classroom-invite canvas{max-width:240px}.classroom.qr-only .readerbody{justify-content:flex-start}.classroom.qr-only .classroom-invite{flex:0 0 auto}}

.projecting .topbar,.projecting .sitefooter{display:none}.projecting main{max-width:none;padding:0 24px}.projecting .reader{height:100dvh;padding-top:12px}.classroom-invite{justify-content:flex-start;gap:8px;padding:18px}.classroom-invite h2{font-size:28px}.classroom-invite canvas{max-height:30dvh;width:auto;max-width:100%;object-fit:contain}.classroom-invite .qr-placeholder{width:190px;flex-shrink:0}.classroom-invite .screen-instruction{display:none}.classroom.qr-only .classroom-invite canvas{max-height:55dvh;width:100%}.classroom.qr-only .classroom-invite .qr-placeholder{width:100%;max-width:320px}.classroom.qr-only .classroom-invite{align-content:center}.projecting .readerhead{margin-bottom:0}

.readercredit{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.readercredit strong{font-size:14px;color:var(--ink)}@media(max-width:800px){.readercredit{display:block;max-width:65%}.readercredit strong,.readercredit #readerNotice{display:block;max-width:100%}.readercredit #readerNotice{font-size:11px;margin-top:4px}}

.code-settings{max-width:680px;margin-bottom:25px}#codeChangeDialog{border:1px solid var(--line);border-radius:16px;max-width:min(560px,90vw);padding:30px;color:var(--ink);background:var(--paper)}#codeChangeDialog::backdrop{background:#10251db3}#codeChangeDialog h2{font:30px var(--serif);margin:0 0 18px}#codeChangeDialog p{line-height:1.6}#codeChangeDialog .actions{flex-wrap:wrap;margin-top:24px}

img.brandmark{display:block;width:44px;height:44px;padding:0;background:transparent;border-radius:0;flex-shrink:0}.empty>img{display:block;width:76px;height:76px;object-fit:contain}

.brand-art{display:block;position:relative;width:330px;height:64px;overflow:hidden}.brand-art>img{position:absolute;width:378px;height:126px;max-width:none;left:-13px;top:-28px}.topbar{padding-top:15px;padding-bottom:15px}@media(max-width:420px){.brand-art{width:280px;height:55px}.brand-art>img{width:322px;height:107.33px;left:-11px;top:-24px}}

.brand{max-width:100%}.brand-art{width:380px;height:auto;max-width:100%;overflow:visible}.brand-art>img{display:block;position:static;width:100%;height:auto;max-width:100%}.topbar{gap:12px}.topnote{flex-shrink:0}@media(max-width:600px){.brand-art{width:330px}.topnote{display:none}}

/* Keep the phone screen focused on readable captions. */
@media(max-width:800px){
 .reading .topbar{display:none}
 .reading main{padding:0 8px;max-width:none}
 .reading .reader{height:100dvh;padding:8px 0 max(4px,env(safe-area-inset-bottom));min-height:0}
 .reading .readerhead{flex-shrink:0;gap:4px;padding:0 2px 6px}
 .reading .readerhead>div:first-child{width:100%}
 .reading .readerhead h1{font:600 18px/1.2 Arial,sans-serif;letter-spacing:0;margin:0;overflow-wrap:anywhere}
 .reading .readerhead p{font-size:12px;line-height:1.25;margin:3px 0}
 .reading .readercontrols{width:100%;gap:5px;margin:0;flex-wrap:wrap}
 .reading .readercontrols button{font-size:12px;min-height:44px;padding:7px 9px}
 .reading .readerbody{min-height:0;flex:1}
 .reading .captionarea{min-height:0;padding:12px;border-radius:9px;line-height:1.4}
 .reading .readerfooter{flex-shrink:0;padding:4px 2px 0;font-size:10px}
 .reading .readercredit{display:block;max-width:100%}
 .reading .readercredit strong{display:none}
 .reading .readercredit #readerNotice{font-size:10px;margin:0;max-width:100%}
 .reading .empty{font-size:15px;line-height:1.4}
 .reading .empty>img{width:38px;height:38px}
 .reading .empty h2{font-size:24px;margin:12px 0 4px}
 .reading .empty p{margin:4px 0}
}

.meeting-title-form{margin:0 0 24px;max-width:650px}.meeting-title-form label{margin-top:0}.meeting-title-form .inputrow input{min-width:0}.meeting-title-form .footnote{margin-top:8px}

.meeting-title-settings{margin-bottom:12px}.meeting-title-settings summary{cursor:pointer;font-size:14px;padding:6px 0}.meeting-title-settings .meeting-title-form{margin:8px 0 12px}
/* Size desktop workspaces from the viewport, with independent caption scrolling. */
@media(min-width:801px){
 body.reading,body.presenting{height:100dvh;display:flex;flex-direction:column}
 .reading .topbar,.presenting .topbar{width:100%;flex-shrink:0;padding:4px 24px}
 .reading .brand-art,.presenting .brand-art{width:210px}
 .reading main,.presenting main{width:100%;flex:1;min-height:0;margin:0 auto;padding:0 24px}
 .reading .sitefooter,.presenting .sitefooter{display:none}
 .reading .reader{height:100%;min-height:0;padding:10px 0 6px}
 .reading .readerhead{flex-shrink:0;padding-bottom:8px;gap:12px}
 .reading .readerhead .eyebrow{display:none}
 .reading .readerhead h1{font-size:24px;margin:0 0 3px}
 .reading .readerhead p{margin:3px 0;font-size:13px}
 .reading .readerbody{min-height:0}
 .reading .captionarea{min-height:0;padding:18px 24px}
 .reading .readerfooter{flex-shrink:0;padding:6px 0;font-size:11px}
 .reading .empty{height:auto;min-height:100%}
 .reading .reader:fullscreen{height:100dvh;padding:12px 20px}
 .presenting #present{height:100%;min-height:0;display:flex;flex-direction:column;padding:8px 0}
 .presenting .pageheading{flex-shrink:0;margin-bottom:2px;gap:12px}
 .presenting .pageheading .eyebrow{display:none}
 .presenting .pageheading h1{font-size:26px;margin:0 0 3px}
 .presenting .pageheading p{font-size:13px;margin:3px 0}
 .presenting .meeting-title-settings{flex-shrink:0;margin-bottom:6px}
 .presenting .broadcastgrid{flex:1;min-height:0;gap:16px;grid-template-columns:minmax(0,1fr) 340px}
 .presenting .broadcastgrid>.card{min-height:0;padding:16px;overflow:auto}
 .presenting .broadcastgrid>article{display:flex;flex-direction:column}
 .presenting .panelhead{flex-shrink:0}
 .presenting .preview{height:auto;flex:1;min-height:90px;margin-top:10px}
 .presenting #practiceTools{flex-shrink:0}
 .presenting #practiceTools label{margin:8px 0 5px}
 .presenting #manual{min-height:65px;height:65px}
 .presenting #send{margin-top:5px}
 .presenting #liveHint{margin:8px 0 0;padding:8px;font-size:12px!important}
 .presenting .broadcastgrid>aside{display:grid;grid-template-columns:1fr 112px;gap:7px 12px;align-content:start;align-items:center}
 .presenting .broadcastgrid>aside>*{grid-column:1/-1;margin:0}
 .presenting .broadcastgrid>aside>.step,.presenting .broadcastgrid>aside>h2,.presenting .broadcastgrid>aside>p{display:none}
 .presenting #roomCode{grid-column:1;grid-row:1;font-size:32px;padding:5px 0}
 .presenting .presenter-qr{grid-column:2!important;grid-row:1/4;margin:0}
 .presenting .presenter-qr canvas{width:106px;max-width:100%;height:auto;display:block}
 .presenting .presenter-qr .footnote{display:none}
 .presenting label[for=shareLink]{grid-column:1;grid-row:2;margin:0;font-size:12px}
 .presenting #shareLink{grid-column:1;grid-row:3;min-width:0;min-height:40px;padding:8px;font-size:12px}
 .presenting #copyLink,.presenting #projector{margin:0;min-height:44px;padding:9px}
 .presenting label[for=displayChoice]{margin:5px 0 0;font-size:12px}
 .presenting #displayChoice{min-height:44px;padding:8px;font-size:14px}
}

.captionarea:has(>.empty:not([hidden])){display:flex;flex-direction:column}.captionarea>.empty{flex:1;min-height:0;height:auto}.captionarea>.interim:empty{display:none}

@media(min-width:801px){
 .presenting .broadcastgrid{grid-template-columns:minmax(0,1fr) 390px}
 .presenting .broadcastgrid>aside{grid-template-columns:minmax(0,1fr) 170px}
 .presenting .presenter-qr canvas{width:170px;max-width:100%;height:auto}
}

.presenter-qr canvas{background:transparent}

.presenter-code-label{display:block;font-size:12px;font-weight:600;letter-spacing:.4px}.presenter-code .roomcode{padding-top:4px}@media(min-width:801px){.presenting .broadcastgrid>aside>.presenter-code{grid-column:1;grid-row:1}.presenting .presenter-code #roomCode{padding:4px 0 0}}

/* Compact language control fits beside the reader's existing buttons. */

.caption-pair{margin-bottom:1em;padding-bottom:.65em}
.caption-pair p{margin-bottom:.35em}.caption-pair p[lang="es"]{color:#48634d}
.caption-language-label{display:block;font:600 12px/1.5 Arial,sans-serif;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.dark .caption-pair p[lang="es"]{color:#cce4c8}.dark .caption-language-label{color:#b7c6b5}

/* Paired languages share the full classroom width; joining details sit below. */
.classroom:not(.qr-only) .readerbody{flex-direction:column;gap:12px}
.classroom:not(.qr-only) .classroom-invite{width:100%;flex:0 0 auto;max-height:116px;min-height:100px;padding:10px 18px;display:grid;grid-template-columns:84px 1fr auto;grid-template-rows:auto auto;gap:2px 18px;text-align:left;overflow:hidden;align-items:center;justify-content:initial}
.classroom:not(.qr-only) .classroom-invite canvas,.classroom:not(.qr-only) .classroom-invite .qr-placeholder{grid-column:1;grid-row:1/3;width:84px;height:84px;max-width:84px}
.classroom:not(.qr-only) .classroom-invite>.eyebrow{grid-column:2;grid-row:1;align-self:end}
.classroom:not(.qr-only) .classroom-url{grid-column:2;grid-row:2;font-size:14px;align-self:start}
.classroom:not(.qr-only) .classroom-code{grid-column:3;grid-row:1/3;font-size:30px;white-space:nowrap}
.classroom:not(.qr-only) .classroom-code:before{content:'CLASS CODE';display:block;font:600 10px/1.8 Arial,sans-serif;letter-spacing:1.5px}
.classroom:not(.qr-only) .classroom-invite h2,.classroom:not(.qr-only) .classroom-invite .screen-instruction,.classroom:not(.qr-only) .classroom-invite .joincode-label,.classroom:not(.qr-only) #classroomQRNote{display:none}
.caption-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.caption-pair p{min-width:0;margin:0;line-height:1.45}
.caption-pair p[lang="es"]{border-left:1px solid var(--line);padding-left:24px}
@media(max-width:600px){.caption-pair{grid-template-columns:1fr;gap:10px}.caption-pair p[lang="es"]{border-left:0;padding-left:0}.classroom:not(.qr-only) .classroom-invite{grid-template-columns:64px minmax(0,1fr) auto;gap:2px 10px;padding:8px 10px;min-height:80px}.classroom:not(.qr-only) .classroom-invite canvas{width:64px;height:64px}.classroom:not(.qr-only) .classroom-code{font-size:23px}.classroom:not(.qr-only) .classroom-url{font-size:11px}}

.language-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch}
.language-panel{min-width:0;padding:0 22px 16px;border:1px solid var(--line);border-radius:12px;background:#fcfdf9}
.language-panel-heading{position:sticky;top:-28px;z-index:1;margin:0 -22px 20px;padding:14px 22px;font:600 16px/1.4 Arial,sans-serif;letter-spacing:.04em;color:var(--ink);background:#eaf0e3;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.language-panel p{margin:0 0 .65em}
.dark .language-panel{background:#111;border-color:#485346}.dark .language-panel-heading{background:#253629;color:#edf5e9;border-color:#485346}
@media(max-width:600px){.language-panels{grid-template-columns:1fr;gap:18px}.language-panel{padding:0 14px 10px}.language-panel-heading{margin:0 -14px 14px;padding:10px 14px;top:-22px}}

/* Reader language and display choices use the same settings dropdown style. */
.readercontrols #captionLanguage,.readercontrols #classroomMode{width:auto;max-width:100%;min-height:48px;padding:8px 12px;border:1px solid #bac6b7;border-radius:8px;background:#fff;color:#243d32;font-size:14px;font-weight:400;appearance:auto;cursor:pointer}
@media(max-width:800px){.reading .readercontrols #captionLanguage,.reading .readercontrols #classroomMode{min-height:44px;font-size:12px;padding:7px 9px}}

/* In bilingual view the language panels are the caption surfaces. */
.captionarea:has(.language-panels){padding:0;border:0;border-radius:0;background:transparent}
.captionarea:has(.language-panels)>#readerCaptions{min-height:100%;display:flex;flex-direction:column}
.captionarea .language-panels{flex:1;min-height:100%;gap:20px}
.captionarea .language-panel{background:#fff;min-height:100%;padding:0 24px 20px}
.captionarea .language-panel-heading{top:0;margin:0 -24px 20px;padding:14px 24px}
.dark .captionarea:has(.language-panels){background:transparent;border:0}
.dark .captionarea .language-panel{background:#111}
@media(max-width:600px){.captionarea .language-panels{gap:14px}.captionarea .language-panel{padding:0 16px 16px}.captionarea .language-panel-heading{top:0;margin:0 -16px 16px;padding:12px 16px}}

/* Rounded bilingual surfaces and restrained, theme-colored scrollbars. */
.captionarea:has(.language-panels){border-radius:14px}
.captionarea .language-panel{border-radius:14px}
.captionarea .language-panel-heading{border-radius:13px 13px 0 0}
.captionarea{scrollbar-width:thin;scrollbar-color:#82977c #eaf0e3;scrollbar-gutter:stable}
.captionarea::-webkit-scrollbar{width:10px;height:10px}
.captionarea::-webkit-scrollbar-track{background:#eaf0e3;border-radius:10px}
.captionarea::-webkit-scrollbar-thumb{background:#82977c;border:2px solid #eaf0e3;border-radius:10px}
.captionarea::-webkit-scrollbar-thumb:hover{background:#48684e}
.dark .captionarea{scrollbar-color:#81997b #253629}
.dark .captionarea::-webkit-scrollbar-track{background:#253629}
.dark .captionarea::-webkit-scrollbar-thumb{background:#81997b;border-color:#253629}

/* Each panel owns its corner shape; the shared scroller has no surrounding frame. */
.captionarea:has(.language-panels){border-radius:0;scrollbar-gutter:auto}
.captionarea .language-panel{padding:0;border-radius:14px;overflow:clip}
.captionarea .language-panel-heading{margin:0 0 20px;padding:14px 24px;border-radius:0;top:0}
.captionarea .language-panel>div{padding:0 24px 20px}
.captionarea{scrollbar-gutter:auto;scrollbar-width:thin;scrollbar-color:#82977c transparent}
.captionarea::-webkit-scrollbar{width:4px;height:4px}
.captionarea::-webkit-scrollbar-track{background:transparent;border-radius:0}
.captionarea::-webkit-scrollbar-thumb{background:#82977c;border:0;border-radius:4px}
.dark .captionarea{scrollbar-color:#81997b transparent}
.dark .captionarea::-webkit-scrollbar-track{background:transparent}
.dark .captionarea::-webkit-scrollbar-thumb{background:#81997b;border:0}
@media(max-width:600px){.captionarea .language-panel{padding:0}.captionarea .language-panel-heading{margin:0 0 16px;padding:12px 16px}.captionarea .language-panel>div{padding:0 16px 16px}}

/* Keep rounded frames outside the scrolling text, including after auto-follow. */
.captionarea:has(.language-panels){overflow:hidden;display:flex;flex-direction:column}
.captionarea:has(.language-panels)>#readerCaptions{height:100%;min-height:0;flex:1}
.captionarea .language-panels{height:100%;min-height:0;flex:1;grid-template-rows:minmax(0,1fr)}
.captionarea .language-panel{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;border-radius:16px}
.captionarea .language-panel-heading{position:static;flex:0 0 auto;margin:0;padding:14px 24px;border-radius:15px 15px 0 0}
.captionarea .language-panel>div{flex:1;min-height:0;overflow:auto;padding:18px 24px 20px;scrollbar-width:thin;scrollbar-color:#82977c transparent}
.language-panel>div::-webkit-scrollbar{width:4px}.language-panel>div::-webkit-scrollbar-track{background:transparent}.language-panel>div::-webkit-scrollbar-thumb{background:#82977c;border-radius:4px}
.dark .language-panel>div{scrollbar-color:#81997b transparent}
@media(max-width:600px){.captionarea .language-panels{grid-template-rows:repeat(2,minmax(0,1fr))}.captionarea .language-panel-heading{padding:10px 16px}.captionarea .language-panel>div{padding:12px 16px}}

/* Hide native scrollbar arrow buttons on caption surfaces. */
.captionarea::-webkit-scrollbar-button,.language-panel>div::-webkit-scrollbar-button{display:none;width:0;height:0}

/* Keep caption scrolling functional without visible scrollbar chrome. */
.captionarea,.captionarea .language-panel>div,.dark .captionarea,.dark .language-panel>div{scrollbar-width:none;scrollbar-gutter:auto;-ms-overflow-style:none}
.captionarea::-webkit-scrollbar,.language-panel>div::-webkit-scrollbar{display:none;width:0;height:0}

.captionarea .language-panel p{margin-bottom:.45em}