@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{.g-pains .head p.sub{color:var(--lavender-tint)}.g-pains .pain-item{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--corner-lg);padding:24px;box-shadow:0 12px 30px color-mix(in oklab,var(--raw-ink) 30%,transparent)}.g-pains .pain-x{width:27px;height:27px;border-radius:var(--corner-pill);flex:none;background:color-mix(in oklab,var(--raw-danger-light) 16%,transparent);color:var(--danger-light);margin-top:1px}.g-pains .pain-x svg{width:15px;height:15px}.g-pains .pain-item p{font-size:var(--type-body);color:var(--color-fg-soft);line-height:var(--lh-body);font-weight:var(--fw-semibold)}.g-pains .pain-item-title{font-size:var(--type-body);font-weight:var(--fw-heavy);color:var(--color-fg);line-height:var(--lh-normal)}.g-pains .pain-item-body{font-size:var(--type-body-sm);color:var(--color-fg-soft);line-height:var(--lh-body);font-weight:var(--fw-medium)}.g-pains--plates .pain-stack{max-width:560px;margin:0 auto;padding:8px 0}.g-pains--plates .pain-plate{position:relative;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--corner-md);padding:16px 24px 16px 60px;box-shadow:0 16px 32px color-mix(in oklab,var(--raw-purple-deep) 14%,transparent);font-size:var(--type-body);font-weight:var(--fw-semibold);color:var(--color-fg);line-height:var(--lh-snug);transition:transform .3s var(--easing-tap),box-shadow .3s var(--easing-tap)}.g-pains--plates .pain-plate+.pain-plate{margin-top:var(--s-4)}.g-pains--plates .pain-plate:before{content:"";position:absolute;left:20px;top:50%;width:28px;height:28px;border-radius:var(--corner-sm);background-color:var(--danger);background-repeat:no-repeat;background-position:center;background-size:15px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='18' y1='6' x2='6' y2='18'/></svg>");box-shadow:0 6px 14px color-mix(in oklab,var(--raw-danger) 40%,transparent);transform:translateY(-50%)}.g-pains--plates .pain-plate:nth-child(odd){transform:rotate(-1.8deg) translate(-10px)}.g-pains--plates .pain-plate:nth-child(2n){transform:rotate(1.6deg) translate(14px)}.g-pains--plates .pain-plate:hover{transform:rotate(0) translate(0) scale(1.02);box-shadow:0 24px 44px color-mix(in oklab,var(--raw-purple-deep) 20%,transparent);z-index:2}.g-pains--plates .pain-after{text-align:center;margin-top:var(--s-10);font-size:var(--type-body-lg);color:var(--color-muted);line-height:var(--lh-body)}.g-pains--plates .pain-after b{color:var(--color-fg);font-weight:var(--fw-bold)}@media (max-width: 640px){.g-pains--plates .pain-plate{padding:16px 16px 16px 56px}.g-pains--plates .pain-plate:before{left:16px;width:26px;height:26px}.g-pains--plates .pain-plate:nth-child(odd){transform:rotate(-1.4deg) translate(-4px)}.g-pains--plates .pain-plate:nth-child(2n){transform:rotate(1.2deg) translate(4px)}}@media (prefers-reduced-motion: reduce){.g-pains--plates .pain-plate,.g-pains--plates .pain-plate:nth-child(odd),.g-pains--plates .pain-plate:nth-child(2n){transform:none;transition:none}}}
