.stage.svelte-ps8css{perspective:1800px}.demo.svelte-ps8css{transform-origin:50% 0}.well.svelte-ps8css{background:color-mix(in srgb, var(--surface-2) 55%, transparent);box-shadow:0 0 0 1px var(--edge), 0 40px 120px -40px #000c}.board.svelte-ps8css{height:34rem;overflow:hidden}@media (width<48rem){.fit.svelte-ps8css{height:auto;max-height:34rem}}@media (width<40rem){.fit.svelte-ps8css+.board-fade:where(.svelte-ps8css){display:none}}.board-fade.svelte-ps8css{background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface-2) 55%, var(--surface-0)) 85%);pointer-events:none;height:12rem;position:absolute;inset:auto 0 0}.tint.svelte-ps8css{background:color-mix(in srgb, var(--surface-0) 40%, transparent);opacity:0;pointer-events:none;border-radius:1.5rem;transition:opacity .22s ease-out;position:absolute;inset:0}.board-open.svelte-ps8css{transition:scale .26s cubic-bezier(.2,.7,.2,1);position:absolute;bottom:2.5rem;left:50%;translate:-50%}.demo.svelte-ps8css:hover .tint:where(.svelte-ps8css),.demo.svelte-ps8css:focus-within .tint:where(.svelte-ps8css){opacity:1}.demo.svelte-ps8css:hover .board-open:where(.svelte-ps8css),.demo.svelte-ps8css:focus-within .board-open:where(.svelte-ps8css){scale:1.06}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (width>=48rem){.demo.svelte-ps8css{animation:linear both svelte-ps8css-unfold;animation-timeline:view();animation-range:cover cover 70%}}}@keyframes svelte-ps8css-unfold{0%{transform:rotateX(32deg)scale(.86)translateY(-1rem)}55%{transform:none}to{transform:scale(1.07)}}@media (prefers-reduced-motion:reduce){.tint.svelte-ps8css,.board-open.svelte-ps8css{transition:none}}