: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, "Lato", "Segoe 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-sem-overline-color: var(--vi-ref-steel-400);--vi-cmp-vertical-nav-item-hover-surface: color-mix(in srgb, var(--vi-ref-color-white) 8%, transparent);--vi-cmp-vertical-nav-item-hover-border: transparent;--vi-cmp-vertical-nav-item-hover-text: var(--vi-ref-steel-100);--vi-cmp-vertical-nav-item-active-surface: color-mix(in srgb, var(--vi-ref-color-white) 12%, transparent);--vi-cmp-vertical-nav-item-active-border: transparent;--vi-cmp-vertical-nav-item-active-text: var(--vi-ref-color-white)}#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, "Montserrat", "Lato", 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;padding:1.25rem}.content>*+*{margin-top:1rem}#styling{--vi-cmp-card-shadow: none}#styling::part(base){border-bottom:0;border-radius:.875rem .875rem 0 0;padding-bottom:0}#styling-controls{margin-top:0}.controls-bar{background:var(--vi-sem-surface-default);border:1px solid var(--vi-sem-border-default);border-top:0;border-radius:0 0 .875rem .875rem;box-shadow:var(--vi-sem-shadow-card);clip-path:inset(0 -12px -12px -12px);padding:1rem;position:sticky;top:0;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;z-index:100}.controls-bar.stuck{background:transparent;border:0;border-radius:0 0 .875rem .875rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vi-sem-text-inverse) 10%,transparent),var(--vi-sem-shadow-popup);clip-path:none;color:var(--vi-sem-text-inverse);overflow:hidden}.controls-bar.stuck:before{-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);background:color-mix(in srgb,var(--vi-sem-surface-inverse) 95%,transparent);content:"";top:0;right:0;bottom:0;left:0;position:absolute;z-index:-1}.controls-bar .controls label{transition:color .3s ease}.controls-bar.stuck .controls label{color:color-mix(in srgb,var(--vi-sem-text-inverse) 60%,transparent)}.controls-bar.stuck vi-select::part(base){background:color-mix(in srgb,var(--vi-sem-text-inverse) 8%,transparent);border-color:color-mix(in srgb,var(--vi-sem-text-inverse) 15%,transparent);color:var(--vi-sem-text-inverse);transition:background-color .3s ease,color .3s ease,border-color .3s ease}.controls-bar .controls{margin-top:0}.panel-header{align-items:center;display:flex;justify-content:space-between;gap:1rem}.panel-header h2{font-family:var(--vi-font-secondary, "Montserrat", "Lato", 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:1rem}.catalog-group h3{margin:0 0 .75rem}.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-picker]{grid-column:span 2}.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-tables] [data-example-id=matrix-table],.catalog-group[data-catalog-id=data-tables] [data-example-id=data-grid]{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=overlays] [data-example-id=scroller]{min-width:0}.catalog-group[data-catalog-id=overlays] [data-example-id=scroller]::part(base){overflow:hidden}.catalog-group[data-catalog-id=overlays] [data-example-id=scroller]::part(body){min-width:0}.catalog-group[data-catalog-id=app-shells] [data-example-id=app-shell]{grid-column:1 / -1}.catalog-group[data-catalog-id=app-shells] [data-example-id=app-shell] .example-preview{border-radius:.6rem;flex-direction:column;min-height:32rem;overflow:hidden;padding:0}.catalog-group[data-catalog-id=app-shells] vi-page{flex:1;min-width:0;padding:.5rem}.catalog-group[data-catalog-id=app-shells] vi-page::part(base){height:100%;min-height:100%}.example-card{height:100%;min-width:0}.example-card::part(base){height:100%;overflow:visible}.example-card h3{margin:0}.example-heading-row{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.example-heading-row vi-badge::part(base){font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}.example-card h4{margin: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-scroller,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, "Montserrat", "Lato", 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, "Montserrat", "Lato", sans-serif)}blockquote,em{font-family:var(--vi-font-emphasis, "Source Serif 4", "Times New Roman", 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 rgba(128,128,128,.15);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, "Lato", "Segoe UI", sans-serif)}.type-preview--secondary{font-family:var(--vi-font-secondary, "Montserrat", "Lato", sans-serif)}.type-preview--brand{font-family:var(--vi-font-brand, "Figtree", "Montserrat", sans-serif)}.type-preview--emphasis{font-family:var(--vi-font-emphasis, "Source Serif 4", "Times New Roman", 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}@media(max-width:950px){.shell{grid-template-columns:1fr}.sidebar{height:auto;position:static}.controls{flex-wrap:wrap}.catalog-group[data-catalog-id=app-shells] [data-example-id=app-shell] .example-preview{min-height:24rem}.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%}.example-card[data-example-id]{grid-column:span 1!important}.example-preview{overflow-x:auto}}
