.em-map { width: 100%; height: auto; display: block; }
  .em-map .land { fill: color-mix(in srgb, var(--dk-ink) 7%, var(--dk-surface)); stroke: color-mix(in srgb, var(--dk-ink) 35%, transparent); stroke-width: .25; }
  .em-map .emp { fill: url(#em-hatch); stroke: var(--dk-ink); stroke-width: .35; }
  .em-map .emp-bg { fill: color-mix(in srgb, var(--dk-series) 30%, var(--dk-surface)); stroke: none; }
  .em-hatch-bg { fill: color-mix(in srgb, var(--dk-series) 45%, var(--dk-surface)); }
  .em-hatch-line { stroke: color-mix(in srgb, var(--dk-series) 75%, var(--dk-ink)); stroke-width: .5; }
  .em-pick { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 10px; font-size: 14px; }
  .em-pick select { font: inherit; padding: 6px 8px; min-height: 40px; border: 1.2px solid var(--dk-rule); border-radius: 3px; background: var(--dk-surface); color: var(--dk-text); }
  .em-live { margin: 8px 0 0; font-size: 14.5px; color: var(--dk-text); }
  .tl { width: 100%; height: auto; display: block; }
  .tl .tl-axis { stroke: var(--dk-text-2); stroke-width: 1; }
  .tl .tl-grid { stroke: var(--dk-grid); stroke-width: 1; }
  .tl .tl-tick { font: 11px var(--dk-sans); fill: var(--dk-muted); }
  .tl .tl-name { font: 12px var(--dk-sans); fill: var(--dk-text); }
  .tl .tl-span { fill: color-mix(in srgb, var(--dk-series) 50%, var(--dk-surface)); stroke: color-mix(in srgb, var(--dk-ink) 70%, transparent); stroke-width: .8; }
  .tl .tl-peak { fill: var(--dk-ink); }
  .tl g:focus .tl-span, .tl g:hover .tl-span { stroke: var(--dk-ink); stroke-width: 1.4; }