/* Virexon Core: "Live from the ARK" section. Tokens come from the Virexon theme (Nocturne). */
.vxl{max-width:1240px;margin:0 auto;padding:56px 24px 40px;scroll-margin-top:80px}
.vxl-top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px}
.vxl-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--vx-lime)}
.vxl .vxl-h{font-size:clamp(32px,4vw,48px);font-weight:500;letter-spacing:-.03em;margin:10px 0 8px;color:var(--color-text)}
.vxl-sub{color:var(--color-neutral-400);margin:0;max-width:540px;font-size:16px}
.vxl-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--color-neutral-300);background:var(--color-surface);padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-sm)}
.vxl-dot{width:8px;height:8px;border-radius:50%;background:var(--vx-lime);box-shadow:0 0 10px var(--vx-lime);animation:vxPulse 1.6s infinite}
.vxl-live.is-stale .vxl-dot{background:var(--color-neutral-500);box-shadow:none;animation:none}

.vxl-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--color-neutral-800);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
@media (max-width:860px){.vxl-tiles{grid-template-columns:repeat(2,1fr)}}
.vxl-tile{background:var(--color-surface);padding:22px 22px 18px;position:relative;min-height:128px}
.vxl-num{display:block;font-size:44px;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--color-text)}
.vxl-num small{font-size:22px;color:var(--color-neutral-500);font-weight:500}
.vxl-lbl{display:block;margin-top:10px;color:var(--color-neutral-400);font-size:13px}
.vxl-spark{position:absolute;right:18px;top:24px;width:96px;height:36px}

.vxl-band{margin:20px 0;border-radius:var(--radius-lg);padding:34px clamp(22px,4vw,44px);overflow:hidden;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;align-items:end;
 background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--vx-mag) 30%,transparent),transparent 60%),radial-gradient(70% 120% at 0% 100%,color-mix(in srgb,var(--vx-lime) 14%,transparent),transparent 60%),var(--color-surface)}
.vxl-band .vxl-lbl{font-size:14px;color:var(--color-neutral-300)}
.vxl-grad{background:linear-gradient(90deg,var(--vx-mag-300),var(--vx-lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.vxl-xl{font-size:clamp(46px,7vw,76px)}
.vxl-md{font-size:34px}

.vxl-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:20px}
.vxl-grid.is-single{grid-template-columns:1fr}
.vxl-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px;position:relative}
.vxl .vxl-card h3{margin:0 0 4px;font-size:16px;font-weight:500;color:var(--color-text)}
.vxl-d{margin:0 0 16px;color:var(--color-neutral-400);font-size:13px}
.vxl-d b{font-weight:500;color:var(--color-neutral-300)}
.vxl-map{display:grid;grid-template-columns:10px 1fr 1.2fr 26px;align-items:center;gap:10px;font-size:13.5px;padding:6px 0;color:var(--color-text)}
.vxl-map i{width:7px;height:7px;border-radius:50%;background:var(--vx-lime)}
.vxl-map.is-off i{background:oklch(0.63 0.2 25)}
.vxl-bar{height:8px;border-radius:99px;background:var(--color-neutral-800);overflow:hidden}
.vxl-bar b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--vx-mag),var(--vx-mag-300));transition:width 1s cubic-bezier(.2,.7,.2,1)}
.vxl-map em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.vxl-map.is-zero em,.vxl-map.is-zero span{color:var(--color-neutral-500)}

.vxl-hours svg{width:100%;height:auto;display:block;overflow:visible}
.vxl-hours text{font-family:var(--font-body);fill:var(--color-neutral-500);font-size:10.5px}
.vxl-hours rect.b{fill:color-mix(in srgb,var(--vx-mag) 55%,var(--color-surface));transition:fill .15s}
.vxl-hours rect.b.is-now{fill:var(--vx-lime)}
.vxl-hours rect.hit{fill:transparent}
.vxl-hours g:hover rect.b{fill:var(--vx-mag-300)}
.vxl-tip{position:absolute;pointer-events:none;background:var(--color-bg);border:1px solid var(--color-neutral-800);border-radius:8px;padding:6px 10px;font-size:12px;white-space:nowrap;transform:translate(-50%,-115%);opacity:0;transition:opacity .12s;color:var(--color-text)}
.vxl-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--color-neutral-500)}
.vxl-legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:color-mix(in srgb,var(--vx-mag) 55%,var(--color-surface))}
.vxl-legend span.is-now::before{background:var(--vx-lime)}

.vxl-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:20px}
.vxl-mini{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px 22px;display:flex;gap:14px;align-items:center}
.vxl-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--vx-mag) 16%,transparent);color:var(--vx-mag-300);font-size:22px;flex:none}
.vxl-mini b{display:block;font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--color-text)}
.vxl-mini div>span{font-size:13px;color:var(--color-neutral-400)}

@media (max-width:860px){.vxl-band,.vxl-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .vxl-spark{position:static;display:block;width:100%;height:28px;margin-top:10px}
  .vxl-num{font-size:38px}
  .vxl-hours text{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.vxl-dot{animation:none}.vxl-bar b{transition:none}}
