@layer components{.demo-motion{gap:0;display:grid}.demo-motion>:first-child{outline:1px solid var(--color-line-base);border-radius:var(--radius-md) var(--radius-md) 0 0;background:var(--color-demo-surface)}.demo-motion>.demo-controls{border:1px solid var(--color-line-base);border-top:1px solid var(--color-line-subtle);border-radius:0 0 var(--radius-md) var(--radius-md);background:var(--color-surface-raised);padding:.75rem}.demo-motion>.demo-controls .demo-button{min-height:2.25rem;padding-inline:.75rem}.demo-motion[data-playing=false] *{animation-play-state:paused!important}.demo-viewport-frame{background:var(--color-surface-muted);min-width:0;padding:.75rem}.demo-viewport-shell{outline:1px solid var(--color-line-base);border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--color-demo-surface);max-width:100%;overflow-x:auto}.demo-container-shell{max-width:100%;padding:var(--spacing-lg);border-bottom:1px solid var(--color-line-base);background:var(--color-surface-muted);overflow-x:auto}.site-demo .demo-viewport{background:0 0;border:0;width:100%;max-width:none;display:block}.demo-viewport-toolbar{padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--color-line-base);border-top:1px solid var(--color-line-subtle);border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--color-surface-raised);flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}[data-demo-container] .demo-viewport-toolbar{border:0;gap:.75rem 1.25rem}[data-demo-container] .demo-viewport-toolbar .demo-controls{gap:.5rem}[data-demo-container] .demo-viewport-toolbar .demo-button{min-height:2.25rem;padding:.375rem .75rem}[data-demo-container] .demo-viewport-toolbar input[type=range]{width:clamp(7rem,24vw,12rem)}[data-demo-container] .demo-viewport-status{border:1px solid var(--color-line-base);border-radius:var(--radius-xs);background:var(--color-surface-base);padding:.3rem .5rem;font-size:.75rem}.demo-viewport-presets,.demo-viewport-width{align-items:center;gap:var(--spacing-xs);max-width:100%;display:inline-flex}.demo-viewport-presets{border:1px solid var(--color-line-base);border-radius:var(--radius-sm);background:var(--color-surface-muted);flex-wrap:wrap;gap:.2rem;padding:.2rem}.demo-viewport-presets .demo-button{background:0 0;border-color:#0000;min-height:2.1rem}.demo-viewport-presets .demo-button[aria-pressed=true]{border-color:var(--color-line-base);background:var(--color-surface-raised);box-shadow:var(--shadow-xs)}.demo-viewport-width{min-height:2.5rem}.demo-viewport-width input{min-width:0}.demo-viewport-toolbar input[type=range]{width:7rem;accent-color:var(--color-demo-blue)}.demo-viewport-status{color:var(--color-text-body);font:600 .6875rem var(--font-family-mono);font-variant-numeric:tabular-nums;margin-left:auto}.demo-recipe{margin-block:var(--spacing-2xl)}.demo-recipe-heading{justify-content:space-between;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.demo-recipe-heading h3{margin:var(--spacing-3xs) 0 0;font-size:1rem}.demo-recipe-link{white-space:nowrap;font-size:.6875rem}.demo-index{gap:var(--spacing-md);margin-block:var(--spacing-xl);display:grid}.demo-index-group{min-width:0;padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-demo-line)}.demo-index .demo-index-title{margin:0 0 var(--spacing-xs);color:var(--color-demo-muted);font:.6875rem/1.5 var(--font-family-mono)}.demo-index ul{gap:var(--spacing-2xs) var(--spacing-xs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.demo-index li{margin:0;padding:0}.demo-index a{border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-demo-text);background:var(--color-demo-surface);border:1px solid #0000;font-size:.75rem;line-height:1.5;text-decoration:none;display:block}.demo-index a:hover{color:var(--color-demo-blue);border-color:var(--color-demo-line)}.demo-index a:focus-visible,.demo-catalog summary:focus-visible,.demo-catalog a:focus-visible{outline:2px solid var(--color-demo-blue);outline-offset:3px}.demo-catalog-group{margin-block:var(--spacing-xl)}.demo-catalog-group>h3{align-items:baseline;gap:var(--spacing-sm);flex-wrap:wrap;scroll-margin-top:6rem;display:flex}.demo-catalog-group>h3>span{color:var(--color-demo-muted);font:.6875rem/1.5 var(--font-family-mono);margin-left:auto}.demo-catalog .demo-recipe{border-top:1px solid var(--color-demo-line);margin:0}.demo-catalog .demo-recipe:last-child{border-bottom:1px solid var(--color-demo-line)}.demo-recipe>summary{gap:var(--spacing-2xs) var(--spacing-xs);padding:var(--spacing-md) var(--spacing-xs);cursor:pointer;grid-template-columns:1rem minmax(0,1fr);align-items:baseline;font-size:.8125rem;line-height:1.6;list-style:none;display:grid}.demo-catalog .demo-recipe>summary{border-radius:var(--radius-xs);min-height:3.5rem;color:var(--color-demo-text);grid-template-columns:1rem minmax(0,1fr) auto;align-items:center;padding:.75rem;font-size:.875rem;font-weight:550}.demo-catalog .demo-recipe>summary:hover{background:var(--color-demo-surface)}.demo-catalog .demo-recipe[open]>summary{background:var(--color-demo-surface);color:var(--color-text-strong)}.demo-recipe>summary::-webkit-details-marker{display:none}.demo-recipe-marker:before{content:"+";color:var(--color-demo-muted);font-family:var(--font-family-mono)}.demo-catalog .demo-recipe-marker:before{color:var(--color-demo-blue);font-size:1rem}.demo-recipe[open] .demo-recipe-marker:before{content:"−"}.demo-recipe>summary:hover{color:var(--color-demo-blue)}.demo-recipe>summary>code{color:var(--color-demo-muted);overflow-wrap:anywhere;grid-column:2;justify-self:start;font-size:.6875rem}.demo-catalog .demo-recipe>summary>code{border:1px solid var(--color-demo-line);border-radius:var(--radius-xs);background:var(--color-demo-canvas);text-align:right;grid-column:3;max-width:10rem;padding:.125rem .375rem;font-weight:500}.demo-recipe-content{min-width:0;padding-bottom:var(--spacing-md)}.demo-catalog .demo-recipe-content{padding:.5rem .75rem 1rem 2.5rem}.demo-recipe-content>.demo-recipe-link{padding-block:var(--spacing-xs);display:inline-block}.demo-catalog .demo-recipe-link{color:var(--color-demo-blue);white-space:normal;font-size:.75rem;font-weight:550}.demo-recipe-content>.site-demo{margin-block:var(--spacing-sm) 0}@media not (min-width:40rem){.demo-catalog .demo-recipe>summary>code{grid-area:2/2;justify-self:start}}}@layer theme{:root,:host{--color-line-base:#0000001f;--radius-md:.375rem;--color-surface-raised:#fff;--color-gray-90:#1e1e1e;--color-line-subtle:#0000000f;--color-surface-muted:var(--color-neutral-5);--color-neutral-5:#f2f5f8;--color-gray-100:#0a0a0a;--radius-sm:.25rem;--spacing-lg:1.5rem;--spacing-xs:.5rem;--spacing-md:1rem;--radius-xs:.125rem;--color-surface-base:var(--color-neutral-0);--color-neutral-0:#f8fafc;--color-gray-95:#131313;--shadow-xs:0 0 0 1px #0000000a, 0 1px 2px -1px #00000014;--color-blue-60:#2248ff;--color-blue-40:#3989ff;--color-text-body:var(--color-neutral-70);--color-neutral-70:#414452;--color-gray-30:#a9a9a9;--font-family-mono:var(--font-mono,ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-mono:"IBM Plex Mono";--spacing-2xl:3rem;--spacing-sm:.75rem;--spacing-3xs:.25rem;--spacing-xl:2rem;--color-text-muted:var(--color-neutral-60);--color-neutral-60:#585d6e;--color-gray-40:#8f8f8f;--spacing-2xs:.375rem;--color-text-strong:var(--color-neutral-100);--color-neutral-100:#08090c}@supports (color:lab(0% 0 0)){:root,:host{--color-line-base:lab(0% 0 0/.12);--color-surface-raised:lab(100% 0 0);--color-gray-90:lab(11.26% .00000745058 -.00000298023);--color-line-subtle:lab(0% 0 0/.06);--color-neutral-5:lab(96.2809% -.450373 -1.74739);--color-gray-100:lab(2.75381% 0 0);--color-neutral-0:lab(98.1184% -.366926 -1.18192);--color-gray-95:lab(5.71933% 0 0);--shadow-xs:0 0 0 1px lab(0% 0 0/.04), 0 1px 2px -1px lab(0% 0 0/.08);--color-blue-60:lab(39.7317% 43.0116 -95.0928);--color-blue-40:lab(56.9889% 7.3145 -66.9423);--color-neutral-70:lab(29.0712% .942826 -8.89763);--color-gray-30:lab(69.26% -.0000298023 0);--color-neutral-60:lab(39.4847% 1.07358 -10.3917);--color-gray-40:lab(59.4% 0 0);--color-neutral-100:lab(2.45684% .114791 -1.30006)}}.light{--color-line-base:#0000001f;--color-demo-surface:var(--color-surface-raised);--color-surface-raised:#fff;--color-line-subtle:#0000000f;--color-surface-muted:var(--color-neutral-5);--color-surface-base:var(--color-neutral-0);--shadow-xs:0 0 0 1px #0000000a, 0 1px 2px -1px #00000014;--color-demo-blue:var(--color-blue-60);--color-text-body:var(--color-neutral-70);--color-demo-line:var(--color-line-subtle);--color-demo-muted:var(--color-text-muted);--color-text-muted:var(--color-neutral-60);--color-demo-text:var(--color-text-body);--color-text-strong:var(--color-neutral-100);--color-demo-canvas:var(--color-surface-base)}@supports (color:lab(0% 0 0)){.light{--color-line-base:lab(0% 0 0/.12);--color-surface-raised:lab(100% 0 0);--color-line-subtle:lab(0% 0 0/.06);--shadow-xs:0 0 0 1px lab(0% 0 0/.04), 0 1px 2px -1px lab(0% 0 0/.08)}}.dark{--color-line-base:#ffffff1f;--color-demo-surface:var(--color-surface-raised);--color-surface-raised:var(--color-gray-90);--color-line-subtle:#ffffff0f;--color-surface-muted:var(--color-gray-100);--color-surface-base:var(--color-gray-95);--shadow-xs:0 0 0 1px #ffffff0a, 0 1px 2px -1px #0000004d;--color-demo-blue:var(--color-blue-40);--color-text-body:var(--color-gray-30);--color-demo-line:var(--color-line-subtle);--color-demo-muted:var(--color-text-muted);--color-text-muted:var(--color-gray-40);--color-demo-text:var(--color-text-body);--color-text-strong:#fff;--color-demo-canvas:var(--color-surface-base)}@supports (color:lab(0% 0 0)){.dark{--color-line-base:lab(100% 0 0/.12);--color-line-subtle:lab(100% 0 0/.06);--shadow-xs:0 0 0 1px lab(100% 0 0/.04), 0 1px 2px -1px lab(0% 0 0/.3);--color-text-strong:lab(100% 0 0)}}}