:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  background: #080b10;
  color: #f4f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; background: #080b10; }
.page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
.hero { padding: 32px 0 20px; }
.eyebrow { color: #7ee787; font-weight: 700; letter-spacing: .14em; }
h1 { font-size: clamp(36px, 8vw, 70px); margin: 8px 0; }
h2 { margin-top: 0; }
.lead, .muted { color: #9aa4b2; }
.notice {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #39414f;
  border-radius: 14px;
  background: #10151d;
}
.panel {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #252d39;
  border-radius: 20px;
  background: #0f141c;
}
.chart-wrap {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 24px;
  align-items: center;
}
canvas { width: 100%; height: auto; }
.legend { display: grid; gap: 10px; }
.legend-row { display: flex; justify-content: space-between; gap: 16px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.card {
  padding: 16px;
  border: 1px solid #2a3340;
  border-radius: 14px;
  background: #121923;
}
.token { color: #7ee787; font-size: 12px; font-weight: 700; }
.stage { color: #9aa4b2; font-size: 13px; }
.progress {
  height: 8px;
  margin-top: 12px;
  border-radius: 99px;
  background: #252d39;
  overflow: hidden;
}
.progress span { display: block; height: 100%; background: #7ee787; }
@media (max-width: 720px) {
  .chart-wrap { grid-template-columns: 1fr; }
}