/* ── full-screen loader: segmented orange bar (BILIBALA p5 ref) ── */
  .loader{ position:fixed; inset:0; z-index:2000; background:#050505; transition:transform .8s cubic-bezier(.76,0,.24,1); }
  .loader.done{ transform:translateY(-100%); pointer-events:none; }
  .loader-name{ position:absolute; top:10%; left:50%; transform:translateX(-50%); font-size:clamp(16px,1.8vw,21px); font-weight:600; letter-spacing:.04em; color:#fff; white-space:nowrap; }
  .loader-name b{ color:var(--accent); font-weight:600; }
  .loader-inner{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(80vw,520px); }
  .loader-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
  .loader-label{ font-size:clamp(11px,2.9vw,17px); font-weight:400; letter-spacing:-.02em; color:rgba(255,255,255,.62); }
  .loader-count{ font-size:22px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }
  /* bullet cells: 30 on mobile, 40 on web — real elements so each gets 4px radius */
  .loader-track{ display:flex; gap:4px; height:22px; }
  .loader-track i{ flex:1 1 0; border-radius:4px; background:#232323; }
  .loader-track i.on{ background:var(--accent); }
  @media(prefers-reduced-motion:reduce){ .loader{ transition:opacity .3s; } .loader.done{ transform:none; opacity:0; visibility:hidden; } }


.loader[hidden]{display:none!important}