.phi-scene{aspect-ratio:1.02;position:relative;overflow:hidden;border-radius:4px;background:#183b3a;isolation:isolate;box-shadow:0 15px 40px #1733310a;pointer-events:none}
.phi-scene::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#b7cca81c .6px,transparent .7px);background-size:22px 22px;mask-image:radial-gradient(ellipse at center,black,transparent 75%)}
.phi-art-top{position:absolute;inset:23px 25px auto;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px 16px;font-size:9px;letter-spacing:1.6px;color:#b4c5b4;line-height:1.4}
.phi-art-separator{color:#d5b77a}
.phi-art-sequence{display:flex;flex:0 0 auto;max-width:100%;gap:0;align-items:baseline;margin-left:auto;font-family:monospace;font-size:9px;letter-spacing:.1px;color:#d3c39b;white-space:nowrap;text-transform:none}
.phi-art-monogram{font:inherit;color:inherit;text-transform:none!important}
.phi-art-infinity{font-family:'Segoe UI Symbol','Segoe UI',Arial,sans-serif;font-size:1.45em;font-weight:500;line-height:1}
/* Match the SVG's square meet box, so labels follow its geometry at every ratio. */
.phi-art-stage{position:absolute;top:50%;left:50%;width:98.0392157%;aspect-ratio:1;transform:translate(-50%,-50%);container-type:inline-size}
.phi-art-diagram{display:block;width:100%;height:100%;overflow:visible}
.phi-art-grid{opacity:.065}
.phi-art-construction{opacity:.32;animation:phi-art-geometry-in .7s .5s both}
.phi-art-orbits{opacity:.4}
.phi-art-orbit-guide{opacity:.4}
.phi-art-orbit{stroke-dasharray:1;stroke-dashoffset:0;animation:phi-art-draw .7s cubic-bezier(.22,.7,.24,1) both}
.phi-art-orbit-b{animation-delay:.08s}.phi-art-orbit-c{animation-delay:.15s}
.phi-art-orbit-points{opacity:.7;animation:phi-art-in .5s .3s both}
.phi-art-fib-arc{stroke:#d5b77a;stroke-width:2.05;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:phi-art-draw var(--phi-arc-time) var(--phi-arc-delay) linear both}
.phi-art-fib-arc:nth-last-child(-n+2){animation-timing-function:cubic-bezier(.2,.25,.6,1)}
.phi-art-fib-underlay{stroke:#173b38;stroke-width:4.5}
.phi-art-circuit{stroke-dasharray:1;stroke-dashoffset:0;animation:phi-art-draw .4s 2.24s ease-out both}
.phi-art-circuit-b{animation-delay:2.28s}.phi-art-circuit-c{animation-delay:2.32s}
.phi-art-digital-nodes{animation:phi-art-in .2s 2.5s both}
.phi-art-origin,.phi-art-middle-point,.phi-art-end-point{fill:#d5b77a;opacity:1}
.phi-art-origin{animation:phi-art-in .2s .48s both}
.phi-art-middle-point{animation:phi-art-in .2s 1.23s both}
.phi-art-traveller{stroke:#f0d69a;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.005 1;stroke-dashoffset:-1;opacity:0;animation:phi-art-travel 1.9s .35s linear both}
.phi-art-label{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;max-width:85%;padding:0;border:0;background:transparent;color:#eef3e6;font-size:10px;line-height:1.4;text-align:center;animation:phi-art-label-in .3s var(--phi-label-delay) ease both}
.phi-art-label b{display:flex;align-items:center;justify-content:center;gap:7px;color:#d5b77a;font-weight:500;font-size:11px;line-height:1.3;letter-spacing:2px}
.phi-art-label b::before{content:'';display:block;flex-shrink:0;width:4px;height:4px;background:#d5b77a;border-radius:1px}
.phi-art-label>span{white-space:nowrap}
.phi-art-label-why{top:52%;left:57.6%;transform:translateX(-50%);--phi-label-delay:.15s}
.phi-art-label-why b::before{display:none}
.phi-art-label-how{top:69%;left:29%;transform:translateX(-50%);--phi-label-delay:1.23s}
.phi-art-label-what{top:32.8%;left:min(82.2%,calc(100% - 105px));transform:translate(-50%,-50%);--phi-label-delay:2.25s}
.phi-art-caption{position:absolute;bottom:26px;left:26px;right:26px;display:flex;align-items:center;gap:16px;color:#d3dfc5;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;line-height:1.6}
.phi-art-caption>span{width:24px;height:1px;background:#d5b77a;flex-shrink:0}
@keyframes phi-art-draw{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes phi-art-in{from{opacity:0}to{opacity:1}}
@keyframes phi-art-geometry-in{from{opacity:0}to{opacity:.32}}
@keyframes phi-art-label-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
/* The segment boundaries use the original radii and drawing durations. */
@keyframes phi-art-travel{
  0%{stroke-dashoffset:0;opacity:.9}
  4.210526%{stroke-dashoffset:-.018519;opacity:.9}
  8.421053%{stroke-dashoffset:-.037037;opacity:.9}
  13.684211%{stroke-dashoffset:-.074074;opacity:.9}
  21.052632%{stroke-dashoffset:-.12963;opacity:.9}
  31.578947%{stroke-dashoffset:-.222222;opacity:.9}
  46.315789%{stroke-dashoffset:-.37037;opacity:.9}
  68.421053%{stroke-dashoffset:-.611111;opacity:.9;animation-timing-function:cubic-bezier(.2,.25,.6,1)}
  100%{stroke-dashoffset:-1;opacity:0}
}
@media(max-width:1180px){.phi-scene{aspect-ratio:.91}.phi-art-stage{width:100%}.phi-art-top{inset:21px 21px auto}.phi-art-sequence{font-size:8px}.phi-art-caption{left:22px;right:22px;bottom:22px}}
@media(max-width:960px){.phi-scene{aspect-ratio:.8}.phi-art-top{font-size:8px;gap:8px;flex-wrap:wrap}.phi-art-sequence{font-size:8px}.phi-art-caption{font-size:8px;letter-spacing:1.1px}}
@media(max-width:720px){.phi-scene{aspect-ratio:.9;max-height:450px}.phi-art-stage{width:min(92%,380px)}.phi-art-top{inset:13px 17px auto;font-size:8px;letter-spacing:1.1px;gap:5px 10px;flex-wrap:wrap}.phi-art-sequence{font-size:7px;letter-spacing:0}.phi-art-label{gap:4px;line-height:1.35}.phi-art-label-what{top:30%;left:min(82.2%,calc(100% - 100px))}.phi-art-caption{bottom:14px;left:17px;right:17px;font-size:8px;letter-spacing:1px;gap:12px}.phi-art-caption>span{width:18px}}
@media(max-width:360px){.phi-art-top{font-size:7px;inset:12px 14px auto}.phi-art-sequence{font-size:7px}.phi-art-caption{font-size:7px;bottom:12px;left:14px;right:14px}}
/* Keep the whole service line above the gold curve, including its 5px entrance. */
@container(max-width:450px){.phi-art-label-what{top:auto;bottom:calc(62.08% + 8px);transform:translateX(-50%)}}
@container(max-width:285px){.phi-art-label-why:lang(sl),.phi-art-label-why:lang(hr){left:60%;gap:1px;animation-name:phi-art-in}}
@media(prefers-reduced-motion:reduce){.phi-scene *{animation:none!important;translate:none!important;stroke-dashoffset:0!important}.phi-scene .phi-art-traveller{opacity:0!important}}