@layer components{.demo-waterfall{margin:0;container:demo-waterfall/inline-size}.demo-waterfall-axis{border-bottom:1px solid var(--color-demo-line);color:var(--color-demo-muted);font:550 .75rem/1.5 var(--font-family-mono);justify-content:space-between;margin-left:9.5rem;padding-bottom:.625rem;display:flex}.demo-waterfall .demo-waterfall-rows{gap:var(--spacing-sm);margin:.75rem 0 0;padding:0;list-style:none;display:grid}.demo-waterfall-rows li{align-items:center;gap:var(--spacing-md);grid-template-columns:8.5rem minmax(0,1fr);margin:0;padding:0;display:grid}.demo-waterfall-label{color:var(--color-demo-text);font:550 .75rem/1.5 var(--font-family-mono);overflow-wrap:anywhere}.demo-waterfall-track{border:1px solid var(--color-demo-line);border-radius:var(--radius-xs);background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--color-demo-grid) calc(25% - 1px) 25%), var(--color-demo-surface);height:1.75rem;position:relative}.demo-waterfall-bar{background:var(--demo-tone);border-radius:2px;position:absolute;inset-block:.375rem}.demo-style-comparison>.site-demo{margin-block:0}.demo-style-comparison{margin-block:var(--spacing-lg)}@container demo-waterfall not (min-width:27rem){.demo-waterfall-axis{margin-left:0}.demo-waterfall-rows li{gap:var(--spacing-2xs);grid-template-columns:minmax(0,1fr)}}}@layer theme{:root,:host{--color-line-subtle:#0000000f;--color-text-muted:var(--color-neutral-60);--color-neutral-60:#585d6e;--color-gray-40:#8f8f8f;--font-family-mono:var(--font-mono,ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-mono:"IBM Plex Mono";--spacing-sm:.75rem;--spacing-md:1rem;--color-text-body:var(--color-neutral-70);--color-neutral-70:#414452;--color-gray-30:#a9a9a9;--radius-xs:.125rem;--color-gray-50:#727272;--color-surface-raised:#fff;--color-gray-90:#1e1e1e;--spacing-lg:1.5rem;--spacing-2xs:.375rem}@supports (color:lab(0% 0 0)){:root,:host{--color-line-subtle:lab(0% 0 0/.06);--color-neutral-60:lab(39.4847% 1.07358 -10.3917);--color-gray-40:lab(59.4% 0 0);--color-neutral-70:lab(29.0712% .942826 -8.89763);--color-gray-30:lab(69.26% -.0000298023 0);--color-gray-50:lab(48.032% 0 0);--color-surface-raised:lab(100% 0 0);--color-gray-90:lab(11.26% .00000745058 -.00000298023)}}.light{--color-demo-line:var(--color-line-subtle);--color-line-subtle:#0000000f;--color-demo-muted:var(--color-text-muted);--color-text-muted:var(--color-neutral-60);--color-demo-text:var(--color-text-body);--color-text-body:var(--color-neutral-70);--color-demo-grid:color-mix(in oklab, var(--color-gray-50) 9%, transparent);--color-demo-surface:var(--color-surface-raised);--color-surface-raised:#fff}@supports (color:lab(0% 0 0)){.light{--color-line-subtle:lab(0% 0 0/.06);--color-surface-raised:lab(100% 0 0)}}.dark{--color-demo-line:var(--color-line-subtle);--color-line-subtle:#ffffff0f;--color-demo-muted:var(--color-text-muted);--color-text-muted:var(--color-gray-40);--color-demo-text:var(--color-text-body);--color-text-body:var(--color-gray-30);--color-demo-grid:color-mix(in oklab, var(--color-gray-50) 12%, transparent);--color-demo-surface:var(--color-surface-raised);--color-surface-raised:var(--color-gray-90)}@supports (color:lab(0% 0 0)){.dark{--color-line-subtle:lab(100% 0 0/.06)}}}