.demo-bar{z-index:60;border-block-end:1px solid var(--oo-color-border);background-color:var(--oo-color-surface);font-size:var(--oo-text-sm);position:sticky;inset-block-start:0}.demo-bar__inner{align-items:center;gap:var(--oo-space-2) var(--oo-space-4);padding-block:var(--oo-space-2);flex-wrap:wrap;display:flex}.demo-bar__home{color:var(--oo-color-text);font-family:var(--oo-font-mono);font-weight:var(--oo-font-weight-bold);margin-inline-end:auto;text-decoration:none}.demo-bar__links{gap:var(--oo-space-1) var(--oo-space-3);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.demo-bar__links a{color:var(--oo-color-text-muted);text-decoration:none}.demo-bar__links a:hover,.demo-bar__links a[aria-current=page]{color:var(--oo-color-accent)}.demo-intro{gap:var(--oo-space-3);padding-block:var(--oo-space-8) var(--oo-space-6);display:grid}.demo-intro h1{font-size:var(--oo-text-3xl)}.demo-intro p{max-inline-size:var(--oo-prose-width);color:var(--oo-color-text-muted)}.demo-variant{padding-block-end:var(--oo-space-8)}.demo-variant__label{align-items:baseline;gap:var(--oo-space-2) var(--oo-space-4);padding-block:var(--oo-space-3);border-block:1px dashed var(--oo-color-border-strong);flex-wrap:wrap;margin-block-end:var(--oo-space-4);display:flex}.demo-variant__title{font-family:var(--oo-font-sans);font-size:var(--oo-text-sm);font-weight:var(--oo-font-weight-bold);letter-spacing:.1em;text-transform:uppercase;scroll-margin-block-start:6rem}.demo-variant__label code{color:var(--oo-color-text-muted);font-size:var(--oo-text-sm)}.demo-frame{border:1px solid var(--oo-color-border)}.demo-index{gap:var(--oo-space-4);padding:0 0 var(--oo-space-8);grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));margin:0;list-style:none;display:grid}.demo-index a{gap:var(--oo-space-1);block-size:100%;padding:var(--oo-space-5);border:1px solid var(--oo-color-border);border-radius:var(--oo-radius-md);background-color:var(--oo-color-surface);color:var(--oo-color-text);text-decoration:none;display:grid}.demo-index a:hover{border-color:var(--oo-color-accent)}.demo-index strong{font-family:var(--oo-font-display);font-size:var(--oo-text-lg)}.demo-index span{color:var(--oo-color-text-muted);font-size:var(--oo-text-sm)}.demo-swatches{gap:var(--oo-space-3);grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin:0;padding:0;list-style:none;display:grid}.demo-swatches li{border:1px solid var(--oo-color-border);border-radius:var(--oo-radius-md);font-size:var(--oo-text-xs);overflow:hidden}.demo-swatches span{border-block-end:1px solid var(--oo-color-border);block-size:3.5rem;display:block}.demo-swatches code{padding:var(--oo-space-2);display:block}.demo-type-scale>*+*{margin-block-start:var(--oo-space-3)}