/* User display preferences. These styles never filter or recolor media. */
:root { --ui-scale:1; }
:root[data-font=large] { --ui-scale:1.13; }
:root[data-font=larger] { --ui-scale:1.25; }
:root{--accent-ink:#101820;--design-focus:color-mix(in srgb,var(--accent) 70%,var(--text));--design-soft:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.btn,.iconbtn,input,textarea,select,.segment,.nav button{border-radius:var(--radius-sm)}
.modal,.workspace,.story-card,.asset-tile,.suggestion,.project-switch,.design-language-note{border-radius:var(--radius)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 90%,var(--accent-ink));border-color:var(--accent)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:var(--design-focus)}
.nav button.active{background:var(--design-soft);color:var(--text)}
.nav button.active:before{background:var(--accent)}
input[type=range],input[type=radio],input[type=checkbox]{accent-color:var(--accent)}
body { font-size:calc(13px * var(--ui-scale)); }
.nav button,.project-switch strong,.btn,.inspector label,.modal label,.settings-content label,.episode { font-size:calc(13px * var(--ui-scale)); }
input,textarea,select,.inspector input,.inspector textarea,.inspector select,.assistant-compose textarea { font-size:calc(13px * var(--ui-scale)); }
.page-head h1 { font-size:calc(26px * var(--ui-scale)); overflow-wrap:anywhere; }
.page-head p,.viewbar .label,.flowline .flowitem,.script-toolbar,.assistant-tabs button,.suggestion b,.context-pill,.message,.queue-note,.editor-hint,.modal p,.story-card p,.asset-tile p { font-size:calc(12px * var(--ui-scale)); }
.assistant-head,.node .node-body h3,.story-card h3,.asset-tile h3 { font-size:calc(14px * var(--ui-scale)); }
.node .node-body p,.node header,.node footer { font-size:calc(12px * var(--ui-scale)); }
.assistant-content h2 { font-size:calc(23px * var(--ui-scale)); }.assistant-content>p { font-size:calc(12px * var(--ui-scale)); }
.script-paper p { font-size:calc(14px * var(--ui-scale)); }.script-paper h2 { font-size:calc(25px * var(--ui-scale)); }
.suggestion small,.flow-copy small,.project-switch small,.badge,.tag,.shot-mini .mini-info,.shot-mini footer,.preview-badge,.editor-group legend,.skill-caption { font-size:calc(10px * var(--ui-scale)); }
.shot-mini .mini-info strong { font-size:calc(11px * var(--ui-scale)); }.shot-mini .mini-info small { font-size:calc(9px * var(--ui-scale)); }
.page-head .actions .btn { max-width:180px; white-space:normal; line-height:1.5; }.page-head>div:first-child { flex:1; }
.flowline .flowitem { min-width:0; white-space:normal; line-height:1.4; }.flow-copy { min-width:0; }.flow-copy small { line-height:1.5; }
.nav button span { min-width:0; }.welcome-actions { display:flex;align-items:center;gap:8px; }

:root[data-density=compact] .sidebar { padding-top:16px; }
:root[data-density=compact] .page-head { padding-top:16px;padding-bottom:13px; }
:root[data-density=compact] .page-head p { margin-top:3px; }
:root[data-density=compact] .flowline { margin-bottom:10px; }
:root[data-density=compact] .flowline .flowitem { padding-top:6px;padding-bottom:6px; }
:root[data-density=compact] .viewbar { padding-bottom:10px; }
:root[data-density=compact] .workspace { margin-bottom:12px; }
:root[data-density=compact] .scroll-view { padding:18px; }
:root[data-density=compact] .nav button { min-height:38px;padding-top:7px;padding-bottom:7px; }
:root[data-density=compact] .assistant-content { padding:18px 16px; }
:root[data-density=compact] .suggestion { padding:10px 11px; }
:root[data-density=compact] .story-card .card-body { padding:13px; }
:root[data-density=compact] .storyboard-grid,:root[data-density=compact] .asset-grid { gap:12px; }
:root[data-density=compact] .task-row,:root[data-density=compact] .queue-table td { padding-top:10px;padding-bottom:10px; }
:root[data-density=compact] .shot-strip { height:108px;padding-top:9px;padding-bottom:9px; }
:root[data-density=compact] .shot-mini .art { height:64px; }
:root[data-density=compact] .inspector { gap:16px; }
:root[data-density=compact] .editor-group { gap:11px; }

.design-modal { width:min(720px,100%); }
.design-modal .design-intro { margin:0; }
.design-section { border:0;padding:0;margin:0;min-width:0; }
.design-section legend { padding:0;margin-bottom:12px;font-size:calc(13px * var(--ui-scale));font-weight:550; }
.design-theme-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.design-theme-card { position:relative;display:grid!important;gap:10px!important;border:1px solid var(--line);border-radius:11px;padding:10px;cursor:pointer;background:var(--panel); }
.design-theme-card input { position:absolute;top:16px;right:14px;z-index:2;width:15px!important; }
.design-theme-card:has(input:checked) { border-color:var(--accent);box-shadow:0 0 0 1px var(--accent); }
.theme-swatch { position:relative;display:block;width:100%;height:62px;border:1px solid #405766;border-radius:6px;background:#14212b;overflow:hidden; }
.theme-swatch i { position:absolute;left:0;top:0;bottom:0;width:25%;background:#203740;border-right:1px solid #405766; }
.theme-swatch b { position:absolute;left:34%;right:12%;top:14px;height:6px;background:#9fcdbb;border-radius:2px; }
.theme-swatch em { position:absolute;left:34%;right:12%;top:28px;bottom:10px;background:#284c43;border-radius:3px; }
.theme-swatch.light { background:#f4f7f8;border-color:#b5c7ce; }.theme-swatch.light i { background:#e0ebed;border-color:#b5c7ce; }.theme-swatch.light b { background:#4f7d6c; }.theme-swatch.light em { background:#c7dfd5; }
.theme-swatch.system { background:linear-gradient(90deg,#f4f7f8 50%,#14212b 50%); }.theme-swatch.system i { background:#d7e6e9; }.theme-swatch.system em { background:linear-gradient(90deg,#c7dfd5 40%,#284c43 40%); }
.design-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }.design-columns label { display:grid;gap:8px; }
.design-language-note { padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:10px; }
.design-language-note strong { font-size:calc(13px * var(--ui-scale)); }.design-language-note p { margin:8px 0 0;font-size:calc(12px * var(--ui-scale));color:var(--muted); }
.design-status { color:var(--muted);font-size:calc(11px * var(--ui-scale)); }
.design-language-section{container-type:inline-size}
.design-language-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.design-modal .design-language-card{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:64px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;line-height:1.4;text-align:start}
.design-language-card input{position:absolute;width:1px!important;height:1px;opacity:0;inset-inline-start:10px;top:10px}
.design-language-card:has(input:checked){border-color:var(--design-focus);background:var(--design-soft);box-shadow:inset 0 0 0 1px var(--design-focus)}
.design-language-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.design-language-symbol{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.5px;direction:ltr;color:var(--accent)}
.design-language-name{font-size:calc(12px * var(--ui-scale));overflow-wrap:anywhere;line-height:1.55}
.design-language-check{position:absolute;inset-inline-end:8px;top:8px;display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;font-size:10px;color:var(--accent)}
.design-modal .design-language-system{flex-direction:row;align-items:center;min-height:60px;padding-inline-end:34px}
.design-language-system .design-language-symbol{font-size:24px;margin-inline-end:5px}
.design-language-system small{display:block;color:var(--muted);font-size:11px}
.design-translation-note{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.design-translation-note small{display:block;margin-top:5px}
.design-version:empty{display:none}
.design-accent-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.design-modal .design-accent-swatch{position:relative;display:block;width:28px;height:28px;cursor:pointer}
.design-accent-swatch input{position:absolute;width:1px!important;height:1px;opacity:0}
.design-accent-swatch span{display:block;width:28px;height:28px;border-radius:50%;background:var(--swatch);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line)}
.design-accent-swatch:has(input:checked) span{box-shadow:0 0 0 2px var(--design-focus)}
.design-accent-swatch:has(input:focus-visible){outline:2px solid var(--design-focus);outline-offset:4px;border-radius:50%}
.design-modal .design-color-picker{display:flex;flex-direction:row;gap:8px;align-items:center}
.design-color-picker input[type=color]{width:32px;height:30px;padding:2px;cursor:pointer}
.design-modal .design-accent-hex{width:110px;max-width:100%;margin-inline-start:auto}
.design-accent-hex input{width:100%;padding:7px 9px}
.design-color-error{color:var(--red);display:block;margin-top:5px}
.design-color-error:empty{display:none}
.design-slider{display:flex;gap:12px;align-items:center;direction:ltr}
.design-slider input[type=range]{flex:1;min-width:0;width:auto;padding:0;height:26px}
.design-slider output{min-width:52px;font-size:12px;text-align:end;font-variant-numeric:tabular-nums}
.design-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.design-modal input[aria-invalid=true]{border-color:var(--red)}
@container(max-width:560px){.design-language-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container(max-width:410px){.design-language-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container(max-width:290px){.design-language-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* RTL changes interface flow, never the coordinate system or media. */
:root[dir=rtl] .canvas,:root[dir=rtl] .canvas-world,:root[dir=rtl] .timeline,:root[dir=rtl] pre,:root[dir=rtl] code,:root[dir=rtl] input[type=url],:root[dir=rtl] input[type=number]{direction:ltr}
:root[dir=rtl] .nav button,:root[dir=rtl] .project-switch,:root[dir=rtl] .episode,:root[dir=rtl] .modal{text-align:start}
:root[dir=rtl] .topright,:root[dir=rtl] .page-head .actions,:root[dir=rtl] .nav .count,:root[dir=rtl] .episode .dot{margin-left:0;margin-inline-start:auto}
:root[dir=rtl] .sidebar{border-right:0;border-inline-end:1px solid var(--line)}
:root[dir=rtl] .design-theme-card input{right:auto;inset-inline-end:14px}
:root[dir=rtl] textarea{unicode-bidi:plaintext}
.design-modal>footer { position:sticky;bottom:-25px;background:var(--surface);z-index:2;padding-bottom:10px; }

/* Light appearance uses real surface colors; artwork and video keep their pixels. */
:root[data-theme=light] {
 color-scheme:light;--bg:#edf2f5;--surface:#f9fbfc;--panel:#eaf0f4;--raised:#dbe7ed;
 --line:#c4d2da;--border:var(--line);--muted:#536d7c;--text:#203744;
 --accent:#326d53;--soft:#deeee5;--red:#ab3f50;--blue:#356b9d;--gold:#88622d;
 --shadow:0 10px 30px #264c5710;color:var(--text);background:var(--bg);
}
:root[data-theme=light] .brandmark { background:var(--accent);color:#fff; }
:root[data-theme=light] .btn.primary,:root[data-theme=light] .compose-foot .send { background:var(--accent);border-color:var(--accent);color:white; }
:root[data-theme=light] .btn.primary:hover { background:#26583f;border-color:#26583f; }
:root[data-theme=light] .nav button,:root[data-theme=light] .view-name,:root[data-theme=light] .breadcrumb b,:root[data-theme=light] .episode,:root[data-theme=light] .assistant-compose textarea { color:var(--text); }
:root[data-theme=light] .nav button.active,:root[data-theme=light] .flowitem.current { color:#28583f; }
:root[data-theme=light] .flowline .current .tick { color:#fff;background:var(--accent); }
:root[data-theme=light] .flow-copy small,:root[data-theme=light] .preview-badge,:root[data-theme=light] .side-footer p,:root[data-theme=light] .preview-note,:root[data-theme=light] .skill-caption,:root[data-theme=light] .script-toolbar { color:var(--muted); }
:root[data-theme=light] .project-icon,:root[data-theme=light] .assistant-symbol { background:#e0eee5;color:#30634d;border-color:#b1cdbf; }
:root[data-theme=light] .context-pill { background:#e0eee5;color:#30634d;border-color:#b1cdbf; }
:root[data-theme=light] .assistant-compose,:root[data-theme=light] .script-paper,:root[data-theme=light] .settings-content,:root[data-theme=light] .settings-save { background:var(--surface);border-color:var(--line);color:var(--text); }
:root[data-theme=light] .script-paper .dialogue { background:#e4efe9;color:#315c47;border-color:#7fa28d; }
:root[data-theme=light] .script-meta,:root[data-theme=light] .node .node-body p,:root[data-theme=light] .node footer,:root[data-theme=light] .node header,:root[data-theme=light] .asset-tile p,:root[data-theme=light] .queue-note,:root[data-theme=light] .editor-hint { color:var(--muted); }
:root[data-theme=light] .canvas { background-color:#e7eef2;background-image:radial-gradient(#b4c7d0 1px,transparent 1px); }
:root[data-theme=light] .canvas-tip,:root[data-theme=light] .canvas-key { color:#536e7d; }
:root[data-theme=light] .canvas-tools { background:#f8fbfbed;border-color:#a8bec9;color:#315568; }
:root[data-theme=light] .node { background:#f9fbfc;border-color:#a0b9c1; }.node.selected { border-color:var(--accent); }
:root[data-theme=light] .node header .icon { color:#497664; }
:root[data-theme=light] .node .port { background:#f9fbfc;border-color:#598d75; }
:root[data-theme=light] .video-placeholder { background:linear-gradient(135deg,#e2eee7,#dce9ed);color:#496b60; }
:root[data-theme=light] .video-placeholder>small { color:#58786d; }
:root[data-theme=light] .video-placeholder>.icon { color:#386b54;border-color:#97b8a5; }
:root[data-theme=light] .tag { color:#3a6a51;background:#e5f0e9;border-color:#b0caba; }
:root[data-theme=light] .badge { color:#526a7a;background:#e3ebf0;border-color:#bdcdd5; }
:root[data-theme=light] .badge.good { color:#256048;background:#dcefe3;border-color:#a9cfb8; }
:root[data-theme=light] .badge.bad { color:#97384b;background:#f8e1e6;border-color:#dfb5c0; }
:root[data-theme=light] .badge.busy { color:#315f8e;background:#e0ebf8;border-color:#afc8e2; }
:root[data-theme=light] .shot-mini.selected,:root[data-theme=light] .template-item.active,:root[data-theme=light] .style-card.active,:root[data-theme=light] .ref-card:has(input:checked) { background:#e0eee4;border-color:#8eb6a0; }
:root[data-theme=light] .strip-heading strong,:root[data-theme=light] .summary-card strong { color:var(--text); }
:root[data-theme=light] .success-summary { background:#e0eee5;border-color:#b0cdbb; }:root[data-theme=light] .success-summary strong { color:#326d53; }
:root[data-theme=light] .failure-summary { background:#fae8eb;border-color:#dfbec7; }:root[data-theme=light] .failure-summary strong { color:#a34355; }
:root[data-theme=light] .message { background:#e1eee6;border-color:#b7cdbf;color:var(--text); }:root[data-theme=light] .message.user { background:var(--panel);border-color:var(--line); }
:root[data-theme=light] .message strong,:root[data-theme=light] .compose-foot .model-select,:root[data-theme=light] .inspector .ref-card { color:#476f59; }
:root[data-theme=light] .inspector label,:root[data-theme=light] .modal form>label,:root[data-theme=light] .modal .form-row label { color:var(--text); }
:root[data-theme=light] .modal p,:root[data-theme=light] .capability-grid p,:root[data-theme=light] .connection-card p,:root[data-theme=light] .native-skills p,:root[data-theme=light] .architecture span { color:var(--muted); }
:root[data-theme=light] .modal { border-color:#adc2cb;box-shadow:0 24px 90px #142c4140; }
:root[data-theme=light] .modal-backdrop { background:#1e344563; }
:root[data-theme=light] .template-source { background:#edf3f6;color:#314e5e; }
:root[data-theme=light] .queue-note { border-color:var(--line); }
:root[data-theme=light] .btn.primary,:root[data-theme=light] .compose-foot .send{color:var(--accent-ink)}
:root[data-theme=light] .btn.primary:hover{background:color-mix(in srgb,var(--accent) 90%,var(--accent-ink));border-color:var(--accent)}
:root .brandmark,:root .compose-foot .send,:root .flowline .current .tick{background:var(--accent);color:var(--accent-ink)}
:root .flowline .flowitem.current{background:var(--design-soft);color:var(--text)}
:root[data-theme=light] .nav button.active{color:var(--text)}
:root .design-language-card,:root .design-language-note,:root .design-theme-card,:root .style-card{border-radius:var(--radius)}
:root[data-theme=light] .project-welcome { background:radial-gradient(ellipse at 50% 40%,#d7ebe254,transparent 65%),var(--bg); }

@media(max-width:1080px){.page-head h1{font-size:calc(23px * var(--ui-scale))}.flowline .flowitem{font-size:calc(11px * var(--ui-scale))}.flow-copy small{font-size:calc(9px * var(--ui-scale))}}
@media(max-width:800px){.nav button{font-size:calc(9px * var(--ui-scale))}.page-head .actions .btn{max-width:150px}.topright .assistant-trigger>span{display:none}.topright .assistant-trigger{width:34px;height:34px;padding:7px}}
@media(max-width:580px){
 .page-head{align-items:flex-start}.page-head h1{font-size:calc(22px * var(--ui-scale));line-height:1.35}.page-head p{font-size:calc(11px * var(--ui-scale))}
 .page-head .actions{max-width:130px;flex-shrink:1}.page-head .actions .btn{font-size:calc(11px * var(--ui-scale));max-width:130px;white-space:normal}
 .nav button{font-size:calc(9px * var(--ui-scale));line-height:1.2}.nav button span{white-space:normal;max-width:100%;overflow-wrap:anywhere}
 .flowline .flowitem{font-size:calc(9px * var(--ui-scale));padding:7px 3px}.flow-copy{white-space:normal}.flow-copy small{display:none}
 .viewbar .label{font-size:calc(10px * var(--ui-scale))}.viewbar .segment button{font-size:calc(10px * var(--ui-scale));padding:5px 7px}
 .design-theme-options{gap:8px}.design-theme-card{padding:8px}.theme-swatch{height:54px}.design-theme-card input{top:12px;right:10px}
 .design-columns{gap:12px}.design-modal .design-language-note{padding:12px}.design-modal>footer{bottom:-20px}
 :root[data-density=compact] .nav button{min-height:0;padding-top:6px;padding-bottom:6px}
 :root[data-density=compact] .page-head{padding-top:12px;padding-bottom:12px}.topbar{gap:6px}.topright{gap:1px}.brand strong{letter-spacing:1px}
}

/* Keep selected controls readable and shot statuses visible at larger text sizes. */
:root[data-theme=light] .segment button.active { color:var(--text); }
.shot-strip { height:calc(126px * var(--ui-scale)); }
.shot-mini { grid-template-rows:minmax(0,1fr) calc(25px * var(--ui-scale)); }
:root[data-density=compact] .shot-strip { height:calc(108px * var(--ui-scale)); }
@media(max-width:580px){.shot-strip{height:calc(108px * var(--ui-scale))}.shot-mini{grid-template-rows:minmax(0,1fr) calc(23px * var(--ui-scale))}}

.shot-mini { width:calc(162px * var(--ui-scale)); }
.shot-mini footer { white-space:nowrap;gap:5px; }
.tags { display:flex;gap:5px;flex-wrap:wrap; }
@media(max-width:580px){.shot-mini{width:calc(154px * var(--ui-scale))}}

.modal form>label,.modal .form-row label { font-size:calc(13px * var(--ui-scale)); }