.demo-hscroll{border:1px solid var(--hz-color-border,#6b7280);border-radius:var(--hz-radius-md,.5rem)}.demo-hscroll--bounded{--hz-horizontal-scroll-height:20rem}.demo-hscroll--half{--hz-horizontal-scroll-height:14rem}.demo-panel.svelte-1ynoo36{font-weight:var(--hz-font-weight-semibold,600);align-items:flex-end;padding:1.5rem;display:flex;position:relative}.demo-panel--auto.svelte-1ynoo36{flex:none;inline-size:16rem}.width-demo.svelte-1ynoo36,.snap-compare.svelte-1ynoo36{flex-direction:column;gap:1.5rem;display:flex}.snap-label.svelte-1ynoo36{font-size:var(--hz-font-size-sm,.875rem);color:var(--hz-color-text-muted,#6b7280);margin:0 0 .5rem}.demo-panel-band,.demo-layer{justify-content:center;align-items:center;display:flex}.demo-copy{border-radius:var(--hz-radius-md,.5rem);color:#fff;text-align:center;background:#0000008c;margin-bottom:1rem;padding:1rem 1.5rem}.demo-blob.svelte-1ynoo36{aspect-ratio:1;border-radius:var(--hz-radius-full,9999px);width:45%;position:absolute;box-shadow:0 .5rem 1.5rem #00000059}.demo-blob--a.svelte-1ynoo36{background:color-mix(in srgb, var(--hz-intent-primary,#2563eb) 85%, transparent);left:4%}.demo-blob--b.svelte-1ynoo36{background:color-mix(in srgb, var(--hz-intent-secondary,#7c3aed) 85%, transparent);right:4%}.demo-spread.svelte-1ynoo36{left:65%;right:auto;translate:-50% -50%}.demo-spread--top.svelte-1ynoo36{top:20%}.demo-spread--bottom.svelte-1ynoo36{top:80%}.demo-depth.svelte-1ynoo36{border-radius:var(--hz-radius-lg,.75rem);width:8rem;height:8rem;position:absolute;box-shadow:0 .5rem 1.5rem #00000059}.demo-depth--back.svelte-1ynoo36{background:color-mix(in srgb, var(--hz-intent-info,#0ea5e9) 75%, transparent);top:55%;left:12%}.demo-depth--mid.svelte-1ynoo36{background:color-mix(in srgb, var(--hz-intent-primary,#2563eb) 80%, transparent);top:25%;left:42%}.demo-depth--front.svelte-1ynoo36{background:color-mix(in srgb, var(--hz-intent-secondary,#7c3aed) 90%, transparent);top:50%;left:68%}