.head h1 { font-size: 28px; }
.heroes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 16px; }
.hero-card { margin: 0; padding: 20px 22px; }
.hero-card .l { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.hero-card .v { font-size: 44px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; margin-top: 4px; }
.hero-card .d { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }

.streaks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.streak { margin: 0; display: flex; flex-direction: column; }
.streak .k { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.streak .big { font-size: 34px; font-weight: 650; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.streak .big small { font-size: 15px; font-weight: 550; color: var(--ink-2); letter-spacing: 0; }
.streak .s { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.strip { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; margin-top: auto; padding-top: 14px; }
.strip i { display: block; height: 16px; border-radius: 2px; background: var(--grid); }
.strip i.gap { background: repeating-linear-gradient(45deg, var(--grid) 0 2px, transparent 2px 4px); }
.strip-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }

.svgchart { position: relative; height: 240px; }
.svgchart.tall { height: 300px; }
.svgchart svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.svgchart text { font: 11px var(--font); fill: var(--muted); font-variant-numeric: tabular-nums; }
.legend { margin-bottom: 8px; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
#tip { position: fixed; }

@media (max-width: 900px) { .streaks { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .heroes { grid-template-columns: 1fr; gap: 12px; }
  .hero-card .v { font-size: 36px; }
  .streaks { gap: 12px; margin-bottom: 12px; }
  .svgchart { height: 210px; }
  .svgchart.tall { height: 250px; }
}