@layer components{@media (prefers-reduced-motion:no-preference){.docs-nav-group{view-transition-name:nav;width:fit-content;height:100%;scale:1}}::view-transition-old(nav),::view-transition-new(nav){height:100%}::view-transition-group(nav){animation-duration:.4s;animation-timing-function:cubic-bezier(.23,1.22,.64,1);scale:1}@media (width>=50em){.docs-layout{grid-template-columns:1fr auto;grid-auto-flow:dense;align-items:start;gap:var(--space-lg);z-index:var(--z-2);display:grid;position:relative;&>article>:first-child{margin-block-start:0}&>nav{border-inline-start:var(--border-width-sm) solid var(--color-border);grid-column:2;padding-inline-start:var(--space-lg)}}}.demo-grid{&>div{padding:var(--space-sm);color:var(--color-text);background-color:var(--color-bg-dark);font-size:var(--font-size-sm)}}.demo-chips{margin-block:0 var(--space-xs);flex-wrap:wrap;list-style:none;display:flex;&>li{inline-size:auto;padding-block:var(--space-md);padding-inline:var(--space-sm);color:var(--color-text);background-color:var(--color-bg);font-size:var(--font-size-xs);text-align:center;flex-grow:1;margin:0;&>span{color:var(--color-text)}}}}