*{box-sizing:border-box}body{margin:0;background:var(--color-bg-page);color:var(--color-text-primary);font-family:var(--font-body)}.component-doc{padding-top:8px;margin-bottom:96px;border-top:1px solid var(--color-border-default)}.component-doc:first-of-type{border-top:none;padding-top:0}.component-doc h1{font-family:var(--font-display);font-weight:var(--type-heading-xl-weight);font-size:34px;margin:40px 0 6px}.component-doc>.dek{font-size:15px;color:var(--color-text-secondary);line-height:1.55;margin:0 0 28px;max-width:60ch}.example-box{border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-bg-page);padding:48px 24px;display:flex;align-items:center;justify-content:center;margin-bottom:40px}.doc-section{margin-bottom:32px}.doc-section h2{font-family:var(--font-display);font-weight:700;font-size:19px;margin:0 0 6px}.doc-section>p.lead{font-size:14px;color:var(--color-text-secondary);line-height:1.6;margin:0 0 12px}.doc-section ul{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.7;color:var(--color-text-primary)}.doc-section ul li{margin-bottom:2px}.doc-section .prop-values{font-family:var(--font-mono);font-size:12px;color:var(--color-text-secondary);display:block;margin-top:1px}.doc-section .desc{color:var(--color-text-secondary);font-weight:400}.sample-box{border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-bg-surface);padding:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.sample-box.column{flex-direction:column;align-items:flex-start}.sample-box.stack{flex-direction:column;align-items:stretch;gap:8px}.variant-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--color-border-default)}.variant-row:last-child{border-bottom:none}.variant-row .name{font-weight:600;font-size:14px;min-width:110px;flex:none}.variant-row .desc{font-size:13.5px;color:var(--color-text-secondary);line-height:1.5;flex:1}.variant-row .sample{flex:none}.usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.usage-grid h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;color:var(--color-text-secondary)}.usage-grid ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6}.matrix{display:grid;gap:12px;overflow-x:auto}.matrix-row{display:grid;grid-template-columns:72px repeat(4,minmax(104px,1fr));align-items:center;gap:12px}.matrix-head{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary)}.props-table{width:100%;border-collapse:collapse;font-size:13.5px}.props-table th,.props-table td{text-align:left;vertical-align:top;padding:8px 12px 8px 0;border-bottom:1px solid var(--color-border-default)}.props-table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary)}.props-table td:last-child{color:var(--color-text-secondary)}.props-table code{font-family:var(--font-mono);font-size:12.5px}.demo-cell{padding:12px 16px;border-radius:var(--radius-subtle);background:var(--color-bg-accentSubtle);color:var(--color-text-accent);font-size:13px;font-weight:500;text-align:center}.demo-label{min-width:104px;flex:none}.demo-frame{display:block;padding-left:0;padding-right:0}.demo-outline{outline:1px dashed var(--color-border-strong);outline-offset:-1px;padding-block:12px}.demo-bands{display:block;padding:0;overflow:hidden;gap:0}.demo-rule+.demo-rule{border-top:1px solid var(--color-border-default)}.demo-scroll{overflow-x:auto}.demo-zoom{zoom:.5;width:1400px;display:grid;gap:16px;padding:24px 0}.demo-zoom .demo-outline{padding:16px 24px}.demo-media{height:120px;background:var(--color-bg-accentSubtle)}.demo-on-page{background:var(--color-bg-page);border:1px solid var(--color-border-subtle)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;width:100%;align-items:start}.demo-center{max-width:360px;margin:0 auto}.demo-w200{width:200px}.site-logo{display:inline-flex;align-items:center;gap:var(--space-compact);font-family:var(--font-display);font-weight:var(--type-heading-xl-weight);font-size:var(--type-heading-sm-size)}.site-mark{width:22px;height:22px;border-radius:var(--radius-subtle);background:linear-gradient(135deg,var(--color-bg-accent) 0 50%,transparent 50%),var(--color-bg-inverse)}.site-docs{display:grid;grid-template-columns:272px minmax(0,1fr);align-items:start}.site-sidebar{position:sticky;top:72px;height:calc(100dvh - 72px);overflow-y:auto;background:color-mix(in oklab,var(--color-bg-tertiary) 55%,var(--color-bg-page));border-right:1px solid var(--color-border-default)}.site-sidebar .datum-Sidebar-title{color:var(--color-text-primary)}.site-sidebar .datum-Sidebar-link{min-height:34px;font-size:var(--type-body-sm-size);color:var(--color-text-primary)}.site-sidebar .datum-Sidebar-link:hover{background:color-mix(in oklab,var(--color-text-primary) 10%,transparent)}.site-sidebar .datum-Sidebar-link[data-active]{background:var(--color-bg-accentSubtle);color:var(--color-text-accent);font-weight:var(--type-heading-sm-weight);box-shadow:inset 3px 0 0 var(--color-bg-accent)}.site-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-section);padding:var(--space-section) var(--space-section) calc(var(--space-section) * 3)}.site-article{min-width:0;max-width:820px;width:100%;margin-inline:auto}.site-toc{display:none}@media (min-width: 1200px){.site-main{grid-template-columns:minmax(0,1fr) 208px}.site-toc{display:block;position:sticky;top:calc(72px + var(--space-section));max-height:calc(100dvh - 72px - var(--space-section) * 2);overflow-y:auto}}.site-toc-title{margin:0 0 var(--space-compact);font-size:var(--type-ui-overline-size);font-weight:var(--type-ui-overline-weight);letter-spacing:var(--type-ui-overline-tracking);text-transform:uppercase;color:var(--color-text-primary)}.site-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--color-border-default)}.site-toc li[data-level="1"]{margin-top:var(--space-compact)}.site-toc a{display:block;margin-left:-1px;padding:4px var(--space-tight);border-left:2px solid transparent;font-size:var(--type-body-sm-size);color:var(--color-text-secondary);text-decoration:none}.site-toc li[data-level="1"] a{color:var(--color-text-primary);font-weight:var(--type-ui-label-weight)}.site-toc a:hover{color:var(--color-text-primary)}.site-toc a[aria-current]{color:var(--color-text-accent);border-left-color:var(--color-bg-accent)}.site-crumbs{margin-bottom:var(--space-default)}.site-pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-default);margin-top:var(--space-section);padding-top:var(--space-section);border-top:1px solid var(--color-border-default)}.site-pager>a{display:flex;flex-direction:column;gap:2px}.site-pager svg{width:14px;height:14px;vertical-align:-2px}.site-pager-next{grid-column:2;text-align:end;align-items:flex-end}.site-prose,.site-doc{display:flex;flex-direction:column;gap:var(--space-default);align-items:stretch}.site-demo{margin-block:var(--space-tight)}.site-demo .sample-box,.site-demo .example-box{margin:0;background:var(--color-bg-page);border:1px solid var(--color-border-default)}.site-demo:has(>div>.example-box),.site-demo:first-of-type{margin-bottom:var(--space-section)}.site-page{overflow-x:clip}.site-hero{position:relative;padding:calc(var(--space-section) * 3) 0 calc(var(--space-section) * 2);isolation:isolate}.site-hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(60% 55% at 50% 0%,color-mix(in oklab,var(--color-bg-accent) 22%,transparent),transparent 70%),linear-gradient(var(--color-border-default) 1px,transparent 1px) 0 0 / 48px 48px,linear-gradient(90deg,var(--color-border-default) 1px,transparent 1px) 0 0 / 48px 48px;-webkit-mask-image:radial-gradient(70% 70% at 50% 20%,#000 30%,transparent 75%);mask-image:radial-gradient(70% 70% at 50% 20%,#000 30%,transparent 75%)}.site-hero-inner{text-align:center}.site-hero-title{max-width:18ch;text-wrap:balance}.site-hero-sub{max-width:58ch}.site-announce{display:inline-flex;align-items:center;gap:var(--space-compact);padding:4px var(--space-tight) 4px 4px;border:1px solid var(--color-border-default);border-radius:var(--radius-pill);background:var(--color-bg-surfaceRaised);box-shadow:var(--elevation-field);color:var(--color-text-primary);font-size:var(--type-body-sm-size);text-decoration:none}.site-announce svg{width:14px;height:14px;color:var(--color-text-secondary)}.site-announce:hover{border-color:var(--color-border-strong)}.site-install{width:100%;max-width:520px;text-align:start}.site-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-compact) var(--space-default);margin:0;padding:0;list-style:none;font-size:var(--type-body-sm-size);color:var(--color-text-secondary)}.site-bento .datum-Card-root{background:var(--color-bg-surfaceRaised)}@media (min-width: 1024px){.site-span-2{grid-column:span 2}}.site-section-head{max-width:640px}.site-feature-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-card);background:var(--color-bg-accentSubtle);color:var(--color-text-accent)}.site-feature-icon svg{width:20px;height:20px}.site-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-section);padding:calc(var(--space-section) * 1.5);border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:radial-gradient(80% 120% at 100% 0%,color-mix(in oklab,var(--color-bg-accent) 16%,transparent),transparent 60%),var(--color-bg-surfaceRaised)}.site-blocks{display:flex;flex-direction:column;gap:calc(var(--space-section) * 2);max-width:1400px;margin-inline:auto;padding:calc(var(--space-section) * 2) var(--space-section) calc(var(--space-section) * 3)}.site-block{display:flex;flex-direction:column;gap:var(--space-default);scroll-margin-top:96px}.block-viewport{overflow-x:auto;border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);background:var(--color-bg-page)}.block-viewport iframe{display:block;max-width:none;margin-inline:auto;border:0}.block-viewport iframe[data-fill]{min-width:1024px}.block-viewport iframe:not([data-fill]){border-inline:1px solid var(--color-border-default)}@media (max-width: 767px){.site-docs{grid-template-columns:minmax(0,1fr)}.site-sidebar{position:static;height:auto;border-right:none;background:none}.site-main{padding-inline:var(--space-default)}.site-hero{padding-top:calc(var(--space-section) * 2)}.site-cta{padding:var(--space-section)}.site-blocks{padding-inline:var(--space-default)}}.site-switch-full{display:flex;gap:var(--space-compact)}.site-switch-compact{display:none;gap:2px}@media (max-width: 767px){.site-switch-full{display:none}.site-switch-compact{display:flex}.site-hero .site-hero-title{font-size:var(--type-display-sm-size);line-height:var(--type-display-sm-line)}}