.hero{--cyl-rows:12;--cyl-turns:1.5;--cyl-size:min(12vw, 24svh);--hero-bg:#090909;--hero-ink:#f5f5f5;--flow-void:#090909;--flow-ribbon:#a4a4a4;--cyl-lit:calc(var(--cyl-size) * 1.15);--cyl-edge:calc(var(--cyl-size) * 1.95);background:var(--vx-color-surface-base);view-timeline-name:--hero;view-timeline-axis:block;height:320svh;padding-inline-start:max(1rem,min(3vw,2.25rem));padding-inline-end:max(1rem,min(3vw,2.25rem));position:relative}@supports (color:color(display-p3 0 0 0)){.hero{--hero-bg:color(display-p3 .0354525 .0354525 .0354525);--hero-ink:color(display-p3 .960587 .960587 .960587);--flow-void:color(display-p3 .0354525 .0354525 .0354525);--flow-ribbon:color(display-p3 .64471 .64471 .64471)}}@supports (color:lab(0% 0 0)){.hero{--hero-bg:lab(2.47865% 0 0);--hero-ink:lab(96.52% -.0000298023 .0000119209);--flow-void:lab(2.47865% 0 0);--flow-ribbon:lab(67.52% -.0000298023 0)}}[data-vx-mode=light] .hero{--hero-bg:#f2f2f2;--hero-ink:#0f0f0f;--flow-void:#f2f2f2;--flow-ribbon:#717171}@supports (color:color(display-p3 0 0 0)){[data-vx-mode=light] .hero{--hero-bg:color(display-p3 .947516 .947516 .947516);--hero-ink:color(display-p3 .0601632 .0601632 .0601632);--flow-void:color(display-p3 .947516 .947516 .947516);--flow-ribbon:color(display-p3 .444696 .444696 .444696)}}@supports (color:lab(0% 0 0)){[data-vx-mode=light] .hero{--hero-bg:lab(95.36% 0 0);--hero-ink:lab(4.4379% 0 0);--flow-void:lab(95.36% 0 0);--flow-ribbon:lab(47.8% 0 .0000119209)}}.hero__stage{background:var(--hero-bg);height:calc(100svh - 2*max(1.5rem,min(3.5vh,2.75rem)));perspective:calc(var(--cyl-size) * 8);border-radius:max(1.5rem,min(3vw,2.75rem));place-items:center;display:grid;position:sticky;top:max(1.5rem,min(3.5vh,2.75rem));overflow:hidden}.hero__bed{z-index:1;background:linear-gradient(to bottom, color-mix(in srgb, var(--hero-bg), transparent 100%) calc(50% - var(--cyl-edge) * 1.6), color-mix(in srgb, var(--hero-bg) 50%, transparent) calc(50% - var(--cyl-lit)), color-mix(in srgb, var(--hero-bg) 50%, transparent) calc(50% + var(--cyl-lit)), color-mix(in srgb, var(--hero-bg), transparent 100%) calc(50% + var(--cyl-edge) * 1.6));pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.hero__title{z-index:2;width:100%;color:var(--hero-ink);font-size:var(--cyl-size);letter-spacing:-.03em;text-transform:uppercase;margin:0;font-weight:700;line-height:1;position:relative}.cyl{--cyl-lead:.84em;--cyl-radius:calc(var(--cyl-lead) / 2 / tan(180deg / var(--cyl-rows)));--cyl-step:calc(360deg / var(--cyl-rows));width:100%;height:var(--cyl-lead);transform-style:preserve-3d;animation:linear both cyl-spin;animation-timeline:--hero;animation-range:contain;display:block;position:relative}.cyl__row{transform:rotateX(calc(var(--i) * var(--cyl-step))) translateZ(var(--cyl-radius));-webkit-backface-visibility:hidden;backface-visibility:hidden;white-space:nowrap;place-items:center;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes cyl-spin{to{transform:rotateX(calc(var(--cyl-turns) * -360deg))}}.hero__stage:after{--cyl-veil:color-mix(in srgb, var(--hero-bg) 92%, transparent);z-index:3;content:"";background:linear-gradient(to bottom, var(--cyl-veil) calc(50% - var(--cyl-edge)), color-mix(in srgb, var(--hero-bg), transparent 100%) calc(50% - var(--cyl-lit)), color-mix(in srgb, var(--hero-bg), transparent 100%) calc(50% + var(--cyl-lit)), var(--cyl-veil) calc(50% + var(--cyl-edge)));pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}@media (prefers-reduced-motion:reduce){.hero{height:100svh}.cyl{animation:none}}@supports not (animation-timeline:view()){.hero{height:100svh}.cyl{animation:none}}
.flow{z-index:0;background-color:var(--flow-ribbon);will-change:transform;pointer-events:none;animation:71s linear infinite alternate flow-a;position:absolute;top:-30%;bottom:-30%;left:-30%;right:-30%;-webkit-mask-image:url(/liquid-a.svg);mask-image:url(/liquid-a.svg);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.flow--b{mix-blend-mode:lighten;animation:97s linear infinite alternate flow-b;-webkit-mask-image:url(/liquid-b.svg);mask-image:url(/liquid-b.svg)}[data-vx-mode=light] .flow--b{mix-blend-mode:darken}@keyframes flow-a{0%{transform:translate(-7%,-5%)}to{transform:translate(7%,6%)}}@keyframes flow-b{0%{transform:translate(6%,4%)}to{transform:translate(-8%,-6%)}}@media (prefers-reduced-motion:reduce){.flow{animation:none}}@supports not ((-webkit-mask-image:url("/liquid-a.svg")) or (mask-image:url("/liquid-a.svg"))){.flow{background-color:#0000}}:root[data-vx-wave] .flow{animation-play-state:paused}
.showcase{background:var(--vx-color-surface-base);color:var(--vx-color-on-surface);padding:max(1rem,min(3vw,2.25rem))}.mosaic{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.125rem;display:grid}.mosaic>*{break-inside:avoid}.mosaic .vx-card{background:var(--lightningcss-light,color-mix(in srgb, var(--vx-color-on-surface) 5%, var(--vx-color-surface-base)))var(--lightningcss-dark,color-mix(in srgb, var(--vx-color-on-surface) 8%, var(--vx-color-surface-base)));box-shadow:none}.mosaic__specimen{place-items:center;padding:1.5rem;display:grid}.mosaic .specimen-chip{pointer-events:none}.mosaic__specimen{overflow:hidden}.expand__canvas .specimen-chip{pointer-events:auto}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.mosaic>*{animation:linear both mosaic-rise;animation-timeline:view();animation-range:entry 5% entry 55%}}}@keyframes mosaic-rise{0%{opacity:0;transform:translateY(1.5rem)}}.specimen-pad{border:1px dashed color-mix(in srgb, var(--vx-color-on-surface), transparent 70%);border-radius:var(--vx-radius-control);width:13rem;height:8rem;color:color-mix(in srgb, var(--vx-color-on-surface), transparent 35%);place-items:center;font-size:.875rem;display:grid}.specimen-chip{justify-content:center;width:100%;display:flex}
:root[data-vx-expand] .mosaic__specimen[data-spec-active]:not(.mosaic__specimen--vacated){view-transition-name:vx-spec-card}:root[data-vx-expand] .mosaic__specimen[data-spec-active]:not(.mosaic__specimen--vacated) .specimen-chip{view-transition-name:vx-spec-button}:root[data-vx-expand] .expand__panel{view-transition-name:vx-spec-card}:root[data-vx-expand] .expand__canvas .specimen-chip{view-transition-name:vx-spec-button}:root[data-vx-expand]::view-transition-group(vx-spec-card){animation-duration:.78s;animation-timing-function:cubic-bezier(.32,.72,0,1)}:root[data-vx-expand]::view-transition-group(vx-spec-button){animation-duration:.78s;animation-timing-function:cubic-bezier(.32,.72,0,1)}:root[data-vx-expand]::view-transition-old(vx-spec-card){width:100%;height:100%}:root[data-vx-expand]::view-transition-new(vx-spec-card){width:100%;height:100%}:root[data-vx-expand]::view-transition-image-pair(vx-spec-card){animation:.78s cubic-bezier(.32,.72,0,1) both vx-expand-liquid}@keyframes vx-expand-liquid{0%{filter:blur()}45%{filter:blur(7px)}to{filter:blur()}}:root[data-vx-expand]::view-transition-old(vx-spec-button){opacity:0;animation:none}:root[data-vx-expand] .flow{animation-play-state:paused}:root[data-vx-modal]{overflow:hidden}.expand{z-index:1150;position:fixed;top:0;bottom:0;left:0;right:0}.expand__scrim{background:#0000006b;position:absolute;top:0;bottom:0;left:0;right:0}.expand__panel{background:var(--lightningcss-light,var(--vx-color-surface-base))var(--lightningcss-dark,color-mix(in srgb, var(--vx-color-on-surface) 7%, var(--vx-color-surface-base)));color:var(--vx-color-on-surface);border-radius:max(1.5rem,min(3vw,2.75rem));flex-direction:column;display:flex;position:absolute;top:max(1rem,min(3vw,2.25rem));bottom:max(1rem,min(3vw,2.25rem));left:max(1rem,min(3vw,2.25rem));right:max(1rem,min(3vw,2.25rem));overflow:hidden}.expand__bar{justify-content:flex-end;padding:1rem 1.25rem 0;display:flex}.expand__body{flex:1;grid-template-columns:1fr;gap:1.125rem;min-height:0;padding:1.125rem max(1.125rem,min(2.5vw,2rem)) max(1.125rem,min(2.5vw,2rem));display:grid}@media (min-width:48rem){.expand__body{grid-template-columns:1fr minmax(20rem,42%)}}.expand__detail{min-width:0;padding:.5rem .25rem 0;overflow-y:auto}.expand__name{letter-spacing:-.02em;margin:0;font-size:max(1.75rem,min(3vw,2.5rem));font-weight:700}.expand__description{width:100%;color:color-mix(in srgb, var(--vx-color-on-surface), transparent 30%);text-wrap:pretty;margin:.75rem 0 0;font-size:.9375rem;line-height:1.55}.expand__props{flex-direction:column;gap:1.375rem;margin-top:2rem;display:flex}.expand__props .vx-radio-group{flex-flow:wrap;gap:.625rem 1.25rem;display:flex}.expand__props .vx-radio-group__label{flex-basis:100%}.expand__canvas{border-radius:calc(var(--vx-radius-control) * 1.5);background-color:var(--lightningcss-light,color-mix(in srgb, var(--vx-color-on-surface) 5%, var(--vx-color-surface-base)))var(--lightningcss-dark,color-mix(in srgb, var(--vx-color-on-surface) 8%, var(--vx-color-surface-base)));background-image:radial-gradient(circle, color-mix(in srgb, var(--vx-color-on-surface) 14%, transparent) 1px, transparent 1px);background-position:50%;background-size:22px 22px;place-items:center;display:grid}.expand__code{border-radius:var(--vx-radius-control);background:var(--lightningcss-light,color-mix(in srgb, var(--vx-color-on-surface) 5%, var(--vx-color-surface-base)))var(--lightningcss-dark,color-mix(in srgb, var(--vx-color-on-surface) 8%, var(--vx-color-surface-base)));width:100%;margin:2.25rem 0 0;position:relative}.expand__code-pre{margin:0;padding:1.125rem 3.5rem 1.125rem 1.375rem;font-family:ui-monospace,SF Mono,monospace;font-size:.8125rem;line-height:1.6;overflow-x:auto}.expand__copy{position:absolute;top:.625rem;right:.625rem}.tok-kw{color:color-mix(in srgb, var(--vx-color-on-surface), transparent 45%)}.tok-punc{color:color-mix(in srgb, var(--vx-color-on-surface), transparent 40%)}.tok-tag{color:var(--vx-color-on-surface);font-weight:600}.tok-attr{color:var(--vx-color-info-foreground)}.tok-str{color:var(--vx-color-success-foreground)}.expand__toy{touch-action:none;will-change:transform;display:inline-block}