.flow-visual{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.7;min-height:220px;background:#fff;border-block:1px solid var(--line);margin:0 0 12px}
.flow-motion-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transform:scale(1.45);transform-origin:100% 50%;pointer-events:none}
.flow-motion-coins{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.flow-motion-coin{position:absolute;left:0;top:0;display:grid;place-items:center;width:clamp(17px,2.1vw,29px);aspect-ratio:1;border:1px solid #c3efb7;border-radius:50%;background:radial-gradient(circle at 32% 24%,#35ce9c,#09976b 60%,#046249);box-shadow:0 2px 0 #027454,0 5px 10px #003c562b,inset 0 0 0 2px #deffc533;will-change:transform,opacity;opacity:0}
.flow-motion-coin:after{content:"";position:absolute;inset:3px;border:1px solid #d8ffdd78;border-radius:50%}
.flow-motion-coin img{display:block;width:78%;height:78%}
.flow-motion-glow{position:absolute;left:27%;top:25%;width:45%;height:58%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#ffd18b20,transparent 70%);animation:flow-vessel-light 5s ease-in-out infinite;animation-play-state:paused}
.flow-visual[data-motion=running] .flow-motion-glow{animation-play-state:running}
.flow-motion-toggle{position:absolute;z-index:2;right:12px;top:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 10px;border:1px solid #d9c6b5;border-radius:7px;background:#ffffffeb;color:#250c01;box-shadow:0 2px 8px #250c010a;font:inherit;font-size:11px;cursor:pointer}
.flow-motion-toggle[hidden]{display:none}.flow-motion-toggle:active{transform:scale(.97)}
.flow-motion-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}.flow-motion-play-icon{display:none}.flow-motion-toggle[data-paused=true] .flow-motion-play-icon{display:block}.flow-motion-toggle[data-paused=true] .flow-motion-pause-icon{display:none}
.flow-illustration-label{position:absolute;left:12px;bottom:10px;max-width:calc(100% - 24px);padding:5px 7px;background:#ffffffde;border:1px solid #eadfce;border-radius:5px;color:#665b50;font-size:9px;line-height:1.4;pointer-events:none}
@keyframes flow-vessel-light{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:800px){.flow-visual{min-height:0;aspect-ratio:1.7}.flow-motion-coin{width:22px}.flow-motion-toggle{min-height:44px}}
@media(prefers-reduced-motion:reduce){.flow-motion-glow{animation:none}.flow-motion-toggle{display:none}.flow-motion-coin{display:none}}