.s-designer-hero-dev{width:150px}.s-designer-hero .seg button{flex:1}.s-designer-hero-panel{gap:15px}.s-designer-hero .demo-label{margin-bottom:7px}.s-designer-hero-rad{justify-content:space-between;margin-bottom:6px;display:flex}.s-designer-hero-rad code{text-transform:none;color:#6b6d78}.s-designer-hero input[type=range]{accent-color:#2f3ae5;width:100%}.s-designer-hero-togs{flex-direction:column;gap:10px;display:flex}.s-designer-hero-togs>div{color:#2c2d33;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;display:flex}.s-designer-hero-stage{justify-content:center;align-items:center}.s-designer-hero-page{background:#fff;border:1px solid #e6e6ea;border-radius:12px;width:100%;max-width:100%;height:420px;transition:width .4s cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden}.s-designer-hero-page.mobile{width:300px}.s-designer-hero-skel{flex-direction:column;gap:9px;display:flex;position:absolute;top:18px;left:20px;right:20px}.s-designer-hero-skel>div{align-items:center;gap:10px;display:flex}.s-designer-hero-skel>div i{background:#eeeff3;border-radius:4px;width:38px;height:8px}.s-designer-hero-skel>div i:first-child{background:#e7e8ee;border-radius:5px;width:64px;height:10px}.s-designer-hero-skel>div span{flex:1}.s-designer-hero-skel b{background:linear-gradient(135deg,#eef0fb,#f5f2fd);border-radius:12px;height:96px;margin-top:6px}.s-designer-hero-skel>i{background:#e7e8ee;border-radius:5px;width:60%;height:10px}.s-designer-hero-skel>i:nth-of-type(2){background:#f0f1f5;border-radius:4px;width:86%;height:8px}.s-designer-hero-skel>i:nth-of-type(3){background:#f0f1f5;border-radius:4px;width:72%;height:8px}.s-designer-hero-overlay{pointer-events:none;opacity:0;background:#0f101e52;transition:opacity .35s;position:absolute;inset:0}.s-designer-hero-page.modal .s-designer-hero-overlay{opacity:1}.s-designer-hero-banner{z-index:2;transition:all .4s cubic-bezier(.2,.7,.2,1);position:absolute;box-shadow:0 20px 44px -18px #0006}.s-designer-hero-banner.bar{border-radius:var(--r) var(--r) 0 0;border:none;border-top:1px solid #e6e8f0;padding:16px 18px;bottom:0;left:0;right:0}.s-designer-hero-banner.bar.dark{border-top-color:#2a2c40}.s-designer-hero-banner.card{border-radius:var(--r);width:min(300px,100% - 28px);padding:16px;bottom:14px;right:14px}.s-designer-hero-banner.modal{border-radius:var(--r);width:min(340px,100% - 28px);padding:20px;top:50%;left:50%;transform:translate(-50%,-50%)}.s-designer-hero-banner .look-title{font-size:14.5px}.s-designer-hero-inner{flex-direction:column;gap:12px;display:flex}.s-designer-hero-copy{min-width:0}.s-designer-hero-btns{gap:6px;width:100%;display:flex}.s-designer-hero-page.desktop .s-designer-hero-banner.bar .s-designer-hero-inner{flex-flow:wrap;align-items:center;gap:12px 18px}.s-designer-hero-page.desktop .s-designer-hero-banner.bar .s-designer-hero-copy{flex:220px}.s-designer-hero-page.desktop .s-designer-hero-banner.bar .s-designer-hero-btns{flex:0 auto;width:auto;min-width:300px}.s-designer-hero-logo{letter-spacing:.4px;text-transform:uppercase;color:#8a8ea8;border:1.5px dashed #b9bdd6;border-radius:6px;align-items:center;height:24px;margin-bottom:9px;padding:0 9px;font-size:9.5px;font-weight:700;display:inline-flex}.dark .s-designer-hero-logo{color:#9496ab;border-color:#4a4c60}