html[data-theme="light"]{--surface:#ffffff;--surface-alt:#f5f3ed;--workspace:#eeede9;--dots:#cfcdc5;--ink:#27261f;--muted:#716e63;--border:#ded9cc;--gold-ink:#79581b;--selected:#f1e6ca;--blue:#896521;--shadow:#29271d18}
html[data-theme="dark"]{--surface:#24241f;--surface-alt:#2e2d26;--workspace:#171715;--dots:#36352b;--ink:#f3f0e7;--muted:#bcb6a7;--border:#4a4638;--gold-ink:#e4c581;--selected:#423a26;--blue:#d4b36b;--shadow:#0005}
html[data-theme]{background:var(--workspace);color:var(--ink)}
.theme-picker{display:inline-flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--border);border-radius:24px;background:var(--surface-alt);flex-shrink:0}
.theme-picker button{padding:8px 12px;border-radius:19px;color:var(--muted);font-size:13px;min-height:34px;white-space:nowrap}
.theme-picker button[aria-pressed="true"]{background:#d4b36b;color:#211d13;font-weight:650;box-shadow:0 1px 4px #0001}
.theme-picker button:focus-visible{outline:2px solid #b58a32;outline-offset:2px}
.start-brand .theme-picker{margin-left:auto}.start-brand-label{font-size:10px;letter-spacing:2px;color:var(--muted);margin-left:12px}
html[data-theme] :is(#start-screen,#start-screen::backdrop){background:var(--workspace);color:var(--ink)}
html[data-theme] .start-brand strong,html[data-theme] .start-intro>p{color:var(--gold-ink)}
html[data-theme] :is(.start-intro>div,.start-section-heading>span,.start-note,.start-footer,.start-resume small,.start-resume>div>span,.start-card-copy p){color:var(--muted)}
html[data-theme] :is(.start-resume,.start-card,#start-confirm){background:var(--surface);border-color:var(--border);color:var(--ink)}
html[data-theme] :is(.start-preview,.start-blank .start-preview){background:var(--surface-alt)}
html[data-theme] .start-footer{border-color:var(--border)}html[data-theme] #start-confirm :is(p,.secondary){color:var(--ink)}
html[data-theme] .focus-mode .canvas-viewport{background-color:var(--workspace);background-image:radial-gradient(var(--dots) .7px,transparent .7px)}
html[data-theme] .focus-mode :is(.topbar,.canvas-toolbar,.canvas-footer,.library,.rail,.inspector){background:var(--surface);color:var(--ink);border-color:var(--border);box-shadow:0 4px 22px var(--shadow)}
html[data-theme] .focus-mode .brand,html[data-theme] #menu-peek strong{color:var(--gold-ink)}
html[data-theme] #menu-peek{background:var(--surface);color:var(--gold-ink);border-color:var(--border)}
html[data-theme] .focus-mode .docmeta input{color:var(--ink);background:transparent}
html[data-theme] .focus-mode .docmeta span{color:var(--muted)}
html[data-theme] :is(input,select,textarea){background:var(--surface-alt);color:var(--ink);border-color:var(--border)}
html[data-theme] :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
html[data-theme] :is(.secondary,.control-row button,.page-number,.page-add,.row-editor,.block-card,.template-card,.asset-card,.image-asset,.shape-library button,.text-choice,.export-option,.layer,.visual-source button){background:var(--surface);color:var(--ink);border-color:var(--border)}
html[data-theme] :is(.secondary:hover,.control-row button:hover,.quiet:hover,.iconbtn:hover,.focus-mode .topbar .quiet:hover,.focus-mode .topbar .iconbtn:hover,.shape-library button:hover,.block-card:hover,.template-card:hover,.asset-card:hover){background:var(--surface-alt);border-color:#aa873c}
html[data-theme] :is(.page-number.active,.secondary.selected,.control-row .selected,.layer.selected,.asset-shortcuts .active,.focus-mode .railbtn.active){background:var(--selected);color:var(--gold-ink);border-color:#aa873c}
html[data-theme] :is(.focus-mode .railbtn,.section-title,.panel-eyebrow,.panel-desc,.property-note,.example-label,.asset-results-heading,.asset-empty,.no-content,.dialog-note,.selection-type,.field,.palette-group>span,.color-palette legend,.color-value,.tip-box,.start-brand-label,.canvas-hint){color:var(--muted)}
html[data-theme] :is(.block-icon,.asset-insert,.shape-library button svg,.blank-sheet>span,.start-card-copy strong span){color:var(--gold-ink)}
html[data-theme] .tip-box strong{color:var(--ink)}
html[data-theme] :is(.custom-color,.asset-search,.asset-shortcuts button,.search-suggestions button){background:var(--surface-alt);border-color:var(--border);color:var(--ink)}
html[data-theme] :is(dialog,#quick-editor){background:var(--surface);color:var(--ink);border-color:var(--border)}
html[data-theme] dialog::backdrop{background:#0007}
html[data-theme] :is(.dialog-head h2,.quick-head strong){color:var(--ink)}
html[data-theme] :is(.quick-field,#quick-editor>p,.quick-carousel span){color:var(--muted)}
html[data-theme] :is(.quick-head button,.quick-carousel button,.quick-actions button:first-child){background:var(--surface-alt);color:var(--gold-ink);border-color:var(--border)}
html[data-theme] .primary{background:#d4b36b;color:#191916}html[data-theme] .primary:hover{background:#e3c785}
html[data-theme] .danger{color:#c14a56}html[data-theme="dark"] .danger{color:#ff9ba5}
html[data-theme] .radial-menu>p{background:var(--surface);color:var(--ink);border-color:var(--border)}
html[data-theme] .color-palette .swatch{border-color:var(--surface);box-shadow:0 0 0 1px var(--border)}
html[data-theme] .color-palette .swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold-ink)}
html[data-theme] hr{border-color:var(--border)}
/* The document and miniature pages retain their own colors in both themes. */
html[data-theme] :is(#paper,.blank-sheet){background:#fff;color:#27261f;color-scheme:light}
@media(max-width:760px){.focus-mode .topbar .theme-picker{order:2;margin-left:auto}.theme-picker button{min-height:36px;padding:7px 10px}.start-brand{flex-wrap:wrap;gap:10px}.start-brand-label{display:none}.start-brand .theme-picker{margin-left:auto}}
html[data-theme] .focus-mode .canvas-toolbar{top:var(--editor-menu-height,68px)}
@media(min-width:761px) and (max-width:1100px){.focus-mode .topbar{gap:10px;padding:10px 16px;height:auto;min-height:68px;flex-wrap:wrap}.focus-mode .docmeta{min-width:160px}}
@media(max-width:760px){.focus-mode .topbar .theme-picker{order:3;margin-left:0}.focus-mode .library,.focus-mode .rail,.focus-mode .inspector{top:max(155px,calc(var(--editor-menu-height,100px) + 56px))}}