[data-ds-component=DocLayout]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;max-width:100vw;min-height:100vh;display:grid;overflow-x:hidden;container:doc-layout/inline-size}[data-ds-component=DocLayout] .content{overscroll-behavior:contain;scroll-behavior:auto;max-width:40rem;max-height:none;margin:0;padding:0;overflow-y:visible}[data-ds-component=DocLayout] .codePanel{border-left:1px solid var(--semantic-color-border-subtle);position:relative}[data-ds-component=DocLayout] .codePanelSticky{height:100vh;position:sticky;top:0;overflow:hidden}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-wrapper){border:none!important;border-radius:0!important;height:100%!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-layout){border-radius:0!important;height:100%!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-editor){height:100%!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-code-editor){height:100%!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-cm){height:100%!important}[data-ds-component=DocLayout] .codePanelSticky :global(.highlighted-line){transition:all .2s ease-in-out;position:relative;background-color:linear-gradient(var(--semantic-color-background-highlight))!important}[data-ds-component=DocLayout] .codePanelSticky :global(.highlighted-line):before{z-index:-1;background:linear-gradient(90deg, var(--semantic-color-background-highlight) 0%, color(var(--semantic-color-background-highlight) / 30%) transparent 100%);opacity:.8;pointer-events:none;content:"";position:absolute;inset:0 0 0 -3px}[data-ds-component=DocLayout] .codePanelSticky :global(.highlighted-line):after{background:var(--semantic-color-background-highlight);width:3px;box-shadow:0 0 8px color(var(--semantic-color-background-highlight) / 40%);pointer-events:none;content:"";position:absolute;top:0;bottom:0;left:-3px}[data-ds-component=DocLayout] .codePanelSticky :global(.highlight-fade-in){animation:.3s ease-out forwards highlightFadeIn}[data-ds-component=DocLayout] .codePanelSticky :global(.highlight-fade-out){animation:.15s ease-in forwards highlightFadeOut}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-tabs){overflow:auto;scrollbar-color:var(--semantic-color-border-subtle) transparent!important;scrollbar-width:thin!important;display:flex!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-tabs)::-webkit-scrollbar{height:4px!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-tabs)::-webkit-scrollbar-track{background:0 0!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-tabs)::-webkit-scrollbar-thumb{background:var(--semantic-color-border-subtle)!important;border-radius:2px!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-tab){min-width:0!important;max-width:200px!important;padding:var(--semantic-spacing-padding-container) var(--semantic-spacing-padding-container)!important;font-size:var(--font-size-sm)!important;text-overflow:ellipsis!important;white-space:nowrap!important;flex-shrink:0!important;overflow:hidden!important}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-tab-button){text-overflow:ellipsis!important;white-space:nowrap!important;width:100%!important;display:block!important;overflow:hidden!important}[data-ds-component=DocLayout] .docSection{margin-bottom:var(--space-6);scroll-margin-top:var(--space-6);padding:0;transition:opacity .2s ease-in-out}[data-ds-component=DocLayout] .docSection:first-child{padding-top:var(--space-6)}[data-ds-component=DocLayout] .docSection:last-child{margin-bottom:var(--space-8);padding-bottom:var(--space-6)}[data-ds-component=DocLayout] .docSection[data-highlighted=true]{opacity:1}[data-ds-component=DocLayout] .docSection[data-highlighted=false]{opacity:.7}[data-ds-component=DocLayout] .docSection h1,[data-ds-component=DocLayout] .docSection h2,[data-ds-component=DocLayout] .docSection h3,[data-ds-component=DocLayout] .docSection h4,[data-ds-component=DocLayout] .docSection h5,[data-ds-component=DocLayout] .docSection h6{margin-top:var(--space-4);margin-bottom:var(--space-3)}:is([data-ds-component=DocLayout] .docSection h1,[data-ds-component=DocLayout] .docSection h2,[data-ds-component=DocLayout] .docSection h3,[data-ds-component=DocLayout] .docSection h4,[data-ds-component=DocLayout] .docSection h5,[data-ds-component=DocLayout] .docSection h6):first-child{margin-top:0}[data-ds-component=DocLayout] .docSection p{margin-bottom:var(--space-3);line-height:1.6}[data-ds-component=DocLayout] .docSection ul,[data-ds-component=DocLayout] .docSection ol{margin-bottom:var(--space-3);padding-left:var(--space-5);line-height:1.6}:is([data-ds-component=DocLayout] .docSection ul,[data-ds-component=DocLayout] .docSection ol) li{margin-bottom:var(--space-2)}[data-ds-component=DocLayout] .docNavigation{top:50%;left:var(--space-6);z-index:10;position:fixed;transform:translateY(-50%)}[data-ds-component=DocLayout] .docNavigation ul{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}[data-ds-component=DocLayout] .navItem{max-width:200px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-size-sm);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:0 0;border:none;transition:all .2s ease-in-out;overflow:hidden}[data-ds-component=DocLayout] .navItem:hover{background:var(--surface-secondary);color:var(--text-primary)}[data-ds-component=DocLayout] .navItem:focus-visible{outline:2px solid var(--semantic-color-background-highlight);outline-offset:2px}[data-ds-component=DocLayout] .navItem.active{padding-left:calc(var(--space-3) - 3px);background:var(--surface-accent-subtle);border-left:3px solid var(--semantic-color-background-highlight);color:var(--text-accent);font-weight:var(--font-weight-medium)}[data-ds-component=DocLayout] .codeToolbar{gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface-secondary);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}[data-ds-component=DocLayout] .themeControls{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:inline-flex;overflow:hidden}[data-ds-component=DocLayout] .themeControls button{padding:var(--space-1) var(--space-2);color:var(--text-secondary);font:inherit;cursor:pointer;appearance:none;background:0 0;border:0}[data-ds-component=DocLayout] .themeControls button.active{background:var(--surface-accent-subtle);color:var(--text-accent)}@supports (overflow:clip){[data-ds-component=DocLayout]{overflow-x:clip}}@media (prefers-reduced-motion:no-preference){[data-ds-component=DocLayout] .content{scroll-behavior:smooth}}@media (prefers-reduced-motion:reduce){[data-ds-component=DocLayout] .docSection{transition:none!important}:is([data-ds-component=DocLayout] .codePanel :global(.highlight-fade-in),[data-ds-component=DocLayout] .codePanel :global(.highlight-fade-out)){animation:none!important}}@media (max-width:1400px){[data-ds-component=DocLayout] .docNavigation{display:none}}@media (max-width:1200px){[data-ds-component=DocLayout]{grid-template-columns:1fr;gap:0}[data-ds-component=DocLayout] .content{max-height:none;padding:var(--space-4) var(--space-2);order:2;overflow-y:visible}[data-ds-component=DocLayout] .codePanel{z-index:5;border-bottom:1px solid var(--semantic-color-border-subtle);border-left:none;order:1;position:sticky;top:0}[data-ds-component=DocLayout] .codePanelSticky{height:50vh;min-height:300px;position:relative}[data-ds-component=DocLayout] .docNavigation{display:none}}@media (max-width:768px){[data-ds-component=DocLayout]{min-height:auto}[data-ds-component=DocLayout] .content{padding:var(--space-3) var(--space-2)}[data-ds-component=DocLayout] .codePanelSticky{height:40vh;min-height:250px}[data-ds-component=DocLayout] .codePanelSticky :global(.sp-tab){max-width:120px!important;padding:var(--space-1) var(--space-2)!important;font-size:var(--font-size-xs)!important;background:#ff0!important}[data-ds-component=DocLayout] .docSection{margin-bottom:var(--space-6);padding:0}[data-ds-component=DocLayout] .docSection:last-child{margin-bottom:var(--space-8)}[data-ds-component=DocLayout] .docNavigation{display:none}}@media (min-width:769px) and (max-width:1199px){[data-ds-component=DocLayout] .codePanelSticky{height:60vh;min-height:400px}}@container doc-layout (max-width:1200px){[data-ds-component=DocLayout]{grid-template-columns:1fr}[data-ds-component=DocLayout] .codePanelSticky{height:100vh}}@container doc-layout (max-width:900px){[data-ds-component=DocLayout] .codePanelSticky{height:55vh}}@container doc-layout (max-width:640px){[data-ds-component=DocLayout] .codePanel{order:-1}[data-ds-component=DocLayout] .codePanelSticky{height:50vh}}@keyframes highlightFadeIn{0%{opacity:0;background-color:#0000;border-left-color:#0000;transform:translate(-4px)}50%{background-color:var(--surface-accent);border-left-color:var(--semantic-color-background-highlight);opacity:.8;transform:translate(0)}to{background-color:var(--surface-accent-subtle);border-left-color:var(--semantic-color-background-highlight);opacity:1;transform:translate(0)}}@keyframes highlightFadeOut{0%{background-color:var(--surface-accent-subtle);border-left-color:var(--semantic-color-background-highlight);opacity:1}to{opacity:0;background-color:#0000;border-left-color:#0000}}@keyframes highlightFade{0%{background-color:var(--semantic-color-background-info)}to{background-color:var(--semantic-color-background-info-subtle)}}
[data-ds-component=ComponentDocTemplate]{max-width:none}[data-ds-component=ComponentDocTemplate] h1,[data-ds-component=ComponentDocTemplate] h2,[data-ds-component=ComponentDocTemplate] h3,[data-ds-component=ComponentDocTemplate] h4{scroll-margin-top:var(--space-8)}[data-ds-component=ComponentDocTemplate] .componentHeader{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--border-subtle)}[data-ds-component=ComponentDocTemplate] .componentMeta{gap:var(--space-3);margin-bottom:var(--space-4);align-items:center;display:flex}[data-ds-component=ComponentDocTemplate] .layerBadge{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-weight:var(--font-weight-medium);font-size:var(--font-size-xs);letter-spacing:.05em;text-transform:uppercase;align-items:center;display:inline-flex}[data-ds-component=ComponentDocTemplate] .layerBadge[data-layer=primitive]{background:var(--surface-success-subtle);border:1px solid var(--border-success);color:var(--text-success)}[data-ds-component=ComponentDocTemplate] .layerBadge[data-layer=compound]{background:var(--surface-warning-subtle);border:1px solid var(--border-warning);color:var(--text-warning)}[data-ds-component=ComponentDocTemplate] .layerBadge[data-layer=composer]{background:var(--surface-accent-subtle);border:1px solid var(--border-accent);color:var(--text-accent)}[data-ds-component=ComponentDocTemplate] .metaPatterns{gap:var(--space-1);flex-wrap:wrap;display:flex}[data-ds-component=ComponentDocTemplate] .metaPattern{padding:var(--space-05) var(--space-1);background:var(--surface-secondary);border-radius:var(--radius-xs);color:var(--text-secondary);font-weight:var(--font-weight-medium);font-size:var(--font-size-xs)}[data-ds-component=ComponentDocTemplate] .componentTitle{margin:0 0 var(--space-3) 0;color:var(--text-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-4xl);line-height:1.2}[data-ds-component=ComponentDocTemplate] .componentDescription{color:var(--text-secondary);font-size:var(--font-size-lg);margin:0;line-height:1.6}[data-ds-component=ComponentDocTemplate] .overviewGrid{gap:var(--space-6);margin-top:var(--space-6);grid-template-columns:1fr 1fr;display:grid}[data-ds-component=ComponentDocTemplate] .overviewSection h3{margin:0 0 var(--space-3) 0;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-lg)}[data-ds-component=ComponentDocTemplate] .overviewSection ul{margin:0;padding:0;list-style:none}[data-ds-component=ComponentDocTemplate] .overviewItem{margin-bottom:var(--space-2);padding-left:var(--space-4);color:var(--text-secondary);line-height:1.5;position:relative}[data-ds-component=ComponentDocTemplate] .overviewItem:before{color:var(--text-accent);font-weight:var(--font-weight-bold);content:"•";position:absolute;left:0}[data-ds-component=ComponentDocTemplate] .overviewItem:last-child{margin-bottom:0}[data-ds-component=ComponentDocTemplate] .apiSection h3{margin:0 0 var(--space-4) 0;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl)}[data-ds-component=ComponentDocTemplate] .propsTable{background:var(--surface-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}[data-ds-component=ComponentDocTemplate] .propsHeader{gap:var(--space-3);padding:var(--space-3);background:var(--surface-secondary);border-bottom:1px solid var(--border-subtle);color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);grid-template-columns:1fr 1fr 2fr 1fr;display:grid}[data-ds-component=ComponentDocTemplate] .propRow{gap:var(--space-3);padding:var(--space-3);border-bottom:1px solid var(--border-subtle);grid-template-columns:1fr 1fr 2fr 1fr;align-items:start;display:grid}[data-ds-component=ComponentDocTemplate] .propRow:last-child{border-bottom:none}[data-ds-component=ComponentDocTemplate] .propName{color:var(--text-accent);font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);font-family:var(--font-mono)}[data-ds-component=ComponentDocTemplate] .required{margin-left:var(--space-05);color:var(--text-danger)}[data-ds-component=ComponentDocTemplate] .propType{padding:var(--space-05) var(--space-1);background:var(--surface-secondary);border-radius:var(--radius-xs);color:var(--text-secondary);font-size:var(--font-size-sm);font-family:var(--font-mono)}[data-ds-component=ComponentDocTemplate] .propDescription{color:var(--text-secondary);font-size:var(--font-size-sm);line-height:1.5}[data-ds-component=ComponentDocTemplate] .propDefault{color:var(--text-tertiary);font-size:var(--font-size-sm);font-family:var(--font-mono)}[data-ds-component=ComponentDocTemplate] .structureSection h3{margin:0 0 var(--space-4) 0;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl)}[data-ds-component=ComponentDocTemplate] .structureSection code{padding:var(--space-1) var(--space-2);background:var(--surface-secondary);border-radius:var(--radius-sm);font-size:var(--font-size-lg);font-family:var(--font-mono)}[data-ds-component=ComponentDocTemplate] .fileTree{padding:var(--space-4);background:var(--surface-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}[data-ds-component=ComponentDocTemplate] .fileItem{gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border-subtle);grid-template-columns:1fr 2fr;align-items:center;display:grid}[data-ds-component=ComponentDocTemplate] .fileItem:last-child{border-bottom:none}[data-ds-component=ComponentDocTemplate] .fileName{color:var(--text-primary);font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);font-family:var(--font-mono)}[data-ds-component=ComponentDocTemplate] .fileName[data-type=component]{color:var(--text-accent)}[data-ds-component=ComponentDocTemplate] .fileName[data-type=hook]{color:var(--text-success)}[data-ds-component=ComponentDocTemplate] .fileName[data-type=context]{color:var(--text-warning)}[data-ds-component=ComponentDocTemplate] .fileName[data-type=types]{color:var(--text-info)}[data-ds-component=ComponentDocTemplate] .fileName[data-type=styles]{color:var(--text-secondary)}[data-ds-component=ComponentDocTemplate] .fileName[data-type=tokens]{color:var(--text-accent)}[data-ds-component=ComponentDocTemplate] .fileDescription{color:var(--text-secondary);font-size:var(--font-size-sm);line-height:1.4}[data-ds-component=ComponentDocTemplate] .accessibilitySection h3{margin:0 0 var(--space-3) 0;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl)}[data-ds-component=ComponentDocTemplate] .a11yGrid{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}[data-ds-component=ComponentDocTemplate] .a11ySection ul{margin:0;padding:0;list-style:none}[data-ds-component=ComponentDocTemplate] .a11yItem{margin-bottom:var(--space-2);padding-left:var(--space-4);color:var(--text-secondary);line-height:1.5;position:relative}[data-ds-component=ComponentDocTemplate] .a11yItem:before{color:var(--text-success);font-weight:var(--font-weight-bold);content:"✓";position:absolute;left:0}[data-ds-component=ComponentDocTemplate] .a11yItem:last-child{margin-bottom:0}[data-ds-component=ComponentDocTemplate] .usageSection h3{margin:0 0 var(--space-4) 0;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl)}[data-ds-component=ComponentDocTemplate] .usageSection h4{margin:var(--space-6) 0 var(--space-2) 0;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-lg)}[data-ds-component=ComponentDocTemplate] .usageSection h4:first-child{margin-top:0}[data-ds-component=ComponentDocTemplate] .codeBlock{margin:var(--space-3) 0;padding:var(--space-4);background:var(--surface-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow-x:auto}[data-ds-component=ComponentDocTemplate] .codeBlock code{color:var(--text-primary);font-size:var(--font-size-sm);font-family:var(--font-mono);white-space:pre;line-height:1.5}[data-ds-component=ComponentDocTemplate] .variations{margin-top:var(--space-6)}[data-ds-component=ComponentDocTemplate] .variation{margin-bottom:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--border-subtle)}[data-ds-component=ComponentDocTemplate] .variation:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}[data-ds-component=ComponentDocTemplate] .variation p{margin:var(--space-2) 0 var(--space-3) 0;color:var(--text-secondary);line-height:1.6}[data-ds-component=ComponentDocTemplate] .tokensSection h3{margin:var(--space-6) 0 var(--space-4) 0;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl)}[data-ds-component=ComponentDocTemplate] .tokensSection h3:first-child{margin-top:0}[data-ds-component=ComponentDocTemplate] .tokensSection>p{margin-bottom:var(--space-6);color:var(--text-secondary);line-height:1.6}[data-ds-component=ComponentDocTemplate] .tokenCategory{margin-bottom:var(--space-6)}[data-ds-component=ComponentDocTemplate] .tokenCategory:last-child{margin-bottom:0}[data-ds-component=ComponentDocTemplate] .tokenGrid{gap:var(--space-3);margin-top:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}[data-ds-component=ComponentDocTemplate] .tokenItem{gap:var(--space-1);padding:var(--space-3);background:var(--surface-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex-direction:column;display:flex}[data-ds-component=ComponentDocTemplate] .tokenName{color:var(--text-accent);font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);font-family:var(--font-mono)}[data-ds-component=ComponentDocTemplate] .tokenValue{padding:var(--space-1) var(--space-2);background:var(--surface-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);color:var(--text-primary);font-size:var(--font-size-sm);font-family:var(--font-mono)}[data-ds-component=ComponentDocTemplate] .tokenDescription{color:var(--text-secondary);font-size:var(--font-size-xs);line-height:1.4}@media (max-width:768px){[data-ds-component=ComponentDocTemplate] .overviewGrid{gap:var(--space-4);grid-template-columns:1fr}[data-ds-component=ComponentDocTemplate] .propsHeader{grid-template-columns:1fr 1fr}[data-ds-component=ComponentDocTemplate] .propsHeader span:nth-child(3),[data-ds-component=ComponentDocTemplate] .propsHeader span:nth-child(4){display:none}[data-ds-component=ComponentDocTemplate] .propRow{grid-template-columns:1fr 1fr}[data-ds-component=ComponentDocTemplate] .propRow .propDescription,[data-ds-component=ComponentDocTemplate] .propRow .propDefault{margin-top:var(--space-1);font-size:var(--font-size-sm);grid-column:1/-1}[data-ds-component=ComponentDocTemplate] .fileItem{gap:var(--space-1);grid-template-columns:1fr}[data-ds-component=ComponentDocTemplate] .a11yGrid{gap:var(--space-4);grid-template-columns:1fr}[data-ds-component=ComponentDocTemplate] .tokenGrid{grid-template-columns:1fr}}
.page-module__zNQ8sW__container{max-width:none}.page-module__zNQ8sW__content{max-width:800px;padding:var(--space-6) 0;margin:0 auto}.page-module__zNQ8sW__patternGrid{gap:var(--space-4);margin:var(--space-6) 0;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.page-module__zNQ8sW__patternCard{padding:var(--space-4);background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.page-module__zNQ8sW__patternCard h3{margin:0 0 var(--space-2) 0;color:var(--text-default);font-weight:var(--font-weight-semibold);font-size:var(--font-size-300)}.page-module__zNQ8sW__patternCard p{color:var(--text-muted);font-size:var(--font-size-200);margin:0;line-height:1.5}.page-module__zNQ8sW__example{margin:var(--space-6) 0;padding:var(--space-4);background:var(--surface-subtle);border-left:4px solid var(--border-accent);border-radius:var(--radius-md)}.page-module__zNQ8sW__example h3{margin:0 0 var(--space-3) 0;color:var(--text-default);font-weight:var(--font-weight-semibold);font-size:var(--font-size-300)}.page-module__zNQ8sW__example ul{margin:var(--space-2) 0;padding-left:var(--space-4)}.page-module__zNQ8sW__example ul li{margin:var(--space-1) 0;color:var(--text-muted);font-size:var(--font-size-200);line-height:1.5}.page-module__zNQ8sW__example p{margin:var(--space-2) 0;color:var(--text-muted);font-size:var(--font-size-200);line-height:1.6}.page-module__zNQ8sW__example code{padding:var(--space-1) var(--space-2);background:var(--surface-muted);border-radius:var(--radius-sm);color:var(--text-accent);font-size:var(--font-size-100);font-family:var(--font-family-mono)}.page-module__zNQ8sW__section{margin:var(--space-8) 0}.page-module__zNQ8sW__section h2{margin:0 0 var(--space-4) 0;color:var(--text-default);font-weight:var(--font-weight-bold);font-size:var(--font-size-500);scroll-margin-top:var(--space-8)}