.demo-track.svelte-ivelf1{--unit: 80vh;margin-top:calc(2rem - max(3.5rem,(100vh - 590px) / 2))}.demo-frame.svelte-ivelf1{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr 340px;column-gap:4rem;align-items:center}.demo-side.svelte-ivelf1{display:contents}.demo-box.svelte-ivelf1{position:relative;order:2;height:calc(100% - 7rem)}.demo-fit.svelte-ivelf1{position:absolute;top:50%;left:50%;width:290px;height:590px;margin:-295px 0 0 -145px;transition:transform .7s cubic-bezier(.22,1,.36,1)}.demo-foot.svelte-ivelf1{position:absolute;right:0;bottom:.75rem;width:340px;transition:transform .7s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;align-items:center;gap:.375rem}.demo-dots.svelte-ivelf1{display:flex;gap:.375rem}.demo-dots.svelte-ivelf1 span:where(.svelte-ivelf1){width:.375rem;height:.375rem;border-radius:9999px;background:#c9cfcf;transition:width .3s ease,background-color .3s ease}.demo-dots.svelte-ivelf1 .is-on:where(.svelte-ivelf1){width:1.25rem;background:var(--color-accent)}.demo-label.svelte-ivelf1{font-size:.75rem;line-height:1.375rem;font-variant-numeric:tabular-nums;color:var(--color-text-secondary)}.is-focus.svelte-ivelf1 .demo-foot:where(.svelte-ivelf1){transform:translate(var(--shift))}.is-focus.svelte-ivelf1 .demo-label:where(.svelte-ivelf1){font-size:.9375rem;font-weight:600;color:var(--color-text)}.demo-captions.svelte-ivelf1{order:1;display:grid}.demo-caption.svelte-ivelf1{grid-area:1 / 1;align-self:center;opacity:0;pointer-events:none;transform:translateY(.75rem);transition:opacity .2s ease,transform .2s ease}.demo-caption.is-current.svelte-ivelf1{opacity:1;pointer-events:auto;transform:none;transition:opacity .45s ease .15s,transform .45s ease .15s}.is-focus.svelte-ivelf1 .demo-caption.is-current:where(.svelte-ivelf1){opacity:0;transition-delay:0ms}.demo-segment.svelte-ivelf1{height:var(--unit)}.demo-segment-long.svelte-ivelf1{height:calc(var(--unit) * 2.5)}.demo-notes.svelte-ivelf1{position:absolute;inset:0;pointer-events:none}.demo-note.svelte-ivelf1{position:absolute;top:calc(var(--mid) + var(--ph) * (var(--at) - .5));right:calc(50% + var(--pw) / 2 + 1rem);width:15rem;opacity:0;pointer-events:none;transform:translate(2rem) scale(.92);transition:opacity .3s ease,transform .6s cubic-bezier(.22,1,.36,1)}.demo-note.is-right.svelte-ivelf1{right:auto;left:calc(50% + var(--pw) / 2 + 1rem);transform:translate(-2rem) scale(.92)}.demo-note.is-on.svelte-ivelf1{opacity:1;transform:none}.demo-note.svelte-ivelf1 p:where(.svelte-ivelf1){padding:.75rem .875rem;border:1px solid var(--color-border);border-radius:1rem;background:var(--color-surface);box-shadow:0 18px 30px -18px #143c3c59,0 4px 10px -6px #0000001f;font-size:.875rem;line-height:1.45;color:var(--color-text);animation:svelte-ivelf1-demo-drift 5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.3s)}@keyframes svelte-ivelf1-demo-drift{0%{transform:translateY(-5px)}to{transform:translateY(5px)}}.demo-end.svelte-ivelf1{position:relative;z-index:1;margin-top:calc(8rem - 50vh)}@media(max-width:1023px){.demo-track.svelte-ivelf1{--unit: 50svh;margin-top:2rem}.demo-segment-long.svelte-ivelf1{height:calc(var(--unit) * 3.25)}.demo-foot.svelte-ivelf1{width:100%}.demo-frame.svelte-ivelf1{display:flex;flex-direction:column;align-items:stretch;padding:.75rem 0 3.25rem}.demo-box.svelte-ivelf1{order:0;flex:1 1 0;min-height:0;height:auto}.demo-fit.svelte-ivelf1{transform:scale(.5)}.demo-captions.svelte-ivelf1{order:0;padding-top:.75rem}.demo-caption.svelte-ivelf1{align-self:start}.demo-end.svelte-ivelf1{margin-top:1.5rem}.demo-note.svelte-ivelf1{top:calc(var(--mid) + var(--ph) * (var(--at) * .3 + .02));right:auto;left:-1rem;width:9.75rem}.demo-note.is-right.svelte-ivelf1{right:-1rem;left:auto}.demo-note.svelte-ivelf1 p:where(.svelte-ivelf1){padding:.5rem .625rem;font-size:.75rem}}@media(max-width:1023px)and (pointer:coarse)and (prefers-reduced-motion:no-preference){html:has(.demo-track){scroll-snap-type:y proximity}.demo-segment.svelte-ivelf1{position:relative}.demo-rest.svelte-ivelf1{position:absolute;top:calc(var(--unit) * (.1 + .25 * var(--k)) - 100svh);left:0;width:100%;height:1px;pointer-events:none;scroll-snap-align:start}.demo-stop.svelte-ivelf1{scroll-snap-stop:always}}@media(prefers-reduced-motion:reduce),(scripting:none){.demo-frame.svelte-ivelf1{position:static;height:auto;align-items:start}.demo-side.svelte-ivelf1{display:block;order:2;position:sticky;top:5.5rem}.demo-box.svelte-ivelf1{height:590px}.demo-fit.svelte-ivelf1{transition:none}.demo-track.svelte-ivelf1{margin-top:2rem}.demo-foot.svelte-ivelf1{position:static;margin-top:.5rem;transition:none}.demo-dots.svelte-ivelf1,.demo-notes.svelte-ivelf1,.demo-segment.svelte-ivelf1{display:none}.demo-captions.svelte-ivelf1{display:block}.demo-caption.svelte-ivelf1,.demo-caption.is-current.svelte-ivelf1{display:flex;flex-direction:column;justify-content:center;min-height:78vh;opacity:1;pointer-events:auto;transform:none;transition:none}.demo-end.svelte-ivelf1{margin-top:0}}@media(prefers-reduced-motion:reduce)and (max-width:1023px),(scripting:none)and (max-width:1023px){.demo-frame.svelte-ivelf1{display:block;padding:0}.demo-side.svelte-ivelf1{top:0;z-index:1;margin:0 -1.5rem;padding:.75rem 0 .5rem;background:linear-gradient(var(--color-bg) 96%,transparent)}.demo-box.svelte-ivelf1{height:50svh}.demo-captions.svelte-ivelf1{padding-top:0}.demo-caption.svelte-ivelf1,.demo-caption.is-current.svelte-ivelf1{justify-content:flex-start;min-height:70svh;padding-top:1.5rem}}@media(scripting:none){.demo-side.svelte-ivelf1{position:static;margin:0;background:none}.demo-box.svelte-ivelf1{height:auto}.demo-fit.svelte-ivelf1{position:static;margin:0 auto;transform:none}.demo-caption.svelte-ivelf1,.demo-caption.is-current.svelte-ivelf1{min-height:0;padding:1.5rem 0}}