.code-example.svelte-b2vmf4{display:flex;flex-direction:column;gap:var(--spacing-2)}.description.svelte-b2vmf4{margin:0;max-width:65ch;font-family:var(--font-family-sans);font-size:var(--font-size-normal);line-height:var(--line-height-normal);color:var(--color-on-surface-variant)}.preview.svelte-b2vmf4{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-2);padding:var(--spacing-3);border:1px solid var(--color-surface-dim);border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--color-surface-bright)}.preview.single.svelte-b2vmf4{grid-template-columns:1fr}.frame.svelte-b2vmf4{position:relative;display:flex;align-items:center;justify-content:center;min-height:8rem;padding:var(--spacing-5) var(--spacing-3) var(--spacing-3);margin:0;border-radius:var(--radius-md)}.frame.light.svelte-b2vmf4{background:#fafafa}.frame.dark.svelte-b2vmf4{background:#1d1d1d}.frame-label.svelte-b2vmf4{position:absolute;top:var(--spacing-2);left:var(--spacing-3);font-family:var(--font-family-sans);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em}.frame.light.svelte-b2vmf4 .frame-label:where(.svelte-b2vmf4){color:#00000073}.frame.dark.svelte-b2vmf4 .frame-label:where(.svelte-b2vmf4){color:#ffffff8c}img.svelte-b2vmf4{max-width:100%;height:auto;display:block}.code.svelte-b2vmf4{position:relative;border:1px solid var(--color-surface-dim);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:color-mix(in srgb,var(--color-surface-container),transparent 40%);overflow:hidden}.body.no-preview.svelte-b2vmf4 .code:where(.svelte-b2vmf4){border-top:1px solid var(--color-surface-dim);border-radius:var(--radius-lg)}.code .dh-btn{position:absolute;top:var(--spacing-2);right:var(--spacing-2);opacity:.6;transition:opacity .2s}pre.svelte-b2vmf4{margin:0;padding:var(--spacing-3) var(--spacing-4);font-family:var(--font-family-mono);font-size:var(--font-size-small);line-height:1.55;color:var(--color-on-surface);overflow-x:auto;white-space:pre}code.svelte-b2vmf4{font-family:inherit}@media(max-width:640px){.preview.svelte-b2vmf4{grid-template-columns:1fr}}