/* UI surfaces only: canvas pixels, uploaded artwork and skin exports are untouched. */
html[data-appearance=dark]{color-scheme:dark;--bg:#19171c;--paper:#232027;--ink:#f0e8ed;--muted:#b4a5b1;--line:#40353e;--green:#df9fbd;--light:#3e2c38;--pink:#3e2c38;--accent:#c981a3;--accent-soft:#49303f;--accent-text:#f4c5dc;scrollbar-color:#65505f transparent}
html[data-appearance=dark] body{background:var(--bg);color:var(--ink)}
html[data-appearance=dark] :is(header,aside,dialog){background:#232027;color:var(--ink);border-color:var(--line)}
html[data-appearance=dark] :is(button,input,select,textarea){background:#2e2831;color:var(--ink);border-color:#51414d;box-shadow:none}
html[data-appearance=dark] button:hover{background:#44313f;border-color:#a36d88}
html[data-appearance=dark] button.primary{background:#ad6588;border-color:#ad6588;color:#fff}
html[data-appearance=dark] :is(button.active,.tabs button.active,.library-tabs button.active,.choice-grid button.active,.sound-card.active,.font-card.active,.layer-item.active){background:var(--accent-soft);border-color:#a36d88;color:var(--accent-text)}
html[data-appearance=dark] :is(button.ghost,.tabs button,.canvas-toolbar>button,.library-tabs button){color:#d6b5c7;background:transparent}
html[data-appearance=dark] :is(.brand-symbol,.upload-small,.layer-badge,.sound-card .play-sound,.step b,dialog .badge){background:#49303f;border-color:#684355;color:#f0b8d3;box-shadow:none}
html[data-appearance=dark] :is(.stage,#assetDrop,.layer-editor,.notice,.empty-message){background:#30232e;border-color:#573b4e;box-shadow:none}
html[data-appearance=dark] #assetDrop.dragover{background:#49303f;border-color:#df9fbd}
html[data-appearance=dark] .editor .tabs{background:#232027f5;border-color:var(--line)}
html[data-appearance=dark] .mode-switch{background:#38303b}
html[data-appearance=dark] .mode-switch button.active{background:#594050;color:#ffe4f2}
html[data-appearance=dark] :is(.layer-item,.sound-card,.font-card){background:#29232d;border-color:#51414d}
html[data-appearance=dark] .asset-card{background:repeating-conic-gradient(#3c333e 0% 25%,#29232e 0% 50%) 0/12px 12px}
html[data-appearance=dark] :is(.layer-select img,.layer-select .text-icon){background:#493b47}
html[data-appearance=dark] :is(.library,.tabs,footer,.section-label,.modal-image,.layer-empty){border-color:var(--line)}
html[data-appearance=dark] :is(.control label,.field-label,.check-row,.section-label,.asset-info b,.font-card b,.sound-name b){color:#e4cbd9}
html[data-appearance=dark] :is(.hint,.control .hint,.control label span,.control .row>span,.scope-heading p,.stage-top,.stage-top>span:last-child,.stage-bottom,.guide-strip,.device-note,.brand small,.project span,.library-toolbar>span,#emptyLibrary,#emptyLibrary small,.asset-notice,.asset-card small,.asset-utilities button,.layer-empty,.layer-editor>h3,.font-card small,.font-type,.sound-name small,.notice,.empty-message,footer,dialog p,dialog li){color:#c3a8ba}
html[data-appearance=dark] .project input:hover{background:#38303b;border-color:#684355}
html[data-appearance=dark] input[type=range]{background:transparent}
html[data-appearance=dark] dialog::backdrop{background:#0a070cb3}
html[data-appearance=dark] .progress{background:#49303f}
html[data-appearance=dark] .source-list a{color:#f2b2d0}
#appearanceBtn{white-space:nowrap}
@media(max-width:360px){nav #appearanceBtn{flex:1.1}}