
/* Virtual makeup studio */
.studio{max-width:none;background:linear-gradient(145deg,#fff8f2 0%,#f8e5ec 48%,#eee5f6 100%)}
.studio>.section-label,.studio-grid{max-width:1184px;margin-left:auto;margin-right:auto}
.studio-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.studio-copy h2{font-size:clamp(42px,5vw,68px)}
.studio-copy>p:not(.eyebrow):not(.studio-note){font-size:17px;color:#6f5d64;max-width:540px;margin:25px 0 30px}
.preset-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.preset{border:1px solid rgba(52,40,44,.12);background:rgba(255,255,255,.72);border-radius:16px;padding:13px 14px;display:flex;align-items:center;gap:11px;text-align:left;font-family:var(--sans);color:var(--ink);cursor:pointer;transition:.2s}
.preset:hover{transform:translateY(-2px);background:#fff}
.preset.active{border-color:var(--hot);background:#fff;box-shadow:0 8px 22px rgba(130,70,90,.12)}
.preset strong,.preset small{display:block}.preset strong{font-size:14px}.preset small{color:#8c747c;font-size:11px;margin-top:1px}
.swatch{width:34px;height:34px;border-radius:50%;flex:none;border:3px solid rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(52,40,44,.1)}
.swatch.natural{background:linear-gradient(135deg,#e8a985,#d46f76)}.swatch.rose{background:linear-gradient(135deg,#e789a5,#9f496c)}.swatch.glam{background:linear-gradient(135deg,#79516f,#991f45)}.swatch.peach{background:linear-gradient(135deg,#ffba83,#e86457)}
.intensity{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:24px;font-size:13px;font-weight:700}.intensity output{color:var(--hot)}.intensity input{grid-column:1/-1;width:100%;accent-color:var(--hot)}
.studio-note{font-size:11px;color:#8b737b;margin-top:13px}
.makeup-preview{--makeup-strength:.65;--lip:#b54a60;--blush:#ef8793;--shadow:#b47c78;--liner:#492f38;--glow:#fff0c9;position:relative;max-width:590px;margin:auto;width:100%}
.face-stage{position:relative;overflow:hidden;border-radius:44% 44% 24px 24px;background:#e8d3da;box-shadow:0 30px 80px rgba(93,56,72,.24)}
.face-stage img{aspect-ratio:1;object-fit:cover;filter:saturate(1.04) contrast(1.02);transition:filter .35s}
.makeup-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;transition:opacity .2s}
.makeup-layer .blush{fill:var(--blush);opacity:calc(.28 * var(--makeup-strength))}.makeup-layer .shadow{fill:var(--shadow);opacity:calc(.48 * var(--makeup-strength))}.makeup-layer .liner{fill:var(--liner);opacity:calc(.6 * var(--makeup-strength))}.makeup-layer .lip{fill:var(--lip);opacity:calc(.72 * var(--makeup-strength))}.makeup-layer .highlight{fill:var(--glow);opacity:calc(.25 * var(--makeup-strength));mix-blend-mode:screen}
.makeup-preview[data-preset=rose]{--lip:#a72e5b;--blush:#f0719b;--shadow:#c86f9b;--liner:#573042;--glow:#ffdce9}.makeup-preview[data-preset=rose] .face-stage img{filter:saturate(1.12) brightness(1.02)}
.makeup-preview[data-preset=glam]{--lip:#76152f;--blush:#b84e68;--shadow:#69446f;--liner:#190f1d;--glow:#fff0c7}.makeup-preview[data-preset=glam] .face-stage img{filter:contrast(1.09) saturate(1.08) brightness(.97)}
.makeup-preview[data-preset=peach]{--lip:#cf5e50;--blush:#ff906e;--shadow:#d98962;--liner:#5c372e;--glow:#ffe6a8}.makeup-preview[data-preset=peach] .face-stage img{filter:saturate(1.16) sepia(.06) brightness(1.03)}
.makeup-preview.comparing .makeup-layer{opacity:0}.makeup-preview.comparing .face-stage img{filter:none}
.preview-badge{position:absolute;z-index:4;top:18px;left:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-radius:999px;padding:8px 14px;display:flex;gap:8px;align-items:center;font-size:12px}.preview-badge span{color:var(--hot)}
.before-after{display:flex;align-items:center;justify-content:space-between;padding:15px 4px 0;font-size:12px;font-weight:700}.before-after>span{color:#806a72}.before-after button{border:1px solid var(--ink);background:transparent;border-radius:999px;padding:7px 13px;font:700 11px var(--sans);cursor:pointer}.before-after button:active{background:var(--ink);color:#fff}
@media(max-width:900px){.studio-grid{grid-template-columns:1fr;gap:45px}.studio-copy{text-align:center}.studio-copy>p:not(.eyebrow):not(.studio-note){margin-left:auto;margin-right:auto}.preset-list{max-width:600px;margin:auto}.intensity{max-width:600px;margin-left:auto;margin-right:auto}.makeup-preview{max-width:560px}}
@media(max-width:500px){.preset-list{grid-template-columns:1fr}.makeup-preview{max-width:100%}.face-stage{border-radius:36% 36% 20px 20px}}
