@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}.hero{margin-block:var(--space-xxl);font-size:clamp(3.6em,8vw,7em);line-height:1;font-weight:var(--font-weight-xs);color:var(--color-accent);z-index:var(--z-2);position:relative}@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)}}}.grease-marks{pointer-events:none;z-index:-1;opacity:1;inline-size:100%;display:none;position:absolute;inset-inline-start:-80rem;rotate:-8deg;.js &{display:block}&>*{border-width:0;border-block-start-width:10rem;border-style:solid;border-color:light-dark(oklch(from var(--color-accent)var(--100)),oklch(from var(--color-accent)var(--700)/15%));mix-blend-mode:soft-light;border-radius:100%;block-size:150rem;inline-size:150rem;position:absolute;inset-block-start:0;inset-inline-start:0;.high-contrast &{display:none}}}.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)}}}.nav-tree{& .tree-children{margin-left:1.2em;position:relative;&:before{content:"";background-color:var(--color-border);opacity:.6;width:1px;position:absolute;top:0;bottom:0;left:-.6em}}& .tree-children .tree-item{position:relative;&:before{content:"";background-color:var(--color-border);opacity:.6;width:.5em;height:1px;position:absolute;top:1.25em;left:-.6em}}& .tree-children .tree-item--last:after{content:"";background-color:var(--color-bg);z-index:2;width:1px;position:absolute;top:1.25em;bottom:-100vh;left:-.6em}}}