.component-demo{margin-block:2rem;border:1px solid var(--sl-color-gray-5);border-radius:12px;background:var(--sl-color-bg);box-shadow:0 1px 3px #00000008}.component-demo__header{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:var(--sl-color-gray-7);border-block-end:1px solid var(--sl-color-gray-5);border-start-start-radius:inherit;border-start-end-radius:inherit}.component-demo>:last-child{border-end-start-radius:inherit;border-end-end-radius:inherit}.component-demo__header,.component-demo__code{overflow:clip}.component-demo__indicator{position:relative;display:block;inline-size:8px;block-size:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px color-mix(in srgb,#22c55e 25%,transparent);animation:component-demo-dot-pulse 1.6s ease-in-out infinite}.component-demo__indicator:before{content:"";position:absolute;inset:-3px;border-radius:50%;background:#22c55e;opacity:.45;animation:component-demo-dot-halo 1.6s ease-out infinite;pointer-events:none}@keyframes component-demo-dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.85)}}@keyframes component-demo-dot-halo{0%{opacity:.45;transform:scale(1)}70%{opacity:0;transform:scale(2.6)}to{opacity:0;transform:scale(2.6)}}.component-demo__label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sl-color-gray-3)}.component-demo__storybook-link{display:inline-flex;align-items:center;gap:.375rem;margin-inline-start:auto;font-size:.75rem;font-weight:600;line-height:1;color:var(--sl-color-text-accent);text-decoration:none;padding:.3125rem .625rem;border-radius:6px;transition:background .15s ease,color .15s ease}.component-demo__storybook-link:hover,.component-demo__storybook-link:focus-visible{background:color-mix(in srgb,var(--sl-color-text-accent) 10%,transparent);color:var(--sl-color-text-accent);text-decoration:none}.component-demo__storybook-link:focus-visible{outline:2px solid var(--sl-color-text-accent);outline-offset:2px}.component-demo__storybook-link svg{flex-shrink:0}.component-demo__preview{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:2.5rem;min-block-size:80px;background:radial-gradient(circle at 50% 50%,rgba(103,80,164,.04) 0%,transparent 60%),var(--md-sys-color-surface-container-high, var(--sl-color-bg))}@supports (background: color-mix(in srgb,red 50%,blue)){.component-demo__preview{background:radial-gradient(circle at 50% 50%,rgba(103,80,164,.04) 0%,transparent 60%),color-mix(in srgb,var(--md-sys-color-surface-container-high, #ece6f0) 88%,var(--md-sys-color-primary, #6750a4) 12%)}}.chart-demo__preview>*{flex:1 1 0;min-inline-size:0;max-inline-size:100%}.component-demo__preview--empty{justify-content:center;text-align:center;padding-block:2rem}.component-demo__empty-text{margin:0;color:var(--sl-color-gray-3);font-size:.875rem;line-height:1.5;max-inline-size:36ch}.component-demo__empty-text a{color:var(--sl-color-text-accent);font-weight:600;text-decoration:none}.component-demo__empty-text a:hover,.component-demo__empty-text a:focus-visible{text-decoration:underline}@media(prefers-reduced-motion:reduce){.component-demo__indicator,.component-demo__indicator:before{animation:none}.component-demo__indicator{box-shadow:none}}@media(max-width:40rem){.component-demo{margin-block:1.5rem;border-radius:10px}.component-demo__header{flex-wrap:wrap;row-gap:.375rem}.component-demo__storybook-link{padding:.25rem .5rem;font-size:.6875rem}.component-demo__preview{padding:1.5rem 1rem;gap:12px}}.component-demo__code{position:relative;border-block-start:1px solid var(--md-sys-color-outline-variant, var(--sl-color-gray-5));background:var(--md-sys-color-surface-container-low, var(--sl-color-gray-7));padding-inline-start:0!important}.component-demo__code:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;background:var(--md-sys-color-primary);pointer-events:none;z-index:1}.component-demo__code-toggle{position:relative;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.625rem;padding:.75rem 1.125rem;font-size:.8125rem;font-weight:600;color:var(--md-sys-color-on-surface, var(--sl-color-white, #fafafa));user-select:none;transition:background-color .15s ease,color .15s ease}.component-demo__code-toggle::-webkit-details-marker{display:none}.component-demo__code-toggle::marker{display:none;content:""}.component-demo__code-toggle:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent);color:var(--md-sys-color-primary)}.component-demo__code[open]>.component-demo__code-toggle{color:var(--md-sys-color-primary)}.component-demo__code-toggle:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:-2px}.component-demo__code-icon{flex-shrink:0;color:currentColor;opacity:.85}.component-demo__code-toggle-label{flex:1}.component-demo__code-tabs{margin-block-start:0!important}.technology-tabs__nav{display:flex;gap:0;border-block-end:1px solid var(--md-sys-color-outline-variant, var(--sl-color-gray-5));background:var(--md-sys-color-surface-container-low, var(--sl-color-gray-7));overflow-x:auto;scrollbar-width:none}.technology-tabs__nav::-webkit-scrollbar{display:none}.technology-tabs__tab{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.75rem;font-weight:500;color:var(--md-sys-color-on-surface-variant);border-block-end:2px solid transparent;transition:color .15s ease,background-color .15s ease,border-color .15s ease;white-space:nowrap}.technology-tabs__tab-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:18px;block-size:18px;line-height:1;opacity:.85;transition:opacity .15s ease}.technology-tabs__tab-icon svg{display:block;inline-size:100%;block-size:100%}:root[data-theme=dark] .technology-tabs__tab-icon .component-demo__vue-inner{fill:var(--md-sys-color-on-surface-variant, #cfcfcf)}.technology-tabs__tab:hover{color:var(--md-sys-color-on-surface);background:color-mix(in srgb,var(--md-sys-color-on-surface) 6%,transparent)}.technology-tabs__tab:hover .technology-tabs__tab-icon{opacity:1}.technology-tabs__tab:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:-2px;border-radius:6px}.technology-tabs__tab--active{color:var(--md-sys-color-primary);border-block-end-color:var(--md-sys-color-primary);background:var(--md-sys-color-surface, transparent)}.technology-tabs__tab--active .technology-tabs__tab-icon{opacity:1}.technology-tabs__panel{display:none}.technology-tabs__panel--active{display:block}.technology-tabs__code-wrapper{position:relative}.technology-tabs__code pre.shiki{margin:0;padding:1.125rem 1.25rem;overflow-x:auto;font-size:.8125rem;line-height:1.7;font-family:var(--sl-font-system-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);border:0;border-radius:0;box-shadow:none;tab-size:2;background-color:var(--md-sys-color-surface)!important;color:var(--shiki-light)}.technology-tabs__code pre.shiki span{color:var(--shiki-light);background-color:transparent!important}:root[data-theme=dark] .technology-tabs__code pre.shiki{color:var(--shiki-dark)}:root[data-theme=dark] .technology-tabs__code pre.shiki span{color:var(--shiki-dark)}.technology-tabs__code pre.shiki code{background:transparent;padding:0;font-family:inherit;font-size:inherit;color:inherit;border-radius:0;border:0}.technology-tabs__copy{position:absolute;inset-block-start:.625rem;inset-inline-end:.625rem;z-index:1;display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-small, 8px);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);cursor:pointer;opacity:0;transition:opacity .15s ease,background-color .15s ease,color .15s ease;font-size:.6875rem;font-weight:500;font-family:var(--sl-font, system-ui, sans-serif)}.technology-tabs__code-wrapper:hover .technology-tabs__copy,.technology-tabs__code-wrapper:focus-within .technology-tabs__copy,.technology-tabs__copy:focus-visible{opacity:1}.technology-tabs__copy:hover{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.technology-tabs__copy:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.technology-tabs__copy--copied{opacity:1;color:var(--md-sys-color-tertiary, #16a34a);border-color:currentColor}.technology-tabs__copy-label{line-height:1}@media(hover:none){.technology-tabs__copy{opacity:1}}@media(max-width:40rem){.component-demo__code-toggle{padding:.5rem .75rem}.technology-tabs__tab{padding:.5rem .625rem;font-size:.6875rem;gap:.375rem}.technology-tabs__tab-icon{inline-size:16px;block-size:16px}.technology-tabs__code pre.shiki{padding:.875rem 1rem;font-size:.75rem;line-height:1.6}.technology-tabs__copy{opacity:1;padding:.125rem .5rem}.technology-tabs__copy-label{display:none}}