:root{
  --bg:#0b0b1a;--fg:#f1efff;--muted:#a29fc4;--c1:#7c5cff;--c2:#ff5c9d;--c3:#38d6c4;
  --track:rgba(255,255,255,.1);--glass:rgba(255,255,255,.06);--grain:.07;--blend:screen;
}
@media (prefers-color-scheme:light){
  :root{--bg:#f6f4ff;--fg:#1a1738;--muted:#5d5a80;--c1:#8e74ff;--c2:#ff7fb0;--c3:#4fdccb;
  --track:rgba(26,23,56,.12);--glass:rgba(26,23,56,.05);--grain:.05;--blend:multiply}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--fg);font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;line-height:1.5;min-height:100vh;min-height:100svh;position:relative}
.bg{position:fixed;inset:0;overflow:hidden;z-index:0}
.blob{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:var(--blend);will-change:transform}
.b1{background:radial-gradient(circle,var(--c1),transparent 65%);top:-20vmax;left:-15vmax;animation:f1 22s ease-in-out infinite alternate}
.b2{background:radial-gradient(circle,var(--c2),transparent 65%);bottom:-25vmax;right:-15vmax;animation:f2 26s ease-in-out infinite alternate}
.b3{background:radial-gradient(circle,var(--c3),transparent 65%);width:44vmax;height:44vmax;top:30%;left:40%;opacity:.35;animation:f3 30s ease-in-out infinite alternate}
@keyframes f1{to{transform:translate3d(30vmax,18vmax,0) scale(1.25) rotate(40deg)}}
@keyframes f2{to{transform:translate3d(-28vmax,-14vmax,0) scale(.85) rotate(-30deg)}}
@keyframes f3{to{transform:translate3d(-22vmax,12vmax,0) scale(1.4)}}
.grain{position:absolute;inset:0;opacity:var(--grain);background:
  repeating-conic-gradient(from 0deg at 50% 50%,#000 0 .5deg,transparent .5deg 3deg),
  repeating-radial-gradient(circle at 30% 40%,#fff 0 1px,transparent 1px 4px)}
.wrap{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;gap:22px;animation:in 1s ease-out both}
@keyframes in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.brand{font-size:.8rem;letter-spacing:.5em;text-transform:uppercase;color:var(--muted);padding-left:.5em}
.loader{position:relative;width:min(220px,58vw);aspect-ratio:1;margin:6px 0}
.ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-svg circle{fill:none;stroke-linecap:round;stroke-width:3}
.track{stroke:var(--track)}
.arc{stroke:var(--c1);stroke-dasharray:300 230}
.arc2{stroke:var(--c2);stroke-dasharray:90 312;stroke-width:2}
.spin{transform-origin:100px 100px;animation:rot 3.2s linear infinite}
.spin.rev{animation-duration:5s;animation-direction:reverse}
@keyframes rot{to{transform:rotate(360deg)}}
.orbit{position:absolute;inset:0;animation:rot linear infinite}
.o1{inset:14%;animation-duration:6s}
.o2{inset:26%;animation-duration:9s;animation-direction:reverse}
.o3{inset:4%;animation-duration:14s}
.orbit i{position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--c3);box-shadow:0 0 12px var(--c3)}
.o2 i{background:var(--c2);box-shadow:0 0 12px var(--c2)}
.o3 i{background:var(--fg);width:6px;height:6px;box-shadow:0 0 10px var(--fg)}
.core{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c1) 45%,var(--c2));box-shadow:0 0 40px var(--c1),0 0 90px var(--c2);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25)}}
h1{font-size:clamp(1.9rem,6.5vw,3.6rem);font-weight:700;line-height:1.12;letter-spacing:-.02em}
h1 span{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 8s linear infinite}
@keyframes shine{to{background-position:300% 0}}
.tag{max-width:30em;color:var(--muted);font-size:clamp(1rem,2.6vw,1.15rem)}
.progress{width:min(420px,100%);margin-top:6px}
.bar{height:8px;border-radius:99px;background:var(--track);overflow:hidden;position:relative}
.bar span{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));transform-origin:left;transform:scaleX(.72);animation:grow 6s ease-in-out infinite alternate}
.bar span::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:sweep 2.4s ease-in-out infinite}
@keyframes grow{from{transform:scaleX(.66)}to{transform:scaleX(.78)}}
@keyframes sweep{to{transform:translateX(100%)}}
.progress p{margin-top:12px;font-size:.95rem;color:var(--muted)}
.dots b{display:inline-block;font-weight:400;animation:dot 1.4s ease-in-out infinite}
.dots b:nth-child(2){animation-delay:.2s}.dots b:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.note{margin-top:8px;font-size:.8rem;padding:7px 16px;border-radius:99px;background:var(--glass);border:1px solid var(--track);color:var(--muted);backdrop-filter:blur(8px)}
@media (max-width:400px){.brand{letter-spacing:.35em}.note{font-size:.75rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .orbit,.spin{animation:none!important}
  .blob{opacity:.4}
}