.ba{aspect-ratio:1/1.05;-webkit-user-select:none;user-select:none;border-radius:20px;position:relative;overflow:hidden}.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:.3rem .6rem;font-size:11px;font-weight:700;position:absolute;top:12px}.ba{box-shadow:0 40px 100px #0f172a40}.ba .tag{z-index:3}.ba .tag-b{color:#374151;background:#fff;right:14px;box-shadow:0 2px 8px #0000001f}.ba .tag-a{color:#fff;background:#111827;left:14px}.ba .knob{z-index:4;color:#111827;letter-spacing:-.05em;font-size:18px;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:12px;position:absolute;bottom:16px;right:18px}.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:14px;font-weight:900;position:absolute;top:60px;left:28px}.cre-after .kicker{letter-spacing:.18em;color:#fff9;font-size:11px;font-weight:800;position:absolute;top:84px;left:28px}.cre-after .h{letter-spacing:-.04em;color:#fff;text-shadow:0 12px 40px #00000080;font-size:clamp(40px,7.5vw,58px);font-weight:900;line-height:1;position:absolute;top:106px;left:26px}.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:84px;height:84px;display:flex;position:absolute;top:22px;right:22px;transform:rotate(10deg);box-shadow:0 14px 34px #facc1559}.cre-after .badge b{letter-spacing:-.03em;font-size:24px;font-weight:900;line-height:1}.cre-after .badge span{letter-spacing:.14em;text-transform:uppercase;margin-top:2px;font-size:9px;font-weight:800}.cre-after .price{align-items:baseline;gap:12px;display:flex;position:absolute;bottom:28px;left:28px}.cre-after .price s{opacity:.6;font-size:15px}.cre-after .price b{letter-spacing:-.03em;color:#a3e635;font-size:clamp(30px,5vw,42px);font-weight:900}.cre-after .pill{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff1a;border:1px solid #ffffff38;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;position:absolute;bottom:30px;right:22px}