.code-demo{margin-block:1em;border:1px solid var(--image-outline)}.demo-source>summary{padding:.5rem 1rem}.code-demo>figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.code-demo iframe{display:block;width:100%;aspect-ratio:auto;border:0;background:var(--cw)}.demo-source{border-top:1px solid var(--cg)}.demo-source>summary{cursor:pointer}.demo-file pre{margin:0}.demo-file+.demo-file{border-top:1px solid var(--image-outline)}.demo-toolbar:not([hidden]){display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.5rem 1rem;background:var(--cg);border:1px solid var(--image-outline);margin:-1px -1px 0;font-size:.875em;color:var(--clg)}.demo-tabs{display:flex;gap:1rem}.demo-tabs>button{position:relative;padding:0;border:0;background:0 0;color:var(--clg);font:inherit;cursor:pointer}.demo-tabs>button:hover{color:var(--cb)}.demo-tabs>button[aria-selected=true]{color:var(--cb);font-weight:var(--fwb)}.demo-tabs>button[aria-selected=true]::after{content:"";position:absolute;inset-inline:0;bottom:-.5rem;height:2px;background:var(--cl)}.demo-enhanced .demo-source{display:contents}.demo-enhanced .demo-source>summary,.demo-enhanced .demo-file-heading{display:none}.demo-enhanced .demo-file{border:0}.code-demo :is(button,[role=tabpanel],summary,pre):focus-visible{outline:2px solid var(--cl);outline-offset:-2px}