.path-scene{container-type:inline-size}.path-view{--u:calc(100cqw / 1180);--h:calc(34 * var(--u));height:calc(590 * var(--u));perspective:calc(3200 * var(--u));perspective-origin:50% 35%;position:relative}.path-stage,.path-stage>ol{width:0;height:0;transform-style:preserve-3d;position:absolute}.path-stage{left:calc(30 * var(--u));top:calc(470 * var(--u))}.path-stage>ol{inset:0}.path-step{--lift:0;left:calc(var(--x) * var(--u));width:calc(196 * var(--u));height:calc(112 * var(--u));transform-style:preserve-3d;transform:translateZ(calc((var(--z) + var(--lift)) * var(--u)));transition:transform .5s var(--ease-out);position:absolute;top:0}.path-step:hover,.path-step:focus-within{--lift:16}.path-hit{transform-style:preserve-3d;color:inherit;text-decoration:none;display:block;position:absolute;inset:0}.path-hit:focus-visible{outline:none}.path-hit:focus-visible .path-top{outline:3px solid var(--color-blue);outline-offset:3px}.path-top{border-radius:calc(14 * var(--u));background:linear-gradient(150deg, #fff -25%, var(--top) 40%, color-mix(in srgb, var(--top) 88%, var(--front)));box-shadow:inset 0 0 0 calc(1.5 * var(--u)) #ffffffbf;transform:translateZ(var(--h));position:absolute;inset:0}.path-front{width:100%;height:var(--h);border-radius:0 0 calc(10 * var(--u)) calc(10 * var(--u));background:linear-gradient(to bottom, color-mix(in srgb, var(--front) 70%, #fff), var(--front) 35%, color-mix(in srgb, var(--front) 88%, #5a4630));transform-origin:top;transform:translateZ(var(--h)) rotateX(-90deg);backface-visibility:hidden;place-items:center;display:grid;position:absolute;top:100%;left:0}.path-side{width:var(--h);background:linear-gradient(to bottom, var(--side), color-mix(in srgb, var(--side) 85%, #5a4630));transform-origin:0;backface-visibility:hidden;height:100%;position:absolute;top:0;left:0;transform:rotateY(-90deg)}.path-shadow{transform:translateZ(calc((-46 - var(--z)) * var(--u)));background:radial-gradient(closest-side,#0d284029,#0d28400f 60%,#0000);border-radius:50%;position:absolute;inset:-12% -6% -30%}.path-name{font-family:var(--font-display);font-size:calc(19 * var(--u));white-space:nowrap;color:var(--color-blue-deep);font-weight:600;line-height:1}.path-caption{top:calc(100% + 16 * var(--u));width:92%;font-size:max(11px, calc(15.5 * var(--u)));text-align:center;color:var(--color-muted);line-height:1.35;position:absolute;left:4%}.path-anchor{width:1px;height:1px;transform:translateZ(var(--h));position:absolute;top:44%;left:50%}.path-floats{pointer-events:none;position:absolute;inset:0}.path-float{position:absolute;top:0;left:0}.path-object{width:calc(var(--ow) * var(--u));position:absolute;bottom:0;left:0;translate:-50%}.path-img{width:100%;height:auto;filter:drop-shadow(0 calc(10 * var(--u)) calc(8 * var(--u)) #3c281447);transform-origin:50% 100%;transition:scale .5s var(--ease-out);animation:path-bob 4.5s ease-in-out calc(var(--i) * -.9s) infinite alternate;display:block}.path-float.is-active .path-img{scale:1.08}.path-bubble{bottom:calc(100% + 14 * var(--u));left:calc(-34 * var(--u));align-items:center;gap:calc(10 * var(--u));padding:calc(8 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));border-radius:calc(16 * var(--u));box-shadow:0 calc(14 * var(--u)) calc(28 * var(--u)) calc(-14 * var(--u)) #0d284059, inset 0 0 0 1px #0d28400f;font-size:max(11px, calc(15.5 * var(--u)));white-space:nowrap;color:var(--color-blue-deep);background:#ffffffeb;font-weight:500;line-height:1.2;display:flex;position:absolute}.path-bubble:after{content:"";top:100%;left:calc(34 * var(--u));border:calc(8 * var(--u)) solid transparent;border-top-color:#ffffffeb;position:absolute}.path-number{width:calc(38 * var(--u));aspect-ratio:1;background:var(--badge);box-shadow:inset 0 0 0 calc(2 * var(--u)) #ffffff59;font-family:var(--font-display);font-size:max(11px, calc(16 * var(--u)));color:#fff;border-radius:50%;place-items:center;font-weight:600;display:grid}.path-beam{left:calc(var(--x) * var(--u));top:calc(38 * var(--u));width:calc(var(--len) * var(--u));height:calc(34 * var(--u));transform-style:preserve-3d;transform:translateZ(calc(var(--z) * var(--u)));position:absolute}.path-beam-top{border-radius:calc(3 * var(--u));transform:translateZ(calc(14 * var(--u)));background:linear-gradient(100deg,#e4bd6c,#f7e0a8 45%,#d6a44c);position:absolute;inset:0}.path-beam-front{width:100%;height:calc(14 * var(--u));transform-origin:top;transform:translateZ(calc(14 * var(--u))) rotateX(-90deg);background:linear-gradient(#d3a44e,#a8782b);position:absolute;top:100%;left:0}.path-arrow-head{width:calc(44 * var(--u));height:calc(66 * var(--u));transform:translateY(-50%) translateZ(calc(14 * var(--u)));position:absolute;top:50%;left:100%}.path-view:not(.is-shown) :is(.path-hit,.path-beam,.path-float)>*{opacity:0}.path-view.is-shown .path-step{animation:path-rise 1s var(--ease-out) calc(var(--i) * .14s) backwards}.path-view.is-shown .path-hit>*{animation:path-fade .7s ease-out calc(var(--i) * .14s) backwards}.path-view.is-shown .path-float>*{animation:path-fade .7s ease-out calc(var(--i) * .14s + .35s) backwards}.path-view.is-shown .path-beam>*{animation:.6s ease-out .9s backwards path-fade}@keyframes path-rise{0%{transform:translateZ(calc((var(--z) - 150) * var(--u)))}}@keyframes path-fade{0%{opacity:0}}@keyframes path-bob{to{translate:0 calc(-6 * var(--u))}}@media (prefers-reduced-motion:reduce){.path-step,.path-img{transition:none}.path-view .path-step,.path-view :is(.path-hit,.path-beam,.path-float)>*,.path-img{opacity:1!important;animation:none!important}}