/* Mode and hero controls share the tactile finish of the beauty studio. */
.editor-panel .tryon-modes button,.showcase-people > button[data-showcase]{--mode-ink:#513480;--mode-edge:#cdb5ed;--mode-start:#f5edff;--mode-end:#e6d5ff;--mode-deep:#7041b4;--mode-shadow:#7041b41a;position:relative;isolation:isolate;overflow:hidden;min-width:0;border:1px solid var(--mode-edge);background:linear-gradient(135deg,var(--mode-start),var(--mode-end));color:var(--mode-ink);box-shadow:inset 0 1px 0 #ffffffe6,0 3px 0 var(--mode-shadow),0 5px 13px var(--mode-shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;cursor:pointer}
.editor-panel .tryon-modes button{min-height:60px;border-radius:16px}
.editor-panel .tryon-modes button[data-mode=pet],.showcase-people > button[data-showcase]:is([data-showcase="4"],[data-showcase="5"]){--mode-ink:#784418;--mode-edge:#eac395;--mode-start:#fff3e1;--mode-end:#ffdbb0;--mode-deep:#97551e;--mode-shadow:#97551e18}
.editor-panel .tryon-modes button[data-mode=duo],.showcase-people > button[data-showcase][data-showcase="6"]{--mode-ink:#86314f;--mode-edge:#edb3c9;--mode-start:#fff0f6;--mode-end:#f9cedf;--mode-deep:#ad3c69;--mode-shadow:#ad3c691a}
.editor-panel .tryon-modes button[data-mode=stylist],.showcase-people > button[data-showcase][data-showcase="7"]{--mode-ink:#513091;--mode-edge:#c1a8ef;--mode-start:#ece5ff;--mode-end:#ecd5fa;--mode-deep:#7135ae;--mode-shadow:#7135ae20}
.showcase-people > button[data-showcase]:is([data-showcase="2"],[data-showcase="3"]){--mode-ink:#365f52;--mode-edge:#afd5c7;--mode-start:#effaf2;--mode-end:#cce9dc;--mode-deep:#39725d;--mode-shadow:#39725d18}
.editor-panel .tryon-modes small{color:inherit;opacity:.85;font-weight:500}
.editor-panel .tryon-modes button[aria-pressed=true],.showcase-people > button[data-showcase][aria-pressed=true]{background:linear-gradient(135deg,var(--mode-deep),var(--mode-ink));border-color:var(--mode-deep);color:#fff;box-shadow:inset 0 1px 0 #ffffff60,0 3px 0 var(--mode-shadow),0 7px 16px var(--mode-shadow)}
.editor-panel .tryon-modes button:before,.showcase-people > button[data-showcase]:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff75 48%,transparent 76%);transform:translateX(-150%);transition:transform .65s ease}
.showcase-people{container-type:inline-size;row-gap:9px}
.showcase-people > button[data-showcase]{font-weight:650;min-height:48px;line-height:1.25}
.showcase-people .showcase-avatar{box-shadow:0 0 0 2px #ffffffb3,0 2px 6px #3320501a}
.showcase-people .showcase-avatar-duo{box-shadow:none}
.showcase-people > button[data-showcase][aria-pressed=true] .showcase-ai-icon{background:#ffffff26;color:#fff}
.editor-panel .tryon-modes button:focus-visible,.showcase-people > button[data-showcase]:focus-visible{outline:3px solid var(--mode-deep);outline-offset:3px}
.editor-panel .tryon-modes button:active:not(:disabled),.showcase-people > button[data-showcase]:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff60,0 1px 3px var(--mode-shadow)}
.editor-panel .tryon-modes button:disabled,.showcase-people > button[data-showcase]:disabled{opacity:.6;cursor:wait}
@media(hover:hover) and (pointer:fine){.editor-panel .tryon-modes button:hover:not(:disabled),.showcase-people > button[data-showcase]:hover:not(:disabled){transform:translateY(-2px);border-color:var(--mode-deep);box-shadow:inset 0 1px 0 #ffffffb3,0 5px 0 var(--mode-shadow),0 9px 16px var(--mode-shadow);filter:none}.editor-panel .tryon-modes button:hover:not(:disabled):before,.showcase-people > button[data-showcase]:hover:not(:disabled):before{transform:translateX(150%)}}
@container(max-width:440px){.showcase-people > button[data-showcase]{flex-direction:column;justify-content:center;gap:5px;padding:7px 3px;font-size:10px}.showcase-people .showcase-couple,.showcase-people .showcase-ai{flex-direction:column;justify-content:center;gap:5px;padding:7px 3px;font-size:10px}}
@media(max-width:600px){.showcase-people > button[data-showcase]{flex-direction:row;gap:5px;padding:7px 5px;font-size:10px}.showcase-people .showcase-couple,.showcase-people .showcase-ai{flex-direction:row;gap:7px}.editor-panel .tryon-modes button{min-height:58px}}
@media(prefers-reduced-motion:reduce){.editor-panel .tryon-modes button,.showcase-people > button[data-showcase]{transition:none;transform:none!important}.editor-panel .tryon-modes button:before,.showcase-people > button[data-showcase]:before{display:none;transition:none}}