.library-demo[data-v-bbdfe998]{--demo-time:15s;inline-size:100%;max-inline-size:40rem;position:relative}.library-demo-art[data-v-bbdfe998]{block-size:auto;inline-size:100%;display:block}.library-demo-window[data-v-bbdfe998]{fill:var(--color-surface-2);stroke:var(--color-border)}.library-demo-bar[data-v-bbdfe998]{fill:var(--color-border)}.library-demo-place[data-v-bbdfe998]{stroke-dasharray:3 3}.library-demo-block[data-v-bbdfe998],.library-demo-place[data-v-bbdfe998]{fill:none;stroke:var(--color-border-strong)}.library-demo-crop[data-v-bbdfe998]{fill:none;stroke:#fff;stroke-width:2px;stroke-dasharray:4 3}.library-demo-cover[data-v-bbdfe998]{fill:var(--color-surface-2);stroke:var(--color-border);opacity:0}.library-demo-ghost[data-v-bbdfe998],.library-demo-pointer[data-v-bbdfe998]{opacity:0}.library-demo-pointer[data-v-bbdfe998]{fill:var(--color-text);stroke:var(--color-surface);stroke-width:1.2px}circle.library-demo-touch[data-v-bbdfe998]{fill:color-mix(in srgb,var(--color-text) 45%,transparent)}.library-demo-touch[data-v-bbdfe998]{display:none}@media (hover:none){.library-demo-mouse[data-v-bbdfe998]{display:none}.library-demo-touch[data-v-bbdfe998]{display:revert}circle.library-demo-touch[data-v-bbdfe998],g.library-demo-touch[data-v-bbdfe998]{display:inline}}.library-demo-steps[data-v-bbdfe998]{gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 0;padding:0 calc(var(--tap-target-min) + var(--space-2));counter-reset:demo-step;font-size:var(--font-size-sm);flex-wrap:wrap;justify-content:center;list-style:none;display:flex}@media (width<768px){.library-demo-steps[data-v-bbdfe998]{padding-inline:0 calc(var(--tap-target-min) + var(--space-2));flex-direction:column;align-items:flex-start}}.library-demo-step[data-v-bbdfe998]{align-items:center;gap:var(--space-2);counter-increment:demo-step;text-align:start;display:flex}.library-demo-step[data-v-bbdfe998]:before{content:counter(demo-step);background:var(--color-primary);block-size:1.5rem;inline-size:1.5rem;color:var(--color-on-primary);font-weight:var(--font-weight-semibold);border-radius:50%;flex:none;place-items:center;display:grid}.library-demo-button[data-v-bbdfe998]{display:none}@media (prefers-reduced-motion:no-preference){.library-demo-button[data-v-bbdfe998]{inline-size:var(--tap-target-min);block-size:var(--tap-target-min);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;inset-block-end:0;inset-inline-end:0}.library-demo-clock[data-v-bbdfe998]{animation:demo-clock-bbdfe998 var(--demo-time) linear 3;position:absolute}.library-demo-art[data-v-bbdfe998],.library-demo-cover[data-v-bbdfe998],.library-demo-crop[data-v-bbdfe998],.library-demo-ghost[data-v-bbdfe998],.library-demo-pointer[data-v-bbdfe998],.library-demo-saved[data-v-bbdfe998],.library-demo-step[data-v-bbdfe998]:before{animation-duration:var(--demo-time);animation-timing-function:ease-in-out;animation-iteration-count:3;animation-fill-mode:both}.library-demo-art[data-v-bbdfe998]{animation-name:demo-art-bbdfe998}.library-demo-pointer[data-v-bbdfe998]{animation-name:demo-pointer-bbdfe998}.library-demo-ghost-1[data-v-bbdfe998]{animation-name:demo-ghost-1-bbdfe998}.library-demo-ghost-2[data-v-bbdfe998]{animation-name:demo-ghost-2-bbdfe998}.library-demo-ghost-3[data-v-bbdfe998]{animation-name:demo-ghost-3-bbdfe998}.library-demo-ghost-4[data-v-bbdfe998]{animation-name:demo-ghost-4-bbdfe998}.library-demo-saved-a[data-v-bbdfe998]{animation-name:demo-saved-a-bbdfe998}.library-demo-saved-b[data-v-bbdfe998]{animation-name:demo-saved-b-bbdfe998}.library-demo-cover-a[data-v-bbdfe998]{animation-name:demo-cover-a-bbdfe998}.library-demo-cover-b[data-v-bbdfe998]{animation-name:demo-cover-b-bbdfe998}.library-demo-crop-a[data-v-bbdfe998]{animation-name:demo-crop-a-bbdfe998}.library-demo-crop-b[data-v-bbdfe998]{animation-name:demo-crop-b-bbdfe998}.library-demo-step-1[data-v-bbdfe998]:before{animation-name:demo-step-1-bbdfe998}.library-demo-step-2[data-v-bbdfe998]:before{animation-name:demo-step-2-bbdfe998}.library-demo-step-3[data-v-bbdfe998]:before{animation-name:demo-step-3-bbdfe998}.library-demo[data-paused][data-v-bbdfe998] *,.library-demo[data-paused][data-v-bbdfe998] :before{animation-play-state:paused!important}}.library-demo-button .icon[data-v-bbdfe998]{block-size:1.25rem;inline-size:1.25rem}@media (hover:hover){.library-demo-button[data-v-bbdfe998]:hover{background:var(--color-surface-2)}}@keyframes demo-clock-bbdfe998{to{opacity:1}}@keyframes demo-art-bbdfe998{0%{opacity:0}3%,to{opacity:1}}@keyframes demo-pointer-bbdfe998{0%,2%{opacity:0;transform:translate(120px,110px)}4%{opacity:1;transform:translate(120px,110px)}10%,8%{opacity:1;transform:translate(35px,45px)}22%,24%{opacity:1;transform:translate(214px,49px)}30%,32%{opacity:1;transform:translate(115px,85px)}44%,46%{opacity:1;transform:translate(266px,49px)}62%{opacity:1;transform:translate(300px,110px)}66%,68%{opacity:1;transform:translate(214px,49px)}76%,78%{opacity:1;transform:translate(404px,64px)}82%,84%{opacity:1;transform:translate(266px,49px)}92%,93%{opacity:1;transform:translate(404px,64px)}96%,to{opacity:0;transform:translate(404px,64px)}}@keyframes demo-ghost-1-bbdfe998{0%,9.9%{opacity:0;transform:translate(18px,28px)}10%{opacity:1;transform:translate(18px,28px)}22%{opacity:1;transform:translate(197px,32px)}22.1%,to{opacity:0;transform:translate(197px,32px)}}@keyframes demo-ghost-2-bbdfe998{0%,31.9%{opacity:0;transform:translate(98px,68px)}32%{opacity:1;transform:translate(98px,68px)}44%{opacity:1;transform:translate(249px,32px)}44.1%,to{opacity:0;transform:translate(249px,32px)}}@keyframes demo-ghost-3-bbdfe998{0%,67.9%{opacity:0;transform:translate(197px,32px)}68%{opacity:1;transform:translate(197px,32px)}76%{opacity:1;transform:translate(387px,47px)}76.1%,to{opacity:0;transform:translate(387px,47px)}}@keyframes demo-ghost-4-bbdfe998{0%,83.9%{opacity:0;transform:translate(249px,32px)}84%{opacity:1;transform:translate(249px,32px)}92%{opacity:1;transform:translate(387px,47px)}92.1%,to{opacity:0;transform:translate(387px,47px)}}@keyframes demo-saved-a-bbdfe998{0%,21.9%{opacity:0}22%,to{opacity:1}}@keyframes demo-saved-b-bbdfe998{0%,43.9%{opacity:0}44%,to{opacity:1}}@keyframes demo-cover-a-bbdfe998{0%,75.9%{opacity:1}77%,to{opacity:0}}@keyframes demo-cover-b-bbdfe998{0%,91.9%{opacity:1}93%,to{opacity:0}}@keyframes demo-crop-a-bbdfe998{0%,4%{opacity:0}8%,to{opacity:1}}@keyframes demo-crop-b-bbdfe998{0%,26%{opacity:0}30%,to{opacity:1}}@keyframes demo-step-1-bbdfe998{0%,45%{background:var(--color-primary);color:var(--color-on-primary)}47%,97%{background:var(--color-surface-2);color:var(--color-text)}to{background:var(--color-primary);color:var(--color-on-primary)}}@keyframes demo-step-2-bbdfe998{0%,45%{background:var(--color-surface-2);color:var(--color-text)}47%,63%{background:var(--color-primary);color:var(--color-on-primary)}65%,97%{background:var(--color-surface-2);color:var(--color-text)}to{background:var(--color-primary);color:var(--color-on-primary)}}@keyframes demo-step-3-bbdfe998{0%,63%{background:var(--color-surface-2);color:var(--color-text)}65%,to{background:var(--color-primary);color:var(--color-on-primary)}}