.ba{aspect-ratio:1/1.05;-webkit-user-select:none;user-select:none;border-radius:20px;position:relative;overflow:hidden;container-type:inline-size}.ba .after{position:absolute;inset:0}.ba .before{clip-path:inset(0 0 0 var(--pos,50%));position:absolute;inset:0}.ba .handle{top:0;bottom:0;left:var(--pos,50%);pointer-events:none;background:#fff;width:2px;position:absolute;transform:translate(-1px);box-shadow:0 0 0 1px #0000001a}.ba .knob{top:50%;left:var(--pos,50%);color:#0b0f1a;pointer-events:none;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:14px;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 8px 24px #00000059}.ba input{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.ba .tag{letter-spacing:.06em;border-radius:8px;padding:.55cqw 1.1cqw;font-size:max(9px,2cqw);font-weight:700;position:absolute;top:2.2cqw}.ba{box-shadow:0 40px 100px #0f172a40}.ba .tag{z-index:3}.ba .tag-b{color:#374151;background:#fff;right:2.5cqw;box-shadow:0 2px 8px #0000001f}.ba .tag-a{color:#fff;background:#111827;left:2.5cqw}.ba .knob{z-index:4;color:#111827;letter-spacing:-.05em;width:8cqw;height:8cqw;font-size:3.2cqw;font-weight:800}.ba .handle{z-index:3;background:#fff;width:3px;box-shadow:0 0 0 1px #00000026,0 0 18px #00000059}.cre-before{background:#fff}.cre-before img{width:78%;height:auto;position:absolute;top:30%;left:11%;transform:rotate(-10deg)}.cre-before .meta{color:#9ca3af;font-family:ui-monospace,monospace;font-size:max(9px,2.2cqw);position:absolute;bottom:2.9cqw;right:3.2cqw}.cre-after{color:#fff;background:linear-gradient(160deg,#0b1220 0%,#0f172a 45%,#052e16 100%);font-family:Inter,system-ui,sans-serif}.cre-after .glow{background:radial-gradient(#22c55e8c 0%,#22c55e00 62%);border-radius:50%;width:110%;height:80%;position:absolute;top:56%;left:50%;transform:translate(-50%,-50%)}.cre-after .stripe{background:linear-gradient(90deg,#a3e63500,#a3e63547 30% 70%,#a3e63500);width:140%;height:14%;position:absolute;top:46%;left:-20%;transform:rotate(-10deg)}.cre-after .dots{background:radial-gradient(circle,#ffffff47 1.3px,#0000 1.8px) 0 0/12px 12px;width:46%;height:46%;position:absolute;top:8%;right:-8%;-webkit-mask-image:radial-gradient(circle,#000 30%,#0000 70%);mask-image:radial-gradient(circle,#000 30%,#0000 70%)}.cre-after .brand{letter-spacing:.28em;color:#a3e635;font-size:max(10px,2.6cqw);font-weight:900;position:absolute;top:10.5cqw;left:5cqw}.cre-after .kicker{letter-spacing:.18em;color:#fff9;font-size:max(8.5px,2.05cqw);font-weight:800;position:absolute;top:15cqw;left:5cqw}.cre-after .h{letter-spacing:-.04em;color:#fff;white-space:nowrap;text-shadow:0 12px 40px #00000080;font-size:10.4cqw;font-weight:900;line-height:1;position:absolute;top:18.8cqw;left:4.6cqw}.cre-after .prod{filter:brightness(1.08)saturate(1.1)drop-shadow(0 40px 36px #0000008c);width:78%;height:auto;position:absolute;top:30%;left:11%;transform:rotate(-10deg)}.cre-after .badge{color:#0b1220;background:#facc15;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:15cqw;height:15cqw;display:flex;position:absolute;top:4cqw;right:4cqw;transform:rotate(10deg);box-shadow:0 14px 34px #facc1559}.cre-after .badge b{letter-spacing:-.03em;font-size:4.3cqw;font-weight:900;line-height:1}.cre-after .badge span{letter-spacing:.14em;text-transform:uppercase;margin-top:.4cqw;font-size:max(7px,1.7cqw);font-weight:800}.cre-after .price{align-items:baseline;gap:2.1cqw;display:flex;position:absolute;bottom:5cqw;left:5cqw}.cre-after .price s{opacity:.6;font-size:max(10px,2.7cqw)}.cre-after .price b{letter-spacing:-.03em;color:#a3e635;font-size:7.5cqw;font-weight:900}.cre-after .pill{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;background:#ffffff1a;border:1px solid #ffffff38;border-radius:999px;padding:1.4cqw 2.5cqw;font-size:max(8.5px,2.15cqw);font-weight:700;position:absolute;bottom:5.4cqw;right:4cqw}
