.demo{margin:1.6rem 0}.demo div{margin-bottom:0}.demo .demo-header{display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.demo-tabs{--demo-tab-indicator-opacity:0;--demo-tab-width:0px;--demo-tab-height:0px;--demo-tab-x:0px;--demo-tab-y:0px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.45rem;position:relative;isolation:isolate}.demo-tabs::before{content:"";position:absolute;top:0;left:0;z-index:0;width:var(--demo-tab-width);height:var(--demo-tab-height);border-radius:999px;background:color-mix(in srgb,var(--fg) 10%,var(--bg) 90%);opacity:var(--demo-tab-indicator-opacity);transform:translate3d(var(--demo-tab-x),var(--demo-tab-y),0);transition:transform 280ms cubic-bezier(.22,1,.36,1),width 240ms cubic-bezier(.22,1,.36,1),height 240ms cubic-bezier(.22,1,.36,1),opacity 120ms ease;pointer-events:none}.demo-tab{appearance:none;border:0;background:0 0;border-radius:999px;padding:.62rem .9rem;position:relative;z-index:1;font-family:var(--font-sans);font-size:15px;font-weight:400;line-height:1;color:var(--fg);cursor:pointer;white-space:nowrap;transition:background .16s ease,color .16s ease}.demo-tab:hover,.demo-tab:focus-visible{background:color-mix(in srgb,var(--fg) 7%,var(--bg) 93%)}.demo-tab[aria-selected=true]{background:color-mix(in srgb,var(--fg) 10%,var(--bg) 90%)}.demo-tabs.demo-tabs-enhanced .demo-tab[aria-selected=true],.demo-tabs.demo-tabs-enhanced .demo-tab[aria-selected=true]:hover,.demo-tabs.demo-tabs-enhanced .demo-tab[aria-selected=true]:focus-visible{background:0 0}.demo-body{position:relative;height:var(--demo-height,520px);max-height:70vh;border:1px solid color-mix(in srgb,var(--fg4) 18%,var(--bg) 82%);border-radius:12px;background:var(--bg);overflow:hidden}.demo-panel{height:100%;overflow:auto;box-sizing:border-box;scrollbar-width:none}.demo-panel::-webkit-scrollbar{display:none}.demo-panel[hidden]{display:none !important}.demo-panel:focus:not(:focus-visible){outline:none}.demo .demo-body:has(>.demo-panel-text:not([hidden])){height:auto;max-height:none;border-color:transparent}.demo-panel-text pre,#main.post article.content .demo-panel-text pre{height:100%;margin:0;padding:2rem 2rem 1rem 1rem;border-radius:0;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:break-word}.demo-panel-text pre code,#main.post article.content .demo-panel-text pre code{white-space:pre-wrap;overflow-wrap:break-word}#main.post article.content .demo-panel-text .code-block-wrapper,.demo-panel-text .code-block-wrapper{height:100%;margin:0;padding:0}#main.post article.content .demo-panel-text .code-block-wrapper>.copy-button{top:.5rem}.demo-panel-text .highlight{height:100%}.demo-panel-text .highlight>pre{height:100%}.demo-panel-image{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem}.demo-panel-image img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0}.demo-panel-video{display:flex;align-items:center;justify-content:center;overflow:hidden}.demo-panel-video video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;margin:0}.demo .demo-body:has(>.demo-panel-video:not([hidden])){height:auto}.demo .demo-body:has(>.demo-panel-video:not([hidden])) .demo-panel-video video{width:100%;max-height:70vh}.demo-panel-run{position:relative;overflow:hidden}.demo-panel-run iframe{display:block;width:100%;height:100%;border:0;background:var(--bg)}.demo iframe[data-src]:not([src]){display:none}.demo-panel-pdf{position:relative;overflow:hidden}.demo-panel-pdf iframe{display:block;width:100%;height:100%;border:0}.demo-panel-pdf .demo-pdf-open{position:absolute;right:.75rem;bottom:.75rem;padding:.25rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(4px);font-family:var(--font-sans);font-size:.78rem;color:var(--fg2);text-decoration:none;border:1px solid color-mix(in srgb,var(--fg4) 22%,var(--bg) 78%)}.demo-panel-pdf .demo-pdf-open:hover{color:var(--fg);background:var(--bg)}.demo-run-fallback{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;font-family:var(--font-sans);font-size:.85rem;color:var(--fg4);text-align:center}@media(prefers-reduced-motion:reduce){.demo-tab,.demo-tabs::before{transition:none}}