.tl { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1vh; }
.tl-svg { flex: 1; min-height: 0; width: 100%; display: block; }
.tl-grid { stroke: var(--grid); stroke-width: 2; }
.tl-tick { font-size: 20px; fill: var(--muted); }
.tl-ylabel { font-size: 20px; fill: var(--muted); }
.tl-when { font-size: 30px; font-weight: 700; fill: var(--ink); }
.tl-source { font-size: 20px; fill: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tl-line { fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tl-dot { fill: var(--c); stroke: var(--bg); stroke-width: 3; }
.tl-dot.missing { fill: var(--bg); stroke: var(--ink-2); stroke-width: 3; stroke-dasharray: 4 4; }
.tl-name { font-size: 30px; font-weight: 700; fill: var(--c); }
.tl-near { font-size: 21px; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 6px; }
.tl-near.missing { fill: var(--ink); font-style: italic; }
.tl-word:not(.now) .tl-line { opacity: .6; stroke-width: 4; }
.tl-word:not(.now) .tl-dot { opacity: .7; }
.tl-word:not(.now) .tl-name { font-size: 24px; }