:root{color-scheme:dark;--bg:#111815;--surface:#17201b;--text:#eef2e9;--muted:#a2afa4;--line:#304036;--accent:#d5eba6;font:14px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:#223026;color:var(--text);border-radius:9px;padding:9px 12px}button:hover{background:#334536}button:disabled{opacity:.5;cursor:not-allowed}a{color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}header{min-height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:16px 28px}.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:650;color:var(--text);text-decoration:none}.logo{display:grid;place-items:center;background:var(--accent);color:#172014;border-radius:10px;font-size:30px;width:34px;height:34px}.badge{font-size:10px;letter-spacing:1.2px;border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:var(--accent);white-space:nowrap}.header-actions{margin-left:auto;display:flex;gap:10px;align-items:center}.header-actions select{width:auto}.accent,.primary{background:var(--accent);color:#202c17;border-color:var(--accent);font-weight:650}.accent:hover,.primary:hover{background:#e3f6bd}main{max-width:1800px;margin:auto;display:grid;grid-template-columns:340px minmax(0,1fr)}aside{padding:30px 26px;border-right:1px solid var(--line)}h1{font-size:32px;line-height:1.25;letter-spacing:-.8px;font-weight:550;margin:14px 0}h2{font-size:17px;font-weight:550;margin:10px 0}.intro,.hint{color:var(--muted);line-height:1.7}.intro{margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:600;color:var(--muted)}label{display:block;font-size:12px;margin:12px 0 6px}.label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 6px}.label-row label{margin:0}.inline{display:flex;gap:8px}.inline select{flex:1;min-width:0}.inline button{font-size:12px;white-space:nowrap}select,input:not([type=range]):not([type=checkbox]),textarea{width:100%;color:var(--text);background:#1c2820;border:1px solid var(--line);border-radius:8px;padding:10px}textarea{height:220px;resize:vertical;line-height:1.8;margin-top:12px}.meta{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;margin:6px 0 14px}.link{border:0;background:none;color:var(--accent);padding:0}.settings{border-top:1px solid var(--line);margin-top:26px;padding-top:14px}.hint{font-size:11px}.privacy{margin-top:24px}details{font-size:11px;color:var(--muted)}summary{cursor:pointer}input[type=range]{width:100%;accent-color:var(--accent)}output{font-size:11px;color:var(--muted)}.check{display:flex;align-items:center;gap:8px}.studio{position:sticky;top:0;height:calc(100dvh - 77px);min-height:620px;display:flex;flex-direction:column;padding:26px 32px 14px;min-width:0}.studio-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.studio-heading h2{overflow-wrap:anywhere;margin-bottom:0}#reading{position:relative;flex:1;min-height:160px;overflow:auto;border:1px solid var(--line);border-radius:14px 14px 0 0;background:#0e1511;scrollbar-width:thin;scroll-padding-top:100px}#script{padding:100px clamp(20px,5vw,90px) 260px;max-width:1100px;margin:auto;font-size:42px;line-height:1.6}.sentence{display:block;color:#76897b;margin:0 0 .55em;transition:color .2s,background .2s;border-radius:6px;cursor:pointer;overflow-wrap:anywhere;padding:3px 10px;border-inline-start:3px solid transparent}.sentence.current{color:#f0f4e8;background:#d5eba609;border-inline-start-color:var(--accent)}.sentence.past{color:#526257}.sentence:hover{color:var(--text)}.mirrored #script{transform:scaleX(-1)}#empty{text-align:center;padding:70px 20px;color:var(--muted)}[hidden]{display:none!important}.transport{border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;padding:0 20px 14px;background:#0e1511}.progress{height:2px;background:var(--line);margin-bottom:18px}#progress{height:2px;background:var(--accent);width:0;transition:width .2s}.controls{display:flex;align-items:center;gap:8px}.controls select{width:145px;margin-left:auto}.primary{padding:12px 20px;min-width:160px;margin:auto}.status-row{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin-top:12px;min-height:20px}#position{white-space:nowrap}.speech-panel{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:0 16px 12px}.speech-panel .label-row{margin-top:10px}.speech-panel .hint{margin:4px 0 8px}.speech-panel button{font-size:12px}.signal{font-size:11px;color:var(--muted)}#active-language{color:var(--accent);margin-left:6px}.transcript{font-size:11px;color:var(--muted)}.transcript>span{font-size:10px}.transcript p{color:var(--text);margin:4px 0 0;max-height:42px;min-height:21px;overflow:auto;overflow-wrap:anywhere}footer{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:10px;margin-top:12px}#notice{padding:10px 14px;border:1px solid #766547;background:#362f22;color:#f1dbad;font-size:12px;margin-bottom:10px;border-radius:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.pip-tools{display:none}.focus aside{display:none}.focus main{grid-template-columns:1fr}.float-placeholder{padding:80px 30px;color:var(--accent)}.pip .studio{height:100dvh;min-height:0;padding:10px;position:static}.pip .studio-heading,.pip footer,.pip .speech-panel{display:none}.pip .pip-tools{display:flex;gap:6px;align-items:center;margin-bottom:8px;font-size:12px}.pip-tools span{margin-right:auto}.pip-tools button{padding:6px 8px;font-size:11px}.pip #script{padding-inline:20px}.pip .transport{padding-inline:10px}.pip .controls{flex-wrap:wrap}.pip .controls button,.pip .controls select{font-size:11px;padding:7px}.pip .primary{min-width:90px}.pip .controls select{width:110px}.pip .status-row{font-size:10px}.pip #reading{min-height:80px}@media(max-width:1100px){main{grid-template-columns:300px minmax(0,1fr)}.studio{padding:20px 16px}.controls{flex-wrap:wrap}.primary{min-width:120px}.controls select{width:130px}header>.badge{display:none}}@media(max-width:750px){header{padding:12px;gap:8px;flex-wrap:wrap}.header-actions{width:100%;margin:0}.header-actions select{flex:1}.brand{font-size:16px}main{display:flex;flex-direction:column}.studio{position:relative;min-height:680px;height:90dvh;order:0}aside{order:1;border:0;border-top:1px solid var(--line)}aside h1,aside .intro{display:none}#script{font-size:32px;padding-inline:16px}footer span:last-child{display:none}.status-row{flex-wrap:wrap}.focus .studio{height:90dvh}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:750px){.studio{min-height:760px}#reading{min-height:240px}#script{padding-top:48px}}

.studio-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.studio-actions button{font-size:12px;white-space:nowrap}@media(max-width:750px){.studio-actions .badge{display:none}}

.page-intro{max-width:960px;margin:38px auto 24px;padding:0 24px;text-align:center}.page-intro h1{font-size:32px}.page-intro p{color:var(--muted)}body:not(.reading-mode):not(.focus) main{display:block;max-width:960px}body:not(.reading-mode):not(.focus) aside{border:1px solid var(--line);border-radius:16px;margin:24px;padding:26px}body:not(.reading-mode):not(.focus) main>.studio{display:none}.reading-mode aside{display:none}.reading-mode main{display:block}.reading-mode .page-intro,.reading-mode .seo-content,.focus .page-intro,.focus .seo-content{display:none}.reading-mode .studio{position:relative}.script-menu{margin-bottom:14px}summary{padding:10px 0;font-size:13px}#editor{height:320px;font-size:16px}.launch{display:flex;gap:12px;margin-top:24px}.launch button{flex:1;margin:0}#language-search{margin-bottom:8px}.settings>details{margin-top:10px}.seo-content{max-width:900px;padding:40px 24px;margin:auto;line-height:1.8}.seo-content h2{font-size:24px;margin-top:32px}.seo-content h3{font-size:16px}.seo-content p{color:var(--muted)}#back-editor{align-self:flex-start;margin-bottom:12px}#toggle-tools{display:none}.speech-panel>summary{cursor:pointer}.pip #back-editor,.pip .studio-heading,.pip .speech-panel,.pip footer,.pip .progress,.pip .status-row,.pip #reset,.pip #mode{display:none}.pip .studio{padding:0;display:block;position:relative}.pip #reading{height:100dvh;border:0;border-radius:0;min-height:0}.pip #script{padding:8px 6px 80vh;max-width:none}.pip .sentence{padding:0 5px;margin-bottom:.25em}.pip .transport{position:absolute;bottom:8px;left:8px;right:8px;padding:8px;border:1px solid var(--line);background:#17201bee;border-radius:10px;z-index:3}.pip .pip-tools{position:absolute;top:8px;right:75px;z-index:3;background:#17201bee;padding:5px;border-radius:8px}.pip .pip-tools>span{display:none}.pip #toggle-tools{display:block;position:absolute;right:8px;top:8px;z-index:4;font-size:11px;padding:6px;opacity:.65}.pip .tools-hidden .transport,.pip .tools-hidden .pip-tools{opacity:0;visibility:hidden;pointer-events:none}.pip #notice{position:absolute;top:45px;left:8px;right:8px;z-index:5}.pip .controls{justify-content:center}.pip .primary{margin:0;flex:1}.pip .tools-hidden #toggle-tools{opacity:.2}.pip #toggle-tools:focus-visible,.pip #toggle-tools:hover{opacity:1}@media(max-width:750px){.page-intro{margin-top:24px}.page-intro h1{font-size:25px}.launch{flex-direction:column}body:not(.reading-mode):not(.focus) aside{margin:12px;padding:18px}}

#focus{display:none}header .header-actions>a{font-size:12px}dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;width:min(440px,92vw);max-height:85vh;overflow:auto}dialog::backdrop{background:#0009}#close-settings{float:right}.pip .pip-tools{display:none}.pip .show-pip-settings .pip-tools{display:flex}.pip .tools-hidden .pip-tools{display:none}.pip .transport #reader-settings{font-size:11px}.reading-mode .studio-top{display:none}

header #float{display:none}.pip #mode{display:block;width:100px}.pip .transport .controls{flex-wrap:wrap}.pip #return{white-space:nowrap}

.logo{flex:0 0 34px;line-height:1}.logo svg{display:block;width:24px;height:24px}

/* Unified workspace: editing and reading are available together, no entry step. */
body:not(.pip):not(.focus) main{display:grid!important;grid-template-columns:340px minmax(0,1fr);max-width:1800px;margin:auto}
body:not(.pip):not(.focus) main>aside{display:block!important;margin:0!important;border:0!important;border-right:1px solid var(--line)!important;border-radius:0!important;padding:24px!important}
body:not(.pip):not(.focus) main>.studio{display:flex!important}
body:not(.pip) .page-intro{display:block!important;margin:20px auto 18px}
body:not(.pip) .page-intro h1{font-size:26px;margin:8px 0}
body:not(.pip) .page-intro p{margin:8px 0}
body:not(.pip) .seo-content{display:block!important}
#read-page,#back-editor,#float-editor,.launch{display:none!important}
body:not(.pip) .studio{height:calc(100dvh - 90px);position:sticky;top:0;min-height:600px}
#editor{height:340px}.studio-actions #float-stage{display:block}
@media(max-width:850px){body:not(.pip):not(.focus) main{display:flex!important;flex-direction:column}body:not(.pip):not(.focus) main>aside{order:0;border-right:0!important;border-bottom:1px solid var(--line)!important}body:not(.pip) .studio{order:1;position:relative;height:85dvh}#editor{height:200px}}

body:not(.pip) #reader-settings{display:none}.script-menu>summary,#editor-settings>summary{cursor:default;pointer-events:none}.script-menu>summary{list-style:none}

body.page-fullscreen{overflow:hidden}
body.page-fullscreen>header,body.page-fullscreen .page-intro,body.page-fullscreen .seo-content,body.page-fullscreen main>aside{display:none!important}
body.page-fullscreen main{display:block!important}
body.page-fullscreen:not(.pip) main>.studio{display:flex!important;position:fixed!important;inset:0;z-index:20;height:100dvh!important;min-height:0!important;padding:12px 18px;background:var(--bg)}
body.page-fullscreen .studio-heading{margin-bottom:8px}body.page-fullscreen .studio-heading .eyebrow,body.page-fullscreen .studio>footer{display:none}
.pip #page-fullscreen{display:none}
/* Long translations and right-to-left interfaces use the same compact workspace. */
.header-actions,.studio-actions,.controls{flex-wrap:wrap;min-width:0}
#ui-language{max-width:190px}
button{overflow-wrap:anywhere}
#script,.seo-content{text-align:start}
.language-links nav{display:flex;flex-wrap:wrap;gap:8px 14px}
[dir="rtl"] .sentence.current{border-left:0;border-right:3px solid var(--accent)}
[dir="rtl"] .header-actions{margin-left:0;margin-right:auto}
[dir="rtl"] .brand .logo{transform:scaleX(-1)}