@keyframes routine-step-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.routine-step{animation:routine-step-in .42s var(--ease-out) both}@media (min-width:64rem){.routine-rail[data-row]:before{content:"";inset-inline:1.5rem;background:linear-gradient(90deg, transparent, var(--color-line-strong) 8%, var(--color-line-strong) 92%, transparent);z-index:0;height:1px;position:absolute;top:50%}.routine-rail[data-row]>.routine-step{z-index:1}}.showcase-panel{isolation:isolate;border-radius:var(--radius-lg);background:var(--color-paper-raised);box-shadow:var(--shadow-hairline), var(--shadow-card);position:relative;overflow:hidden}.showcase-panel:before{content:"";aspect-ratio:1;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#1078ff1a,#b81ec50a 60%,#0000);width:60%;position:absolute;inset:-40% -20% auto auto}.ingredient-figure{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.375rem);font-weight:600;line-height:1}.showcase-faq summary{cursor:pointer;list-style:none}.showcase-faq summary::-webkit-details-marker{display:none}.showcase-faq .faq-mark{transition:transform var(--duration-base) var(--ease-out)}.showcase-faq details[open] .faq-mark{transform:rotate(45deg)}.routines-hero{isolation:isolate;border-radius:var(--radius-lg);background:radial-gradient(60% 70% at 88% 0%, #1078ff1f, transparent 70%), radial-gradient(50% 60% at 100% 40%, #b81ec512, transparent 70%), var(--color-paper-raised);box-shadow:var(--shadow-hairline), var(--shadow-card);position:relative;overflow:hidden}.routines-hero:after{content:"";z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,#2a274209 1px,#0000 1px),linear-gradient(#2a274209 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 85%);mask-image:linear-gradient(#000,#0000 85%)}@media (hover:hover) and (pointer:fine){.routine-card{transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out)}.routine-card:hover{box-shadow:var(--shadow-hairline), var(--shadow-float);transform:translateY(-2px)}}@media (prefers-reduced-motion:reduce){.routine-step{animation:none}.showcase-faq .faq-mark,.routine-card{transition:none}}