:root{
    --bg-0:#0a0a0f;
    --bg-1:#101018;
    --ink:#f4f4f6;
    --ink-dim:#9a9aa6;
    --ink-mute:#5a5a66;
    --violet:#8b3df5;
    --violet-deep:#5b1fb8;
    --violet-glow:#a86bff;
    --magenta:#ff2bd6;
    --acid:#c8ff00;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
  }
  *{margin:0;padding:0;box-sizing:border-box}

  /* ====== PRELOADER ====== */
  .preloader{
    position:fixed;inset:0;z-index:9999;
    background:
      radial-gradient(900px 500px at 50% 30%, rgba(139,61,245,.18), transparent 60%),
      radial-gradient(600px 400px at 50% 70%, rgba(255,43,214,.08), transparent 55%),
      var(--bg-0);
    display:grid;
    grid-template-rows:auto 1fr auto;
    overflow:hidden;
  }

  /* Grain */
  .preloader::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:overlay;
  }

  /* Grid lines */
  .preloader::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:80px 80px;
    mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  }

  /* ====== TOP BAR ====== */
  .pl-top{
    position:relative;z-index:3;
    display:flex;justify-content:space-between;align-items:center;
    padding:24px 36px;
    border-bottom:1px solid var(--line);
  }
  .pl-top .left,
  .pl-top .right{
    display:flex;align-items:center;gap:18px;
    font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.2em;color:var(--ink-mute);text-transform:uppercase;
  }
  .pl-top .dash{width:24px;height:1px;background:var(--ink-mute)}
  .pl-top .live{
    color:var(--acid);display:inline-flex;align-items:center;gap:8px;
  }
  .pl-top .live::before{
    content:"";width:6px;height:6px;background:var(--acid);border-radius:50%;
    box-shadow:0 0 10px var(--acid);animation:pulse 1.4s infinite;
  }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

  /* Corner brackets */
  .corner{
    position:absolute;width:28px;height:28px;
    border:1px solid var(--violet-glow);
    z-index:3;pointer-events:none;
  }
  .corner.tl{top:14px;left:14px;border-right:none;border-bottom:none}
  .corner.tr{top:14px;right:14px;border-left:none;border-bottom:none}
  .corner.bl{bottom:14px;left:14px;border-right:none;border-top:none}
  .corner.br{bottom:14px;right:14px;border-left:none;border-top:none}

  /* ====== CENTER STAGE ====== */
  .pl-center{
    position:relative;z-index:2;
    display:grid;place-items:center;
    padding:20px;
  }

  .stage{
    position:relative;
    display:grid;place-items:center;
    width:100%;max-width:700px;
    height:340px;
  }

  /* Concentric rings */
  .rings{
    position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  }
  .ring{
    position:absolute;border-radius:50%;
    border:1px solid rgba(168,107,255,.18);
  }
  .ring.r1{width:340px;height:340px;animation:rot 14s linear infinite}
  .ring.r2{width:440px;height:440px;border-style:dashed;border-color:rgba(168,107,255,.14);animation:rot 22s linear infinite reverse}
  .ring.r3{width:540px;height:540px;border-color:rgba(168,107,255,.08)}
  .ring.r4{
    width:240px;height:240px;
    border:1px solid var(--violet-glow);border-style:dotted;
    animation:rot 8s linear infinite;
  }
  @keyframes rot{to{transform:rotate(360deg)}}

  /* Active arc on a ring (the "loading sweep") */
  .arc{
    position:absolute;width:340px;height:340px;border-radius:50%;
    border:2px solid transparent;
    border-top-color:var(--magenta);
    border-right-color:var(--violet-glow);
    animation:rot 1.6s cubic-bezier(.7,0,.3,1) infinite;
    filter:drop-shadow(0 0 8px rgba(255,43,214,.5));
  }

  /* Glow */
  .ring-glow{
    position:absolute;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(139,61,245,.5),rgba(255,43,214,.25) 40%,transparent 70%);
    filter:blur(40px);
    animation:breathe 2.4s ease-in-out infinite;
  }
  @keyframes breathe{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.05);opacity:1}}

  /* Logo */
  .pl-logo{
    position:relative;z-index:5;
    width:280px;max-width:60vw;
    filter:drop-shadow(0 0 20px rgba(168,107,255,.5));
    animation:logoIn 1.2s cubic-bezier(.16,1,.3,1) both, logoFloat 4s ease-in-out 1.2s infinite;
  }
  @keyframes logoIn{
    from{opacity:0;transform:scale(.85);filter:blur(8px) drop-shadow(0 0 0 rgba(168,107,255,0))}
    to{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 20px rgba(168,107,255,.5))}
  }
  @keyframes logoFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
  }

  /* Floating data labels around logo */
  .labels-row{
    position:absolute;z-index:6;
    left:0;right:0;
    display:flex;justify-content:space-between;align-items:center;
    pointer-events:none;
  }
  .labels-top{top:128px}
  .labels-bot{top:182px}

  .data-label{
    font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
    display:flex;align-items:center;gap:10px;
    opacity:0;animation:fadeIn .6s ease forwards;
  }
  .data-label .line{width:36px;height:1px;background:var(--violet-glow)}
  .data-label .val{color:var(--ink);font-weight:700}

  .data-label.dl-1{animation-delay:.6s}
  .data-label.dl-2{animation-delay:.8s}
  .data-label.dl-3{animation-delay:1s}
  .data-label.dl-4{animation-delay:1.2s}
  @keyframes fadeIn{to{opacity:1}}

  /* ====== BOTTOM PROGRESS ====== */
  .pl-bottom{
    position:relative;z-index:3;
    padding:32px 36px 28px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:end;gap:48px;
  }

  .pl-meta{
    display:flex;flex-direction:column;gap:6px;
  }
  .pl-meta .label{
    font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.2em;color:var(--ink-mute);text-transform:uppercase;
  }
  .pl-meta .value{
    font-family:'Archivo Black',sans-serif;font-size:14px;
    color:var(--ink);letter-spacing:.05em;
    min-height:18px;
  }
  .pl-meta .value .cursor{
    display:inline-block;width:10px;height:14px;
    background:var(--acid);margin-left:4px;
    vertical-align:middle;animation:blink 1s steps(2) infinite;
  }
  @keyframes blink{50%{opacity:0}}

  /* Progress center */
  .progress-wrap{
    display:flex;flex-direction:column;gap:10px;
    width:100%;
  }
  .progress-top{
    display:flex;justify-content:space-between;align-items:center;
    font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.2em;color:var(--ink-mute);text-transform:uppercase;
  }
  .progress-top .right-tag{color:var(--violet-glow)}

  .progress-bar{
    position:relative;height:6px;background:rgba(255,255,255,.06);
    overflow:hidden;
    clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);
  }
  .progress-fill{
    position:absolute;top:0;left:0;bottom:0;width:0;
    background:linear-gradient(90deg,var(--violet),var(--magenta) 60%,var(--violet-glow));
    box-shadow:0 0 12px var(--magenta);
    animation:fill 4s cubic-bezier(.65,.05,.36,1) forwards;
  }
  @keyframes fill{
    0%{width:0}
    25%{width:32%}
    55%{width:58%}
    78%{width:74%}
    100%{width:100%}
  }
  /* Scanline on bar */
  .progress-bar::after{
    content:"";position:absolute;top:0;bottom:0;width:60px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    animation:scan 1.4s linear infinite;
  }
  @keyframes scan{from{left:-60px}to{left:100%}}

  .progress-segments{
    display:grid;grid-template-columns:repeat(20,1fr);gap:2px;
    margin-top:6px;
  }
  .seg{height:3px;background:rgba(255,255,255,.06)}
  .seg.on{background:var(--violet-glow);box-shadow:0 0 4px var(--violet-glow)}

  .pl-percent{
    font-family:'Archivo Black',sans-serif;
    font-size:64px;line-height:1;color:var(--ink);
    letter-spacing:-.02em;
    display:flex;align-items:baseline;gap:4px;
  }
  .pl-percent .num{
    color:var(--ink);
  }
  .pl-percent .sym{font-size:24px;color:var(--ink-mute)}

  /* ====== EXIT ANIMATION ====== */
  .preloader.done{
    animation:exit 0.9s cubic-bezier(.76,0,.24,1) forwards;
  }
  @keyframes exit{
    0%{transform:translateY(0)}
    100%{transform:translateY(-100%)}
  }

  /* Responsive */
  @media (max-width:640px){
    .pl-top,.pl-bottom{padding:18px 20px}
    .pl-bottom{grid-template-columns:1fr;gap:24px}
    .pl-percent{font-size:48px;justify-self:end}
    .ring.r1{width:260px;height:260px}
    .ring.r2{width:340px;height:340px}
    .ring.r3{width:420px;height:420px}
    .ring.r4{width:180px;height:180px}
    .arc{width:260px;height:260px}
    .data-label{font-size:9px}
    .pl-top .left span:nth-child(n+3),
    .pl-top .right span:nth-child(-n+2){display:none}
  }