#web3-loading-screen {
  --loader-accent: #47d7ff;
  --loader-secondary: #85f0bd;
  --loader-warm: #ffb968;
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  place-items: center;
  min-width: 280px;
  overflow: hidden;
  background: #07111f;
  color: #f7fbff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 1;
  transition: opacity .48s ease, visibility .48s ease;
}
#web3-loading-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(105,151,202,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(105,151,202,.075) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
#web3-loading-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.web3-loader-stage { position: relative; width: min(430px, 88vw); height: min(430px, 72vh); display: grid; place-items: center; isolation: isolate; }
.web3-loader-core { position: relative; z-index: 5; display: grid; place-items: center; text-align: center; }
.web3-loader-brand { font-size: clamp(30px, 9vw, 48px); font-weight: 780; line-height: 1; letter-spacing: 0; text-shadow: 0 0 28px rgba(71,215,255,.26); }
.web3-loader-brand b { color: var(--loader-accent); font-weight: inherit; }
.web3-loader-core small { margin-top: 10px; color: #87a0bd; font-size: 9px; font-weight: 700; letter-spacing: 2.4px; }
.web3-loader-orbit, .web3-loader-grid, .web3-loader-chain, .web3-loader-hex, .web3-loader-blocks, .web3-loader-ring, .web3-loader-wave { display: none; }
.web3-loader-progress { position: absolute; z-index: 8; left: 50%; bottom: 30px; width: min(210px, 55vw); height: 2px; overflow: hidden; background: rgba(154,183,216,.17); transform: translateX(-50%); }
.web3-loader-progress i { display: block; width: 42%; height: 100%; background: var(--loader-accent); box-shadow: 0 0 14px var(--loader-accent); animation: web3-progress 1.35s ease-in-out infinite; }
.web3-loader-status { position: absolute; bottom: 5px; color: #7088a3; font-size: 9px; font-weight: 650; letter-spacing: 1.6px; }
@keyframes web3-progress { 0% { transform: translateX(-110%); } 60%,100% { transform: translateX(340%); } }

/* 01 / Orbit nodes */
#web3-loading-screen[data-style="web3-orbit"] .web3-loader-orbit { display: block; position: absolute; width: 264px; height: 264px; border: 1px solid rgba(95,174,225,.22); border-radius: 50%; animation: web3-orbit 5.4s linear infinite; }
#web3-loading-screen[data-style="web3-orbit"] .web3-loader-orbit.orbit-b { width: 198px; height: 198px; border-style: dashed; animation-duration: 4s; animation-direction: reverse; }
#web3-loading-screen[data-style="web3-orbit"] .web3-loader-orbit.orbit-c { width: 126px; height: 126px; border-color: rgba(133,240,189,.28); animation-duration: 2.8s; }
.web3-loader-orbit i { position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border: 2px solid #07111f; border-radius: 50%; background: var(--loader-accent); box-shadow: 0 0 15px var(--loader-accent); }
.web3-loader-orbit.orbit-b i { top: auto; right: 12px; bottom: 20px; left: auto; background: var(--loader-secondary); box-shadow: 0 0 15px var(--loader-secondary); }
.web3-loader-orbit.orbit-c i { top: 48%; right: -5px; left: auto; background: var(--loader-warm); box-shadow: 0 0 15px var(--loader-warm); }
@keyframes web3-orbit { to { transform: rotate(360deg); } }

/* 02 / Scanning ledger grid */
#web3-loading-screen[data-style="web3-grid"] .web3-loader-grid { position: absolute; display: grid; grid-template-columns: repeat(5, 36px); gap: 7px; transform: perspective(420px) rotateX(58deg) rotateZ(-14deg); }
.web3-loader-grid i { width: 36px; height: 36px; border: 1px solid rgba(79,178,231,.2); background: rgba(20,54,83,.42); animation: web3-cell 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms); }
.web3-loader-grid i:nth-child(3n) { border-color: rgba(133,240,189,.3); }
@keyframes web3-cell { 0%,100% { transform: translateZ(0); background: rgba(20,54,83,.35); } 45% { transform: translateZ(22px); background: rgba(71,215,255,.52); box-shadow: 0 0 18px rgba(71,215,255,.3); } }
#web3-loading-screen[data-style="web3-grid"] .web3-loader-core { transform: translateY(-12px); }

/* 03 / Connected chain */
#web3-loading-screen[data-style="web3-chain"] .web3-loader-chain { position: absolute; display: flex; gap: 3px; transform: rotate(-18deg); }
.web3-loader-chain i { width: 52px; height: 28px; margin-left: -14px; border: 5px solid #1d405d; border-radius: 18px; animation: web3-chain 1.45s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); }
.web3-loader-chain i:nth-child(even) { transform: rotate(90deg); }
@keyframes web3-chain { 0%,100% { border-color: #1d405d; box-shadow: none; } 50% { border-color: var(--loader-accent); box-shadow: inset 0 0 8px rgba(71,215,255,.45), 0 0 12px rgba(71,215,255,.25); } }
#web3-loading-screen[data-style="web3-chain"] .web3-loader-core { transform: translateY(-78px); }

/* 04 / Hex consensus */
#web3-loading-screen[data-style="web3-hex"] .web3-loader-hex { position: absolute; display: grid; grid-template-columns: repeat(3, 58px); gap: 5px; transform: rotate(30deg); }
.web3-loader-hex i { width: 58px; height: 50px; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: #18334b; box-shadow: inset 0 0 0 2px #2b5b78; animation: web3-hex 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 100ms); }
.web3-loader-hex i:nth-child(4), .web3-loader-hex i:nth-child(6) { transform: translateX(31px); }
@keyframes web3-hex { 0%,100% { opacity: .35; background: #18334b; } 48% { opacity: 1; background: var(--loader-secondary); } }
#web3-loading-screen[data-style="web3-hex"] .web3-loader-core { transform: translateY(5px); mix-blend-mode: screen; }

/* 05 / Blocks */
#web3-loading-screen[data-style="web3-blocks"] .web3-loader-blocks { position: absolute; display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; transform: rotateX(58deg) rotateZ(45deg); }
.web3-loader-blocks i { width: 44px; height: 44px; border: 1px solid rgba(88,185,237,.34); background: #15314b; box-shadow: 8px 8px 0 #0b2034; animation: web3-block 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * 85ms); }
.web3-loader-blocks i:nth-child(2n) { border-color: rgba(133,240,189,.36); }
@keyframes web3-block { 0%,100% { transform: translateZ(0); } 45% { transform: translate(-8px,-8px); background: #25688d; box-shadow: 16px 16px 0 #0b2034; } }
#web3-loading-screen[data-style="web3-blocks"] .web3-loader-core { transform: translateY(-70px); }

/* 06 / Segmented ring */
#web3-loading-screen[data-style="web3-ring"] .web3-loader-ring { position: absolute; display: block; width: 222px; height: 222px; border-radius: 50%; background: conic-gradient(from 20deg, var(--loader-accent), transparent 18%, var(--loader-secondary) 34%, transparent 50%, var(--loader-warm) 67%, transparent 82%, var(--loader-accent)); mask: radial-gradient(transparent 61%, #000 62%); animation: web3-orbit 2.2s linear infinite; }
#web3-loading-screen[data-style="web3-ring"] .web3-loader-ring::after { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(142,190,229,.38); border-radius: 50%; }

/* 07 / Data wave */
#web3-loading-screen[data-style="web3-wave"] .web3-loader-wave { position: absolute; display: flex; align-items: center; gap: 5px; height: 130px; }
.web3-loader-wave i { width: 6px; height: 25%; border-radius: 2px; background: var(--loader-accent); box-shadow: 0 0 10px rgba(71,215,255,.35); animation: web3-wave 1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -70ms); }
.web3-loader-wave i:nth-child(3n) { background: var(--loader-secondary); }
.web3-loader-wave i:nth-child(4n) { background: var(--loader-warm); }
@keyframes web3-wave { to { height: 92%; transform: scaleY(.78); } }
#web3-loading-screen[data-style="web3-wave"] .web3-loader-core { transform: translateY(-92px); }

/* 08 / Minimal protocol */
#web3-loading-screen[data-style="web3-minimal"] { background: #f7f9fc; color: #17263c; }
#web3-loading-screen[data-style="web3-minimal"]::before { background-image: linear-gradient(#e9edf3 1px, transparent 1px), linear-gradient(90deg,#e9edf3 1px,transparent 1px); mask-image: none; }
#web3-loading-screen[data-style="web3-minimal"] .web3-loader-brand { color: #17263c; text-shadow: none; }
#web3-loading-screen[data-style="web3-minimal"] .web3-loader-brand b { color: #1769e0; }
#web3-loading-screen[data-style="web3-minimal"] .web3-loader-core small { color: #78879a; }
#web3-loading-screen[data-style="web3-minimal"] .web3-loader-progress { width: min(260px, 62vw); height: 3px; background: #dfe5ed; }
#web3-loading-screen[data-style="web3-minimal"] .web3-loader-progress i { width: 28%; background: #1769e0; box-shadow: none; }
#web3-loading-screen[data-style="web3-minimal"] .web3-loader-status { color: #8491a1; }

@media (max-width: 520px) {
  .web3-loader-stage { width: 92vw; height: 390px; }
  #web3-loading-screen[data-style="web3-orbit"] .web3-loader-orbit { width: 230px; height: 230px; }
  #web3-loading-screen[data-style="web3-orbit"] .web3-loader-orbit.orbit-b { width: 172px; height: 172px; }
  #web3-loading-screen[data-style="web3-orbit"] .web3-loader-orbit.orbit-c { width: 112px; height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  #web3-loading-screen *, #web3-loading-screen *::before, #web3-loading-screen *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .web3-loader-progress i { width: 100%; }
}