@font-face {
  font-family: "Gio Dasein Sans";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("data:font/woff2;base64,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") format("woff2");
}

:root {
  color-scheme: dark;

  --brand-mint: #9bfcb5;
  --brand-blue: #4daaf8;
  --brand-teal: #00f5d4;

  --color-bg: #050b14;
  --color-surface: #0a121e;
  --color-fg: rgba(255, 255, 255, 0.92);
  --color-muted: rgba(255, 255, 255, 0.6);
  --color-faint: rgba(255, 255, 255, 0.38);
  --color-accent: var(--brand-mint);
  --color-glow: var(--brand-mint);
  --color-electric-text: #7cc4fb;
  --color-sun: #ffc048;
  --color-rule: rgba(155, 252, 181, 0.14);
  --color-rule-soft: rgba(255, 255, 255, 0.07);

  --series-dc: #4fd486;
  --series-ac: #3a93e8;

  --map-land: rgba(255, 255, 255, 0.06);
  --map-line: rgba(155, 252, 181, 0.16);
  --station-idle: rgba(255, 255, 255, 0.34);
  --station-idle-ring: #050b14;
  --station-busy: var(--brand-mint);
  --station-busy-ring: #050b14;
  --station-busy-glow: rgba(155, 252, 181, 0.9);
  --station-busy-filter: drop-shadow(0 0 4px rgba(155, 252, 181, 0.9));
  --sun-ring: #050b14;
  --sun-comet: #ffc048;
  --sun-label-halo: rgba(5, 11, 20, 0.85);
  --legend-ground: transparent;

  --color-live: var(--brand-mint);
  --title-accent: var(--brand-mint);
  --hero-shadow: 0 0 3rem rgba(155, 252, 181, 0.28);
  --total-shadow: 0 0 2.5rem rgba(155, 252, 181, 0.22);
  --logo-glow: drop-shadow(0 0 1.2rem rgba(155, 252, 181, 0.25));
  --bar-glow: 0 0 1.25rem rgba(79, 212, 134, 0.45);
  --bg-glow-a: rgba(77, 170, 248, 0.07);
  --bg-glow-b: rgba(155, 252, 181, 0.06);
  --sun-track: rgba(255, 192, 72, 0.18);
  --sun-soft: rgba(255, 192, 72, 0.14);
  --sun-line: rgba(255, 192, 72, 0.4);
  --sun-label: rgba(255, 192, 72, 0.9);
  --tip-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.45);

  --icon-sun: block;
  --icon-moon: none;

  --ease: cubic-bezier(0.56, 0, 0.265, 1);
  --ease-second: cubic-bezier(0.77, 0.2, 0.05, 1);

  --gutter: 3rem;
  --side: 27rem;

  font-size: min(calc(100vw / 120), calc(100vh / 67.5));
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f4f7f6;
  --color-surface: #ffffff;
  --color-fg: #050b14;
  --color-muted: rgba(5, 11, 20, 0.62);
  --color-faint: rgba(5, 11, 20, 0.5);
  --color-accent: #050b14;
  --color-electric-text: #1c5f9e;
  --color-sun: #f5a524;
  --color-rule: rgba(5, 11, 20, 0.1);
  --color-rule-soft: rgba(5, 11, 20, 0.07);

  --series-dc: #16a35f;
  --series-ac: #2f86d8;

  --map-land: #dce1e0;
  --map-line: #c6c6c6;
  --legend-ground: transparent;
  --station-idle: rgba(5, 11, 20, 0.32);
  --station-idle-ring: #dce1e0;
  --station-busy: #12b76a;
  --station-busy-ring: #dce1e0;
  --station-busy-glow: rgba(18, 183, 106, 0.55);
  --station-busy-filter: drop-shadow(0 0 4px rgba(18, 183, 106, 0.55));
  --sun-ring: #dce1e0;
  --sun-comet: #f5a524;
  --sun-label-halo: #dce1e0;

  --color-live: #12b76a;
  --title-accent: #1c5f9e;
  --hero-shadow: none;
  --total-shadow: none;
  --logo-glow: none;
  --bar-glow: none;
  --bg-glow-a: rgba(47, 134, 216, 0.07);
  --bg-glow-b: rgba(18, 183, 106, 0.07);
  --sun-track: rgba(245, 165, 36, 0.5);
  --sun-soft: rgba(245, 165, 36, 0.18);
  --sun-line: rgba(245, 165, 36, 0.6);
  --sun-label: #8a4b00;
  --tip-shadow: 0 0.6rem 2rem rgba(5, 11, 20, 0.12);

  --icon-sun: none;
  --icon-moon: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  overflow: hidden;

  background-color: var(--color-bg);
  background-image:
    radial-gradient(60rem 40rem at 50% 42%, var(--bg-glow-a), transparent 70%),
    radial-gradient(40rem 30rem at 8% 0%, var(--bg-glow-b), transparent 70%);
  color: var(--color-fg);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;

  transition:
    background-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

h1,
h2,
p,
ol,
ul {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

b {
  font-weight: inherit;
}

.board {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
  grid-template-rows: auto minmax(0, 1fr) 16rem;
  grid-template-areas:
    "top top top"
    "now map total"
    "today today today";
  gap: 1.75rem var(--gutter);

  width: 100vw;
  height: 100vh;
  padding: 1.75rem var(--gutter) 2.5rem;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  margin-bottom: 1.1rem;

  color: var(--color-electric-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";

  width: 2.1rem;
  height: 1px;
  background-color: currentColor;
}

.swatch {
  display: inline-block;
  flex: 0 0 auto;

  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.2rem;
}

.swatch-dc {
  background-color: var(--series-dc);
}

.swatch-ac {
  background-color: var(--series-ac);
}

.top {
  grid-area: top;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  position: relative;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-rule);
}

.top::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -1px;

  width: 9rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-live), transparent);

  animation: top-spark 7s linear infinite;
}

@keyframes top-spark {
  from {
    transform: translateX(-9rem);
  }
  to {
    transform: translateX(calc(100vw - 2 * var(--gutter)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .top::after {
    animation: none;
    opacity: 0;
  }
}

.top-brand {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  min-width: 0;
}

.top-logo {
  flex: 0 0 auto;

  width: 9.5rem;
  height: auto;
  fill: var(--color-accent);
  filter: var(--logo-glow);
}

.top-heading {
  padding-left: 2.25rem;
  border-left: 1px solid var(--color-rule);
}

.top-kicker {
  margin-bottom: 0.35rem;

  color: var(--color-electric-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.top-title {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.top-title-accent {
  color: var(--title-accent);
}

.top-meta {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.top-live {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  padding: 0.55rem 1.1rem 0.55rem 0.9rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;

  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.top-live-dot {
  position: relative;

  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background-color: var(--color-live);
}

.top-live-dot::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 50%;
  background-color: var(--color-live);

  animation: live-ping 1.8s var(--ease) infinite;
}

@keyframes live-ping {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-live-dot::after {
    animation: none;
    opacity: 0;
  }
}

.top-theme {
  display: grid;
  place-items: center;

  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  background-color: transparent;

  color: var(--color-fg);
  cursor: pointer;

  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.top-theme:hover {
  border-color: var(--color-electric-text);
  background-color: var(--color-rule-soft);
}

.top-theme:focus-visible {
  outline: 2px solid var(--color-electric-text);
  outline-offset: 3px;
}

.top-theme svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-theme-sun {
  display: var(--icon-sun);
}

.top-theme-moon {
  display: var(--icon-moon);
}

.top-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.top-clock-time {
  font-family: "Gio Dasein Sans", "Plus Jakarta Sans", sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.top-clock-date {
  margin-top: 0.4rem;

  color: var(--color-muted);
  font-size: 0.95rem;
}

.now {
  grid-area: now;

  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hero {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-rule);
}

.hero-value {
  color: var(--color-accent);
  font-family: "Gio Dasein Sans", "Plus Jakarta Sans", sans-serif;
  font-size: 8rem;
  line-height: 0.85;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--hero-shadow);
}

.hero-label {
  margin-top: 0.8rem;

  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
}

.hero-split {
  display: flex;
  gap: 1.75rem;

  margin-top: 0.6rem;

  color: var(--color-muted);
  font-size: 1.05rem;
  font-weight: 500;
}

.hero-split b {
  margin-left: 0.25rem;

  color: var(--color-fg);
  font-weight: 700;
}

.hero-split-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.facts {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: space-between;
}

.facts-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;

  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-rule-soft);
}

.facts-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.facts-row-sockets {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}

.facts-label {
  display: flex;
  flex-direction: column;

  color: var(--color-muted);
  font-size: 1.05rem;
  font-weight: 500;
}

.facts-label small {
  margin-top: 0.15rem;

  color: var(--color-faint);
  font-size: 0.8rem;
  font-weight: 500;
}

.facts-value {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;

  white-space: nowrap;
}

.facts-value b {
  font-family: "Gio Dasein Sans", "Plus Jakarta Sans", sans-serif;
  font-size: 2.3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.facts-value small {
  color: var(--color-muted);
  font-size: 1rem;
  font-weight: 600;
}

.meter {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.meter-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: 0.8rem;

  font-size: 0.9rem;
  font-weight: 600;
}

.meter-name {
  color: var(--color-muted);
}

.meter-track {
  overflow: hidden;

  height: 0.55rem;
  border-radius: 999px;
  background-color: var(--color-rule-soft);
}

.meter-fill {
  display: block;

  width: 0%;
  height: 100%;
  border-radius: 999px;

  transition: width 1.2s var(--ease-second);
}

.meter-fill-dc {
  background-color: var(--series-dc);
}

.meter-fill-ac {
  background-color: var(--series-ac);
}

.meter-text {
  color: var(--color-fg);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.map {
  grid-area: map;

  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}

.map-stage {
  position: relative;

  flex: 1 1 auto;
  min-height: 0;
}

.map-svg {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
  overflow: visible;
}

.map-land {
  fill: var(--map-land);
  stroke: var(--map-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.map-land path {
  vector-effect: non-scaling-stroke;
}

.map-flow-line {
  fill: none;
  stroke: var(--sun-track);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}

.map-flow-comet {
  fill: none;
  stroke: var(--sun-comet);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0.07 1;

  animation: flow-comet var(--flow-duration, 3s) linear var(--flow-delay, 0s) infinite;
}

@keyframes flow-comet {
  from {
    stroke-dashoffset: 1.07;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-flow-comet {
    animation: none;
    opacity: 0;
  }
}

.map-site-halo {
  fill: var(--sun-soft);
  stroke: var(--sun-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;

  transform-box: fill-box;
  transform-origin: center;
  animation: site-breathe 4s var(--ease) infinite;
}

@keyframes site-breathe {
  50% {
    transform: scale(1.35);
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-site-halo {
    animation: none;
  }
}

.map-site-core {
  fill: var(--color-sun);
  stroke: var(--sun-ring);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.map-site-label {
  fill: var(--sun-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  stroke: var(--sun-label-halo);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.map-station {
  fill: var(--station-idle);
  stroke: var(--station-idle-ring);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;

  transition:
    fill 0.6s var(--ease),
    stroke 0.6s var(--ease);
}

.map-station.busy {
  fill: var(--station-busy);
  stroke: var(--station-busy-ring);
  filter: var(--station-busy-filter);
}

.map-ping {
  fill: none;
  stroke: var(--station-busy);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;

  transform-box: fill-box;
  transform-origin: center;
  animation: map-ping 1.8s var(--ease) forwards;
}

.map-ping.stop {
  stroke: var(--color-muted);
}

@keyframes map-ping {
  from {
    transform: scale(0.4);
    opacity: 1;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-ping {
    display: none;
  }
}

.map-legend {
  position: absolute;
  right: 0;
  bottom: 0;

  display: flex;
  gap: 1.75rem;

  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.map-legend li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.map-legend-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: var(--station-idle);
  box-shadow:
    inset 0 0 0 1.5px var(--station-idle-ring),
    0 0 0 0.25rem var(--legend-ground);
}

.map-legend-dot-busy {
  background-color: var(--station-busy);
  box-shadow:
    inset 0 0 0 1.5px var(--station-busy-ring),
    0 0 0 0.25rem var(--legend-ground),
    0 0 0.6rem 0.25rem var(--station-busy-glow);
}

.map-legend-dot-sun {
  background-color: var(--color-sun);
  box-shadow:
    inset 0 0 0 1.5px var(--sun-ring),
    0 0 0 0.25rem var(--legend-ground);
}

.feed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;

  padding-top: 1.25rem;
  border-top: 1px solid var(--color-rule);
}

.feed-title {
  color: var(--color-electric-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.feed-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  overflow: hidden;
}

.feed-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;

  padding-left: 1rem;
  border-left: 2px solid var(--color-rule);

  animation: feed-in 0.8s var(--ease-second) backwards;
}

.feed-item.start {
  border-left-color: var(--color-live);
}

@keyframes feed-in {
  from {
    transform: translateY(0.75rem);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feed-item {
    animation: none;
  }
}

.feed-head {
  display: flex;
  gap: 0.6rem;

  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.feed-head b {
  color: var(--color-fg);
}

.feed-place {
  overflow: hidden;

  font-size: 1.05rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-detail {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.total {
  grid-area: total;

  display: flex;
  flex-direction: column;
  min-height: 0;
}

.totals {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: space-between;
}

.totals-row {
  display: flex;
  flex-direction: column;

  padding: 0.6rem 0 0.7rem;
  border-bottom: 1px solid var(--color-rule-soft);
}

.totals-row:first-child {
  padding-top: 0;
}

.totals-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.totals-label {
  color: var(--color-muted);
  font-size: 1rem;
  font-weight: 500;
}

.totals-value {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;

  margin-top: 0.2rem;

  white-space: nowrap;
}

.totals-value b {
  font-family: "Gio Dasein Sans", "Plus Jakarta Sans", sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.totals-value small {
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 700;
}

.totals-row:first-child .totals-value b {
  color: var(--color-accent);
  font-size: 3.6rem;
  text-shadow: var(--total-shadow);
}

.totals-note {
  margin-top: 0.25rem;

  color: var(--color-faint);
  font-size: 0.85rem;
}

.totals-note b {
  color: var(--color-muted);
  font-weight: 700;
}

.today {
  grid-area: today;

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side) var(--side);
  gap: var(--gutter);
  min-height: 0;

  padding: 1.75rem var(--gutter) 1.5rem;
  margin: 0 calc(-1 * var(--gutter)) -2.5rem;
  border-top: 1px solid var(--color-rule);
  background-color: var(--color-surface);
}

.today-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.today-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;

  margin-bottom: 1rem;
}

.today-title,
.rank-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.today-sum {
  color: var(--color-muted);
  font-size: 1rem;
}

.today-sum b {
  color: var(--color-fg);
  font-weight: 700;
}

.today-legend {
  display: flex;
  gap: 1.25rem;

  margin-left: auto;

  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.today-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.chart {
  position: relative;

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.chart-plot {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: end;
  gap: 0.4rem;

  flex: 1 1 auto;
  min-height: 0;

  border-bottom: 1px solid var(--color-rule);
}

.chart-col {
  position: relative;

  display: flex;
  flex-direction: column-reverse;
  gap: 2px;

  height: 100%;
}

.chart-col.future {
  opacity: 0.35;
}

.chart-col-hit {
  position: absolute;
  inset: 0 -0.2rem;
}

.chart-bar {
  flex: 0 0 auto;

  transition: height 1s var(--ease-second);
}

.chart-bar-ac {
  border-radius: 0 0 0 0;
  background-color: var(--series-ac);
}

.chart-bar-dc {
  border-radius: 0.25rem 0.25rem 0 0;
  background-color: var(--series-dc);
}

.chart-col.current .chart-bar-dc {
  box-shadow: var(--bar-glow);
}

.chart-col.current::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -0.55rem;

  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--color-live);
  transform: translateX(-50%);
}

.chart-col-label {
  position: absolute;
  left: 50%;

  color: var(--color-fg);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  padding-bottom: 0.35rem;
}

.chart-axis {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 0.4rem;

  padding-top: 0.7rem;

  color: var(--color-faint);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.chart-axis .current {
  color: var(--color-accent);
  font-weight: 700;
}

.chart-tip {
  position: absolute;
  z-index: 2;

  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-rule);
  border-radius: 0.6rem;
  background-color: var(--color-bg);
  box-shadow: var(--tip-shadow);

  font-size: 0.85rem;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 0.6rem));
}

.chart-tip strong {
  display: block;
  margin-bottom: 0.25rem;
}

.chart-tip span {
  display: flex;
  align-items: center;
  gap: 0.45rem;

  color: var(--color-muted);
}

.chart-tip b {
  margin-left: auto;
  padding-left: 1rem;

  color: var(--color-fg);
}

.rank {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.rank-title {
  margin-bottom: 0.75rem;
}

.rank-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: space-between;
}

.rank-item {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 0.6rem;
}

.rank-index {
  grid-row: 1 / 3;

  color: var(--color-faint);
  font-family: "Gio Dasein Sans", "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
}

.rank-name {
  overflow: hidden;

  font-size: 0.95rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-value {
  color: var(--color-fg);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rank-track {
  grid-column: 2 / 4;

  height: 0.3rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background-color: var(--color-rule-soft);
}

.rank-fill {
  display: block;

  height: 100%;
  border-radius: 999px;
  background-color: var(--color-electric-text);

  transition: width 1s var(--ease-second);
}

@media (max-width: 1024px), (max-aspect-ratio: 5/4) {
  :root {
    --gutter: 1.5rem;
    --side: 1fr;

    font-size: clamp(13px, calc(100vw / 60), 28px);
  }

  body {
    overflow: auto;
  }

  .board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "top top"
      "map map"
      "now total"
      "today today";
    gap: 2rem var(--gutter);

    height: auto;
    min-height: 100vh;
    padding: 1.5rem var(--gutter) 0;
  }

  .top {
    flex-wrap: wrap;
  }

  .top-title {
    white-space: normal;
  }

  .map-stage {
    flex: 0 0 auto;
    aspect-ratio: 1024 / 560;
  }

  .map-legend {
    bottom: -0.5rem;
  }

  .feed-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  .today {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-bottom: 0;
  }

  .today-chart {
    grid-column: 1 / -1;

    height: 18rem;
  }

  .rank-list {
    gap: 0.9rem;
  }
}

@media (max-width: 640px) {
  :root {
    font-size: 14px;
  }

  .board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "map"
      "now"
      "total"
      "today";
    padding: 1.25rem 16px 0;
  }

  .top-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .top-heading {
    padding-left: 0;
    border-left: 0;
  }

  .top-title {
    font-size: 1.6rem;
  }

  .top-meta {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    width: 100%;
  }

  .hero-value {
    font-size: 7rem;
  }

  .map-legend {
    position: static;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
  }

  .map-stage {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
  }

  .map-svg {
    position: static;
    height: auto;
    aspect-ratio: 1024 / 500;
  }

  .feed {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  .today {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.5rem 16px;
    margin: 0 -16px;
  }

  .today-head {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .chart-plot,
  .chart-axis {
    gap: 2px;
  }

  .chart-axis span:nth-child(odd) {
    visibility: hidden;
  }
}