*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ub-bg);color:var(--ub-text-primary);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:1rem;line-height:1.6;text-wrap:pretty;-webkit-font-smoothing:antialiased;transition:background-color var(--ub-duration-base) var(--ub-ease-out)}a{color:inherit}code{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85em}html,.sidebar,.scroll-demo,.code-block pre,.showcase-code pre{transition:scrollbar-color var(--ub-duration-base) var(--ub-ease-out)}[data-accent=blue]{--ub-accent: var(--ub-blue-600);--ub-accent-hover: var(--ub-blue-700);--ub-accent-contrast: var(--ub-white);--ub-ring: var(--ub-blue-400)}[data-theme=dark][data-accent=blue]{--ub-accent: var(--ub-blue-500);--ub-accent-hover: var(--ub-blue-400);--ub-ring: var(--ub-blue-500)}[data-accent=violet]{--ub-accent: var(--ub-violet-600);--ub-accent-hover: var(--ub-violet-700);--ub-accent-contrast: var(--ub-white);--ub-ring: var(--ub-violet-400)}[data-theme=dark][data-accent=violet]{--ub-accent: var(--ub-violet-500);--ub-accent-hover: var(--ub-violet-400);--ub-ring: var(--ub-violet-500)}[data-accent=teal]{--ub-accent: var(--ub-teal-600);--ub-accent-hover: var(--ub-teal-700);--ub-accent-contrast: var(--ub-white);--ub-ring: var(--ub-teal-400)}[data-theme=dark][data-accent=teal]{--ub-accent: var(--ub-teal-500);--ub-accent-hover: var(--ub-teal-400);--ub-ring: var(--ub-teal-500)}[data-accent=fuchsia]{--ub-accent: var(--ub-fuchsia-600);--ub-accent-hover: var(--ub-fuchsia-700);--ub-accent-contrast: var(--ub-white);--ub-ring: var(--ub-fuchsia-400)}[data-theme=dark][data-accent=fuchsia]{--ub-accent: var(--ub-fuchsia-500);--ub-accent-hover: var(--ub-fuchsia-400);--ub-ring: var(--ub-fuchsia-500)}[data-accent=rose]{--ub-accent: var(--ub-rose-600);--ub-accent-hover: var(--ub-rose-700);--ub-accent-contrast: var(--ub-white);--ub-ring: var(--ub-rose-400)}[data-theme=dark][data-accent=rose]{--ub-accent: var(--ub-rose-500);--ub-accent-hover: var(--ub-rose-400);--ub-ring: var(--ub-rose-500)}[data-accent=red]{--ub-accent: var(--ub-red-600);--ub-accent-hover: var(--ub-red-700);--ub-accent-contrast: var(--ub-white);--ub-ring: var(--ub-red-400)}[data-theme=dark][data-accent=red]{--ub-accent: var(--ub-red-500);--ub-accent-hover: var(--ub-red-400);--ub-ring: var(--ub-red-500)}[data-accent=orange]{--ub-accent: var(--ub-orange-600);--ub-accent-hover: var(--ub-orange-700);--ub-accent-contrast: var(--ub-white);--ub-ring: var(--ub-orange-400)}[data-theme=dark][data-accent=orange]{--ub-accent: var(--ub-orange-500);--ub-accent-hover: var(--ub-orange-400);--ub-ring: var(--ub-orange-500)}[data-accent=green]{--ub-accent: var(--ub-green-600);--ub-accent-hover: var(--ub-green-700);--ub-accent-contrast: var(--ub-white);--ub-ring: var(--ub-green-400)}[data-theme=dark][data-accent=green]{--ub-accent: var(--ub-green-500);--ub-accent-hover: var(--ub-green-400);--ub-ring: var(--ub-green-500)}.site-header{position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--ub-bg) 85%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.site-header-inner{max-width:80rem;margin:0 auto;padding:0 1.5rem;height:3.5rem;display:flex;align-items:center;justify-content:space-between}.site-logo{display:inline-flex;align-items:center;color:var(--ub-text-primary)}.site-nav-toggle{display:none}.site-nav-drawer-title{margin:0 0 .5rem;font-size:var(--ub-font-size-compact);font-weight:600;color:var(--ub-text-secondary)}.sidebar.sidebar-in-drawer{position:static;max-height:none;overflow:visible;align-self:stretch;flex:none;padding:0 0 1rem;border:none}@media(min-width:64.0625rem){.site-logo{padding-inline-start:.75rem}}.site-header-actions{display:flex;align-items:center;gap:.5rem}.site-header-actions .ub-button{text-decoration:none}.site-layout{max-width:80rem;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:14rem minmax(0,40rem) 14rem;justify-content:space-between;gap:3rem}.sidebar{padding:2rem 0 4rem;display:flex;flex-direction:column;gap:1.5rem;align-self:start;position:sticky;top:3.5rem;max-height:calc(100vh - 3.5rem);overflow-y:auto}.sidebar-title{font-size:.875rem;font-weight:600;color:var(--ub-text-secondary);margin-bottom:.375rem;padding-inline:.75rem}.sidebar-badge,.page-badge,.sidebar-status{margin-inline-start:.5rem}.page-badge{vertical-align:.35em}.sidebar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}.sidebar a{display:flex;align-items:center;height:2.25rem;padding-inline:.75rem;border-radius:var(--ub-radius-control);font-size:.875rem;color:var(--ub-text-primary);text-decoration:none;transition:background-color var(--ub-duration-fast) var(--ub-ease-out)}.sidebar a:hover,.sidebar a[aria-current=page]{background:var(--ub-bg-muted)}.site-content{grid-column:2 / 4;position:relative;padding:2.5rem 0 6rem;min-width:0}@media(min-width:64.0625rem)and (max-width:80rem){.site-content:has(.controls-rail){padding-inline-end:17rem}}@media(max-width:64rem){.site-layout{grid-template-columns:minmax(0,57rem);justify-content:center;gap:0}.site-layout>.sidebar{display:none}.site-nav-toggle{display:inline-flex}.site-content{grid-column:auto}.prose{margin-inline:auto}.site-content:has(.controls-rail){padding-inline-end:17rem}}@media(max-width:47.5rem){.site-layout{grid-template-columns:1fr}.site-content:has(.controls-rail){padding-inline-end:0}.controls-rail{display:none}}.controls-rail{position:absolute;top:2.5rem;bottom:0;right:0;width:14rem}.controls-stack{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:.5rem}.controls{display:flex;flex-direction:column;gap:.5rem;background:var(--ub-bg-subtle);border-radius:var(--ub-radius-lg);padding:1rem}.controls-title{font-weight:600}.controls-section{display:flex;flex-direction:column;gap:.25rem;border-top:1px solid var(--ub-border);margin-top:.25rem;padding-top:.75rem}.controls-section-title{font-size:.875rem;font-weight:600;color:var(--ub-text-secondary)}.control-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.25rem;font-size:1rem;color:var(--ub-text-secondary)}.control-field{display:flex;flex-direction:column;gap:.375rem;padding-block:.25rem;font-size:.875rem}.control-field .ub-tabs-list{width:100%}.control-field .ub-tabs-tab{flex:1}.controls .ub-select-trigger{width:65%;min-width:0}.showcase-preview .ub-combobox-chips,.showcase-preview .ub-combobox-input-group,.showcase-preview .ub-combobox-select-trigger{width:100%}.showcase-preview .ub-combobox-chips .ub-combobox-input-group{width:auto}.page-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.page-header h1{margin:0}.page-nav{display:flex;gap:.5rem}.page-nav .ub-button{text-decoration:none}.prose{min-width:0;max-width:40rem}.prose h1{font-size:2rem;font-weight:650;letter-spacing:-.025em;line-height:1.2;margin:0 0 .75rem}.prose h2{font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;margin:2.25rem 0 .625rem}.prose p,.prose ul{margin:.75rem 0;color:var(--ub-text-secondary)}.prose .showcase-preview p,.prose .showcase-preview ul,.prose .showcase-preview li{margin:0;color:inherit}.prose .lead{margin-bottom:1.5rem}.prose li{margin:.375rem 0}.prose strong{color:var(--ub-text-primary);font-weight:600}.prose code{background:var(--ub-bg-muted);border-radius:var(--ub-radius-xs);padding:.125rem .3125rem;color:var(--ub-text-primary)}.prose a{color:var(--ub-text-primary)}.intro-actions{display:flex;gap:.625rem;margin:1.25rem 0}.intro-actions .ub-button{text-decoration:none}.preview{border:1px solid var(--ub-border);border-radius:var(--ub-radius-lg);padding:2rem 1.5rem;margin:1rem 0;display:flex;align-items:center;justify-content:center;gap:.625rem;flex-wrap:wrap;min-height:6rem}.preview-field{display:flex;align-items:center;gap:.625rem;font-size:.875rem}.showcase{margin:1rem 0;border:1px solid var(--ub-border);border-radius:var(--ub-radius-xl);overflow:hidden}.showcase-header{padding:.5rem;border-bottom:1px solid var(--ub-border)}.showcase-panel{padding:0}.showcase-body{overflow:hidden;transition:height var(--ub-duration-slow) var(--ub-ease-out)}.showcase-preview{display:flex;align-items:center;justify-content:center;gap:.625rem;flex-wrap:wrap;padding:6rem;min-height:6rem}.showcase-stack{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.showcase-footer{margin:0;border-top:1px solid var(--ub-border);padding:1.5rem;font-size:1rem;color:var(--ub-text-secondary)}.showcase-footer code{background:var(--ub-bg-muted);border-radius:var(--ub-radius-xs);padding:.125rem .3125rem;color:var(--ub-text-primary)}.callout{padding:.75rem .875rem;background:var(--ub-bg-subtle);border-radius:var(--ub-radius-md);font-size:.875rem;color:var(--ub-text-secondary)}.callout code{background:var(--ub-bg-muted);border-radius:var(--ub-radius-xs);padding:.125rem .3125rem;color:var(--ub-text-primary)}.showcase-code pre{margin:0;padding:1.5rem;overflow-x:auto;background:transparent!important;font-size:.875rem;line-height:1.6;color:var(--ub-text-primary)}.showcase-code code{font-size:inherit;background:transparent;padding:0}.install-tabs{margin:1rem 0;border:1px solid var(--ub-border);border-radius:var(--ub-radius-xl);overflow:hidden}.install-tabs-header{padding:.375rem;background:var(--ub-bg-subtle);border-bottom:1px solid var(--ub-border)}.install-tabs-panel{padding-top:0}.install-tabs .code-block{margin:0;border:none;border-radius:0}.code-block{margin:1rem 0;border:1px solid var(--ub-border);border-radius:var(--ub-radius-xl);background:var(--ub-bg-subtle);overflow:hidden}.code-block pre{margin:0;padding:.875rem 1rem;overflow-x:auto;background:transparent!important;font-size:.875rem;line-height:1.6}.code-block code{font-size:inherit;background:transparent;padding:0}.shiki span{color:var(--shiki-light)}[data-theme=dark] .shiki span{color:var(--shiki-dark)}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.5rem;margin:1rem 0;padding:0;list-style:none}.icon-grid li{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border:1px solid var(--ub-border);border-radius:var(--ub-radius-md)}.showcase-columns{display:flex;gap:3rem;align-items:flex-start}.showcase-columns .showcase-stack{align-items:flex-start}.showcase-row{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem}.showcase-row-loose{gap:.75rem 1.5rem}.props-table-wrap{margin:1rem 0;border:1px solid var(--ub-border);border-radius:var(--ub-radius-md);overflow-x:auto}.props-table{width:100%;border-collapse:collapse;font-size:.875rem}.props-table th{text-align:left;font-weight:600;color:var(--ub-text-secondary);padding:.625rem .875rem;border-bottom:1px solid var(--ub-border);background:var(--ub-bg-subtle);white-space:nowrap}.props-table td{padding:.625rem .875rem;border-bottom:1px solid var(--ub-border);color:var(--ub-text-secondary);vertical-align:top}.props-table tr:last-child td{border-bottom:none}.props-table code{background:var(--ub-bg-muted);border-radius:var(--ub-radius-xs);padding:.125rem .3125rem;color:var(--ub-text-primary);white-space:nowrap}.color-scales{display:flex;flex-direction:column;gap:.375rem;margin:1rem 0}.color-scale-row{display:flex;align-items:center;gap:.75rem}.color-scale-name{width:3.5rem;flex-shrink:0;font-size:.875rem;color:var(--ub-text-secondary)}.color-scale{display:flex;gap:.375rem;flex:1;min-width:0}.color-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;font-size:.875rem;color:var(--ub-text-tertiary)}.color-scale-labels .color-step{align-items:center}.color-chip{height:2rem;border-radius:var(--ub-radius-sm);border:1px solid var(--ub-border)}.scroll-demo{border:1px solid var(--ub-border);border-radius:var(--ub-radius-lg);background:var(--ub-surface);padding:.5rem 1.25rem;margin:1rem 0;max-height:11rem;overflow-y:auto}.scroll-demo p{font-size:.875rem}