:root {
  --theme-switch-button-width: 30px;
  --theme-switch-swatch-width: 18px;
}
.theme-switch{display:flex;gap:9px;align-items:center}.theme-switch button{padding:5px;min-height:30px;width:30px;height:30px;border:1px solid transparent;background:transparent;border-radius:50%;position:relative}.theme-switch button span{display:block;width:var(--theme-switch-swatch-width);height:18px;border-radius:50%;border:1px solid #888;background:#151515}.theme-switch [data-theme-choice=charcoal] span{background:#52575e}.theme-switch [data-theme-choice=ivory] span{background:#ffffff}.theme-switch button[aria-pressed=true]:after{content:'✓';position:absolute;font-size:11px;color:white;text-shadow:0 1px 3px #000}.theme-switch button:hover{background:#8883}
html[data-theme=charcoal]{--page:#202328;--panel:#292d33;--field:#202328;--text:#e0e3e8;--muted:#adb4bf;--edge:#555e69;--accent:#c4d1df;--space:24px;color-scheme:dark}
html[data-theme=ivory]{--page:#f5f5f5;--panel:#ffffff;--field:#f2f2f2;--text:#222222;--muted:#666666;--edge:#d0d0d0;--accent:#292929;--space:30px;color-scheme:light}
html[data-theme]:not([data-theme=original]){background:var(--page);color:var(--text)}
html[data-theme]:not([data-theme=original]) body{color:var(--text)}
html[data-theme]:not([data-theme=original]) :is(.tool-card,.dropzone,.settings-panel,.vavav-section,.panel,.file-row,.new-project-dialog){background:var(--panel);border-color:var(--edge);color:var(--text)}
html[data-theme]:not([data-theme=original]) :is(h1,h2,h3,.brand,.card-copy h3,.heading h1,.workspace-heading h1,.font-name-title,label){color:var(--text)}
html[data-theme]:not([data-theme=original]) :is(.hint,.card-copy>p,.tags,.intro,.subtitle,.hero-support,.statusbar,.panel-footer,.preview-bottom,.privacy-main,.privacy-warning){color:var(--muted)}
html[data-theme]:not([data-theme=original]) :is(button,.button,input,select,textarea){background:var(--field);color:var(--text);border-color:var(--edge);accent-color:var(--accent)}
html[data-theme]:not([data-theme=original]) button:hover:not(:disabled){border-color:var(--accent)}
html[data-theme]:not([data-theme=original]) .theme-switch button{background:transparent;color:var(--text)}

html[data-theme]:not([data-theme=original]) :is(.card-copy,.vavav-section){padding:var(--space)}
html[data-theme]:not([data-theme=original]) :is(.toolbar,.panel-header,.slot-navigation,.preview-tabs,.panel-footer){background:var(--panel);border-color:var(--edge)}
html[data-theme]:not([data-theme=original]) #viewport{background-color:var(--field)}
html[data-theme=ivory] #scene{opacity:.15}
html[data-theme=ivory] .cards{gap:30px}
html[data-theme=ivory] .guide-cell{fill:#eeeeee;stroke:#999999}
html[data-theme=ivory] .guide-cell.active{fill:#e3e3e3;stroke:#292929;stroke-width:2}
html[data-theme=ivory] .guide-line{stroke:#999999}
html[data-theme=ivory] .cell-label{fill:#444444}
html[data-theme]:not([data-theme=original]) .settings{background:transparent}
@media(max-width:600px){.theme-switch{gap:5px}.theme-switch button{width:27px;min-height:27px;height:27px}html[data-theme=ivory]{--space:20px}}
/* Charcoal changes surfaces only; all layout stays shared. */
html[data-theme=charcoal]{--page:#191919;--panel:#222222;--field:#141414;--text:#e7e7e7;--muted:#999999;--edge:#343434;--accent:#dddddd}
html[data-theme=charcoal] :is(.tool-card,.dropzone,.vavav-section,.panel,.file-row,.new-project-dialog){border:1px solid var(--edge);border-radius:8px;background:var(--panel);box-shadow:0 1px 2px #0002}
html[data-theme=charcoal] :is(button,.button){border:1px solid #393939;border-radius:7px!important;background:#292929;color:#eeeeee}
html[data-theme=charcoal] :is(input:not([type=checkbox]):not([type=range]),select,textarea){border:1px solid #333;border-radius:5px!important;background:#141414;color:#ddd}
html[data-theme=charcoal] button:hover:not(:disabled){background:#333;border-color:#555}
html[data-theme=charcoal] :is(.settings h2,.panel-header,.toolbar,.preview-tabs,.panel-footer){border-color:#333}
html[data-theme=charcoal] .theme-switch button{background:transparent;border-radius:50%!important}

/* Opaque neutral surfaces throughout the charcoal theme. */
html[data-theme=charcoal],html[data-theme=charcoal] body{background:#1b1b1b}
html[data-theme=charcoal] #scene{display:none}
html[data-theme=charcoal] #settings,html[data-theme=charcoal] .save-section{background:#222;border:1px solid #343434;border-radius:8px;box-shadow:none}
html[data-theme=charcoal] :is(.dropzone,.vavav-section,.tool-card,.file-row,.new-project-dialog){background:#222;box-shadow:none}
html[data-theme=charcoal] :is(.site-header,footer,.promise,.upload-notice){border-color:#333}
html[data-theme=charcoal] :is(.ad-space,.generation-motion,#viewport,#glyph-preview,#text-preview){background:#141414;background-image:none;border-color:#333;border-radius:6px}
html[data-theme=charcoal] :is(.panel-header,.toolbar,.preview-tabs,.panel-footer,.slot-navigation){background:#202020;border-color:#333}
html[data-theme=charcoal] .file-row.is-selected{background:#2b2b2b;border-color:#555}
html[data-theme=charcoal] :is(.small,.file-info p,.upload-formats,.tool-description,.hint){color:#aaa}
html[data-theme=charcoal] #settings :is(input,select),html[data-theme=charcoal] #format::picker(select){background:#141414;border-color:#363636;color:#ddd}
html[data-theme=charcoal] :is(input[type=checkbox],input[type=range]){accent-color:#eee}
html[data-theme=charcoal] .tool-card{overflow:hidden}
html[data-theme=charcoal] .tool-card:hover{background:#262626;border-color:#505050}
html[data-theme=charcoal] .result-heading{background:#222;border-color:#343434;border-radius:8px 8px 0 0}
html[data-theme=charcoal] #status{background:#222;border-color:#343434;color:#aaa}
html[data-theme=charcoal] #results{background:#222;border-color:#343434;border-radius:0 0 8px 8px;padding-bottom:22px}
html[data-theme=charcoal] #results .file-row{background:#1b1b1b;border-color:#343434;margin-bottom:10px}
html[data-theme=charcoal] #results .file-row:last-child{margin-bottom:0}
html[data-theme=charcoal] #results .file-row.is-selected{background:#2b2b2b;border-color:#555}
/* Compact charcoal controls, shared by the main tools and font editor. */
html[data-theme=charcoal] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure){min-height:34px;padding:7px 12px;border:1px solid #373737;border-radius:7px!important;background:#292929;color:#eee;font-weight:600;box-shadow:inset 0 1px 0 #ffffff03}
html[data-theme=charcoal] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure):hover:not(:disabled){background:#323232;border-color:#494949}
html[data-theme=charcoal] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure):active:not(:disabled){background:#202020}
html[data-theme=charcoal] body button:disabled{opacity:.38}
html[data-theme=charcoal] body input[type=checkbox]{width:14px;height:14px;border:1px solid #454545;border-radius:3px!important;background:#141414;accent-color:#eee}
html[data-theme=charcoal] body input[type=checkbox]:checked{background:#eee;border-color:#eee}
html[data-theme=charcoal] body input[type=range]{height:4px;padding:0;border:1px solid #303030;border-radius:4px!important;background:#111;accent-color:#eee}
html[data-theme=charcoal] body input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#eee;border:1px solid #bbb;border-radius:50%;box-shadow:0 1px 3px #0005}
html[data-theme=charcoal] body input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#eee;border:1px solid #bbb;border-radius:50%;box-shadow:0 1px 3px #0005}
@media(pointer:coarse){html[data-theme=charcoal] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure){min-height:44px}}
/* Keep the charcoal surface identical even when a control is disabled. */
html[data-theme=charcoal] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure){background-color:#282828;border-color:#363636;box-shadow:none}
html[data-theme=charcoal] body button:disabled:not([data-theme-choice]):not(.delete-file):not(.menu-disclosure){opacity:1;background-color:#282828;border-color:#363636;color:#777}
html[data-theme=charcoal] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure):hover:not(:disabled){background-color:#303030;border-color:#454545}
html[data-theme=charcoal] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure):active:not(:disabled){background-color:#242424}
/* Enabled action buttons match the reference's soft graphite surface. */
html[data-theme=charcoal] body button:not(:disabled):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure),html[data-theme=charcoal] body .button{background:#292929;border:1px solid #393939;border-radius:8px!important;color:#fff;font-weight:650;min-height:40px;box-shadow:none}
html[data-theme=charcoal] body button:not(:disabled):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure):hover,html[data-theme=charcoal] body .button:hover{background:#323232;border-color:#494949}
html[data-theme=charcoal] body button:not(:disabled):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure):active,html[data-theme=charcoal] body .button:active{background:#242424;border-color:#444}
@media(pointer:coarse){html[data-theme=charcoal] body button:not(:disabled):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure),html[data-theme=charcoal] body .button{min-height:44px}}
/* Explicit image-tool action colors for charcoal only. */
html[data-theme=charcoal] #image-page :is(.file-button,#clear,#process-selected,#process-all,#save-completed,#zip){background:#292929;border-color:#393939;color:#fff;box-shadow:none}
html[data-theme=charcoal] #image-page :is(#clear,#process-selected,#process-all,#save-completed,#zip):disabled{opacity:1;background:#292929;border-color:#363636;color:#777}
html[data-theme=charcoal] #image-page :is(.file-button,#clear,#process-selected,#process-all,#save-completed,#zip):hover:not(:disabled){background:#323232;border-color:#494949}
html[data-theme=charcoal] #image-page :is(.file-button,#clear,#process-selected,#process-all,#save-completed,#zip):active:not(:disabled){background:#242424}
/* Complete white surfaces, including the original tool's ID-based rules. */
html[data-theme=ivory],html[data-theme=ivory] body{background:#f5f5f5;color:#222222}
html[data-theme=ivory] #scene{display:none}
html[data-theme=ivory] :is(#settings,.save-section,.result-heading,#status,#results,.dropzone,.vavav-section,.panel,.tool-card,.new-project-dialog){background:#ffffff;border-color:#d0d0d0;color:#222222}
html[data-theme=ivory] :is(#settings,.save-section,.dropzone,.vavav-section,.panel,.tool-card,.new-project-dialog){border-radius:0}
html[data-theme=ivory] .result-heading{border-radius:0}
html[data-theme=ivory] #results{border-radius:0;padding-bottom:22px}
html[data-theme=ivory] :is(.file-row,.ad-space){background:#f2f2f2;border-color:#dddddd;color:#666666}
html[data-theme=ivory] .file-row.is-selected{background:#e8e8e8}
html[data-theme=ivory] :is(.privacy-main p,.privacy-main p:last-child,.small,.footnote,.upload-formats,.upload-limits,.file-info p,.hint,.hero-support>p,footer p,footer>span,.preview-bottom,.panel-footer,.statusbar){color:#666666}
html[data-theme=ivory] :is(.site-header,footer,.promise,.upload-notice,.settings h2){border-color:#d0d0d0}
html[data-theme=ivory] :is(.drop-symbol,.promise strong,.hero-index){color:#777777}
html[data-theme=ivory] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure){background:#292929;border:1px solid #292929;border-radius:0!important;color:#ffffff;box-shadow:none}
html[data-theme=ivory] body :is(button,.button):not([data-theme-choice]):not(.delete-file):not(.menu-disclosure):hover:not(:disabled){background:#111111;border-color:#111111}
html[data-theme=ivory] body button:disabled:not([data-theme-choice]):not(.delete-file):not(.menu-disclosure){background:#e7e7e7;border-color:#d3d3d3;color:#777777;opacity:1}
html[data-theme=ivory] body :is(input:not([type=checkbox]):not([type=range]),select,textarea){background:#f2f2f2;color:#222222;border:1px solid #bfbfbf;border-radius:0!important}
html[data-theme=ivory] #format::picker(select){background:#ffffff;border-color:#bfbfbf;color:#222222}
html[data-theme=ivory] #format::picker-icon{color:#555555}
html[data-theme=ivory] #format option:checked,html[data-theme=ivory] #format option:hover{background:#e7e7e7}
html[data-theme=ivory] body ::placeholder{color:#777777;opacity:1}
html[data-theme=ivory] body input[type=checkbox]{background:#ffffff;border-color:#999999;accent-color:#292929}
html[data-theme=ivory] body input[type=checkbox]:checked{background:#292929;border-color:#292929}
html[data-theme=ivory] body input[type=checkbox]:checked:before{border-color:#ffffff}
html[data-theme=ivory] body input[type=range]{background:#d9d9d9;border-color:#bfbfbf;accent-color:#292929}
html[data-theme=ivory] body input[type=range]::-webkit-slider-thumb{background:#292929;border-color:#111111}
html[data-theme=ivory] body input[type=range]::-moz-range-thumb{background:#292929;border-color:#111111}
html[data-theme=ivory] .file-row :is(.delete-file,.file-icon-action){color:#292929!important}
html[data-theme=ivory] :is(.generation-motion,#viewport,#glyph-preview,#text-preview){background:#eeeeee;background-image:none;border-color:#d0d0d0}
html[data-theme=ivory] #vector-preview path{fill:#222222}
html[data-theme=ivory] .generation-motion p{color:#333333}
html[data-theme=ivory] .generation-motion canvas{opacity:.3}
html[data-theme=ivory] :is(.toolbar,.panel-header,.preview-tabs,.slot-navigation,.panel-footer){background:#f2f2f2;border-color:#d0d0d0}
html[data-theme=ivory] #app .quick-action-bar{background:#f2f2f2;border-color:#d0d0d0}
html[data-theme=ivory] #font-split .split-divider{background:#f2f2f2;border-color:#d0d0d0}
html[data-theme=ivory] #font-split .split-divider:after{background:#999999}
html[data-theme=ivory] #font-split .split-divider:hover,html[data-theme=ivory] #font-split .split-divider:focus-visible{background:#e2e2e2}
html[data-theme=ivory] #font-split .split-preview{background:#eeeeee;color:#222222}
html[data-theme=ivory] #font-split .split-tools{background:#f2f2f2;border-color:#d0d0d0}
html[data-theme=ivory] #font-split .split-preview svg path{fill:#222222}
html[data-theme=ivory] #font-split .split-empty{color:#666666}
html[data-theme=ivory] #app #selected-char{color:#222222;background:#f2f2f2;border-color:#999999}
html[data-theme=ivory] #app #font-split .panel-height-handle:after,html[data-theme=ivory] #app #font-split .split-divider:after{background:var(--edge,var(--line))}
html[data-theme=ivory] #app #font-split .panel-height-handle:hover:after,html[data-theme=ivory] #app #font-split .panel-height-handle:focus-visible:after,html[data-theme=ivory] #app #font-split .split-divider:hover:after,html[data-theme=ivory] #app #font-split .split-divider:focus-visible:after{background:var(--edge,var(--line))}
html[data-theme=ivory] :is(.font-name-title,.preview-empty strong,#preview-empty strong){color:#222222}
html[data-theme=ivory] :is(#preview-empty,#preview-empty p,#missing-chars){color:#666666}
html[data-theme=ivory] :focus-visible{outline-color:#292929}

html[data-theme=ivory] .workspace-heading p.tool-description{color:#666666}


/* Theme selection is indicated by the inner check only. */
html body .theme-switch button,html body .theme-switch button:hover:not(:disabled){border-color:transparent!important;box-shadow:none}
html body .theme-switch button[data-theme-choice=ivory][aria-pressed=true]:after{color:#000;text-shadow:none}
@media(pointer:coarse){}
@media(pointer:coarse){}

/* Shared white-theme scrollbars, including embedded font editor surfaces. */
html[data-theme=ivory],html[data-theme=ivory] *{scrollbar-color:#b9b9b9 transparent!important;scrollbar-width:thin}
html[data-theme=ivory]::-webkit-scrollbar,html[data-theme=ivory] *::-webkit-scrollbar{width:6px;height:6px;background:transparent!important}
html[data-theme=ivory]::-webkit-scrollbar-track,html[data-theme=ivory] *::-webkit-scrollbar-track{background:transparent!important}
html[data-theme=ivory]::-webkit-scrollbar-thumb,html[data-theme=ivory] *::-webkit-scrollbar-thumb{background:#b9b9b9!important;border-radius:3px}
html[data-theme=ivory]::-webkit-scrollbar-thumb:hover,html[data-theme=ivory] *::-webkit-scrollbar-thumb:hover{background:#a5a5a5!important}
html[data-theme=ivory]::-webkit-scrollbar-corner,html[data-theme=ivory] *::-webkit-scrollbar-corner{background:transparent!important}


/* Preserve the selected layout indicator above charcoal button styling. */
html[data-theme=charcoal] body .layout-switch button[aria-pressed=true]{box-shadow:inset 0 -2px #eeeeee!important}

/* Square-corner surfaces and controls in the ivory theme. Keep intentional circles. */
html[data-theme=ivory] body :not(.theme-switch):not(.theme-switch *):not(.trace-progress-ring):not(.trace-progress-ring *):not([id$="-cursor"]){border-radius:0!important}
html[data-theme=ivory]::-webkit-scrollbar-thumb,html[data-theme=ivory] *::-webkit-scrollbar-thumb{border-radius:0!important}