.demo:where(.astro-tb5vpudz){margin:1.5rem 0;border:1px solid var(--sl-color-gray-5, var(--sl-color-border, #2a2a35));border-radius:.5rem;overflow:hidden;background:var(--sl-color-bg-sidebar, var(--sl-color-bg, #17171c))}.demo:where(.astro-tb5vpudz)[data-full-page]{margin:2rem auto;border:none;border-radius:0;background:transparent;display:flex;flex-direction:column;max-width:min(calc(100% - 2rem),1400px);width:100%;height:auto}.demo-frame:where(.astro-tb5vpudz){position:relative;width:100%;aspect-ratio:16 / 9;background:var(--sl-color-bg, #0d0d10);overflow:hidden}.demo-frame:where(.astro-tb5vpudz)[data-full-page]{aspect-ratio:16 / 9;width:100%;height:auto;min-height:var(--demo-min-height, auto);border:1px solid var(--sl-color-gray-5, var(--sl-color-border, #2a2a35));border-radius:.5rem;overflow:hidden;background:var(--sl-color-bg, #0d0d10);order:1}.demo-frame:where(.astro-tb5vpudz)[data-full-page][data-fixed-height]{aspect-ratio:auto;height:var(--demo-height);min-height:auto}.demo-frame:where(.astro-tb5vpudz)[data-fixed-height]{aspect-ratio:auto;height:var(--demo-height)}.demo-surface:where(.astro-tb5vpudz){position:absolute;inset:0}.demo-surface:where(.astro-tb5vpudz) canvas{display:block;width:100%;height:100%}.demo-surface:where(.astro-tb5vpudz) svg{display:block;width:100%;height:100%}.demo-poster:where(.astro-tb5vpudz){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease;pointer-events:none}.demo-poster:where(.astro-tb5vpudz)[data-hidden]{opacity:0}.demo:where(.astro-tb5vpudz):not([data-svg-exportable]) .demo-mode-toggle:where(.astro-tb5vpudz){display:none}.demo-mode-toggle:where(.astro-tb5vpudz){position:absolute;top:.75rem;right:6.5rem;padding:.35rem 0;font-family:inherit;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--sl-color-gray-3, #9b9bab);background:color-mix(in srgb,var(--sl-color-bg, #0d0d10) 75%,transparent);border:1px solid var(--sl-color-gray-5, var(--sl-color-border, #2a2a35));border-radius:.25rem;cursor:pointer;backdrop-filter:blur(4px);transition:all .2s ease;z-index:10;display:flex;gap:0}.demo-mode-toggle:where(.astro-tb5vpudz) .mode-label-webgpu:where(.astro-tb5vpudz),.demo-mode-toggle:where(.astro-tb5vpudz) .mode-label-svg:where(.astro-tb5vpudz){padding:.35rem .65rem;border-radius:.2rem;transition:all .15s ease}.demo-mode-toggle:where(.astro-tb5vpudz)[data-mode=svg] .mode-label-svg:where(.astro-tb5vpudz),.demo-mode-toggle:where(.astro-tb5vpudz):not([data-mode]) .mode-label-webgpu:where(.astro-tb5vpudz),.demo-mode-toggle:where(.astro-tb5vpudz)[data-mode=webgpu] .mode-label-webgpu:where(.astro-tb5vpudz){color:var(--sl-color-text-accent, #8ab4f8);background:color-mix(in srgb,var(--sl-color-text-accent, #8ab4f8) 12%,transparent)}.demo-debug-toggle:where(.astro-tb5vpudz){position:absolute;top:.75rem;right:.75rem;display:flex;align-items:center;gap:.35rem;padding:.35rem .65rem;font-family:inherit;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--sl-color-gray-3, #9b9bab);background:color-mix(in srgb,var(--sl-color-bg, #0d0d10) 75%,transparent);border:1px solid var(--sl-color-gray-5, var(--sl-color-border, #2a2a35));border-radius:.25rem;cursor:pointer;backdrop-filter:blur(4px);transition:all .2s ease;z-index:10}.demo-debug-toggle:where(.astro-tb5vpudz):hover{color:var(--sl-color-white, #fff);border-color:var(--sl-color-gray-3, #9b9bab);background:color-mix(in srgb,var(--sl-color-bg, #0d0d10) 90%,transparent)}.demo-debug-toggle:where(.astro-tb5vpudz)[data-active=true]{color:var(--sl-color-text-accent, #8ab4f8);border-color:var(--sl-color-text-accent, #8ab4f8);background:color-mix(in srgb,var(--sl-color-text-accent, #8ab4f8) 12%,var(--sl-color-bg, #0d0d10))}.demo-notice:where(.astro-tb5vpudz)[hidden]{display:none}.demo-notice:where(.astro-tb5vpudz){position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:.25rem;padding:.75rem 1rem;font-size:.85rem;background:color-mix(in srgb,var(--sl-color-bg, #0d0d10) 85%,transparent);color:var(--sl-color-text, #e6e6ee);backdrop-filter:blur(4px)}.demo-notice:where(.astro-tb5vpudz) strong:where(.astro-tb5vpudz){color:var(--sl-color-text-accent, #8ab4f8)}.demo-caption:where(.astro-tb5vpudz){display:flex;flex-direction:column;gap:.2rem;padding:.65rem .9rem;border-top:1px solid var(--sl-color-gray-5, var(--sl-color-border, #2a2a35));font-size:.85rem;color:var(--sl-color-text, #c8c8d2)}.demo:where(.astro-tb5vpudz)[data-full-page] .demo-caption:where(.astro-tb5vpudz){order:0;display:flex;flex-direction:column;gap:.2rem;padding:0 0 1rem;border:none;max-width:none;background:transparent;backdrop-filter:none;box-shadow:none}.demo-title:where(.astro-tb5vpudz){font-weight:600;color:var(--sl-color-white, #fff)}.demo-lede:where(.astro-tb5vpudz){color:var(--sl-color-gray-3, #9b9bab);line-height:1.4}.demo-lede:where(.astro-tb5vpudz) code{font-size:.85em}@media(max-width:50rem){.demo:where(.astro-tb5vpudz)[data-full-page]{margin:1rem auto}.demo-frame:where(.astro-tb5vpudz)[data-full-page]{aspect-ratio:4 / 3}}body:has([data-demo-full-page]){--sl-content-width: 100% !important;--sl-content-pad-x: 0px !important}body:has([data-demo-full-page]) .content-panel{padding:0!important}body:has([data-demo-full-page]) .sl-container{max-width:100%!important;margin:0!important}body:has([data-demo-full-page]) h1{display:none!important}body:has([data-demo-full-page]) footer{display:none!important}body:has([data-demo-full-page]) .right-sidebar-panel,body:has([data-demo-full-page]) aside.right-sidebar{display:none!important}