/* Motion inspired by Uiverse.io / Z4drus (Orbit dots) and aadil-01 (comparison).
   Transform-only loop, bounded geometry, no artificial loading duration. */
:root{--po-load-bg:#06101d;--po-load-text:#f7fbff;--po-load-muted:#b4c1d0;--po-load-cyan:#18cfe3;--po-load-blue:#0b67f2;--po-load-core:#fff}
html[data-theme="light"]{--po-load-bg:#eef6fb;--po-load-text:#071c3d;--po-load-muted:#365873;--po-load-cyan:#087fa3;--po-load-blue:#176cf2;--po-load-core:#fff}
.po-motion{display:grid;place-items:center;width:148px;height:148px;flex:none;isolation:isolate}
.po-motion-outer{display:block;position:relative;width:80px;height:80px;border-radius:18px;background:var(--po-load-cyan);box-shadow:0 10px 32px rgb(11 103 242 / 12%);animation:po-box-turn 5s cubic-bezier(.65,0,.35,1) infinite;transform-origin:50% 50%}
.po-motion-orbit{display:block;position:absolute;left:12px;top:12px;width:34px;height:34px;animation:po-box-orbit 5s cubic-bezier(.65,0,.35,1) infinite}
.po-motion-inner{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--po-load-blue);transform:rotate(45deg)}
.po-motion-core{display:block;width:15px;height:15px;border-radius:4px;background:var(--po-load-core);animation:po-box-turn 5s cubic-bezier(.65,0,.35,1) infinite reverse}
@keyframes po-box-turn{0%,10%{transform:rotate(0deg)}25%,35%{transform:rotate(90deg)}50%,60%{transform:rotate(180deg)}75%,85%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
@keyframes po-box-orbit{0%,10%{transform:translate(0,0)}25%,35%{transform:translate(0,22px)}50%,60%{transform:translate(22px,22px)}75%,85%{transform:translate(22px,0)}100%{transform:translate(0,0)}}
.po-boot-loader{display:none}
html.po-loading.po-loader-visible .po-boot-loader{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;background:var(--po-load-bg);color:var(--po-load-text);text-align:center;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
html:not(.po-loader-visible) .workspace-route-loader{visibility:hidden}
.po-boot-loader p{margin:0;color:var(--po-load-muted);font-size:13px;line-height:1.5}
.workspace-route-loader .po-motion{width:116px;height:128px}
.workspace-route-loader[hidden]{display:none!important}
.po-motion-paused .po-motion *{animation-play-state:paused!important}
@media(max-width:480px){.workspace-route-loader{flex-direction:column;text-align:center;gap:8px}}
@media(prefers-reduced-motion:reduce){.po-motion *{animation:none!important}.po-motion-orbit{transform:translate(11px,11px)}}

/* Orbit-dot study adapted from Uiverse.io / Z4drus. */
.po-orbit-mark{--orbit-size:clamp(64px,20vmin,132px);--orbit-speed:2.5s;display:flex;flex-direction:column;align-items:center;justify-content:center;height:var(--orbit-size);width:var(--orbit-size);flex:none}
.po-orbit-slice{position:relative;height:calc(var(--orbit-size)/6);width:100%}
.po-orbit-slice::before,.po-orbit-slice::after{content:"";position:absolute;top:0;left:calc(50% - var(--orbit-size)/12);height:100%;width:calc(100%/6);border-radius:50%;background:var(--orbit-color);animation:po-orbit-dot var(--orbit-speed) linear infinite;animation-delay:var(--orbit-phase);transition:background-color .3s ease}
.po-orbit-slice::after{animation-delay:calc(var(--orbit-phase) - var(--orbit-speed)/2)}
.po-orbit-slice:nth-child(1){--orbit-phase:calc(var(--orbit-speed)/-6 * 0);--orbit-color:#334dff}
.study.dark .po-orbit-slice:nth-child(1),html[data-theme="dark"] .po-boot-loader .po-orbit-slice:nth-child(1),html[data-theme="dark"] .workspace-route-loader .po-orbit-slice:nth-child(1){--orbit-color:#7397ff}
.po-orbit-slice:nth-child(2){--orbit-phase:calc(var(--orbit-speed)/-6 * 1);--orbit-color:#333eff}
.study.dark .po-orbit-slice:nth-child(2),html[data-theme="dark"] .po-boot-loader .po-orbit-slice:nth-child(2),html[data-theme="dark"] .workspace-route-loader .po-orbit-slice:nth-child(2){--orbit-color:#7189ff}
.po-orbit-slice:nth-child(3){--orbit-phase:calc(var(--orbit-speed)/-6 * 2);--orbit-color:#3334ff}
.study.dark .po-orbit-slice:nth-child(3),html[data-theme="dark"] .po-boot-loader .po-orbit-slice:nth-child(3),html[data-theme="dark"] .workspace-route-loader .po-orbit-slice:nth-child(3){--orbit-color:#7c7dff}
.po-orbit-slice:nth-child(4){--orbit-phase:calc(var(--orbit-speed)/-6 * 3);--orbit-color:#4433ff}
.study.dark .po-orbit-slice:nth-child(4),html[data-theme="dark"] .po-boot-loader .po-orbit-slice:nth-child(4),html[data-theme="dark"] .workspace-route-loader .po-orbit-slice:nth-child(4){--orbit-color:#9175ff}
.po-orbit-slice:nth-child(5){--orbit-phase:calc(var(--orbit-speed)/-6 * 4);--orbit-color:#6633ff}
.study.dark .po-orbit-slice:nth-child(5),html[data-theme="dark"] .po-boot-loader .po-orbit-slice:nth-child(5),html[data-theme="dark"] .workspace-route-loader .po-orbit-slice:nth-child(5){--orbit-color:#ad7aff}
.po-orbit-slice:nth-child(6){--orbit-phase:calc(var(--orbit-speed)/-6 * 5);--orbit-color:#9933ff}
.study.dark .po-orbit-slice:nth-child(6),html[data-theme="dark"] .po-boot-loader .po-orbit-slice:nth-child(6),html[data-theme="dark"] .workspace-route-loader .po-orbit-slice:nth-child(6){--orbit-color:#c784ff}
@keyframes po-orbit-dot{
0%{transform:translateX(calc(var(--orbit-size) * 0.25)) scale(0.73684);opacity:0.65}
5%{transform:translateX(calc(var(--orbit-size) * 0.235)) scale(0.684208);opacity:0.58}
10%{transform:translateX(calc(var(--orbit-size) * 0.182)) scale(0.631576);opacity:0.51}
15%{transform:translateX(calc(var(--orbit-size) * 0.129)) scale(0.578944);opacity:0.44}
20%{transform:translateX(calc(var(--orbit-size) * 0.076)) scale(0.526312);opacity:0.37}
25%{transform:translateX(calc(var(--orbit-size) * 0)) scale(0.47368);opacity:0.3}
30%{transform:translateX(calc(var(--orbit-size) * -0.076)) scale(0.526312);opacity:0.37}
35%{transform:translateX(calc(var(--orbit-size) * -0.129)) scale(0.578944);opacity:0.44}
40%{transform:translateX(calc(var(--orbit-size) * -0.182)) scale(0.631576);opacity:0.51}
45%{transform:translateX(calc(var(--orbit-size) * -0.235)) scale(0.684208);opacity:0.58}
50%{transform:translateX(calc(var(--orbit-size) * -0.25)) scale(0.73684);opacity:0.65}
55%{transform:translateX(calc(var(--orbit-size) * -0.235)) scale(0.789472);opacity:0.72}
60%{transform:translateX(calc(var(--orbit-size) * -0.182)) scale(0.842104);opacity:0.79}
65%{transform:translateX(calc(var(--orbit-size) * -0.129)) scale(0.894736);opacity:0.86}
70%{transform:translateX(calc(var(--orbit-size) * -0.076)) scale(0.947368);opacity:0.93}
75%{transform:translateX(calc(var(--orbit-size) * 0)) scale(1);opacity:1}
80%{transform:translateX(calc(var(--orbit-size) * 0.076)) scale(0.947368);opacity:0.93}
85%{transform:translateX(calc(var(--orbit-size) * 0.129)) scale(0.894736);opacity:0.86}
90%{transform:translateX(calc(var(--orbit-size) * 0.182)) scale(0.842104);opacity:0.79}
95%{transform:translateX(calc(var(--orbit-size) * 0.235)) scale(0.789472);opacity:0.72}
100%{transform:translateX(calc(var(--orbit-size) * 0.25)) scale(0.73684);opacity:0.65}
}
html.demo-paused .po-orbit-slice::before,html.demo-paused .po-orbit-slice::after,html.po-motion-paused .po-orbit-slice::before,html.po-motion-paused .po-orbit-slice::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){html:not(.demo-motion-enabled) .po-orbit-slice::before,html:not(.demo-motion-enabled) .po-orbit-slice::after{animation:none!important;transition:none}html:not(.demo-motion-enabled) .po-orbit-slice::before{transform:translateX(-25px) scale(.75)}html:not(.demo-motion-enabled) .po-orbit-slice::after{transform:translateX(25px) scale(.75)}}

/* A loading mark is viewport-contained and never shrinks unevenly in a flex row. */
.po-orbit-mark{max-width:100%;contain:layout style}
