@property --color-demo-wave-1{syntax: "<color>"; inherits: true; initial-value: oklch(66.7% .249 357deg);}@property --color-demo-wave-2{syntax: "<color>"; inherits: true; initial-value: oklch(84.4% .146 209deg);}@property --color-demo-wave-3{syntax: "<color>"; inherits: true; initial-value: oklch(63.5% .251 306deg);}.hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);padding-block:var(--space-16);padding-inline:var(--space-4);text-align:center;--wave-stagger: .13s;--color-demo-stage-bg: oklch(15% .03 290deg)}.hero-stage{position:relative;inline-size:100%;max-inline-size:52rem;overflow:hidden;padding-block:var(--space-12);padding-inline:var(--space-6);background:radial-gradient(ellipse at 50% -20%,oklch(66.7% .249 357deg / 18%),transparent 60%),var(--color-demo-stage-bg);border:1px solid oklch(60% .12 290deg / 35%);border-radius:var(--radius-md);box-shadow:0 0 0 1px #c77dd81a,0 1.5rem 4rem #00000059}.hero-stage:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 2px,oklch(0% 0 0deg / 30%) 2px 4px);mix-blend-mode:overlay;opacity:.2}.hero-title{position:relative;z-index:1;margin:0;font-family:var(--font-code),ui-monospace,monospace;font-size:1.75rem;line-height:1.15;letter-spacing:.04em;--color-demo-wave-1: oklch(66.7% .249 357deg);--color-demo-wave-2: oklch(84.4% .146 209deg);--color-demo-wave-3: oklch(63.5% .251 306deg);background-image:linear-gradient(90deg,var(--color-demo-wave-1),var(--color-demo-wave-2) 50%,var(--color-demo-wave-3));background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 .14em oklch(66.7% .249 357deg / 55%)) drop-shadow(0 0 .42em oklch(84.4% .146 209deg / 35%));animation:hero-cycle 8s linear infinite}.hero-title span{white-space:pre}@media(width>=48rem){.hero-title{font-size:3.25rem}.hero-stage{padding-block:var(--space-16);padding-inline:var(--space-12)}}@media(width>=64rem){.hero-title{font-size:4.5rem}}@supports (animation-delay: calc(sibling-index()*1s)){.hero-title{background:none}.hero-title span{display:inline-block;animation:hero-wave 2.2s ease-in-out infinite;animation-delay:calc((sibling-index() - 1) * var(--wave-stagger));background-image:linear-gradient(90deg,var(--color-demo-wave-1),var(--color-demo-wave-2) 50%,var(--color-demo-wave-3));background-size:calc(sibling-count()*100%) 100%;background-position:calc((sibling-index() - 1)*100%/(sibling-count() - 1)) center;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;color:transparent}}@keyframes hero-wave{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-.26em) scale(1.06)}}@keyframes hero-cycle{0%{--color-demo-wave-1: oklch(66.7% .249 357deg);--color-demo-wave-2: oklch(84.4% .146 209deg);--color-demo-wave-3: oklch(63.5% .251 306deg)}33%{--color-demo-wave-1: oklch(84.4% .146 209deg);--color-demo-wave-2: oklch(63.5% .251 306deg);--color-demo-wave-3: oklch(87.9% .162 91deg)}66%{--color-demo-wave-1: oklch(63.5% .251 306deg);--color-demo-wave-2: oklch(87.9% .162 91deg);--color-demo-wave-3: oklch(66.7% .249 357deg)}to{--color-demo-wave-1: oklch(66.7% .249 357deg);--color-demo-wave-2: oklch(84.4% .146 209deg);--color-demo-wave-3: oklch(63.5% .251 306deg)}}.hero-subtitle{margin:0;max-inline-size:38rem;font-size:var(--font-size-body);color:var(--color-text-muted)}.hero-slider{display:none;inline-size:100%;max-inline-size:22rem;gap:var(--space-2)}@supports (animation-delay: calc(sibling-index()*1s)){.hero-slider{display:grid}}.hero-slider-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}.hero-slider-label{font-weight:var(--font-weight-semibold)}.hero-slider-value{color:var(--color-accent);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums}.hero-slider-input{inline-size:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.hero-slider-input::-webkit-slider-runnable-track{block-size:.5rem;background:var(--color-gradient);border-radius:var(--radius-sm)}.hero-slider-input::-moz-range-track{block-size:.5rem;background:var(--color-gradient);border-radius:var(--radius-sm)}.hero-slider-input::-webkit-slider-thumb{-webkit-appearance:none;inline-size:1.5rem;block-size:1.5rem;margin-block-start:-.5rem;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;box-shadow:var(--shadow-sm)}.hero-slider-input::-moz-range-thumb{inline-size:1.5rem;block-size:1.5rem;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;box-shadow:var(--shadow-sm)}@media(scripting:none){.hero-slider{display:none}}@media(prefers-reduced-motion:reduce){.hero-title,.hero-title span{animation:none!important}.hero-slider{display:none}}@media(forced-colors:active){.hero-title,.hero-title span{background:none;color:CanvasText;filter:none;-webkit-text-fill-color:currentcolor}.hero-slider-input::-webkit-slider-runnable-track{background:CanvasText}.hero-slider-input::-moz-range-track{background:CanvasText}.hero-slider-input::-webkit-slider-thumb{background:ButtonText;border-color:Canvas}.hero-slider-input::-moz-range-thumb{background:ButtonText;border-color:Canvas}}.home-articles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);max-inline-size:64rem;margin-inline:auto;padding-inline:var(--space-4);padding-block:var(--space-8) var(--space-16)}@media(width<48rem){.home-articles{grid-template-columns:1fr}}@property --card-border-start{syntax: "<color>"; inherits: false; initial-value: transparent;}@property --card-border-end{syntax: "<color>"; inherits: false; initial-value: transparent;}.article-card{--card-border-start: var(--color-border);--card-border-end: var(--color-border);position:relative;container:article-card / inline-size;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border:1px solid transparent;border-radius:var(--radius-md);background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,linear-gradient(135deg,var(--card-border-start),var(--card-border-end)) border-box;box-shadow:var(--shadow-sm);transition:--card-border-start var(--duration-normal) var(--ease-out),--card-border-end var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}.article-card-title,.article-card-description,.article-card-meta{margin:0}.article-card-meta{font-size:var(--font-size-small);color:var(--color-text-muted)}.article-card-link,.article-card-link:visited,.article-card-link:hover,.article-card-link:active{color:var(--color-text);text-decoration-line:none}.article-card-link:after{content:"";position:absolute;inset:0}.article-card:hover{--card-border-start: var(--color-accent-start);--card-border-end: var(--color-accent-end);transform:translateY(-2px)}.article-card:has(.article-card-link:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}.article-card-link:focus-visible{outline:none}.article-card-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}.article-card-tags li{padding:var(--space-1) var(--space-2);font-size:var(--font-size-small);color:var(--color-text);background:linear-gradient(135deg,color-mix(in oklab,var(--color-accent-start) 12%,var(--color-surface)),color-mix(in oklab,var(--color-accent-end) 12%,var(--color-surface)));border-radius:var(--radius-sm);overflow-wrap:anywhere}@container article-card (width < 24rem){.article-card-tags{gap:var(--space-1)}.article-card-tags li{padding-inline:var(--space-1)}}.article-card--featured{grid-column:1 / -1}.article-card-featured-grid{display:grid;gap:var(--space-4)}.article-card-content{display:flex;flex-direction:column;gap:var(--space-3)}.article-card-media{aspect-ratio:16 / 9;inline-size:100%;object-fit:cover;border-radius:var(--radius-md)}@container article-card (width >= 36rem){.article-card-featured-grid:has(.article-card-media){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}.article-card-featured-grid:has(.article-card-media) .article-card-media{block-size:100%}}@media(prefers-reduced-motion:reduce){.article-card:hover{transform:none}}@media(forced-colors:active){.article-card{border-color:CanvasText}.article-card-media{border:1px solid CanvasText}}