.config-preview{min-width:0;margin:0;padding:clamp(13px,2vw,23px);background:#211e1b;color:#f7efe4;border:1px solid #48413a;box-shadow:0 13px 32px #241c1622}
.config-preview [hidden]{display:none!important}
.config-preview-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:13px}
.config-preview-header .eyebrow{color:#efa28f;font-size:10px;line-height:1.25;margin:0 0 4px}
.config-preview-header h3{color:inherit;font-size:clamp(23px,3vw,35px);line-height:.96;margin:0}
.config-preview-reset{flex:none;border:1px solid #75675a;padding:8px 10px;color:#fff4e7;background:#302924;font:inherit;font-size:11px;font-weight:700;line-height:1.1;cursor:pointer}
.config-preview-reset:hover{background:#4b3d33}
.config-preview-figure{margin:0}
.config-preview-stage{overflow:hidden;background:#332d27;aspect-ratio:3/2}
.config-preview-stage svg{width:100%;height:100%;display:block}
.config-preview-figure figcaption{margin:8px 0 0;color:#d7c8b8;font-size:11px;line-height:1.4}
.config-preview-colors{padding:0;border:0;margin:14px 0 0;min-width:0}
.config-preview-colors legend{padding:0;font-size:12px;font-weight:700;color:#f7efe4;margin-bottom:8px}
.config-preview-swatches{display:flex;flex-wrap:wrap;gap:7px}
.config-preview-swatches button{display:grid;place-items:center;width:34px;height:34px;padding:3px;border:1px solid #7b7167;background:none;border-radius:50%;cursor:pointer;color:inherit;transition:transform .16s,border-color .16s}
.config-preview-swatches button:hover{transform:translateY(-2px);border-color:#f3dbc3}
.config-preview-swatches button[aria-pressed="true"]{border-color:#ffc8a3;box-shadow:0 0 0 1px #ffc8a3}
.config-preview-swatches button span{display:block;width:100%;height:100%;background:var(--swatch);border-radius:50%;border:1px solid #ffffff36}
.config-preview :focus-visible{outline:2px solid #ffdcb6;outline-offset:3px}
.config-preview-colors p{color:#f4dfc9;font-size:11px;margin:8px 0 0}
.config-preview-detail{border-top:1px solid #615247;display:flex;gap:9px;margin-top:10px;padding-top:9px;align-items:center}
.config-preview-detail img{display:block;width:60px;height:44px;object-fit:cover}
.config-preview-detail strong{display:block;color:#ffcfab;font-size:12px;line-height:1.3}
.config-preview-detail p,.config-preview-status{color:#d7c8b8;font-size:11px;line-height:1.42;margin:4px 0 0}
.config-preview-status{margin-top:10px}
@media(max-width:760px){
 .config-preview{padding:10px 12px}
 .config-preview-header{margin-bottom:8px}
 .config-preview-header .eyebrow{display:none}
 .config-preview-header h3{font-size:22px}
 .config-preview-stage{height:clamp(120px,33vw,170px);aspect-ratio:auto}
 .config-preview-figure figcaption{font-size:10px;margin-top:5px}
 .config-preview-colors{margin-top:8px}
 .config-preview-colors legend{margin-bottom:4px}
 .config-preview-colors p{margin-top:5px}
 .config-preview-swatches{gap:6px}
 .config-preview-swatches button{width:31px;height:31px}
 .config-preview-detail{margin-top:6px;padding-top:5px}
 .config-preview-detail img{display:none}
 .config-preview-detail p,.config-preview-status{font-size:10px}
 .config-preview-status{margin-top:5px}
}
@media(max-height:650px){
 .config-preview-stage{max-height:31vh}
 .config-preview-detail p{display:none}
}
@media(prefers-reduced-motion:reduce){
 .config-preview *, .config-preview *::before, .config-preview *::after{transition:none!important;animation:none!important}
}