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