@layer theme, base, components, utilities;@layer components{.guide-page{--grad-purple: linear-gradient(135deg, #6b43e0 0%, #4f25c8 60%, #3d1aaf 100%);--grad-lavender: linear-gradient(135deg, #eeeafb, #e2dbf6);--grad-lime: linear-gradient(135deg, #d4ff50, #a8e020);--grad-sunset: radial-gradient(120% 120% at 30% 25%, #f2a85c 0%, #e07b2e 60%, #c25e14 100%);--grad-carrot: linear-gradient(135deg, #ffa24b 0%, #f2793a 45%, #d8531f 100%);--lavender-tint: var(--raw-lavender-pale);--danger-deep: var(--raw-danger-deep);--danger: var(--raw-danger);--danger-light: var(--raw-danger-light);--action-bg: var(--color-brand);--action-fg: var(--color-brand-content);--s-1: var(--space-1);--s-2: var(--space-2);--s-3: var(--space-3);--s-4: var(--space-4);--s-6: var(--space-6);--s-8: var(--space-8);--s-10: var(--space-10);--s-12: var(--space-12);--s-16: var(--space-16)}.guide-page [data-surface=dark]{--action-bg: var(--color-cta);--action-fg: var(--color-fg)}.guide-page [data-surface=light]{--action-bg: var(--color-brand);--action-fg: var(--color-brand-content)}}@layer components{:root{--gba-lime-highlight: #eeffbe}.g-before-after .out-plate{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--corner-md);padding:16px;box-shadow:0 6px 18px color-mix(in oklab,var(--raw-purple-deep) 5%,transparent);transition:transform .15s ease,box-shadow .15s ease}.g-before-after .out-plate:hover{transform:translate(4px);box-shadow:0 12px 28px color-mix(in oklab,var(--raw-purple-deep) 10%,transparent)}.g-before-after .out-plate .pic{width:40px;height:40px;border-radius:var(--corner-sm);background:var(--grad-lavender);color:var(--color-brand);flex:none}.g-before-after .out-plate .pic svg{width:21px;height:21px}.g-before-after .out-plate .pic.num{font-family:var(--font-body);font-weight:var(--fw-heavy);font-size:var(--type-subheading);letter-spacing:var(--ls-tight-30);border-radius:var(--corner-md);color:var(--color-fg);background:radial-gradient(125% 125% at 30% 24%,var(--gba-lime-highlight) 0%,var(--color-cta) 52%,var(--color-cta-deep) 100%);box-shadow:0 8px 18px color-mix(in oklab,var(--raw-lime-deep) 50%,transparent),inset 0 2px 4px color-mix(in oklab,var(--raw-white) 70%,transparent),inset 0 -3px 6px color-mix(in oklab,var(--raw-lime-deep) 35%,transparent)}.g-before-after .out-plate h3{font-size:var(--type-body);font-weight:var(--fw-heavy);letter-spacing:var(--ls-tight-10);margin-bottom:3px;line-height:var(--lh-snug)}.g-before-after .out-plate p{font-size:var(--type-body-sm);color:var(--color-muted);line-height:var(--lh-body)}.g-before-after .ba-cap{font-size:var(--type-caption);font-weight:var(--fw-bold);color:var(--color-brand-soft);margin-bottom:12px}.g-before-after .ba-cap svg{width:16px;height:16px}.g-before-after .ba{position:relative;border-radius:var(--corner-lg);overflow:hidden;box-shadow:0 24px 60px color-mix(in oklab,var(--raw-ink) 18%,transparent);-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;border:1px solid var(--color-border-subtle)}.g-before-after .ba-layer{padding:48px 32px 32px;background:var(--color-surface)}.g-before-after .ba-after{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 var(--pos, 50%))}.g-before-after .ba-after .ba-layer{background:linear-gradient(160deg,var(--color-surface),var(--color-surface) 60%);height:100%}.g-before-after .ba-rh b{font-size:var(--type-body-lg);font-weight:var(--fw-heavy);letter-spacing:var(--ls-tight-20);color:var(--color-fg)}.g-before-after .ba-rh span{font-size:var(--type-body-sm);color:var(--color-muted)}.g-before-after .ba-rule{height:1px;background:var(--color-border-subtle);margin:16px 0}.g-before-after .ba-sec{font-size:var(--type-eyebrow);font-weight:var(--fw-heavy);text-transform:uppercase;letter-spacing:var(--ls-wide-80);margin-bottom:12px}.g-before-after .ba-before .ba-sec{color:var(--color-muted-soft)}.g-before-after .ba-after .ba-sec{color:var(--color-cta-deep)}.g-before-after .ba-after .ba-sec,.g-before-after .ba-after .ba-li{margin-left:12px}.g-before-after .ba-li{position:relative;padding:0 0 8px 24px;font-size:var(--type-body-sm);line-height:var(--lh-body);min-height:22px}.g-before-after .ba-li:last-child{padding-bottom:0}.g-before-after .ba-intro{font-size:var(--type-body-sm);font-weight:var(--fw-bold);color:var(--color-fg-soft);margin-bottom:12px}.g-before-after .ba-before .ba-li{color:var(--color-muted)}.g-before-after .ba-before .ba-li:before{content:"";position:absolute;left:2px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--color-muted-soft)}.g-before-after .ba-after .ba-li{color:var(--color-fg-soft);font-weight:var(--fw-medium);padding-bottom:12px}.g-before-after .ba-after .ba-li:before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:var(--corner-xs);background-color:color-mix(in oklab,var(--raw-lime-deep) 20%,transparent);background-repeat:no-repeat;background-position:center;background-size:10px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376990F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>")}.g-before-after .ba-after .ba-li b{color:var(--color-brand);font-weight:var(--fw-heavy)}.g-before-after .ba-after .ba-li .tool{color:var(--color-muted-soft);font-weight:var(--fw-semibold)}.g-before-after .ba-badge{position:absolute;top:18px;z-index:5;font-size:var(--type-eyebrow);font-weight:var(--fw-heavy);text-transform:uppercase;letter-spacing:var(--ls-wide-70);padding:5px 11px;border-radius:var(--corner-pill);transition:opacity .18s ease}.g-before-after .ba-badge.hide{opacity:0;pointer-events:none}.g-before-after .ba-badge.before{left:18px;background:color-mix(in oklab,var(--raw-danger) 14%,transparent);color:var(--danger)}.g-before-after .ba-badge.after{right:18px;z-index:6;background:var(--color-cta);color:var(--color-fg)}.g-before-after .ba-divider{position:absolute;top:0;bottom:0;left:var(--pos, 50%);width:2px;background:var(--color-surface);box-shadow:0 0 0 1px color-mix(in oklab,var(--raw-purple) 12%,transparent),0 0 14px color-mix(in oklab,var(--raw-ink) 18%,transparent);z-index:7;transform:translate(-1px)}.g-before-after .ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--color-surface);box-shadow:0 6px 18px color-mix(in oklab,var(--raw-ink) 28%,transparent);color:var(--color-brand)}.g-before-after .ba-handle svg{width:13px;height:13px}.g-before-after .out-cta{text-align:center;margin-top:40px}.g-before-after .out-cta-panel{position:relative;overflow:hidden;background:var(--grad-purple);border-radius:var(--corner-lg);padding:40px 32px;box-shadow:0 22px 50px color-mix(in oklab,var(--raw-purple-deep) 28%,transparent)}.g-before-after .out-cta-panel:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(80% 120% at 88% 0%,color-mix(in oklab,var(--raw-lime) 22%,transparent),color-mix(in oklab,var(--raw-lime) 0%,transparent) 55%);pointer-events:none}.g-before-after .out-cta-panel p{font-size:var(--type-body-lg);color:var(--color-brand-content);line-height:var(--lh-relaxed);max-width:620px;margin:0;position:relative}.g-before-after .out-cta-panel p b{color:var(--color-cta);font-weight:var(--fw-heavy)}@media (max-width: 640px){.g-before-after .ba-layer{padding:48px 24px 24px}.g-before-after .ba-rh b{font-size:var(--type-body-lg)}.g-before-after .ba-li{font-size:var(--type-body-sm)}}}