.art.flow-scene{min-height:510px;display:block;perspective:1000px;isolation:isolate;overflow:hidden;border:1px solid #ffffff1c;border-radius:32px;background:radial-gradient(ellipse at 68% 57%,#a8f34a0d,transparent 55%),linear-gradient(145deg,#131e2d,#080d14 60%);box-shadow:0 30px 90px #0005,inset 0 1px #ffffff0b}
.flow-scene:before{inset:0;z-index:-1;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(#000,transparent);opacity:1}
.flow-scene:after{display:none}
.flow-top{position:absolute;top:27px;left:27px;right:27px;display:flex;justify-content:space-between;gap:12px;color:#9aa6b8;font-size:9px;letter-spacing:1.5px;z-index:3}
.flow-top i,.flow-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b8f34a;margin-right:8px;box-shadow:0 0 12px #b8f34a80}
.flow-depth{position:absolute;inset:0;transform:rotateX(var(--flow-y,0deg)) rotateY(var(--flow-x,0deg));transition:transform .6s ease-out;transform-style:preserve-3d}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px #b8f34a30)}
.flow-thread{stroke:url(#flow-color);stroke-width:1;opacity:.65}
.flow-service{pointer-events:none;color:#a8bba0}
.flow-service-disc{fill:#0b141b;fill-opacity:.88;stroke:currentColor;stroke-width:.6;stroke-opacity:.28}
.flow-thread:nth-of-type(3n){stroke-width:2;stroke-dasharray:45 720;animation:flow-travel 5s linear infinite;animation-delay:var(--delay);opacity:1}
.flow-halo{position:absolute;left:29%;top:31%;width:48%;height:46%;background:#bcff6030;filter:blur(65px);border-radius:50%}
.flow-gate{position:absolute;width:180px;height:246px;left:50%;top:48%;border-radius:85px;transform:translate(-50%,-50%) rotate(-22deg) skewY(8deg);border:2px solid #d7ff9970;box-shadow:inset 0 0 22px #c1ff6b16,0 0 2px #e5ffc4,0 0 35px #b8f34a16;}
.gate-back{margin-left:25px;margin-top:-13px;border-color:#72aafc45;box-shadow:0 0 2px #bcd9ff60;background:linear-gradient(125deg,#87b6ff0c,#87b6ff02)}
.gate-front{background:linear-gradient(125deg,#e3ffc52b,#c4ffaa05 45%,#c4ffaa10);backdrop-filter:blur(7px);border-top-color:#f0ffd9;border-left-color:#e2ffb0;border-right-color:#bbf96b45;box-shadow:inset 5px 0 10px #e3ffab14,inset -5px -3px 10px #9bed5120,0 0 26px #bcff4220,20px 32px 35px #0005;animation:gate-drift 8s ease-in-out infinite}
.gate-glass{position:absolute;inset:9px;border:1px solid #e4ffd321;border-radius:inherit;background:linear-gradient(120deg,#ffffff10,transparent 43%)}
.gate-symbol{position:absolute;inset:42px 0 0;text-align:center;font:100px/1.2 Arial,sans-serif;color:#ddffab;text-shadow:0 0 26px #c7ff7c60;transform:skewY(-8deg)}
.gate-word{position:absolute;bottom:37px;left:0;right:0;text-align:center;letter-spacing:5px;font-size:9px;color:#ddffb8;transform:skewY(-8deg)}
.flow-orbit-label{position:absolute;right:25px;top:47%;writing-mode:vertical-rl;font-size:8px;letter-spacing:2.8px;color:#839183}
.flow-bottom{position:absolute;bottom:30px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:end;gap:12px}
.flow-kicker{display:block;font-size:8px;letter-spacing:2px;color:#9ba8ba;margin-bottom:10px}.flow-bottom strong{font-size:26px;font-weight:550;letter-spacing:-1px;color:#f5f7fb;line-height:1.1}.flow-status{white-space:nowrap;color:#d9e5cc;padding:8px 11px;border:1px solid #cfff9920;border-radius:30px;background:#cfff9908;font-size:10px}
@keyframes flow-travel{to{stroke-dashoffset:-765}}
@keyframes gate-drift{0%,100%{transform:translate(-50%,-50%) rotate(-22deg) skewY(8deg)}50%{transform:translate(-50%,calc(-50% - 9px)) rotate(-18deg) skewY(8deg)}}
.flow-scene.flow-paused *{animation-play-state:paused!important}
@media(max-width:700px){.art.flow-scene{min-height:390px;border-radius:25px}.flow-top{left:20px;right:20px;top:22px;font-size:7px;letter-spacing:1px}.flow-gate{width:140px;height:195px;top:47%}.gate-symbol{font-size:78px;top:35px}.gate-word{bottom:28px;font-size:7px}.flow-bottom{left:20px;right:20px;bottom:24px}.flow-bottom strong{font-size:23px}.flow-status{font-size:9px;padding:7px 9px}.flow-orbit-label{right:15px;font-size:7px}.flow-kicker{font-size:7px;letter-spacing:1.5px}}
@media(prefers-reduced-motion:reduce){.flow-scene *{animation:none!important;transition:none!important}.flow-depth{transform:none}}

/* Let the light installation blend into the page instead of a framed card. */
.art.flow-scene{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.art.flow-scene:before,.art.flow-scene:after{display:none}
.flow-scene .flow-depth{inset:-25px -45px;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.flow-scene .flow-top,.flow-scene .flow-orbit-label{display:none}
.flow-scene .flow-halo{background:#bcff6024;filter:blur(75px)}
.flow-scene .flow-bottom{left:12px;right:12px;bottom:12px}
.flow-scene .flow-status{border:0;background:transparent;padding-right:0}
@media(max-width:700px){.art.flow-scene{border-radius:0}.flow-scene .flow-depth{inset:-10px -15px}.flow-scene .flow-bottom{left:0;right:0;bottom:9px}}

/* Vector arrow stays identical on mobile and desktop. */
.gate-symbol{font-size:0;text-shadow:none}
.gate-symbol svg{display:block;width:100px;height:120px;margin:0 auto;filter:drop-shadow(0 0 13px #c7ff7c60)}
@media(max-width:700px){.gate-symbol{font-size:0}.gate-symbol svg{width:78px;height:94px}}