.tl-page { margin-bottom: var(--gap, 14px); }
.tl-page:empty { display: none; }
.tl-h { display: flex; align-items: center; gap: 8px; }
.tl-h .tz-l { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
html body #view .tl-h .tl-when { font-size: var(--fs-1); font-weight: 600; color: var(--muted); }
html body #view .tl-h .tl-when.stale { color: var(--warn, #B7791F); }
.tl-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--faint, #9AA3AF); margin-left: auto; }
.tl-dot.on { background: var(--up); box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); animation: tl-pulse 2s ease-out infinite; }
@keyframes tl-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
.tl-row { align-items: center; }
html body #view .tl-rk { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-3); font-weight: 800; background: var(--neutral-bg, var(--card-2)); color: var(--neutral, var(--muted)); }
html body #view .tl-rk.r1 { background: linear-gradient(160deg, #FFE38A, #E0A100); color: #4A3300; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(0, 0, 0, .5); }
html body #view .tl-rk.r2 { background: linear-gradient(160deg, #F1F4F8, #A7B1BF); color: #2A313B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(0, 0, 0, .5); }
html body #view .tl-rk.r3 { background: linear-gradient(160deg, #F6C9A0, #B8672A); color: #3A1D05; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(0, 0, 0, .5); }
.tl-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
html body #view .tl-nm { font-size: var(--fs-5); font-weight: 800; letter-spacing: -0.03em; color: var(--text); white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
html body #view .tl-s { font-size: var(--fs-1); color: var(--muted); }
.tl-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
html body #view .tl-v { font-size: var(--fs-6); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); border-radius: 8px; padding: 0 4px; }
html body #view .tl-v.up { color: var(--up); }
html body #view .tl-v.down { color: var(--down); }
html body #view .tl-mv { font-size: var(--fs-1); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
html body #view .tl-mv.up { color: var(--up); }
html body #view .tl-mv.down { color: var(--down); }
html body #view .tl-mv.new { color: var(--accent); }
.tl-flash.fu { animation: tl-fu 1.1s ease-out; }
.tl-flash.fd { animation: tl-fd 1.1s ease-out; }
@keyframes tl-fu { 0% { background: color-mix(in srgb, var(--up) 26%, transparent); } 100% { background: transparent; } }
@keyframes tl-fd { 0% { background: color-mix(in srgb, var(--down) 26%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tl-flash.fu, .tl-flash.fd, .tl-dot.on { animation: none; } }
.tl-off { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; }
html body #view .tl-off b { font-size: var(--fs-4); font-weight: 800; color: var(--text); }
html body #view .tl-off span { font-size: var(--fs-2); color: var(--muted); }
.th-close-h { margin-top: 6px; }
@media (max-width: 340px) {
  html body #view .tl-rk { width: 30px; height: 30px; font-size: var(--fs-2); }
  html body #view .tl-nm { font-size: var(--fs-4); }
  html body #view .tl-v { font-size: var(--fs-5); }
}
html body #view .tl-list .tl-row { opacity: 1; }
#sheet a.mk-th-m, #sheet a.mk-th-m .v { color: var(--text); text-decoration: none; }
#sheet a.mk-th-m .v.sv-up { color: var(--up); } #sheet a.mk-th-m .v.sv-down { color: var(--down); }