body{margin:0;background:#faf7f3;color:#242124;font:16px system-ui}main{max-width:1080px;margin:auto;padding:24px}button,input{font:inherit}button{padding:12px;border:1px solid;border-radius:6px;background:white;cursor:pointer}#welcome{padding:16px;border:1px solid #bbb;border-radius:8px}#welcome label{display:inline-block;margin:12px}#host-status{min-height:1.5em}

/* The iframe must size from content, never from a viewport-height feedback loop. */
.mm-sdk [data-mm=modes]{flex-wrap:wrap;overflow:visible}
@media(max-width:480px){main{padding:16px}#preview .mm-sdk .stage{height:min(90vw,480px)}#welcome label{max-width:100%;margin:12px 0}#welcome input[type=file]{display:block;max-width:100%;margin-top:8px}}

[hidden]{display:none!important}
select{font:inherit;padding:10px;max-width:100%;border:1px solid #c9bec2;border-radius:5px;background:white;color:inherit}
.experience-choice{display:flex;align-items:center;gap:12px;margin:20px 0}
.preview-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr);gap:24px;align-items:start}
.preview-layout:has(#host-controls[hidden]){grid-template-columns:minmax(0,1fr)}
.host-product{padding:8px 0 20px;border-bottom:1px solid #ddd3d6;margin-bottom:20px}
.host-product label{display:grid;gap:12px;font-size:.9em}
.host-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.host-swatches button{width:34px;height:34px;padding:0;background:transparent;border:3px solid #faf7f3;border-radius:50%;box-shadow:0 0 0 1px transparent}
.host-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px #650b43}
#selected-shade{font-size:.875em;color:#696069}
@media(max-width:700px){.preview-layout{grid-template-columns:minmax(0,1fr)}main{padding:16px}}

.host-swatches button[data-shade="demo-rose"]{background:#B64C69}
.host-swatches button[data-shade="demo-coral"]{background:#E66E59}
.host-swatches button[data-shade="demo-berry"]{background:#853657}
.host-swatches button[data-shade="demo-brick"]{background:#A74938}
.host-swatches button[data-shade="demo-nude"]{background:#AD7B6A}
.host-swatches button[data-shade="demo-fair"]{background:#E8CBB8}
.host-swatches button[data-shade="demo-light"]{background:#D9AD88}
.host-swatches button[data-shade="demo-medium"]{background:#BA8C69}
.host-swatches button[data-shade="demo-tan"]{background:#A47249}
.host-swatches button[data-shade="demo-deep"]{background:#795033}
.host-swatches button[data-shade="demo-rich"]{background:#54372B}