:root{--color-accent:oklch(68% .19 28);--color-accent-strong:oklch(54% .22 24);--color-bg:oklch(98% .018 96);--color-border:oklch(86% .022 96);--color-ink:oklch(20% .028 255);--color-muted:oklch(43% .034 255);--color-panel:oklch(100% 0 0/.76);--color-panel-strong:oklch(100% 0 0/.92);--font-body:system-ui, "Segoe UI", sans-serif;--font-mono:"SFMono-Regular", "Consolas", "Liberation Mono", monospace;--shadow-soft:0 1.5rem 5rem oklch(20% .03 255/.13);--size-page-max:72rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;color:var(--color-ink);font:1rem/1.5 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}body{background:linear-gradient(135deg, oklch(93% .055 78/.7), transparent 42%), linear-gradient(315deg, oklch(91% .06 202/.55), transparent 48%), var(--color-bg);min-block-size:100svh;margin:0}a{color:var(--color-ink)}code{color:var(--color-ink);font-family:var(--font-mono);background:oklch(94% .02 255);border-radius:.25rem;padding-block:.08em;padding-inline:.3em;font-size:.95em}h1,h2,p{margin-block:0}h1,h2{color:var(--color-ink);letter-spacing:0;font-weight:760;line-height:1}h1{max-inline-size:8.4em;font-size:clamp(3rem,9vw,7.5rem)}h2{font-size:clamp(1.5rem,3vw,2.25rem)}ul{margin-block:var(--space-6) 0;padding-inline-start:1.25rem}li+li{margin-block-start:var(--space-2)}.demo-page{max-inline-size:var(--size-page-max);min-block-size:100svh;padding:var(--space-4);margin-inline:auto;display:grid}.demo-stage{background:radial-gradient(circle at 18% 24%, oklch(84% .14 82/.38), transparent 24rem), radial-gradient(circle at 82% 18%, oklch(82% .13 208/.34), transparent 26rem), var(--color-panel);border:1px solid var(--color-border);box-shadow:var(--shadow-soft);min-block-size:min(44rem,100svh - 2rem);padding:clamp(var(--space-8), 7vw, 5.5rem);border-radius:.5rem;align-content:center;display:grid;position:relative;overflow:clip}.demo-copy{gap:var(--space-4);z-index:1;max-inline-size:52rem;display:grid;position:relative}.eyebrow{color:var(--color-accent-strong);letter-spacing:.11em;text-transform:uppercase;font-size:.82rem;font-weight:800}.lede{color:var(--color-muted);max-inline-size:44rem;font-size:clamp(1.1rem,2vw,1.45rem)}.notes{align-items:start;gap:var(--space-6);padding-block:var(--space-10) var(--space-8);padding-inline:clamp(var(--space-2), 4vw, var(--space-8));grid-template-columns:minmax(0,1fr) minmax(18rem,.5fr);display:grid}.notes-copy{max-inline-size:42rem}.notes-copy li{color:var(--color-muted)}.support-note{background:var(--color-panel-strong);border:1px solid var(--color-border);color:var(--color-muted);gap:var(--space-4);padding:var(--space-4);border-radius:.5rem;margin-block-start:.25rem;display:grid}.support-note-random{display:none}.property-toggle{background:var(--color-ink);color:var(--color-bg);cursor:pointer;font:inherit;letter-spacing:0;border:0;border-radius:.375rem;justify-self:start;padding-block:.7rem;padding-inline:.9rem;font-weight:750}.property-toggle:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}.property-toggle:hover{background:var(--color-accent-strong)}@supports (width:random(1px, 2px)){.support-note-fallback{display:none}.support-note-random{display:inline}}@media (prefers-contrast:more){:root{--color-border:oklch(46% .03 255);--color-muted:oklch(28% .03 255);--color-panel:oklch(100% 0 0/.94);--color-panel-strong:oklch(100% 0 0)}}@media (width<48rem){h1{font-size:clamp(2.8rem,17vw,4.8rem)}.demo-page{padding:var(--space-3)}.demo-stage{min-block-size:36rem;padding:var(--space-6)}.notes{gap:var(--space-4);padding-inline:var(--space-3);grid-template-columns:1fr}}.confetti-field{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:clip}@layer fallback{.confetti-piece{--piece-alpha:.72;--piece-hue:210deg;--piece-radius:.12rem;--piece-ratio:1;--piece-rotation:0deg;--piece-size:.62rem;--piece-static-y:50%;--piece-x:50%;background:oklch(72% .2 var(--piece-hue) / var(--piece-alpha));block-size:var(--piece-size);border-radius:var(--piece-radius);inline-size:calc(var(--piece-size) * var(--piece-ratio));opacity:var(--piece-alpha);transform:rotate(var(--piece-rotation));transform-origin:50%;position:absolute;inset-block-start:var(--piece-static-y);inset-inline-start:var(--piece-x)}.confetti-piece:nth-child(8n+1){--piece-hue:16deg;--piece-ratio:.48;--piece-rotation:-18deg;--piece-static-y:14%;--piece-x:7%}.confetti-piece:nth-child(8n+2){--piece-hue:54deg;--piece-ratio:1.36;--piece-rotation:22deg;--piece-static-y:68%;--piece-x:18%}.confetti-piece:nth-child(8n+3){--piece-hue:132deg;--piece-ratio:.72;--piece-rotation:-54deg;--piece-static-y:34%;--piece-x:31%}.confetti-piece:nth-child(8n+4){--piece-hue:188deg;--piece-ratio:1.52;--piece-rotation:68deg;--piece-static-y:82%;--piece-x:43%}.confetti-piece:nth-child(8n+5){--piece-hue:224deg;--piece-ratio:.58;--piece-rotation:118deg;--piece-static-y:23%;--piece-x:58%}.confetti-piece:nth-child(8n+6){--piece-hue:284deg;--piece-ratio:1.18;--piece-rotation:-86deg;--piece-static-y:73%;--piece-x:71%}.confetti-piece:nth-child(8n+7){--piece-hue:326deg;--piece-ratio:.86;--piece-rotation:42deg;--piece-static-y:45%;--piece-x:84%}.confetti-piece:nth-child(8n){--piece-hue:356deg;--piece-ratio:1.42;--piece-rotation:-132deg;--piece-static-y:9%;--piece-x:94%}.confetti-piece:nth-child(5n){--piece-alpha:.54;--piece-radius:999rem;--piece-size:.48rem}.confetti-piece:nth-child(5n+2){--piece-alpha:.82;--piece-radius:.04rem;--piece-size:.82rem}.confetti-piece:nth-child(5n+4){--piece-alpha:.64;--piece-radius:.18rem;--piece-size:.7rem}.confetti-piece{filter:saturate(.84)}}@supports (width:random(--k element-scoped, 1px, 2px)){.confetti-piece{--piece-alpha:random(--piece-alpha element-scoped, .48, .92, .04);--piece-delay:random(--piece-delay element-scoped, -9s, 0s, .25s);--piece-drift:random(--piece-drift element-scoped, -18rem, 18rem, .5rem);--piece-duration:random(--piece-duration element-scoped, 4s, 10s, .25s);--piece-end-spin:calc(var(--piece-rotation) + var(--piece-spin));--piece-end-y:calc(130svh + var(--piece-y));--piece-hue:random(--piece-hue element-scoped, 0deg, 360deg);--piece-radius:random(--piece-radius element-scoped, .04rem, .32rem, .02rem);--piece-ratio:random(--piece-ratio element-scoped, .45, 1.65, .05);--piece-rotation:random(--piece-rotation element-scoped, -1turn, 1turn);--piece-size:random(--piece-size element-scoped, .35rem, 1rem, .05rem);--piece-spin:random(--piece-spin element-scoped, -1turn, 1turn);--piece-static-y:random(--piece-static-y element-scoped, 4%, 92%, 1%);--piece-x:random(--piece-x element-scoped, 0%, 100%, 1%);--piece-y:random(--piece-y element-scoped, -18svh, 16svh, 1svh);animation-delay:var(--piece-delay);animation-duration:var(--piece-duration);filter:none;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:infinite;inset-block-start:-20svh}}@keyframes confetti-fall{0%{opacity:0;transform:translate3d(0, var(--piece-y), 0) rotate(var(--piece-rotation))}12%,84%{opacity:var(--piece-alpha)}to{opacity:0;transform:translate3d(var(--piece-drift), var(--piece-end-y), 0) rotate(var(--piece-end-spin))}}@media (prefers-reduced-motion:reduce){.confetti-piece{transform:rotate(var(--piece-rotation));animation:none;inset-block-start:var(--piece-static-y)}}