@layer components{.winding-track{--winding-surface:color-mix(in oklab,var(--ds-color-brand500) 10%,var(--ds-background));--winding-pitch:9.5rem}.winding-mark,.winding-node{border-color:color-mix(in oklab,var(--ds-color-brand400) 70%,transparent);color:var(--ds-color-brand300);box-shadow:0 0 0 4px color-mix(in oklab,var(--ds-color-brand500) 12%,transparent),0 0 22px color-mix(in oklab,var(--ds-color-brand500) 35%,transparent)}.winding-lit{stroke-dasharray:1 1;stroke-dashoffset:0}.winding-head{visibility:hidden;offset-rotate:auto}.winding-frame{position:relative}.winding-hold{display:none}.winding-upright-track{border-radius:9999px;background:linear-gradient(color-mix(in oklab,var(--ds-color-brand500) 38%,transparent)) 0 /1.25px 100% no-repeat,linear-gradient(color-mix(in oklab,var(--ds-color-brand500) 38%,transparent)) 100% /1.25px 100% no-repeat,repeating-linear-gradient(to bottom,color-mix(in oklab,var(--ds-color-brand300) 16%,transparent) 0 4px,transparent 4px 13px) 50% /1px 100% no-repeat,var(--winding-surface);mask-image:linear-gradient(180deg,transparent,black 2.5rem,black calc(100% - 4rem),transparent)}.winding-upright-glow{position:absolute;inset:0;transform-origin:top;background:linear-gradient(color-mix(in oklab,var(--ds-color-brand400) 42%,transparent)) 0 /1.25px 100% no-repeat,linear-gradient(color-mix(in oklab,var(--ds-color-brand400) 42%,transparent)) 100% /1.25px 100% no-repeat}.winding-upright-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;transform-origin:top;background:linear-gradient(to bottom,var(--ds-color-brand300),var(--ds-color-brand200));box-shadow:0 0 10px color-mix(in oklab,var(--ds-color-brand400) 70%,transparent)}@media (height >= 31.5rem){.winding[data-steps="3"]{--winding-room:1}}@media (height >= 39rem){.winding[data-steps="4"]{--winding-room:1}}@media (height >= 46.5rem){.winding[data-steps="5"]{--winding-room:1}}@media (height >= 54rem){.winding[data-steps="6"]{--winding-room:1}}@media (height >= 61.5rem){.winding[data-steps="7"]{--winding-room:1}}@supports (animation-timeline:view()) and (offset-path:path("M0 0")){@media (prefers-reduced-motion:no-preference) and (width >= 64rem){@container style(--winding-room: 1){.winding-pin{--winding-pitch:clamp(7.5rem,calc((100vh - 8.875rem) / var(--winding-steps)),9.5rem);--winding-top:max(6rem,calc((100vh + 4.5rem - var(--winding-box, 100vh)) / 2));--winding-run:calc(var(--winding-steps) * 300px);--winding-span:calc(50vh - var(--winding-top) + var(--winding-run));view-timeline-name:--winding}.winding-frame{position:sticky;top:var(--winding-top)}.winding-hold{display:block;height:var(--winding-run)}.winding-lit{animation:var(--winding-lit-keys,winding-draw) linear both;animation-timeline:--winding;animation-range:cover 50vh cover calc(50vh + var(--winding-span))}.winding-head{visibility:visible;animation:var(--winding-head-keys,winding-travel) linear both;animation-timeline:--winding;animation-range:cover 50vh cover calc(50vh + var(--winding-span))}.winding-mark,.winding-words{animation:winding-light linear both;animation-timeline:--winding;animation-range:cover calc(50vh + var(--f) * var(--winding-span) - 12px) cover calc(50vh + var(--f) * var(--winding-span))}.winding-words{animation-name:winding-rise}}}}@supports (animation-timeline:view()){.winding-upright{view-timeline-name:--winding-upright}.winding-upright-glow,.winding-upright-line{animation:winding-grow linear both;animation-timeline:--winding-upright;animation-range:cover 50vh cover calc(100% - 50vh)}.winding-node{animation:winding-light linear both;animation-timeline:view();animation-range:cover calc(50vh - 10px) cover calc(50vh + 30px)}}@media (prefers-reduced-motion:reduce){.winding-node,.winding-upright-glow,.winding-upright-line{animation:none}}@keyframes winding-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes winding-travel{0%{offset-distance:0;opacity:0}1%,99%{opacity:1}to{offset-distance:100%;opacity:0}}@keyframes winding-light{0%{border-color:var(--ds-border);color:var(--muted-foreground);box-shadow:0 0 0 0 transparent,0 0 0 transparent}}@keyframes winding-rise{0%{opacity:.45}}@keyframes winding-grow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}}