#generator-preferences{max-width:1540px;margin:0 auto;padding:0 clamp(18px,5vw,72px) 12px}
.box-preference-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.box-preference-actions button,.box-preference-actions label{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#34373c;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:500 13px system-ui}
.box-preference-actions button{cursor:pointer}.box-preference-actions select{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:2px}
.box-preference-actions button:focus-visible,.box-panel-resizer:focus-visible{outline:3px solid #f5a15b;outline-offset:2px}
@media(min-width:901px){
 .generator-workspace>.preview-column{display:contents}
 .generator-workspace .preview-panel{grid-column:2;grid-row:2;position:sticky;top:16px;align-self:start}
 .generator-workspace .faq-section{grid-column:1/-1;grid-row:3}
}
html[data-theme=dark]{--ink:#ebedf0;--muted:#a7aeba;--line:#3a414c;--paper:#171b22;background:#171b22;color:#ebedf0}
html[data-theme=dark] body,html[data-theme=dark] .generator-page{background:#171b22;color:#ebedf0}
html[data-theme=dark] :is(.generator-header,.control-panel,.preview-panel,.faq-panel,.box-type-card,.box-category-selector,.share-generator,.generator-link-card,.box-preference-actions button,.box-preference-actions label){background:#222832;color:#ebedf0;border-color:#3a414c}
html[data-theme=dark] :is(.site-header,.site-nav,.header-search){background:#222832;color:#ebedf0;border-color:#3a414c}
html[data-theme=dark] :is(.control-panel input,.control-panel select,.control-panel textarea,.header-search input){background:#191f28;color:#f0f2f5;border-color:#495361}
html[data-theme=dark] :is(.box-type-options button,.material-options button,.closure-options button,.preview-tabs,.preview-tabs button,.segmented,.segmented button,.drawing-stage,.box-preview-3d,.config-help-popover,.custom-divider-settings){background:#252d38;color:#e8edf3;border-color:#46505e}
html[data-theme=dark] :is(.box-type-options button.active,.material-options button.active,.closure-options button.active,.segmented button.active){background:#483123;border-color:#df843d;color:#fff;box-shadow:none}
html[data-theme=dark] :is(.divider-settings,.preview-note,.stage-note,.box-preview-note){background:#282e38;color:#c6ced8;border-color:#46505e}
html[data-theme=dark] :is(h1,h2,h3,strong,.faq-list summary,.box-type-options strong){color:#f1f3f5}
html[data-theme=dark] :is(p,.box-type-options small,.faq-heading span,.material-options button,.generator-intro,.config-help-popover p){color:#bdc5cf}
html[data-theme=dark] a{color:#d1d8e0}html[data-theme=dark] .category-sample{filter:brightness(.85)}
html[data-theme=dark] :is(.config-help-button,.box-category-selector .config-help-button){color:#aeb8c7;background:transparent}
html[data-theme=dark] .wine-isometric{background:#252d38;border-radius:10px}
html[data-theme=dark] .wine-isometric p{color:#c1c8d1!important}
html[data-theme=dark] .config-help-popover{background:#252d38;color:#ebedf0;border-color:#46505e}
html[data-theme=dark] .box-panel-resizer>span{background:#657080}
html[data-theme=dark] .box-preference-actions select option{background:#222832;color:#ebedf0}
@media(max-width:600px){.box-preference-actions{justify-content:flex-start}.box-preference-actions button,.box-preference-actions label{min-height:38px}}
html[data-theme=dark] .faq-section{background:#222832;color:#ebedf0;border-color:#3a414c}
html[data-theme=dark] .view-tabs{background:#191f28}
html[data-theme=dark] .view-tabs button{background:transparent;color:#bfc8d5}
html[data-theme=dark] .view-tabs button.active{background:#424d5d;color:#fff;box-shadow:none}
html[data-theme=dark] :is(.generator-nav a,.header-account,.generator-search){color:#d7dfe8}
html[data-theme=dark] .preview-notice{background:#282e38;color:#c6ced8}
html[data-theme=dark] .preview-help{background:#282e38;color:#c6ced8;border-color:#46505e}
html[data-theme=dark] .preview-help :is(p,strong){color:#c6ced8}

/* Logo con el mismo tratamiento del encabezado de esferas. */
html[data-theme=dark] .generator-brand img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
@media(min-width:901px){.generator-header .generator-nav{margin-left:auto}}