.trend-roads { display: grid; gap: 12px; }
.road-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.road-switch { min-height: 36px; padding: 8px 20px; border: 0; border-radius: 8px; background: var(--soft); color: var(--muted); font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
.road-switch:hover { background: color-mix(in srgb, var(--soft) 80%, transparent); transform: translateY(-1px); }
.road-switch.active { background: var(--cyan); color: white; box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--cyan) 20%, transparent); }
.road-switch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.road-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--line) 40%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--soft) 20%, transparent); color: var(--muted); font-size: 12px; line-height: 16px; }
.road-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.road-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--road-color); }
.road-dot-forecast { border: 2px dashed var(--muted); background: transparent; }
.road-section h3 { margin: 0 0 6px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 20px; }
.road-frame { padding: 2px; border: 1px solid color-mix(in srgb, var(--line) 40%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--soft) 20%, transparent); }
.road-grid { display: grid; position: relative; grid-template-columns: repeat(var(--road-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--road-rows), 1fr); gap: 0; }
.road-cell { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 2px 0; }
.road-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; }
.road-ball { width: 20px; height: 20px; border-radius: 50%; color: white; background: var(--road-color); font-size: 9px; line-height: 1; }
.road-ball.road-wide { width: 28px; min-width: 0; max-width: calc(100% - 2px); padding: 0 1px; border-radius: 4px; }
.road-text { color: var(--road-color); font-size: 11px; line-height: 16.5px; }
.road-line { width: 20px; height: 20px; }
.road-line svg { width: 100%; height: 100%; overflow: visible; }
.road-line circle { fill: var(--road-color); }
.road-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.road-lines line { stroke: var(--road-color); stroke-width: 1.5px; stroke-opacity: .3; }
.road-ball.road-forecast { border: 1.5px dashed var(--road-color); background: transparent; color: var(--road-color); opacity: .5; }
.road-text.road-forecast { opacity: .4; text-decoration: underline dashed; text-underline-offset: 2px; }
.road-line.road-forecast { opacity: .5; }
.road-line.road-forecast circle { fill: none; stroke: var(--road-color); stroke-width: 1.5; stroke-dasharray: 2.5 1.5; }
.road-red { --road-color: oklch(63.7% .237 25.331); }
.road-blue { --road-color: oklch(62.3% .214 259.815); }
.road-orange { --road-color: oklch(70.5% .213 47.604); }
.road-emerald { --road-color: oklch(69.6% .17 162.48); }
.road-green { --road-color: oklch(72.3% .219 149.579); }
.road-cyan { --road-color: var(--cyan); }
.road-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.road-mobile .road-ball { width: 21.6px; height: 21.6px; font-size: 8px; }
.road-mobile .road-ball.road-wide { width: 29.6px; }
.road-mobile .road-text { font-size: 10px; line-height: 15px; }
.road-mobile .road-line { width: 16px; height: 16px; }
@media (max-width: 639px) {
  .road-switch { padding-inline: 16px; font-size: 12px; line-height: 16px; }
}
@media (max-width: 379px) {
  .road-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .road-switch { padding-inline: 4px; }
}