:root{--token-border-radius-none:0rem;--token-border-radius-sm:.125rem;--token-border-radius-base:.25rem;--token-border-radius-md:.375rem;--token-border-radius-lg:.5rem;--token-border-radius-xl:.75rem;--token-border-radius-2xl:1rem;--token-border-radius-3xl:1.5rem;--token-border-radius-full:9999px;--token-color-background-base:#12100e;--token-color-background-elevated:#2a2520;--token-color-background-surface:#1e1b17;--token-color-border-default:#3a3530;--token-color-border-subtle:#2a2520;--token-color-orange-300:#fdba74;--token-color-orange-400:#fb923c;--token-color-orange-500:#f97316;--token-color-orange-600:#ea6c0a;--token-color-orange-700:#c2510a;--token-color-sky-300:#7dd3fc;--token-color-sky-400:#38bdf8;--token-color-sky-500:#0ea5e9;--token-color-sky-600:#28a8e0;--token-color-text-muted:#a09585;--token-color-text-primary:#f5f0ea;--token-color-text-secondary:#cfc5b8;--token-motion-duration-instant:50ms;--token-motion-duration-fast:.1s;--token-motion-duration-base:.2s;--token-motion-duration-slow:.3s;--token-motion-duration-slower:.5s;--token-motion-duration-slowest:.7s;--token-motion-easing-linear:cubic-bezier(0, 0, 1, 1);--token-motion-easing-ease-in:cubic-bezier(.4, 0, 1, 1);--token-motion-easing-ease-out:cubic-bezier(0, 0, .2, 1);--token-motion-easing-ease-in-out:cubic-bezier(.4, 0, .2, 1);--token-motion-easing-spring:cubic-bezier(.34, 1.56, .64, 1);--token-shadow-sm:0 1px 2px 0 #0006;--token-shadow-base:0 2px 6px 0 #0006;--token-shadow-md:0 4px 12px -2px #00000080;--token-shadow-lg:0 8px 24px -4px #0009;--token-shadow-xl:0 16px 40px -8px #000000b3;--token-shadow-glow-orange:0 0 20px 0 #f973164d;--token-shadow-glow-sky:0 0 20px 0 #38bdf84d;--token-spacing-0:0rem;--token-spacing-1:.25rem;--token-spacing-2:.5rem;--token-spacing-3:.75rem;--token-spacing-4:1rem;--token-spacing-5:1.25rem;--token-spacing-6:1.5rem;--token-spacing-8:2rem;--token-spacing-10:2.5rem;--token-spacing-12:3rem;--token-spacing-16:4rem;--token-spacing-20:5rem;--token-spacing-24:6rem;--token-spacing-32:8rem;--token-spacing-40:10rem;--token-spacing-48:12rem;--token-spacing-64:16rem;--token-spacing-80:20rem;--token-spacing-96:24rem;--token-font-family-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--token-font-family-sans:"Inter", system-ui, -apple-system, sans-serif;--token-font-size-xs:.75rem;--token-font-size-sm:.875rem;--token-font-size-base:1rem;--token-font-size-lg:1.125rem;--token-font-size-xl:1.25rem;--token-font-size-2xl:1.5rem;--token-font-size-3xl:1.875rem;--token-font-size-4xl:2.25rem;--token-font-size-5xl:3rem;--token-font-weight-normal:400;--token-font-weight-medium:500;--token-font-weight-semibold:600;--token-font-weight-bold:700;--token-font-line-height-none:1;--token-font-line-height-tight:1.25;--token-font-line-height-snug:1.375;--token-font-line-height-normal:1.5;--token-font-line-height-relaxed:1.625;--token-font-line-height-loose:2;--token-font-letter-spacing-tight:-.025em;--token-font-letter-spacing-normal:0em;--token-font-letter-spacing-wide:.025em;--token-font-letter-spacing-wider:.05em;--token-font-letter-spacing-widest:.1em}@font-face{font-family:Inter;font-style:normal;font-display:optional;font-weight:400;src:url(/assets/inter-latin-400-normal-C38fXH4l.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-display:optional;font-weight:500;src:url(/assets/inter-latin-500-normal-Cerq10X2.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-display:optional;font-weight:600;src:url(/assets/inter-latin-600-normal-LgqL8muc.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-display:optional;font-weight:700;src:url(/assets/inter-latin-700-normal-Yt3aPRUw.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@layer base{*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background-color:var(--token-color-background-base);color:var(--token-color-text-primary);font-family:var(--token-font-family-sans);font-size:var(--token-font-size-base);line-height:var(--token-font-line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.skip-link{padding-block:var(--token-spacing-2);padding-inline:var(--token-spacing-4);background-color:var(--token-color-orange-500);color:var(--token-color-background-base);font-weight:var(--token-font-weight-semibold);border-radius:var(--token-border-radius-md);z-index:9999;transition:transform var(--token-motion-duration-base) var(--token-motion-easing-ease-out);text-decoration:none;position:absolute;inset-block-start:var(--token-spacing-4);inset-inline-start:var(--token-spacing-4);transform:translateY(-200%)}.skip-link:focus-visible{transform:translateY(0)}:focus-visible{outline:2px solid var(--token-color-orange-500);outline-offset:3px;border-radius:var(--token-border-radius-sm)}.container{inline-size:min(100%,72rem);padding-inline:var(--token-spacing-6);margin-inline:auto}@media (width>=40rem){.container{padding-inline:var(--token-spacing-8)}}@media (width>=64rem){.container{padding-inline:var(--token-spacing-12)}}.section-header{max-inline-size:44rem;margin-block-end:var(--token-spacing-12)}.section-heading{font-size:var(--token-font-size-3xl);font-weight:var(--token-font-weight-bold);line-height:var(--token-font-line-height-tight);letter-spacing:var(--token-font-letter-spacing-tight);margin-block-end:var(--token-spacing-4)}@media (width>=64rem){.section-heading{font-size:var(--token-font-size-4xl)}}.section-subheading{color:var(--token-color-text-secondary);font-size:var(--token-font-size-lg);line-height:var(--token-font-line-height-relaxed)}.text-gradient{background:linear-gradient(135deg, var(--token-color-orange-400) 0%, var(--token-color-sky-400) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}code{font-family:var(--token-font-family-mono);background-color:var(--token-color-background-elevated);border-radius:var(--token-border-radius-sm);color:var(--token-color-orange-300);padding-block:.1em;padding-inline:.35em;font-size:.875em}[hidden]{display:none!important}ul[role=list],ol[role=list]{list-style:none}img,svg{max-inline-size:100%;display:block}a{color:inherit;text-decoration:none}}@layer components{.site-header{z-index:100;background-color:color-mix(in srgb, var(--token-color-background-base) 85%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block-end:1px solid var(--token-color-border-subtle);position:sticky;inset-block-start:0}.site-header__inner{justify-content:space-between;align-items:center;gap:var(--token-spacing-6);block-size:4rem;display:flex}.site-logo{align-items:center;gap:var(--token-spacing-2);font-weight:var(--token-font-weight-semibold);font-size:var(--token-font-size-base);color:var(--token-color-text-primary);transition:color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);text-decoration:none;display:flex}.site-logo:hover{color:var(--token-color-orange-400)}.site-logo__icon{color:var(--token-color-orange-500);align-items:center;display:flex}.site-logo__icon svg{block-size:1.25rem;inline-size:1.25rem}.nav-list{align-items:flex-start;gap:var(--token-spacing-1);list-style:none;display:flex}.nav-link{padding-block:var(--token-spacing-1);padding-inline:var(--token-spacing-3);color:var(--token-color-text-muted);font-size:var(--token-font-size-sm);font-weight:var(--token-font-weight-medium);border-radius:var(--token-border-radius-md);transition:color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out), background-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);display:inline-block}.nav-link:hover{color:var(--token-color-text-primary);background-color:var(--token-color-background-surface)}.nav-link--active{color:var(--token-color-orange-400)}.nav-link--active:hover{color:var(--token-color-orange-300)}.nav-toggle{padding:var(--token-spacing-2);cursor:pointer;border-radius:var(--token-border-radius-md);color:var(--token-color-text-primary);transition:background-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);background:0 0;border:none;flex-direction:column;justify-content:center;gap:5px;display:none}.nav-toggle:hover{background-color:var(--token-color-background-surface)}.nav-toggle__bar{block-size:2px;inline-size:1.25rem;transition:transform var(--token-motion-duration-base) var(--token-motion-easing-ease-out), opacity var(--token-motion-duration-base) var(--token-motion-easing-ease-out);background-color:currentColor;border-radius:2px;display:block}.nav-toggle[aria-expanded=true] .nav-toggle__bar:first-child{transform:translateY(7px)rotate(45deg)}.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(2){opacity:0}.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(3){transform:translateY(-7px)rotate(-45deg)}@media (width<=39.9375rem){#site-nav{display:none}#site-nav.is-open{background-color:var(--token-color-background-base);border-block-end:1px solid var(--token-color-border-subtle);padding-block:var(--token-spacing-3);padding-inline:var(--token-spacing-6);box-shadow:var(--token-shadow-lg);animation:mobile-nav-in var(--token-motion-duration-base) var(--token-motion-easing-ease-out);display:block;position:absolute;inset-block-start:100%;inset-inline:0}@keyframes mobile-nav-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}#site-nav .nav-list{gap:var(--token-spacing-1);flex-direction:column}#site-nav .nav-link{padding-block:var(--token-spacing-2);display:block}.nav-toggle{display:flex}}@media (width>=40rem){.nav-toggle{display:none}}.hero{padding-block:var(--token-spacing-20) var(--token-spacing-24);position:relative;overflow:hidden}@media (width>=64rem){.hero{padding-block:var(--token-spacing-24) var(--token-spacing-32)}}.hero__inner{gap:var(--token-spacing-16);align-items:center;display:grid}@media (width>=64rem){.hero__inner{gap:var(--token-spacing-12);grid-template-columns:1fr 1fr}}.hero__content{gap:var(--token-spacing-6);flex-direction:column;display:flex}.badge-group{align-items:center;gap:var(--token-spacing-2);flex-wrap:wrap;display:flex}.badge{align-items:center;gap:var(--token-spacing-1);padding-block:var(--token-spacing-1);padding-inline:var(--token-spacing-3);border-radius:var(--token-border-radius-full);font-size:var(--token-font-size-xs);font-weight:var(--token-font-weight-medium);letter-spacing:var(--token-font-letter-spacing-wide);display:inline-flex}.badge__icon svg{block-size:.75rem;inline-size:.75rem}.badge--orange{background-color:color-mix(in srgb, var(--token-color-orange-500) 15%, transparent);color:var(--token-color-orange-300);border:1px solid color-mix(in srgb, var(--token-color-orange-500) 30%, transparent)}.badge--sky{background-color:color-mix(in srgb, var(--token-color-sky-400) 15%, transparent);color:var(--token-color-sky-300);border:1px solid color-mix(in srgb, var(--token-color-sky-400) 30%, transparent)}.badge--muted{color:var(--token-color-text-muted);font-size:var(--token-font-size-sm);padding-inline:var(--token-spacing-1)}.hero__heading{font-size:clamp(2.5rem,6vw,4rem);font-weight:var(--token-font-weight-bold);line-height:var(--token-font-line-height-none);letter-spacing:var(--token-font-letter-spacing-tight)}.hero__subheading{color:var(--token-color-text-secondary);font-size:var(--token-font-size-lg);line-height:var(--token-font-line-height-relaxed);max-inline-size:36rem}.hero__actions{gap:var(--token-spacing-3);flex-wrap:wrap;padding-block-start:var(--token-spacing-2);display:flex}.hero__visual{justify-content:center;align-items:center;min-block-size:20rem;display:flex;position:relative}.token-orb{border-radius:var(--token-border-radius-full);filter:blur(60px);pointer-events:none;position:absolute}.token-orb--orange{background-color:color-mix(in srgb, var(--token-color-orange-500) 25%, transparent);block-size:14rem;inline-size:14rem;inset-block-start:10%;inset-inline-start:5%}.token-orb--sky{background-color:color-mix(in srgb, var(--token-color-sky-400) 20%, transparent);block-size:12rem;inline-size:12rem;inset-block-end:10%;inset-inline-end:5%}@media (prefers-reduced-motion:no-preference){.token-orb{animation:6s ease-in-out infinite alternate orb-pulse}.token-orb--sky{animation-delay:-3s}}@keyframes orb-pulse{0%{opacity:.7;transform:scale(1)translate(0)}to{opacity:1;transform:scale(1.15)translate(5%,-5%)}}.hero__code-preview{z-index:1;inline-size:100%;max-inline-size:22rem;position:relative}.code-window{background-color:var(--token-color-background-surface);border:1px solid var(--token-color-border-default);border-radius:var(--token-border-radius-xl);box-shadow:var(--token-shadow-xl);overflow:hidden}.code-window__chrome{align-items:center;gap:var(--token-spacing-2);padding-block:var(--token-spacing-3);padding-inline:var(--token-spacing-4);background-color:var(--token-color-background-elevated);border-block-end:1px solid var(--token-color-border-subtle);display:flex}.code-window__dot{border-radius:var(--token-border-radius-full);background-color:var(--token-color-border-default);block-size:.625rem;inline-size:.625rem}.code-window__filename{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-muted);margin-inline-start:auto}.code-window__body{padding:var(--token-spacing-5);font-family:var(--token-font-family-mono);font-size:var(--token-font-size-sm);line-height:var(--token-font-line-height-relaxed);overflow-x:auto}.code-window__body code{color:inherit;font-size:inherit;background:0 0;padding:0}.token-syntax--key{color:var(--token-color-sky-400)}.token-syntax--string{color:var(--token-color-orange-300)}.token-syntax--brace,.token-syntax--colon,.token-syntax--comma{color:var(--token-color-text-muted)}.pipeline{padding-block:var(--token-spacing-24);background-color:var(--token-color-background-surface);border-block:1px solid var(--token-color-border-subtle)}.pipeline__steps{gap:var(--token-spacing-4);counter-reset:pipeline-step;list-style:none;display:grid}@media (width>=64rem){.pipeline__steps{grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0}}.pipeline__step{background-color:var(--token-color-background-base);border:1px solid var(--token-color-border-default);border-radius:var(--token-border-radius-xl);padding:var(--token-spacing-6);gap:var(--token-spacing-4);transition:box-shadow var(--token-motion-duration-slow) var(--token-motion-easing-ease-out);flex-direction:column;display:flex}.pipeline__step:hover{box-shadow:var(--token-shadow-lg)}.pipeline__step--connector{background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}@media (width<=63.9375rem){.pipeline__step--connector{display:none}}.pipeline__connector{color:var(--token-color-text-muted);padding-inline:var(--token-spacing-4)}.pipeline__connector svg{block-size:1.25rem;inline-size:1.25rem}.pipeline__step-icon{border-radius:var(--token-border-radius-lg);flex-shrink:0;justify-content:center;align-items:center;block-size:2.5rem;inline-size:2.5rem;display:flex}.pipeline__step-icon svg{block-size:1.25rem;inline-size:1.25rem}.pipeline__step-icon--orange{background-color:color-mix(in srgb, var(--token-color-orange-500) 15%, transparent);color:var(--token-color-orange-400);border:1px solid color-mix(in srgb, var(--token-color-orange-500) 25%, transparent)}.pipeline__step-icon--sky{background-color:color-mix(in srgb, var(--token-color-sky-400) 15%, transparent);color:var(--token-color-sky-400);border:1px solid color-mix(in srgb, var(--token-color-sky-400) 25%, transparent)}.pipeline__step-body{gap:var(--token-spacing-3);flex-direction:column;display:flex}.pipeline__step-title{font-size:var(--token-font-size-lg);font-weight:var(--token-font-weight-semibold);color:var(--token-color-text-primary)}.pipeline__step-desc{font-size:var(--token-font-size-sm);color:var(--token-color-text-secondary);line-height:var(--token-font-line-height-relaxed)}.pipeline__step-tags{gap:var(--token-spacing-2);flex-wrap:wrap;list-style:none;display:flex}.tag{padding-block:.2em;padding-inline:var(--token-spacing-2);background-color:var(--token-color-background-elevated);border:1px solid var(--token-color-border-default);border-radius:var(--token-border-radius-base);font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-muted);display:inline-block}.tag--orange{background-color:color-mix(in srgb, var(--token-color-orange-500) 10%, transparent);border-color:color-mix(in srgb, var(--token-color-orange-500) 20%, transparent);color:var(--token-color-orange-300)}.tag--sky{background-color:color-mix(in srgb, var(--token-color-sky-400) 10%, transparent);border-color:color-mix(in srgb, var(--token-color-sky-400) 20%, transparent);color:var(--token-color-sky-300)}.gallery{padding-block:var(--token-spacing-24)}.gallery__colors{gap:var(--token-spacing-8);flex-direction:column;display:flex}.color-group{gap:var(--token-spacing-3);flex-direction:column;display:flex}.color-group__label{font-size:var(--token-font-size-xs);font-weight:var(--token-font-weight-semibold);letter-spacing:var(--token-font-letter-spacing-widest);text-transform:uppercase;color:var(--token-color-text-muted)}.color-swatches{gap:var(--token-spacing-3);grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));display:grid}.color-swatch{gap:var(--token-spacing-2);flex-direction:column;display:flex}.color-swatch__block{border-radius:var(--token-border-radius-lg);background-color:var(--swatch-color);border:1px solid color-mix(in srgb, var(--swatch-color) 80%, #fff 20%);block-size:3.5rem}.color-swatch__name{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.color-swatch__value{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-muted)}.gallery__typography{gap:var(--token-spacing-4);flex-direction:column;display:flex}.type-row{gap:var(--token-spacing-4);padding-block:var(--token-spacing-4);border-block-end:1px solid var(--token-color-border-subtle);grid-template-columns:8rem 1fr;align-items:baseline;display:grid}.type-row__meta{gap:var(--token-spacing-1);flex-direction:column;display:flex}.type-row__token{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-orange-400)}.type-row__value{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-muted)}.type-row__sample{color:var(--token-color-text-primary);line-height:var(--token-font-line-height-tight);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.gallery__spacing{gap:var(--token-spacing-3);flex-direction:column;display:flex}.spacing-row{gap:var(--token-spacing-4);grid-template-columns:6rem 1fr;align-items:center;display:grid}.spacing-row__meta{gap:var(--token-spacing-1);flex-direction:column;display:flex}.spacing-row__token{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-orange-400)}.spacing-row__value{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-muted)}.spacing-row__bar{block-size:1.5rem;inline-size:var(--spacing-width);background:linear-gradient(90deg, var(--token-color-orange-500), var(--token-color-sky-400));border-radius:var(--token-border-radius-sm);min-inline-size:.25rem;max-inline-size:100%}.gallery__shadows{gap:var(--token-spacing-6);grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));display:grid}.shadow-card{background-color:var(--token-color-background-surface);border:1px solid var(--token-color-border-subtle);border-radius:var(--token-border-radius-xl);padding:var(--token-spacing-5);gap:var(--token-spacing-3);box-shadow:var(--shadow-value);transition:box-shadow var(--token-motion-duration-slow) var(--token-motion-easing-ease-out);flex-direction:column;display:flex}.shadow-card__token{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-sky-400)}.shadow-card__value{font-size:var(--token-font-size-xs);color:var(--token-color-text-muted);line-height:var(--token-font-line-height-relaxed);word-break:break-all;font-family:var(--token-font-family-mono)}.gallery__radii{gap:var(--token-spacing-5);grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));display:grid}.radius-item{align-items:center;gap:var(--token-spacing-3);flex-direction:column;display:flex}.radius-item__box{background-color:color-mix(in srgb, var(--token-color-orange-500) 20%, transparent);border:2px solid var(--token-color-orange-500);border-radius:var(--radius-value);block-size:4rem;inline-size:4rem}.radius-item__token{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-orange-400);text-align:center}.radius-item__value{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-muted);text-align:center}.gallery__motion{gap:var(--token-spacing-10);flex-direction:column;display:flex}.motion-section{gap:var(--token-spacing-4);flex-direction:column;display:flex}.motion-section__label{font-size:var(--token-font-size-xs);font-weight:var(--token-font-weight-semibold);letter-spacing:var(--token-font-letter-spacing-widest);text-transform:uppercase;color:var(--token-color-text-muted)}.motion-items{gap:var(--token-spacing-3);flex-direction:column;display:flex}.motion-item{gap:var(--token-spacing-4);grid-template-columns:10rem 8rem 1fr;align-items:center;display:grid}@media (width<=39.9375rem){.motion-item{grid-template-columns:1fr}}.motion-item__token{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-orange-400)}.motion-item__value{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-muted)}.motion-item__demo{background-color:var(--token-color-background-elevated);border-radius:var(--token-border-radius-full);cursor:pointer;block-size:.5rem;position:relative;overflow:hidden}.motion-item__demo:after{content:"";background:linear-gradient(90deg, var(--token-color-orange-500), var(--token-color-sky-400));border-radius:var(--token-border-radius-full);inline-size:1.5rem;position:absolute;inset-block:0;inset-inline-start:0;transform:translate(-100%)}@media (prefers-reduced-motion:no-preference){.motion-item__demo:hover:after,.motion-item__demo:focus:after{animation:motion-slide var(--motion-duration,.2s) var(--motion-easing,ease-in-out) forwards}}@keyframes motion-slide{0%{transform:translate(-100%)}to{transform:translateX(calc(var(--motion-track-width,200px) - 1.5rem))}}.code-output{padding-block:var(--token-spacing-24);background-color:var(--token-color-background-surface);border-block:1px solid var(--token-color-border-subtle)}.output-panel{padding-block-start:0!important}.output-panel__toolbar{padding-block:var(--token-spacing-3);padding-inline:var(--token-spacing-4);background-color:var(--token-color-background-elevated);border:1px solid var(--token-color-border-default);border-radius:var(--token-border-radius-xl) var(--token-border-radius-xl) 0 0;border-block-end:none;justify-content:space-between;align-items:center;display:flex}.output-panel__actions{align-items:center;gap:var(--token-spacing-2);display:flex}.output-panel__filename{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:var(--token-color-text-muted)}.code-block{background-color:var(--token-color-background-base);border:1px solid var(--token-color-border-default);border-radius:0 0 var(--token-border-radius-xl) var(--token-border-radius-xl);padding:var(--token-spacing-5);max-block-size:28rem;font-family:var(--token-font-family-mono);font-size:var(--token-font-size-sm);line-height:var(--token-font-line-height-relaxed);color:var(--token-color-text-secondary);scrollbar-width:thin;scrollbar-color:var(--token-color-border-default) transparent;overflow:auto}.code-block--shell,.code-block--css,.code-block--js{border-radius:var(--token-border-radius-xl)}.code-block code{font-size:inherit;color:inherit;white-space:pre;background:0 0;border-radius:0;padding:0}.live-editor{padding-block:var(--token-spacing-24);background-color:var(--token-color-background-base);border-block:1px solid var(--token-color-border-subtle)}.live-editor__body{gap:var(--token-spacing-6);grid-template-columns:1fr 1fr;align-items:start;display:grid}@media (width<=768px){.live-editor__body{grid-template-columns:1fr}}.live-editor__input-pane{gap:var(--token-spacing-3);flex-direction:column;display:flex}.live-editor__input-label{font-size:var(--token-font-size-xs);font-weight:var(--token-font-weight-medium);color:var(--token-color-text-muted);text-transform:uppercase;letter-spacing:.05em}.live-editor__textarea{width:100%;min-block-size:22rem;padding:var(--token-spacing-4);background-color:var(--token-color-background-surface);color:var(--token-color-text-secondary);border:1px solid var(--token-color-border-default);border-radius:var(--token-border-radius-xl);font-family:var(--token-font-family-mono);font-size:var(--token-font-size-sm);line-height:var(--token-font-line-height-relaxed);resize:vertical;box-sizing:border-box;transition:border-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);outline:none}.live-editor__textarea:focus{border-color:var(--token-color-orange-500)}.live-editor__error{font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);color:#f87171;padding-block:var(--token-spacing-2);padding-inline:var(--token-spacing-3);border-radius:var(--token-border-radius-md);background-color:#f8717114;border:1px solid #f8717140}.live-editor__reset{align-self:flex-start}.live-editor__output-pane{flex-direction:column;gap:0;display:flex}.editor-tabs{border-block-end:none;gap:0;display:flex}.editor-tabs__btn{padding-block:var(--token-spacing-3);padding-inline:var(--token-spacing-4);background-color:var(--token-color-background-elevated);color:var(--token-color-text-muted);border:1px solid var(--token-color-border-default);font-family:var(--token-font-family-mono);font-size:var(--token-font-size-xs);font-weight:var(--token-font-weight-medium);cursor:pointer;transition:background-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out), color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);border-inline-end:none;flex:1}.editor-tabs__btn:first-child{border-radius:var(--token-border-radius-xl) 0 0 0}.editor-tabs__btn:last-child{border-inline-end:1px solid var(--token-color-border-default);border-radius:0 var(--token-border-radius-xl) 0 0}.editor-tabs__btn:hover{background-color:var(--token-color-background-surface);color:var(--token-color-text-primary)}.editor-tabs__btn--active{background-color:var(--token-color-background-base);color:var(--token-color-text-primary);border-block-end:1px solid var(--token-color-background-base)}.live-editor__output-toolbar{padding-block:var(--token-spacing-2);padding-inline:var(--token-spacing-4);background-color:var(--token-color-background-elevated);border-inline:1px solid var(--token-color-border-default);border-block-end:1px solid var(--token-color-border-default);justify-content:flex-end;align-items:center;display:flex}.live-editor__code-block{background-color:var(--token-color-background-base);border:1px solid var(--token-color-border-default);border-radius:0 0 var(--token-border-radius-xl) var(--token-border-radius-xl);padding:var(--token-spacing-5);min-block-size:16rem;max-block-size:22rem;font-family:var(--token-font-family-mono);font-size:var(--token-font-size-sm);line-height:var(--token-font-line-height-relaxed);color:var(--token-color-text-secondary);white-space:pre;scrollbar-width:thin;scrollbar-color:var(--token-color-border-default) transparent;border-block-start:none;overflow:auto}.usage{padding-block:var(--token-spacing-24)}.usage__steps{gap:var(--token-spacing-12);flex-direction:column;list-style:none;display:flex}.usage__step{gap:var(--token-spacing-6);grid-template-columns:3rem 1fr;align-items:start;display:grid}@media (width>=40rem){.usage__step{gap:var(--token-spacing-8);grid-template-columns:4rem 1fr}}.usage__step-number{font-size:var(--token-font-size-3xl);font-weight:var(--token-font-weight-bold);line-height:var(--token-font-line-height-none);color:color-mix(in srgb, var(--token-color-orange-500) 65%, transparent);letter-spacing:var(--token-font-letter-spacing-tight);font-variant-numeric:tabular-nums;padding-block-start:var(--token-spacing-1)}.usage__step-content{gap:var(--token-spacing-4);flex-direction:column;min-inline-size:0;display:flex}.usage__step-title{font-size:var(--token-font-size-xl);font-weight:var(--token-font-weight-semibold);color:var(--token-color-text-primary)}.usage__step-desc{color:var(--token-color-text-secondary);font-size:var(--token-font-size-base);line-height:var(--token-font-line-height-relaxed)}.usage__code-wrapper{position:relative}.site-footer{padding-block:var(--token-spacing-8);border-block-start:1px solid var(--token-color-border-subtle)}.site-footer__inner{justify-content:center;align-items:center;display:flex}.site-footer__stack{font-size:var(--token-font-size-sm);color:var(--token-color-text-muted)}.footer-link{color:var(--token-color-text-secondary);text-decoration:underline;-webkit-text-decoration-color:var(--token-color-border-default);text-decoration-color:var(--token-color-border-default);text-underline-offset:3px;transition:color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out)}.footer-link:hover{color:var(--token-color-orange-400);-webkit-text-decoration-color:var(--token-color-orange-500);text-decoration-color:var(--token-color-orange-500)}.tabs{flex-direction:column;gap:0;display:flex}.tabs__list{scrollbar-width:none;gap:var(--token-spacing-1);border-block-end:1px solid var(--token-color-border-default);margin-block-end:0;padding-block-end:0;display:flex;overflow-x:auto}.tabs__list::-webkit-scrollbar{display:none}.tabs__btn{align-items:center;gap:var(--token-spacing-2);padding-block:var(--token-spacing-3);padding-inline:var(--token-spacing-4);color:var(--token-color-text-muted);font-size:var(--token-font-size-sm);font-weight:var(--token-font-weight-medium);cursor:pointer;white-space:nowrap;border-radius:var(--token-border-radius-md) var(--token-border-radius-md) 0 0;transition:color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out), border-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);background:0 0;border:none;border-block-end:2px solid #0000;margin-block-end:-1px;display:inline-flex}.tabs__btn-icon svg{block-size:.875rem;inline-size:.875rem}.tabs__btn:hover{color:var(--token-color-text-primary)}.tabs__btn--active,.tabs__btn[aria-selected=true]{color:var(--token-color-orange-400);border-block-end-color:var(--token-color-orange-500)}.tabs__panel{padding-block-start:var(--token-spacing-8)}.btn{align-items:center;gap:var(--token-spacing-2);padding-block:var(--token-spacing-3);padding-inline:var(--token-spacing-5);border-radius:var(--token-border-radius-lg);font-size:var(--token-font-size-sm);font-weight:var(--token-font-weight-semibold);line-height:var(--token-font-line-height-none);cursor:pointer;transition:background-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out), border-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out), color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out), box-shadow var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);border:1px solid #0000;text-decoration:none;display:inline-flex}.btn__icon svg{block-size:1rem;inline-size:1rem}.btn--primary{background-color:var(--token-color-orange-500);color:var(--token-color-background-base);border-color:var(--token-color-orange-500)}.btn--primary:hover{background-color:var(--token-color-orange-600);border-color:var(--token-color-orange-600);box-shadow:var(--token-shadow-glow-orange)}.btn--ghost{color:var(--token-color-text-secondary);border-color:var(--token-color-border-default);background-color:#0000}.btn--ghost:hover{background-color:var(--token-color-background-surface);color:var(--token-color-text-primary);border-color:var(--token-color-border-default)}.copy-btn{align-items:center;gap:var(--token-spacing-1);padding-block:var(--token-spacing-1);padding-inline:var(--token-spacing-3);background-color:var(--token-color-background-elevated);color:var(--token-color-text-muted);border:1px solid var(--token-color-border-default);border-radius:var(--token-border-radius-md);font-size:var(--token-font-size-xs);font-weight:var(--token-font-weight-medium);cursor:pointer;transition:background-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out), color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);display:inline-flex}.copy-btn:hover{background-color:var(--token-color-background-surface);color:var(--token-color-text-primary)}.copy-btn--copied{color:var(--token-color-sky-400);border-color:color-mix(in srgb, var(--token-color-sky-400) 30%, transparent)}.copy-btn__icon svg{block-size:.75rem;inline-size:.75rem}.copy-btn--inline{z-index:1;position:absolute;inset-block-start:var(--token-spacing-3);inset-inline-end:var(--token-spacing-3)}.download-btn{align-items:center;gap:var(--token-spacing-1);padding-block:var(--token-spacing-1);padding-inline:var(--token-spacing-3);background-color:var(--token-color-background-elevated);color:var(--token-color-text-muted);border:1px solid var(--token-color-border-default);border-radius:var(--token-border-radius-md);font-size:var(--token-font-size-xs);font-weight:var(--token-font-weight-medium);cursor:pointer;transition:background-color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out), color var(--token-motion-duration-fast) var(--token-motion-easing-ease-out);display:inline-flex}.download-btn:hover{background-color:var(--token-color-background-surface);color:var(--token-color-text-primary)}.download-btn--done{color:var(--token-color-orange-500);border-color:color-mix(in srgb, var(--token-color-orange-500) 30%, transparent)}.download-btn__icon svg{block-size:.75rem;inline-size:.75rem}}