/* ApexX design language, shared by the landing page and the docs.
   Idea: La Ronda is a daily draw, so the system borrows from draw tickets and the drawing wheel:
   notched ticket cards, perforated tear lines, serial numbers, ink stamps, lamp-dot (dot-matrix) numerals.
   Type: Unbounded (wide, round display), Inter Tight (text), JetBrains Mono (numbers, serials, code). */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap");

:root {
  /* night: the default */
  --ax-bg: #070a14;
  --ax-bg-2: #0b1020;
  --ax-panel: #10172c;
  --ax-panel-2: #151e38;
  --ax-ink: #eef1ff;
  --ax-ink-2: #c5cbe6;
  --ax-muted: #8a93b8;
  --ax-rule: rgb(150 170 255 / .14);
  --ax-rule-2: rgb(150 170 255 / .26);

  /* brand, from the logo: blue leg, amber arrow, red leg, green bar */
  --ax-blue: #2f6bff;
  --ax-blue-soft: #9fb8ff;
  --ax-amber: #ffb020;
  --ax-lamp: #ffd27a;
  --ax-red: #ff4d3d;
  --ax-green: #19c37d;

  --ax-f-display: "Unbounded", "Inter Tight", system-ui, sans-serif;
  --ax-f-text: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ax-f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --ax-r-sm: 6px;
  --ax-r-md: 12px;
  --ax-r-lg: 18px;
  --ax-notch: 11px;
  --ax-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- ticket: a card with two punched notches and an optional tear line ---------- */
.ax-ticket {
  position: relative;
  background: var(--ax-panel);
  border: 1px solid var(--ax-rule-2);
  border-radius: var(--ax-r-lg);
  --ny: 50%;
  -webkit-mask:
    radial-gradient(circle at 0 var(--ny), #0000 var(--ax-notch), #000 calc(var(--ax-notch) + .5px)) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% var(--ny), #0000 var(--ax-notch), #000 calc(var(--ax-notch) + .5px)) 100% 0 / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 var(--ny), #0000 var(--ax-notch), #000 calc(var(--ax-notch) + .5px)) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% var(--ny), #0000 var(--ax-notch), #000 calc(var(--ax-notch) + .5px)) 100% 0 / 51% 100% no-repeat;
}
/* perforated tear line: a row of punched dots */
.ax-perf {
  height: 4px;
  margin: 0 calc(var(--ax-notch) + 4px);
  background: radial-gradient(circle, var(--ax-rule-2) 1.3px, #0000 1.7px) 0 50% / 9px 4px repeat-x;
}

/* ---------- small type roles ---------- */
.ax-serial {
  font: 600 11px/1.2 var(--ax-f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-muted);
}
.ax-eyebrow {
  font: 600 12px/1.2 var(--ax-f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-amber);
}
.ax-mono { font-family: var(--ax-f-mono); font-variant-numeric: tabular-nums; }

/* ---------- stamp: an ink stamp, slightly turned ---------- */
.ax-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 3px;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  font: 700 10.5px/1.1 var(--ax-f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-amber);
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 2px #0000, inset 0 0 0 3px color-mix(in srgb, currentColor 30%, #0000);
}
.ax-stamp--blue { color: var(--ax-blue-soft); }
.ax-stamp--green { color: var(--ax-green); }
.ax-stamp--red { color: var(--ax-red); }

/* ---------- lamp-dot numerals: filled by JS (axLamp), one svg per string ---------- */
.ax-lamp svg { display: block; height: 100%; width: auto; overflow: visible; }
.ax-lamp .on { fill: var(--ax-lamp); filter: drop-shadow(0 0 3px rgb(255 190 80 / .75)); }
.ax-lamp .off { fill: rgb(255 210 122 / .08); }
/* marquee chase: a bright wave runs left to right across the lit lamps */
@media (prefers-reduced-motion: no-preference) {
  .ax-lamp.ax-chase .on { animation: ax-chase 2.6s linear infinite; animation-delay: calc(var(--c) * 55ms); }
}
@keyframes ax-chase {
  0%, 100% { fill: var(--ax-lamp); opacity: .78; }
  8% { fill: #fff6dc; opacity: 1; }
  20% { fill: var(--ax-lamp); opacity: .78; }
}