.purpleDot, .purple { background: #7b61ff; }
.blueDot, .blue { background: #4385f5; }
.trafficChart { position: relative; height: 300px; }
.trafficChart svg { width: 100%; height: 100%; overflow: visible; }
.trafficChart .grid line { stroke: #e9e9ec; stroke-width: 1; vector-effect: non-scaling-stroke; }
.trafficChart .line { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.trafficChart .line.clicks, .trafficChart .dot.clicks { stroke: #4385f5; }
.trafficChart .line.impressions, .trafficChart .dot.impressions { stroke: #7b61ff; }
.trafficChart .dot { fill: white; stroke-width: 2; vector-effect: non-scaling-stroke; }
.trafficChart .dates text, .trafficChart .axis { fill: #777b80; font-size: 11px; }
.trafficChart .hit { fill: transparent; cursor: crosshair; }
.trafficChart .cursor { stroke: #9b9da1; stroke-width: 1; stroke-dasharray: 4 4; opacity: 0; vector-effect: non-scaling-stroke; }
.lineTip { display: none; position: absolute; top: 38px; transform: translateX(-50%); z-index: 5; min-width: 190px; gap: 9px; padding: 13px 15px; color: white; background: #202124; border-radius: 4px; box-shadow: 0 6px 24px #0003; font-size: 12px; pointer-events: none; }
.lineTip span { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; }
.lineTip i { width: 8px; height: 8px; border-radius: 50%; }
.lineTip strong { font-size: 13px; }
.lineTip small { color: #aeb1b7; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.lineTip hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid #44474c; }
.lineTip .siteBlue { background: #8ab4f8; }
.lineTip .sitePurple { background: #b6a7ff; }
.lineTip .share { color: #c8cbd0; font-size: 11px; }
.lineTip .share strong { color: #fff; }
.metrics { grid-template-columns: repeat(3, 1fr); }
.article { grid-template-columns: minmax(280px, 2fr) repeat(3, 1fr) 38px; }

@media (max-width: 800px) {
  .metrics { grid-template-columns: 1fr; }
}