.style-switcher{display:flex;justify-content:center;align-items:center;padding:2rem;min-height:100vh;background-color:#f5f5f5}.style-switcher--compact{padding:0;min-height:auto;background-color:transparent;display:block}.style-switcher__frame{position:relative;width:100%;max-width:800px;aspect-ratio:16/9;border-radius:28px;overflow:hidden;display:flex;box-shadow:0 4px 20px rgba(0,0,0,.1);cursor:pointer}.style-switcher--compact .style-switcher__frame{max-width:100%;border-radius:20px;box-shadow:0 2px 10px rgba(0,0,0,.08)}.style-switcher__half{position:relative;flex:1;overflow:hidden}.style-switcher__half--selected{z-index:1}.style-switcher__image{object-fit:cover;transition:filter .5s cubic-bezier(.4,0,.2,1)}.style-switcher__image--grayscale{filter:grayscale(100%)}.style-switcher__separator{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);z-index:2;pointer-events:none}.style-switcher__separator:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:rgba(0,0,0,.3)}.style-switcher__separator:after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background-color:rgba(255,255,255,.3)}.style-switcher__overlay{position:absolute;bottom:0;left:0;right:0;padding:24px 28px;display:flex;align-items:center;gap:12px;background:linear-gradient(0deg,rgba(0,0,0,.6) 0,rgba(0,0,0,.4) 50%,transparent);transition:background .5s cubic-bezier(.4,0,.2,1)}.style-switcher__half--left .style-switcher__overlay{border-bottom-left-radius:28px}.style-switcher__half--right .style-switcher__overlay{border-bottom-right-radius:28px}.style-switcher__overlay--selected{background:linear-gradient(0deg,rgba(59,130,246,.6) 0,rgba(59,130,246,.45) 50%,transparent)}.style-switcher__checkmark{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;transition:background-color .5s cubic-bezier(.4,0,.2,1),border .5s cubic-bezier(.4,0,.2,1),box-shadow .5s cubic-bezier(.4,0,.2,1)}.style-switcher__checkmark svg{transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.style-switcher__checkmark--selected{background-color:rgba(59,130,246,.9);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px rgba(0,0,0,.2)}.style-switcher__checkmark:not(.style-switcher__checkmark--selected){background-color:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2)}.style-switcher__label{color:white;font-size:20px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.3);user-select:none}.style-switcher--compact .style-switcher__label{font-size:16px}.style-switcher--compact .style-switcher__checkmark{width:36px;height:36px;border-radius:10px}.style-switcher--compact .style-switcher__overlay{padding:16px 20px}.style-switcher--compact .style-switcher__half--left .style-switcher__overlay{border-bottom-left-radius:20px}.style-switcher--compact .style-switcher__half--right .style-switcher__overlay{border-bottom-right-radius:20px}@media (max-width:768px){.style-switcher__frame{border-radius:20px}.style-switcher__half--left .style-switcher__overlay{border-bottom-left-radius:20px}.style-switcher__half--right .style-switcher__overlay{border-bottom-right-radius:20px}.style-switcher__overlay{padding:20px 24px;gap:10px}.style-switcher__checkmark{width:36px;height:36px;border-radius:10px}.style-switcher__label{font-size:18px}.style-switcher--compact .style-switcher__label{font-size:14px}}