.animated-art{position:relative;width:100%;aspect-ratio:720/620;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 57% 37%,#fffdf5 0,#f0ecdf 67%,#e9e3d5 100%);border-radius:5px}
.animated-art>svg{display:block;width:100%;height:100%;overflow:visible}
.animated-art svg text{font-family:Satoshi,system-ui,sans-serif}
.art-animated{animation-play-state:paused!important}
html[data-motion=on] [data-animated-art][data-in-view=true] .art-animated{animation-play-state:running!important}
html[data-motion=off] [data-animated-art] .art-animated{animation:none!important}
@media(prefers-reduced-motion:reduce){[data-animated-art] .art-animated{animation:none!important}}
.art-frame>figcaption{display:flex;align-items:start;justify-content:space-between;gap:20px;font-size:11px;line-height:1.6;color:#797163;padding-top:13px}
.example-motion-art{display:block;width:100%;height:auto}
.example-labels{font-size:15px;fill:#655f52}
.example-trace{stroke-dasharray:.18 .82;animation:example-trace 10s cubic-bezier(.46,.03,.28,.99) infinite}
.example-source{animation:example-source 10s cubic-bezier(.46,.03,.28,.99) infinite}
.example-output-a{animation:example-arrive 10s ease-in-out infinite}
.example-output-b{animation:example-arrive 10s ease-in-out -7s infinite}
.example-output-c{animation:example-arrive 10s ease-in-out -5.5s infinite}
.example-record{animation:example-record 10s ease-in-out infinite}
.example-draft{animation:example-draft 10s ease-in-out infinite}
.example-scan{animation:example-scan 10s ease-in-out infinite}
.example-approval{animation:example-approval 10s ease-in-out infinite;stroke-dasharray:1}
.example-review-ring{animation:example-review-ring 10s ease-in-out infinite;transform-origin:0 0}
.example-capture{opacity:0;animation:example-capture 10s ease-in-out infinite}
@keyframes example-trace{0%,14%{stroke-dashoffset:1;opacity:0}20%{opacity:.8}68%{stroke-dashoffset:0;opacity:.9}85%,100%{stroke-dashoffset:-.2;opacity:0}}
@keyframes example-source{0%,100%{transform:translateY(0)}35%,65%{transform:translateY(-8px)}}
@keyframes example-arrive{0%,16%,100%{transform:translateY(0);opacity:1}38%,62%{transform:translateY(-6px);opacity:1}}
@keyframes example-record{0%,100%{transform:translateY(0)}35%,67%{transform:translateY(-7px)}}
@keyframes example-draft{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-4deg)}}
@keyframes example-scan{0%,20%,80%,100%{opacity:0;transform:translateY(0)}30%{opacity:.2}65%{opacity:.2;transform:translateY(55px)}}
@keyframes example-approval{0%,40%{stroke-dashoffset:1;opacity:.25}62%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:1;opacity:.25}}
@keyframes example-review-ring{0%,35%{transform:rotate(-90deg);opacity:.4}62%,90%{transform:rotate(270deg);opacity:.8}100%{transform:rotate(270deg);opacity:.4}}
@keyframes example-capture{0%,25%,32%,100%{opacity:0}28%{opacity:.65}}
.block-example{grid-template-columns:1.05fr 1fr;background:none;border-top:1px solid var(--line);padding:55px 0;margin:0;gap:60px;align-items:center}
.block-example .example-artwork{min-width:0;position:relative}
.block-example .animated-art{aspect-ratio:640/390;background:radial-gradient(ellipse at 60% 45%,#fffdf6,#eee8db);border-radius:5px;display:flex;align-items:center}
.block-example .editorial-heading{margin-bottom:24px}
.block-example .editorial-heading h2{font-size:31px}
.block-example .editorial-body p{font-size:17px;line-height:1.75}
.block-example .art-frame>figcaption{justify-content:flex-end;padding-top:7px}
.block-example .example-copy{min-width:0}
@media(max-width:1100px){.block-example{gap:35px}.block-example .editorial-heading h2{font-size:28px}}
@media(max-width:760px){.animated-art{border-radius:3px}.block-example{grid-template-columns:1fr;padding:33px 0 38px;gap:27px}.block-example .editorial-heading{margin-bottom:20px}.block-example .editorial-heading h2{font-size:28px}.block-example .example-artwork{width:100%;max-width:580px;margin:auto}.art-frame>figcaption{font-size:10px}}

@media(prefers-reduced-motion:reduce){.interior-motion,.motion-control{display:none}}