:root{--doc-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}body{background:var(--vi-sem-surface-canvas);color:var(--vi-sem-text-default);font-family:var(--vi-font-primary, "Inter", system-ui, sans-serif);margin:0}.shell{display:grid;grid-template-columns:18rem minmax(0,1fr);min-height:100vh;min-height:100dvh}.sidebar{background:var(--vi-ref-steel-900);border-right:1px solid var(--vi-sem-border-default);color:var(--vi-ref-steel-100);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow-y:auto;padding:.75rem 1rem;position:sticky;top:0;--vi-cmp-vertical-nav-on-surface: var(--vi-ref-steel-100);--vi-sem-overline-color: var(--vi-ref-steel-400)}#sidebar-nav::part(header){padding:.75rem 0}#sidebar-nav vi-vertical-nav-item::part(leading){min-width:0;width:0}#sidebar-nav vi-vertical-nav-item::part(base){gap:0}.sidebar h1{font-size:1.125rem;font-family:var(--vi-font-secondary, "Manrope", "Inter", system-ui, sans-serif);margin:.15rem 0 0;color:inherit}.sidebar-version{color:var(--vi-ref-steel-500);font-size:.65rem;letter-spacing:.02em;margin-top:auto;padding:.75rem 1rem}.sidebar-version:empty{display:none}.sidebar-logo{background:var(--vi-sem-action-primary);border-radius:var(--vi-ref-radius-2);display:grid;height:1.5rem;place-items:center;width:1.5rem}.sidebar-logo img{height:1rem;object-fit:contain;width:1rem}.content{display:grid;align-content:start;padding:1.25rem}.content>*+*{margin-top:1rem}.doc-view[hidden]{display:none}#catalog{display:grid;align-content:start}.sidebar-controls{display:grid;gap:.6rem;margin:.25rem 0 1.1rem;padding:0 .35rem}#sidebar-nav[collapsed] .sidebar-controls{display:none}.sidebar-controls-row{display:flex;gap:.35rem;justify-content:space-between}.sidebar-controls vi-segmented-control{--vi-cmp-segmented-control-height: 1.75rem;--vi-cmp-segmented-bg: color-mix(in srgb, var(--vi-ref-color-white) 6%, transparent);--vi-cmp-segmented-border: color-mix(in srgb, var(--vi-ref-color-white) 12%, transparent);--vi-cmp-segmented-text: var(--vi-ref-steel-400);--vi-cmp-segmented-hover-bg: color-mix(in srgb, var(--vi-ref-color-white) 10%, transparent);--vi-cmp-segmented-pressed-bg: color-mix(in srgb, var(--vi-ref-color-white) 14%, transparent);min-width:0}.sidebar-controls vi-segment::part(button){padding:0 .4rem}.sidebar-control-field{display:grid;gap:.3rem}.sidebar-control-field .vi-overline-sm{color:var(--vi-ref-steel-400)}.visually-hidden{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.panel-header{align-items:center;display:flex;justify-content:space-between;gap:1rem}.panel-header h2{font-family:var(--vi-font-secondary, "Manrope", "Inter", system-ui, sans-serif);margin:.25rem 0 0}.muted{color:var(--vi-sem-text-muted);margin:0}.controls{display:flex;gap:.75rem;margin-top:1rem}.controls label{color:var(--vi-sem-text-muted);display:grid;flex:1;font-size:.8125rem;gap:.3rem;min-width:0}.playground-output{display:grid;gap:.75rem;margin-top:1rem}.preview{align-items:center;background:var(--vi-sem-surface-default-translucent);border:1px solid var(--vi-sem-border-default);border-radius:.75rem;display:flex;gap:.75rem;min-height:5rem;padding:1rem}.example-grid{align-items:stretch;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}.catalog-group{margin-top:0}.catalog-group .example-grid{margin-top:1.5rem}.catalog-group[data-catalog-id=navigation] [data-example-id=pagination],.catalog-group[data-catalog-id=navigation] [data-example-id=breadcrumb],.catalog-group[data-catalog-id=navigation] [data-example-id=tab-group]{grid-column:span 2}.catalog-group[data-catalog-id=navigation] [data-example-id=pagination] .example-preview{align-items:center;min-height:3.5rem}.catalog-group[data-catalog-id=form-inputs] [data-example-id=color-button] .example-preview,.catalog-group[data-catalog-id=form-inputs] [data-example-id=color-select-button] .example-preview{min-height:18rem}.catalog-group[data-catalog-id=form-inputs] [data-example-id=textarea] .example-preview{align-items:stretch;flex-direction:column;flex-wrap:nowrap}.catalog-group[data-catalog-id=form-inputs] [data-example-id=textarea] .example-preview vi-field{flex:1}.catalog-group[data-catalog-id=data-display] [data-example-id=metric-card]{grid-column:span 2}.catalog-group[data-catalog-id=data-display] [data-example-id=matrix-table],.catalog-group[data-catalog-id=data-display] [data-example-id=board],.catalog-group[data-catalog-id=data-display] [data-example-id=facts]{grid-column:1 / -1}.catalog-group[data-catalog-id=data-display] [data-example-id=board] vi-board{min-width:0;width:100%}.catalog-group[data-catalog-id=data-display] [data-example-id=data-grid]{grid-column:1 / -1}.catalog-group[data-catalog-id=data-display] [data-example-id=data-grid] .example-preview vi-stack{min-width:0}.catalog-group[data-catalog-id=data-display] [data-example-id=data-grid] vi-data-grid{min-width:0;width:100%}.catalog-group[data-catalog-id=layout] [data-example-id=page],.catalog-group[data-catalog-id=layout] [data-example-id=workspace]{grid-column:1 / -1}.catalog-group[data-catalog-id=overlays] [data-example-id=modal-header],.catalog-group[data-catalog-id=overlays] [data-example-id=details]{grid-column:span 2}.catalog-group[data-catalog-id=navigation] [data-example-id=vertical-nav] .example-preview,.catalog-group[data-catalog-id=navigation] [data-example-id=vertical-nav-painted] .example-preview{overflow:hidden;padding:0}.catalog-group[data-catalog-id=navigation] [data-example-id=vertical-nav] vi-vertical-nav,.catalog-group[data-catalog-id=navigation] [data-example-id=vertical-nav-painted] vi-vertical-nav{--vi-cmp-vertical-nav-width: 100%}.doc-rail-account{align-items:center;display:grid;gap:.5rem;grid-template-columns:auto minmax(0,1fr);padding:.375rem .75rem}.doc-rail-account-org{color:var(--vi-cmp-vertical-nav-on-surface-subtle, var(--vi-sem-text-subtle));font-size:var(--vi-ref-font-size-xs)}.example-card{height:100%;min-width:0;scroll-margin-top:1.25rem;content-visibility:auto;contain-intrinsic-size:auto 420px}.example-card::part(base){height:100%;overflow:visible}.example-card--located{animation:example-card-located 1.4s ease-out;border-radius:var(--vi-cmp-card-radius, var(--vi-ref-radius-3))}@keyframes example-card-located{0%,55%{box-shadow:var(--vi-sem-focus-ring)}to{box-shadow:0 0 0 0 transparent}}@media(prefers-reduced-motion:reduce){.example-card--located{animation-timing-function:steps(1,end)}}.example-card h3{margin:0}.example-heading-row{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;margin-bottom:.5rem}.example-heading-row vi-badge::part(base){font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}.example-card h4{margin:0;min-width:0}.example-preview{align-content:flex-start;align-items:flex-start;background:var(--vi-sem-surface-muted-translucent);border:1px solid var(--vi-sem-border-default);border-radius:.6rem;display:flex;flex-wrap:wrap;overflow:visible;gap:.625rem;min-height:4rem;min-width:0;padding:.75rem}.catalog-group[data-catalog-hydrated=loading] .example-preview[data-preview-state=pending]{opacity:.7}.example-preview>:is(vi-calendar,vi-callout,vi-card,vi-carousel,vi-comparison,vi-data-grid,vi-date-range-input,vi-empty-state,vi-frame,vi-list,vi-listbox,vi-listbox-popup,vi-metric-card,vi-page,vi-pagination,vi-progress-bar,vi-show-more-list,vi-skeleton,vi-split-panel,vi-timeline,vi-toast,vi-toast-stack,vi-zoomable-frame){max-width:100%;min-width:0;width:100%}.example-preview>vi-carousel{align-self:stretch}.example-preview>vi-carousel::part(base){display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%}.example-footer{border-top:1px solid var(--vi-sem-border-default);display:flex;gap:.5rem;padding-top:.625rem}.snippet{background:var(--vi-sem-surface-inverse);border-radius:.625rem;color:var(--vi-sem-text-inverse);font-family:var(--doc-font-mono);font-size:.75rem;margin:0;overflow-x:auto;padding:.75rem}vi-modal:not(:defined){display:none}#docs-popup-modal::part(dialog){max-width:min(72rem,94vw);width:fit-content}#docs-popup-modal::part(body){max-height:75dvh;overflow:auto}.docs-popup-code{background:var(--vi-sem-surface-inverse);border-radius:.625rem;color:var(--vi-sem-text-inverse);cursor:pointer;font-family:var(--doc-font-mono);font-size:.75rem;margin:0;max-width:min(68rem,90vw);overflow:auto;padding:.75rem;position:relative;transition:opacity .2s ease}.docs-popup-code--dimmed{opacity:.4}.docs-popup-copied-overlay{align-items:center;background:var(--vi-sem-backdrop);border-radius:.5rem;color:var(--vi-sem-success-dk);display:flex;font-family:var(--vi-font-secondary, "Manrope", "Inter", system-ui, sans-serif);font-size:1rem;font-weight:700;top:0;right:0;bottom:0;left:0;justify-content:center;position:absolute;animation:docs-copied-fade 1.5s ease forwards}@keyframes docs-copied-fade{0%{opacity:0}15%{opacity:1}70%{opacity:1}to{opacity:0}}.docs-popup-section+.docs-popup-section{margin-top:.875rem}.docs-popup-section h4{margin:0 0 .5rem}.docs-popup-table-wrap{border:1px solid var(--vi-sem-border-default);border-radius:.625rem;overflow:auto}.docs-popup-table{border-collapse:collapse;min-width:30rem;width:100%}.docs-popup-table th,.docs-popup-table td{border-bottom:1px solid var(--vi-sem-border-default);font-size:.75rem;padding:.45rem .5rem;text-align:left;vertical-align:top}.docs-popup-table th{background:var(--vi-sem-surface-muted);font-weight:700}h2,h3,h4{font-family:var(--vi-font-secondary, "Manrope", "Inter", system-ui, sans-serif)}blockquote,em{font-family:var(--vi-font-emphasis, "Manrope", "Inter", system-ui, sans-serif)}.color-section-body{margin-top:1rem}.color-section-body h3{font-size:1.05rem;margin:1.25rem 0 .75rem}.color-section-body h3:first-child{margin-top:.5rem}.semantic-group{margin-bottom:1rem}.semantic-group h4{margin:0 0 .5rem}.semantic-swatches{display:grid;gap:.375rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}.semantic-swatch{align-items:center;border:1px solid var(--vi-sem-border-default);border-radius:.5rem;display:flex;gap:.625rem;padding:.375rem}.semantic-swatch-color{background-image:linear-gradient(45deg,var(--vi-sem-border-subtle) 25%,transparent 25%),linear-gradient(-45deg,var(--vi-sem-border-subtle) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--vi-sem-border-subtle) 75%),linear-gradient(-45deg,transparent 75%,var(--vi-sem-border-subtle) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;border:1px solid var(--vi-sem-border-default);border-radius:.375rem;flex-shrink:0;height:2.25rem;overflow:hidden;position:relative;width:2.25rem}.semantic-swatch-color:after{background-color:var(--swatch-color);content:"";top:0;right:0;bottom:0;left:0;position:absolute}.semantic-swatch-info{display:flex;flex-direction:column;min-width:0}.semantic-swatch-name{font-size:.75rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.semantic-swatch-value,.semantic-swatch-ref{color:var(--vi-sem-text-muted);font-family:var(--doc-font-mono);font-size:.6875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-palettes{display:grid;gap:1rem}.brand-palette-family{align-items:center;display:flex;gap:.5rem}.brand-palette-family .semantic-swatch{flex-shrink:0;width:10rem}.brand-palette-family .color-palette-shades{flex:1;min-width:0}.color-palettes{display:grid;gap:.5rem}.color-palette-row{align-items:center;display:flex;gap:.5rem}.color-palette-label{flex-shrink:0;font-size:.75rem;font-weight:700;text-align:right;width:4.5rem}.color-palette-shades{display:flex;flex:1;gap:2px;min-width:0}.color-swatch{align-items:flex-end;background-color:var(--swatch-color);border:1px solid var(--vi-sem-border-subtle);display:flex;flex:1;justify-content:center;min-height:2.5rem;min-width:0;padding-bottom:.2rem}.color-swatch-label{color:#fff;font-size:.5625rem;font-weight:600;mix-blend-mode:difference;opacity:0;transition:opacity .12s ease}.color-palette-row:hover .color-swatch-label,.brand-palette-family:hover .color-swatch-label{opacity:1}.type-section-body{margin-top:1rem;overflow-x:auto}.type-config-grid{display:grid;gap:.75rem}.type-config-block{border:1px solid var(--vi-sem-border-default);border-radius:.625rem;overflow:hidden}.type-config-block h4{background:var(--vi-sem-surface-muted);border-bottom:1px solid var(--vi-sem-border-default);margin:0;padding:.5rem .75rem}.type-section-body h3{font-size:1.05rem;margin:1.25rem 0 .75rem}.type-section-body h3:first-child{margin-top:.5rem}.type-token-table{border:0;border-collapse:collapse;margin-bottom:0;table-layout:fixed;width:100%}.type-token-table th:first-child:nth-last-child(2),.type-token-table td:first-child:nth-last-child(2){width:22rem}.type-token-table th:first-child:nth-last-child(3),.type-token-table td:first-child:nth-last-child(3){width:16rem}.type-token-table th:last-child:nth-child(3),.type-token-table td:last-child:nth-child(3){width:6rem}.type-token-table th:first-child:nth-last-child(4),.type-token-table td:first-child:nth-last-child(4){width:12rem}.type-token-table th:nth-child(2):nth-last-child(3),.type-token-table td:nth-child(2):nth-last-child(3){width:5rem}.type-token-table th:nth-child(3):nth-last-child(2),.type-token-table td:nth-child(3):nth-last-child(2){width:3rem}.type-token-table th,.type-token-table td{border-bottom:1px solid var(--vi-sem-border-default);font-size:.8125rem;padding:.5rem .75rem;text-align:left;vertical-align:middle;white-space:nowrap}.type-token-table th{background:var(--vi-sem-surface-muted);font-weight:700}.type-token-table tr:last-child td{border-bottom:0}.type-preview{display:inline-block}.type-preview--primary{font-family:var(--vi-font-primary, "Inter", system-ui, sans-serif)}.type-preview--secondary{font-family:var(--vi-font-secondary, "Manrope", "Inter", system-ui, sans-serif)}.type-preview--emphasis{font-family:var(--vi-font-emphasis, "Manrope", "Inter", system-ui, sans-serif)}.type-preview--mono{font-family:var(--doc-font-mono)}.type-token-table code{font-family:var(--doc-font-mono);font-size:.75rem}.type-sample-group{margin-bottom:1.25rem}.type-sample-group h4{margin:0 0 .5rem}.type-sample{align-items:baseline;border-bottom:1px solid var(--vi-sem-border-default);display:flex;gap:1rem;justify-content:space-between;padding:.625rem 0}.type-sample:last-child{border-bottom:none}.type-sample-meta{color:var(--vi-sem-text-muted);flex-shrink:0;font-family:var(--doc-font-mono);font-size:.6875rem;text-align:right}.icon-section-body{margin-top:1rem}.icon-section-body h3{font-size:1.05rem;margin:1.75rem 0 .75rem}.icon-section-body h3:first-child{margin-top:.5rem}.icon-grid{display:grid;gap:.375rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}.icon-tile{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid var(--vi-sem-border-default);border-radius:.5rem;color:inherit;cursor:pointer;display:grid;font:inherit;gap:0 .625rem;grid-template-columns:auto minmax(0,1fr);padding:.375rem .5rem;position:relative;text-align:left}.icon-tile:hover{background:var(--vi-sem-surface-muted)}.icon-tile:focus-visible{outline:2px solid var(--vi-sem-action-primary);outline-offset:2px}.icon-tile vi-icon{color:var(--vi-sem-text-default);grid-row:span 2}.icon-tile-name{font-size:.75rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-tile-sub{color:var(--vi-sem-text-muted);font-family:var(--doc-font-mono);font-size:.6875rem;min-height:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-tile--copied:after{align-items:center;background:var(--vi-sem-surface-muted);border-radius:.4375rem;color:var(--vi-sem-success-text);content:"Copied";display:flex;font-size:.75rem;font-weight:700;top:0;right:0;bottom:0;left:0;justify-content:center;position:absolute}.icon-filter-row{align-items:center;display:flex;gap:.75rem;margin-bottom:.75rem}.icon-filter-row vi-input{max-width:20rem;width:100%}.icon-filter-count{font-family:var(--doc-font-mono);font-size:.75rem;white-space:nowrap}.icon-swap-step{margin-bottom:1.25rem}.icon-swap-step h4{margin:0 0 .375rem}.icon-swap-step p{margin:0 0 .5rem}.icon-code{background:var(--vi-sem-surface-muted);border:1px solid var(--vi-sem-border-default);border-radius:.625rem;font-family:var(--doc-font-mono);font-size:.75rem;margin:0 0 .5rem;overflow-x:auto;padding:.75rem}@media(max-width:950px){.shell{grid-template-columns:1fr}.sidebar{height:auto;position:static}.controls,.color-palette-row{flex-wrap:wrap}.color-palette-label{text-align:left;width:100%}.color-palette-shades{flex-wrap:wrap}}@media(max-width:560px){.content{padding:.75rem}.controls{flex-direction:column}.type-sample{flex-wrap:wrap}.type-sample-meta{flex-shrink:1;width:100%}.icon-filter-row{align-items:flex-start;flex-direction:column;gap:.375rem}.example-card[data-example-id]{grid-column:span 1!important}.example-preview{overflow-x:auto}}body.sample-raw{margin:0}.sample-raw-host{display:contents}body.sample-chrome{background:var(--vi-sem-surface-canvas);color:var(--vi-sem-text-default);display:flex;flex-direction:column;height:100dvh;margin:0}.sample-bar{align-items:flex-end;background:var(--vi-sem-surface-default);border-bottom:1px solid var(--vi-sem-border-default);display:flex;flex-wrap:wrap;gap:var(--vi-sem-space-gap-xl);padding:var(--vi-sem-space-inset-md) var(--vi-sem-space-inset-lg)}.sample-bar-identity{display:flex;flex-direction:column;gap:.125rem}.sample-bar-identity p,.sample-bar-identity h1{margin:0}.sample-bar-identity h1{font-size:var(--vi-ref-font-size-lg)}.sample-bar-controls{align-items:flex-end;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--vi-sem-space-gap-lg)}.sample-bar-actions{margin-inline-start:auto}.sample-stage{background:var(--vi-sem-surface-canvas);display:flex;flex-grow:1;justify-content:center;min-height:0;overflow:auto}.sample-frame{background:var(--vi-sem-surface-default);border:0;height:100%;width:100%}.sample-frame[data-constrained=true]{border:1px solid var(--vi-sem-border-default);border-radius:var(--vi-ref-radius-3);flex-shrink:0}body.sample-missing{background:var(--vi-sem-surface-canvas);color:var(--vi-sem-text-default);display:grid;height:100dvh;margin:0;place-items:center}.sample-missing-inner{max-width:32rem;text-align:center}