@property --components-selection-background{syntax:"<color>";inherits:true;initial-value:#f2f2f2}.components-orb-fallback{aspect-ratio:1;background:radial-gradient(circle at 30% 25%,#e7f3f1,#5fa8a6 45%,#1f6669 80%);border-radius:50%;width:150px;box-shadow:inset -10px -20px 30px #0005}@property --component-card-border{syntax:"<color>";inherits:true;initial-value:#c6c6c61f}@property --component-command-divider{syntax:"<color>";inherits:true;initial-value:#ffffffd1}@property --syntax-background{syntax:"<color>";inherits:true;initial-value:#f2f2f2}@property --syntax-foreground{syntax:"<color>";inherits:true;initial-value:#4c4f69}@property --syntax-keyword{syntax:"<color>";inherits:true;initial-value:#8839ef}@property --syntax-built-in{syntax:"<color>";inherits:true;initial-value:#d20f39}@property --syntax-type{syntax:"<color>";inherits:true;initial-value:#df8e1d}@property --syntax-literal{syntax:"<color>";inherits:true;initial-value:#fe640b}@property --syntax-operator{syntax:"<color>";inherits:true;initial-value:#04a5e5}@property --syntax-punctuation{syntax:"<color>";inherits:true;initial-value:#5c5f77}@property --syntax-property{syntax:"<color>";inherits:true;initial-value:#179299}@property --syntax-regexp{syntax:"<color>";inherits:true;initial-value:#ea76cb}@property --syntax-string{syntax:"<color>";inherits:true;initial-value:#40a02b}@property --syntax-subst{syntax:"<color>";inherits:true;initial-value:#6c6f85}@property --syntax-symbol{syntax:"<color>";inherits:true;initial-value:#dd7878}@property --syntax-title{syntax:"<color>";inherits:true;initial-value:#1e66f5}@property --syntax-comment{syntax:"<color>";inherits:true;initial-value:#7c7f93}@property --syntax-link{syntax:"<color>";inherits:true;initial-value:#209fb5}@property --syntax-addition{syntax:"<color>";inherits:true;initial-value:#40a02b}@property --syntax-addition-background{syntax:"<color>";inherits:true;initial-value:#40a02b26}@property --syntax-deletion{syntax:"<color>";inherits:true;initial-value:#d20f39}@property --syntax-deletion-background{syntax:"<color>";inherits:true;initial-value:#d20f3926}.components-library-page{--components-content-top:clamp(3.5rem, 4vw, 4rem);--theme-background:#fff;--theme-ink:#171717;--theme-ink-muted:#17171794;--theme-ink-faint:#17171773;--theme-border:#1717171f;--theme-border-strong:#1717172e;--component-card-border:#c6c6c61f;--components-selection-background:#f2f2f2;--radius:.625rem;--radius-xs:.125rem;--radius-sm:calc(var(--radius) * .6);--radius-md:calc(var(--radius) * .8);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) * 1.4);--radius-2xl:calc(var(--radius) * 1.8);--radius-3xl:calc(var(--radius) * 2.2);--radius-4xl:calc(var(--radius) * 2.6);--component-action-height:1.75rem;--component-command-divider:#ffffffd1;--syntax-background:var(--components-selection-background);--syntax-foreground:#4c4f69;--syntax-keyword:#8839ef;--syntax-built-in:#d20f39;--syntax-type:#df8e1d;--syntax-literal:#fe640b;--syntax-operator:#04a5e5;--syntax-punctuation:#5c5f77;--syntax-property:#179299;--syntax-regexp:#ea76cb;--syntax-string:#40a02b;--syntax-subst:#6c6f85;--syntax-symbol:#dd7878;--syntax-title:#1e66f5;--syntax-comment:#7c7f93;--syntax-link:#209fb5;--syntax-addition:#40a02b;--syntax-addition-background:#40a02b26;--syntax-deletion:#d20f39;--syntax-deletion-background:#d20f3926;gap:var(--components-content-top);background:var(--theme-background);min-height:calc(100svh - 3.5rem);color:var(--theme-ink);transition-property:--theme-background,--theme-ink,--theme-ink-muted,--theme-ink-faint,--theme-border,--theme-border-strong,--component-card-border,--components-selection-background,--component-command-divider,--syntax-background,--syntax-foreground,--syntax-keyword,--syntax-built-in,--syntax-type,--syntax-literal,--syntax-operator,--syntax-punctuation,--syntax-property,--syntax-regexp,--syntax-string,--syntax-subst,--syntax-symbol,--syntax-title,--syntax-comment,--syntax-link,--syntax-addition,--syntax-addition-background,--syntax-deletion,--syntax-deletion-background;transition-duration:var(--theme-transition-duration,.42s);transition-timing-function:var(--theme-transition-ease,cubic-bezier(.4, 0, .2, 1));grid-template-columns:clamp(12rem,13vw,16rem) minmax(0,1fr) clamp(13rem,14vw,18rem);display:grid}.components-left-sidebar,.components-right-sidebar{padding-top:var(--components-content-top);align-self:start;position:sticky;top:3.5rem}.components-left-sidebar{border-right:1px solid var(--theme-border);scrollbar-width:none;height:calc(100svh - 3.5rem);min-height:0;padding-right:clamp(1.25rem,2.5vw,2.5rem);overflow:hidden auto}.components-left-sidebar>nav,.components-sidebar-catalog{z-index:1;position:relative}.components-left-sidebar::-webkit-scrollbar{display:none}.components-sidebar-label,.components-document-kicker{color:var(--theme-ink-faint);letter-spacing:.01em;margin:0 0 .55rem;font-size:.78rem;font-weight:450;line-height:1.4}.components-sidebar-links{justify-items:start;gap:0;display:grid;position:relative}.components-sidebar-link{z-index:1;border-radius:var(--radius-lg);width:fit-content;min-height:1.95rem;color:var(--theme-ink-muted);align-items:center;padding:.26rem .7rem;font-size:.88rem;line-height:1.25;text-decoration:none;display:flex;position:relative}.components-sidebar-link.is-active{background:var(--components-selection-background);color:var(--theme-ink);font-weight:520}.components-left-sidebar:not(.has-shared-indicator) .components-sidebar-link:hover,.components-left-sidebar:not(.has-shared-indicator) .components-sidebar-link:focus-visible{background:var(--components-selection-background);color:var(--theme-ink);outline:none}.components-sidebar-indicator{z-index:0;border-radius:var(--radius-lg);background:var(--components-selection-background);opacity:0;pointer-events:none;will-change:transform, width, height;width:0;height:0;position:absolute;top:0;left:0}.components-left-sidebar.has-shared-indicator .components-sidebar-component-link:before{display:none}.components-sidebar-link.is-disabled{cursor:default}.components-sidebar-link.is-disabled:hover{color:var(--theme-ink)}.components-sidebar-catalog{margin-top:2.25rem;padding-bottom:1.5rem}.components-sidebar-empty{color:var(--theme-ink-faint);margin:0;font-size:.82rem;line-height:1.55}.components-sidebar-category+.components-sidebar-category{margin-top:1rem}.components-sidebar-category-label{width:fit-content;color:var(--theme-ink-faint);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.38rem;margin:0 0 .18rem;padding:0 .7rem;font-size:.66rem;font-weight:600;line-height:1.4;display:flex}.components-sidebar-category-count{color:var(--theme-ink-faint);font-variant-numeric:tabular-nums;letter-spacing:0;opacity:.8;font-size:.5rem;line-height:1;display:inline-block;transform:translateY(-.3em)}.components-sidebar-component-link{isolation:isolate;border-radius:var(--radius-lg);width:fit-content;color:var(--theme-ink-muted);padding:.28rem .7rem;font-size:.86rem;line-height:1.4;text-decoration:none;display:block;position:relative}.components-sidebar-component-link:before{z-index:-1;border-radius:inherit;background:var(--components-selection-background);content:"";opacity:0;transition:opacity .18s;position:absolute;inset:0}.components-sidebar-component-link:hover,.components-sidebar-component-link:focus-visible{color:var(--theme-ink);outline:none}.components-sidebar-component-link:hover:before,.components-sidebar-component-link:focus-visible:before{opacity:1}.components-sidebar-component-link.is-active{background:var(--components-selection-background);color:var(--theme-ink)}.components-document{width:min(100%,54rem);padding:var(--components-content-top) 0 7rem}.components-document-header{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:2rem;scroll-margin-top:5.5rem;display:grid}.components-document-kicker{display:none}.components-document h1{letter-spacing:-.045em;margin:0;font-family:Plus Jakarta Sans,Inter Variable,sans-serif;font-size:2.125rem;font-weight:600;line-height:1.08}.components-document-intro{max-width:35rem;color:var(--theme-ink-muted);letter-spacing:-.015em;margin:.85rem 0 0;font-size:1rem;line-height:1.55}.components-copy-button{isolation:isolate;height:var(--component-action-height);border-radius:var(--radius-md);background:var(--components-selection-background);color:var(--theme-ink);font:inherit;cursor:pointer;border:0;justify-content:center;align-items:center;gap:.3rem;padding:0 0 0 .5rem;font-size:.82rem;display:inline-flex;position:relative}.components-copy-button:before{z-index:-1;border-radius:inherit;background:var(--theme-ink);content:"";opacity:0;transition:opacity .18s;position:absolute;inset:0}.components-copy-button:hover,.components-copy-button:focus-visible{color:var(--theme-ink);outline:none}.components-copy-button:hover:before,.components-copy-button:focus-visible:before{opacity:.12}.components-copy-button:focus-visible{box-shadow:0 0 0 2px var(--theme-background), 0 0 0 4px var(--theme-ink)}.components-copy-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px}.components-copy-icon{width:.9rem;height:.9rem}.components-copy-label{text-align:left;white-space:nowrap;min-width:3.75rem}.components-copy-chevron{align-self:stretch;place-items:center;width:1.45rem;margin-left:0;display:grid}.components-copy-chevron svg{stroke-width:1.9px;width:.78rem;height:.78rem}:root[data-theme=dark] .components-library-page{--theme-background:#000;--theme-ink:#f2f2f2;--theme-ink-muted:#f2f2f29e;--theme-ink-faint:#f2f2f270;--theme-border:#f2f2f224;--theme-border-strong:#f2f2f233;--component-card-border:#4040401f;--components-selection-background:#1d1d1d;--component-command-divider:#ffffff2e;--syntax-background:var(--components-selection-background);--syntax-foreground:#cdd6f4;--syntax-keyword:#cba6f7;--syntax-built-in:#f38ba8;--syntax-type:#f9e2af;--syntax-literal:#fab387;--syntax-operator:#89dceb;--syntax-punctuation:#bac2de;--syntax-property:#94e2d5;--syntax-regexp:#f5c2e7;--syntax-string:#a6e3a1;--syntax-subst:#a6adc8;--syntax-symbol:#f2cdcd;--syntax-title:#89b4fa;--syntax-comment:#9399b2;--syntax-link:#74c7ec;--syntax-addition:#a6e3a1;--syntax-addition-background:#a6e3a126;--syntax-deletion:#f38ba8;--syntax-deletion-background:#f38ba826}@media (prefers-color-scheme:dark){:root:not([data-theme]) .components-library-page{--theme-background:#000;--theme-ink:#f2f2f2;--theme-ink-muted:#f2f2f29e;--theme-ink-faint:#f2f2f270;--theme-border:#f2f2f224;--theme-border-strong:#f2f2f233;--component-card-border:#4040401f;--components-selection-background:#1d1d1d;--component-command-divider:#ffffff2e;--syntax-background:var(--components-selection-background);--syntax-foreground:#cdd6f4;--syntax-keyword:#cba6f7;--syntax-built-in:#f38ba8;--syntax-type:#f9e2af;--syntax-literal:#fab387;--syntax-operator:#89dceb;--syntax-punctuation:#bac2de;--syntax-property:#94e2d5;--syntax-regexp:#f5c2e7;--syntax-string:#a6e3a1;--syntax-subst:#a6adc8;--syntax-symbol:#f2cdcd;--syntax-title:#89b4fa;--syntax-comment:#9399b2;--syntax-link:#74c7ec;--syntax-addition:#a6e3a1;--syntax-addition-background:#a6e3a126;--syntax-deletion:#f38ba8;--syntax-deletion-background:#f38ba826}}.components-document-section{margin-top:3rem;scroll-margin-top:5.5rem}.components-document-section h2{letter-spacing:-.035em;margin:0 0 1.4rem;font-family:Plus Jakarta Sans,Inter Variable,sans-serif;font-size:1.25rem;font-weight:600;line-height:1.2}.components-empty-state{min-height:2.75rem;padding:.65rem 0}.components-empty-state p{color:var(--theme-ink-muted);margin:0;font-size:.88rem;line-height:1.5}.components-catalog-filters{gap:.75rem;margin-top:2.5rem;display:grid}.components-filter-toolbar{align-items:center;gap:.7rem;min-width:0;display:flex}.components-filter-bar{isolation:isolate;background:var(--components-selection-background);scrollbar-width:none;border-radius:999px;flex:0 auto;gap:.3rem;width:max-content;min-width:0;padding:.25rem;display:flex;position:relative;overflow-x:auto}.components-filter-hover-indicator{z-index:0;background:var(--theme-background);opacity:0;pointer-events:none;will-change:transform, width, height;border-radius:999px;width:0;height:0;position:absolute;top:0;left:0;box-shadow:0 1px 2px #0000001f}.components-filter-button{z-index:1;min-height:1.75rem;color:var(--theme-ink-muted);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:999px;flex:none;padding:.25rem .85rem;font-size:.82rem;transition:background .7s cubic-bezier(.22,1,.36,1),color .7s cubic-bezier(.22,1,.36,1);position:relative}.components-filter-button:hover,.components-filter-button:focus-visible{background:var(--theme-background);color:var(--theme-ink)}.components-filter-button[aria-pressed=true]{background:var(--theme-background);color:var(--theme-ink);box-shadow:0 1px 2px #0000001f}.components-filter-bar.has-shared-indicator .components-filter-button:is(:hover,:focus-visible,[aria-pressed=true]){box-shadow:none;background:0 0}.components-filter-search-toggle{width:2.25rem;height:2.25rem;color:var(--theme-ink-muted);cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;place-items:center;padding:0;display:grid;position:absolute;top:0;right:0}.components-filter-search-toggle:hover,.components-filter-search-toggle:focus-visible{color:var(--theme-ink)}.components-filter-search-toggle svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;flex:none;grid-area:1/1;width:1.05rem;height:1.05rem}.components-filter-close-icon{visibility:hidden;opacity:0;transform:rotate(45deg)scale(.65)}.components-catalog-search{background:var(--components-selection-background);width:2.25rem;height:2.25rem;color:var(--theme-ink-muted);border-radius:999px;flex:none;margin-left:auto;position:relative;overflow:hidden}.components-filter-search-body{visibility:hidden;opacity:0;align-items:center;padding:0 2.5rem 0 .85rem;display:flex;position:absolute;inset:0}.components-catalog-search input{width:100%;min-width:0;color:var(--theme-ink);font:inherit;background:0 0;border:0;outline:0;padding:0;font-size:.82rem}.components-catalog-search input::placeholder{color:var(--theme-ink-muted)}.components-catalog-search:focus-within{box-shadow:inset 0 0 0 1px var(--theme-border-strong)}.components-card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(16rem,33.3333% - .833333rem)),1fr));gap:1.25rem;display:grid}.components-catalog-card{min-width:0;color:var(--theme-ink);text-decoration:none;display:grid;container-type:inline-size}.components-catalog-card:hover,.components-catalog-card:focus-visible{outline:none}.components-catalog-card:focus-visible .components-card-preview{box-shadow:inset 0 0 0 2px var(--theme-ink)}.components-catalog-card.is-static-preview{align-content:start;gap:.85rem}.components-catalog-card.is-static-preview .components-card-preview{box-shadow:none;border:0}.components-catalog-card.is-static-preview .components-card-footer{background:0 0;padding:0;position:static}.components-catalog-card.is-static-preview:focus-visible .components-card-copy strong{text-underline-offset:.2em;text-decoration:underline}.components-card-preview{aspect-ratio:1.35;border:1px solid var(--theme-border);border-radius:var(--radius-2xl);background:var(--components-selection-background);place-items:center;width:100%;min-width:0;min-height:13rem;display:grid;position:relative;overflow:hidden}.components-card-preview-image{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.components-card-preview-copy{letter-spacing:-.065em;font-family:Plus Jakarta Sans,Inter Variable,sans-serif;font-size:clamp(1.4rem,12cqw,3.75rem);font-weight:600;line-height:.95}.components-card-footer{z-index:1;background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--theme-background) 72%, transparent) 58%, color-mix(in srgb, var(--theme-background) 96%, transparent));justify-content:space-between;align-items:center;gap:1rem;padding:2.4rem 1rem 1rem;display:flex;position:absolute;bottom:0;left:0;right:0}.components-card-copy{gap:.2rem;min-width:0;display:grid}.components-card-copy strong{text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;font-weight:600;line-height:1.2;overflow:hidden}.components-card-copy>span{color:var(--theme-ink-muted);font-size:.8rem;line-height:1.35}.components-card-arrow{background:color-mix(in srgb, var(--theme-background) 88%, transparent);width:2.75rem;height:2.75rem;color:var(--theme-ink);border-radius:50%;flex:none;place-items:center;display:grid}.components-card-arrow svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:1rem;height:1rem;transition:transform .22s cubic-bezier(.22,1,.36,1)}.components-catalog-card:hover .components-card-arrow svg,.components-catalog-card:focus-visible .components-card-arrow svg{transform:translate(.12rem,-.12rem)}.components-list{border-top:1px solid var(--theme-border);display:grid}.components-list a{border-bottom:1px solid var(--theme-border);color:var(--theme-ink);justify-content:space-between;gap:1rem;padding:.85rem 0;font-size:.88rem;text-decoration:none;display:flex}.components-list a span:last-child{color:var(--theme-ink-faint);text-transform:capitalize;font-size:.76rem}.components-catalog-placeholder{color:var(--theme-ink-muted);justify-content:space-between;align-items:center;gap:1rem;padding:.65rem 0;font-size:.9rem;display:flex}.components-catalog-placeholder span:last-child{color:var(--theme-ink-faint)}.components-right-sidebar nav{gap:0;display:grid}.components-right-sidebar nav .components-sidebar-label{margin-bottom:.45rem}.components-right-sidebar nav a,.components-right-sidebar nav button{color:var(--theme-ink-muted);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;padding:.2rem 0;font-size:.82rem;line-height:1.45;text-decoration:none}.components-right-sidebar nav a:hover,.components-right-sidebar nav a:focus-visible,.components-right-sidebar nav button:hover,.components-right-sidebar nav button:focus-visible{color:var(--theme-ink);outline:none}.component-detail-header{scroll-margin-top:5.5rem}.component-detail-drop,.component-section-heading>div>span{color:var(--theme-ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.65rem;font-size:.74rem;line-height:1.4;display:block}.component-tag-list{flex-wrap:wrap;gap:.45rem;margin-top:1.3rem;display:flex}.component-tag-list span{border:1px solid var(--theme-border);border-radius:var(--radius-4xl);color:var(--theme-ink-muted);padding:.35rem .58rem;font-size:.7rem}.component-preview-section{margin-top:3rem;scroll-margin-top:5.5rem}.component-section-heading{justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:1.2rem;display:flex}.component-section-heading h2{letter-spacing:-.03em;margin:0;font-family:Plus Jakarta Sans,Inter Variable,sans-serif;font-size:1.1rem;font-weight:600}.component-section-heading button,.component-source-tabs button{white-space:nowrap;border:1px solid var(--theme-border);border-radius:var(--radius-md);background:var(--components-selection-background);color:var(--theme-ink);font:inherit;cursor:pointer;flex:none;font-size:.74rem}.component-section-heading button{min-height:2rem;padding:0 .72rem}.component-preview-stage{border:1px solid var(--theme-border);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;background:radial-gradient(circle at 20% 20%, #4867ff29, transparent 35%), color-mix(in srgb, var(--components-selection-background) 58%, var(--theme-background));place-items:center;min-height:22rem;padding:clamp(2rem,7vw,5rem);display:grid;overflow:hidden}.component-preview-stage h2{letter-spacing:-.065em;max-width:11ch;margin:0;font-family:Plus Jakarta Sans,Inter Variable,sans-serif;font-size:clamp(2.5rem,5.5vw,5.25rem);font-weight:600;line-height:.98}.component-controls{border:1px solid var(--theme-border);border-radius:0 0 var(--radius-2xl) var(--radius-2xl);border-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;padding:1.15rem;display:grid}.component-controls label{color:var(--theme-ink-muted);gap:.65rem;font-size:.74rem;display:grid}.component-controls label>span{justify-content:space-between;display:flex}.component-controls b{color:var(--theme-ink);font-weight:500}.component-controls input,.component-controls select{width:100%;accent-color:var(--theme-ink)}.component-controls select{border:1px solid var(--theme-border);border-radius:var(--radius-md);background:var(--theme-background);height:1.85rem;color:var(--theme-ink);padding:0 .5rem}.component-section-heading.compact{align-items:center}.component-source-tabs{border:1px solid var(--theme-border);border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:color-mix(in srgb, var(--components-selection-background) 62%, transparent);border-bottom:0;gap:.35rem;padding:.45rem;display:flex;overflow-x:auto}.component-source-tabs button{color:var(--theme-ink-muted);text-transform:none;background:0 0;border-color:#0000;padding:.42rem .65rem}.component-source-tabs button.is-active{border-color:var(--theme-border);background:var(--components-selection-background);color:var(--theme-ink)}.component-source-code{border:1px solid var(--theme-border);border-radius:0 0 var(--radius-xl) var(--radius-xl);background:color-mix(in srgb, var(--components-selection-background) 38%, var(--theme-background));max-height:32rem;color:var(--theme-ink-muted);white-space:pre;margin:0;padding:1.15rem;font-size:.72rem;line-height:1.65;overflow:auto}.component-install-section p{color:var(--theme-ink-muted);margin:-.6rem 0 1rem;font-size:.84rem;line-height:1.55}.component-install-section>code{border:1px solid var(--theme-border);border-radius:var(--radius-xl);background:var(--components-selection-background);color:var(--theme-ink);padding:.9rem 1rem;font-size:.78rem;display:block;overflow-x:auto}.component-detail-page{--component-heading-ink:#0b0b0b;--component-description-ink:#636363}:root[data-theme=dark] .component-detail-page{--component-heading-ink:#f2f2f2;--component-description-ink:#868686}@supports (color:lab(0% 0 0)){.component-detail-page{--component-heading-ink:lab(3.04863% 0 0);--component-description-ink:lab(42% 0 0)}:root[data-theme=dark] .component-detail-page{--component-heading-ink:lab(95.36% 0 0);--component-description-ink:lab(55.92% -.0000298023 0)}}.component-detail-page .component-detail-header,.component-detail-page .component-copy-prompt-button .components-copy-label{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}.component-detail-page .component-detail-header{grid-template-columns:minmax(0,1fr);align-items:start;gap:0;display:grid}.component-detail-page .component-detail-header h1{color:var(--component-heading-ink);opacity:1;font-size:1.875rem;line-height:2.25rem}.component-detail-page .component-detail-header .components-document-intro{color:var(--component-description-ink);opacity:1;font-size:1rem;line-height:1.5rem}.component-detail-page .component-copy-prompt-button .components-copy-label{color:var(--component-heading-ink);opacity:1;font-size:.875rem;line-height:1.25rem}@media (width>=640px){.component-detail-page .component-copy-prompt-button .components-copy-label{font-size:.75rem;line-height:1rem}}.component-header-actions{align-items:center;gap:.45rem;display:flex}.component-copy-prompt-button{padding-right:.65rem}.component-copy-prompt-button .components-copy-label{min-width:0}.component-favorite-button{width:var(--component-action-height);height:var(--component-action-height);border-radius:var(--radius-md);background:var(--components-selection-background);color:var(--theme-ink);cursor:pointer;border:0;place-items:center;padding:0;transition:background-color .18s ease-out,color .18s ease-out;display:grid}.component-favorite-button svg,.component-fullscreen-button svg,.component-viewport-controls svg,.component-panel-copy svg,.component-replay-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;width:.92rem;height:.92rem}.component-favorite-button:hover,.component-favorite-button:focus-visible,.component-viewport-controls button:hover,.component-viewport-controls button:focus-visible,.component-viewport-controls button.is-active{background:color-mix(in srgb, var(--components-selection-background) 84%, var(--theme-ink) 16%);color:var(--theme-ink);outline:none}.component-favorite-button:focus-visible,.component-viewport-controls button:focus-visible{box-shadow:inset 0 0 0 1px var(--theme-border-strong)}.component-favorite-button.is-confirming{color:#fff;background:#ec4899}.component-favorite-button .component-favorite-fill{fill:currentColor;stroke:none;opacity:0;transition:opacity .18s ease-out}.component-favorite-button.is-active .component-favorite-fill{opacity:1}.component-favorite-button svg{transform-box:fill-box;transform-origin:50%}.component-viewport-controls{isolation:isolate;height:var(--component-action-height);border-radius:var(--radius-md);background:var(--components-selection-background);display:flex;position:relative;overflow:visible}.component-viewport-indicator{z-index:0;background:color-mix(in srgb, var(--components-selection-background) 84%, var(--theme-ink) 16%);opacity:0;pointer-events:none;width:0;height:0;position:absolute;top:0;left:0}.component-viewport-controls.has-shared-indicator button:hover,.component-viewport-controls.has-shared-indicator button:focus-visible,.component-viewport-controls.has-shared-indicator button.is-active{background:0 0}.component-viewport-controls button{z-index:1;width:var(--component-action-height);height:var(--component-action-height);border:0;border-left:1px solid var(--theme-border);color:var(--theme-ink-muted);cursor:pointer;background:0 0;place-items:center;padding:0;transition:color .7s cubic-bezier(.22,1,.36,1);display:grid;position:relative}.component-viewport-controls button:first-of-type{border-radius:var(--radius-md) 0 0 var(--radius-md);border-left:0}.component-viewport-controls button:last-of-type{border-radius:0 var(--radius-md) var(--radius-md) 0}.component-viewport-controls button:after{z-index:6;border-radius:var(--radius-md);background:var(--theme-ink);color:var(--theme-background);content:attr(data-tooltip);opacity:0;pointer-events:none;white-space:nowrap;padding:.35rem .5rem;font-size:.68rem;line-height:1;transition:opacity .14s,transform .14s;position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translate(-50%,.25rem)}.component-viewport-controls button:hover:after,.component-viewport-controls button:focus-visible:after{opacity:1;transform:translate(-50%)}.component-view-tabs{border-bottom:1px solid #0000;align-items:end;gap:1.7rem;display:flex}.component-view-toolbar{justify-content:space-between;align-items:end;gap:1.25rem;margin-top:2.2rem;display:flex}.component-view-tabs button{color:var(--theme-ink-muted);font:inherit;text-transform:capitalize;cursor:pointer;background:0 0;border:0;padding:0 0 .65rem;font-size:.88rem;font-weight:500;position:relative}.component-view-tabs button:after{background:var(--theme-ink);content:"";opacity:0;height:2px;transition:opacity .16s,transform .22s;position:absolute;bottom:0;left:0;right:0;transform:scaleX(.65)}.component-view-tabs button:hover,.component-view-tabs button:focus-visible,.component-view-tabs button.is-active{color:var(--theme-ink);outline:none}.component-view-tabs button.is-active:after{opacity:1;transform:scaleX(1)}.component-showcase{border:1px solid var(--theme-border);border-radius:var(--radius-2xl);background:color-mix(in srgb, var(--theme-background) 94%, var(--components-selection-background));min-height:32rem;margin-top:1.4rem;overflow:hidden}.component-showcase--preview{min-height:25.5rem}.component-showcase .component-preview-stage{background:var(--theme-background);border:0;border-radius:0;flex:none;width:100%;min-height:25.5rem;transition:width .26s;position:relative}.component-preview-canvas{background:color-mix(in srgb, var(--components-selection-background) 45%, var(--theme-background));justify-content:center;min-height:25.5rem;display:flex;overflow:auto}.component-preview-canvas.is-tablet .component-preview-stage{width:min(100%,48rem)}.component-preview-canvas.is-mobile .component-preview-stage{width:min(100%,390px)}.component-preview-canvas:not(.is-desktop) .component-preview-stage{box-shadow:0 0 0 1px var(--theme-border)}.component-showcase.is-fullscreen{z-index:1000;box-sizing:border-box;background:var(--theme-background);border:0;border-radius:0;width:100%;max-width:none;height:100dvh;min-height:0;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.component-showcase .component-preview-stage:has(>.component-background-preview){height:var(--component-background-preview-height,30rem);min-height:0;padding:0}.component-showcase .component-background-preview,.component-showcase .component-background-preview>*{width:100%;height:100%;min-height:0}.component-showcase.is-fullscreen::backdrop{background:var(--theme-background)}.component-showcase.is-fullscreen .component-preview-canvas{width:100%;height:100%;min-height:0}.component-showcase.is-fullscreen .component-preview-canvas .component-preview-stage{width:100%;height:100%;min-height:0;box-shadow:none;transition:none}.component-showcase.is-fullscreen .component-preview-stage>:not(.component-preview-actions){min-height:0;max-height:100%;height:100%!important}.component-showcase.is-fullscreen .component-preview-actions{z-index:50;top:max(1rem, env(safe-area-inset-top));right:max(1rem, env(safe-area-inset-right))}.component-preview-actions .component-fullscreen-button{width:var(--component-action-height);height:var(--component-action-height);border-radius:var(--radius-md);background:var(--components-selection-background);color:var(--theme-ink);cursor:pointer;border:0;flex:none;place-items:center;padding:0;display:grid}.component-preview-actions .component-fullscreen-button:hover{background:color-mix(in srgb, var(--components-selection-background) 84%, var(--theme-ink) 16%)}.component-preview-actions .component-fullscreen-button:focus-visible{outline:2px solid var(--theme-ink);outline-offset:3px}.component-replay-button,.component-panel-copy{height:var(--component-action-height);border:1px solid var(--theme-border);border-radius:var(--radius-md);background:var(--components-selection-background);color:var(--theme-ink);font:inherit;cursor:pointer;justify-content:center;align-items:center;gap:.38rem;padding:0 .65rem;font-size:.82rem;display:inline-flex}.component-panel-copy{white-space:nowrap;border:0;flex:none}.component-preview-actions{z-index:2;align-items:center;gap:.4rem;display:flex;position:absolute;top:.9rem;right:.9rem}.component-replay-button{border:0}.component-controls-section .component-controls{border:1px solid var(--theme-border);border-radius:var(--radius-2xl);background:color-mix(in srgb, var(--components-selection-background) 42%, var(--theme-background));grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;min-height:6.5rem;padding:1rem 1.1rem}.component-controls-section h2,.component-properties-heading h2{margin-bottom:1rem}.component-properties-heading{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.component-properties-heading>span{color:var(--theme-ink-faint);white-space:nowrap;font-size:.76rem}.component-properties-table-wrap{border:1px solid var(--theme-border);border-radius:var(--radius-2xl);background:var(--theme-background);overflow-x:auto}.component-properties-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:42rem}.component-properties-table th,.component-properties-table td{border-bottom:1px solid var(--theme-border);color:var(--theme-ink-muted);text-align:left;vertical-align:middle;padding:.9rem 1rem;font-size:.76rem;line-height:1.5}.component-properties-table th{color:var(--theme-ink-faint);font-weight:600}.component-properties-table th:first-child{width:18%}.component-properties-table th:nth-child(2){width:24%}.component-properties-table th:nth-child(3){width:18%}.component-properties-table th:nth-child(4){width:40%}.component-properties-table tbody tr:last-child td{border-bottom:0}.component-properties-table code{color:var(--theme-ink);white-space:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.72rem}.component-properties-table td:first-child code{color:var(--syntax-title)}.component-prompt-view{min-height:32rem}.component-showcase--code,.component-showcase--prompt{background:0 0;border:0;border-radius:0;overflow:visible}.component-showcase--code{min-height:0}.component-install-view{padding-top:.35rem}.component-install-view>h2{letter-spacing:-.045em;margin:0;font-family:Plus Jakarta Sans,Inter Variable,sans-serif;font-size:1.55rem;font-weight:600;line-height:1.2}.component-install-methods{gap:1.6rem;margin-top:2.35rem;display:flex}.component-install-methods button{color:var(--theme-ink-muted);font:inherit;text-transform:capitalize;cursor:pointer;background:0 0;border:0;padding:0 0 .62rem;font-size:.95rem;position:relative}.component-install-methods button:after{background:var(--theme-ink);content:"";opacity:0;height:2px;position:absolute;bottom:0;left:0;right:0}.component-install-methods button:hover,.component-install-methods button:focus-visible,.component-install-methods button.is-active{color:var(--theme-ink);outline:none}.component-install-methods button.is-active:after{opacity:1}.component-command-box,.component-code-view{border-radius:var(--radius-2xl);background:var(--components-selection-background);border:0;overflow:hidden}.component-command-box,.component-install-view .component-code-view{margin-top:1.25rem}.component-command-toolbar{align-items:center;gap:.35rem;min-height:2.75rem;padding:.55rem .75rem;display:flex}.component-terminal-icon{border-radius:var(--radius-md);background:var(--theme-ink-muted);width:1.4rem;height:1.4rem;color:var(--theme-background);place-items:center;display:grid}.component-terminal-icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:.88rem;height:.88rem}.component-package-tabs{align-items:center;gap:.25rem;display:flex}.component-package-tabs button{border-radius:var(--radius-md);height:1.4rem;min-height:1.4rem;color:var(--theme-ink-muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:0 .7rem;font-size:.78rem}.component-package-tabs button:hover,.component-package-tabs button:focus-visible{color:var(--theme-ink);outline:none}.component-package-tabs button.is-active{background:color-mix(in srgb, var(--components-selection-background) 88%, var(--theme-ink) 12%);color:var(--theme-ink)}.component-command-copy{border-radius:var(--radius-md);width:1.7rem;height:1.7rem;color:var(--theme-ink-muted);cursor:pointer;background:0 0;border:0;place-items:center;margin-left:auto;padding:0;display:grid}.component-command-copy:hover,.component-command-copy:focus-visible{background:var(--components-selection-background);color:var(--theme-ink);outline:none}.component-command-copy svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;width:.82rem;height:.82rem}.component-command-copy .sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.component-command-box>code{border-top:1px solid var(--component-command-divider);background:var(--syntax-background);color:var(--syntax-foreground);white-space:nowrap;padding:1.15rem 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8rem;line-height:1.5;display:block;overflow-x:auto}.component-install-view .component-code-view{min-height:0}.component-code-toolbar{border-bottom:1px solid var(--theme-border);justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;padding:.55rem .7rem;display:flex}.component-code-toolbar .component-source-tabs{background:0 0;border:0;border-radius:0;flex:1;min-width:0;padding:0}.component-code-toolbar .component-panel-copy{white-space:nowrap;flex:none}.component-source-label{border:1px solid var(--theme-border);border-radius:var(--radius-md);background:var(--components-selection-background);color:var(--theme-ink);padding:.42rem .65rem;font-size:.74rem}.component-code-view .component-source-code{background:var(--syntax-background);border:0;border-radius:0;min-height:28.5rem;max-height:36rem;padding:1.2rem 1.35rem}.component-expandable-code{position:relative;overflow:hidden}.component-expandable-code:not(.is-expanded){max-height:18rem}.component-expandable-code:not(.is-expanded)>pre{overflow:auto hidden}.component-expandable-code-fade{z-index:1;background:linear-gradient(to bottom, transparent, var(--syntax-background) 78%);pointer-events:none;height:8rem;position:absolute;bottom:0;left:0;right:0}.component-expandable-code-toggle{z-index:2;min-height:var(--component-action-height);border-radius:var(--radius-2xl);background:var(--components-selection-background);color:var(--theme-ink);box-shadow:0 0 0 1px var(--theme-border);font:inherit;cursor:pointer;border:0;padding:0 .85rem;font-size:.82rem;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.component-expandable-code-toggle:hover,.component-expandable-code-toggle:focus-visible{background:color-mix(in srgb, var(--components-selection-background) 84%, var(--theme-ink) 16%);outline:none}.component-expandable-code-toggle:focus-visible{box-shadow:0 0 0 2px var(--theme-background), 0 0 0 3px var(--theme-ink)}.component-expandable-code.is-expanded{padding-bottom:calc(var(--component-action-height) + 2rem)}.component-code-view .component-expandable-code.is-expanded .component-source-code{max-height:none;overflow-x:auto}.components-library-page code.hljs{color:var(--syntax-foreground);background:0 0}.component-source-code code.hljs{min-width:max-content;display:block}.components-library-page .hljs-keyword,.components-library-page .hljs-meta .hljs-keyword,.components-library-page .hljs-variable.language_{color:var(--syntax-keyword)}.components-library-page .hljs-built_in,.components-library-page .hljs-doctag,.components-library-page .hljs-emphasis,.components-library-page .hljs-strong{color:var(--syntax-built-in)}.components-library-page .hljs-type,.components-library-page .hljs-title.class_,.components-library-page .hljs-selector-tag{color:var(--syntax-type)}.components-library-page .hljs-literal,.components-library-page .hljs-meta,.components-library-page .hljs-number,.components-library-page .hljs-variable.constant_{color:var(--syntax-literal)}.components-library-page .hljs-operator{color:var(--syntax-operator)}.components-library-page .hljs-punctuation{color:var(--syntax-punctuation)}.components-library-page .hljs-property,.components-library-page .hljs-tag,.components-library-page .hljs-formula,.components-library-page .hljs-bullet,.components-library-page .hljs-selector-class,.components-library-page .hljs-selector-pseudo{color:var(--syntax-property)}.components-library-page .hljs-regexp{color:var(--syntax-regexp)}.components-library-page .hljs-string,.components-library-page .hljs-meta .hljs-string,.components-library-page .hljs-char.escape_,.components-library-page .hljs-attribute,.components-library-page .hljs-code,.components-library-page .hljs-quote{color:var(--syntax-string)}.components-library-page .hljs-subst{color:var(--syntax-subst)}.components-library-page .hljs-symbol,.components-library-page .hljs-template-tag,.components-library-page .hljs-template-variable{color:var(--syntax-symbol)}.components-library-page .hljs-name,.components-library-page .hljs-variable,.components-library-page .hljs-selector-attr{color:var(--syntax-keyword)}.components-library-page .hljs-title,.components-library-page .hljs-title.function_,.components-library-page .hljs-section,.components-library-page .hljs-attr,.components-library-page .hljs-selector-id{color:var(--syntax-title)}.components-library-page .hljs-comment{color:var(--syntax-comment)}.components-library-page .hljs-link{color:var(--syntax-link);font-style:italic}.components-library-page .hljs-params{color:var(--syntax-foreground)}.components-library-page .hljs-section,.components-library-page .hljs-strong{font-weight:700}.components-library-page .hljs-emphasis{font-style:italic}.components-library-page .hljs-addition{background:var(--syntax-addition-background);color:var(--syntax-addition)}.components-library-page .hljs-deletion{background:var(--syntax-deletion-background);color:var(--syntax-deletion)}.component-prompt-view{grid-template-rows:auto 1fr;padding:.35rem 0 0;display:grid;position:relative}.component-prompt-heading{justify-content:space-between;align-items:start;gap:2rem;padding-right:7.25rem;display:flex}.component-prompt-view .component-prompt-heading .component-panel-copy{z-index:2;position:absolute;top:.35rem;right:0}.component-prompt-heading h2{letter-spacing:-.045em;margin:0;font-family:Plus Jakarta Sans,Inter Variable,sans-serif;font-size:1.55rem;font-weight:600;line-height:1.2}.component-prompt-heading p,.component-usage-section>p{max-width:35rem;color:var(--theme-ink-muted);margin:.55rem 0 0;font-size:.84rem;line-height:1.55}.component-prompt-code{background:var(--syntax-background);color:var(--syntax-foreground);white-space:pre-wrap;margin:0;padding:1.15rem 1rem;font-size:.8rem;line-height:1.6;overflow:auto}.component-prompt-code-surface{border-radius:var(--radius-2xl);background:var(--syntax-background);margin-top:1.25rem}.component-usage-section>p code{color:var(--theme-ink)}@media (width<=1180px){.components-library-page{grid-template-columns:12rem minmax(0,1fr)}.components-right-sidebar{display:none}}@media (width<=800px){.components-library-page{min-height:calc(100svh - 3.35rem);display:block}.components-left-sidebar{height:auto;min-height:0;margin-inline:calc(var(--surface-padding) * -1);padding:1rem var(--surface-padding);border-right:0;border-bottom:1px solid var(--theme-border);scrollbar-width:none;position:static;overflow:auto hidden}.components-left-sidebar nav{align-items:center;width:max-content;display:flex}.components-sidebar-indicator,.components-left-sidebar .components-sidebar-label,.components-sidebar-catalog,.components-sidebar-link.is-disabled{display:none}.components-sidebar-links{display:flex}.components-sidebar-link{min-height:2.15rem}.components-document{padding:2.5rem 0 5rem}.component-controls-section .component-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.components-document-header{grid-template-columns:minmax(0,1fr);gap:1.4rem}.components-copy-button{justify-self:start}.components-catalog-placeholder{flex-direction:column;align-items:flex-start}.component-controls{grid-template-columns:minmax(0,1fr)}.component-preview-stage{min-height:17rem}.component-detail-page .component-detail-header{grid-template-columns:minmax(0,1fr);gap:1.25rem}.component-view-toolbar{flex-direction:column;align-items:flex-start;gap:1rem}.component-header-actions{justify-content:flex-start}.component-controls-section .component-controls{grid-template-columns:minmax(0,1fr)}.component-prompt-heading{flex-direction:column;align-items:stretch;gap:1rem;padding-right:0}.component-prompt-view .component-prompt-heading .component-panel-copy{align-self:flex-start;position:static}}@media (prefers-reduced-motion:reduce){.component-favorite-button,.component-favorite-button .component-favorite-fill,.components-library-page,.components-copy-button,.components-copy-button:before,.components-sidebar-component-link,.components-sidebar-component-link:before,.components-catalog-card,.components-card-arrow svg{transition:none}}.text-reveal-preview{box-sizing:border-box;width:100%;min-width:0;padding:clamp(2rem,7cqw,5rem)}.component-showcase .component-preview-stage:has(>.text-reveal-preview){padding:0;container-type:inline-size}
