.tv4 {
  --tv4-ink: #173b48;
  --tv4-muted: #4d6873;
  --tv4-border: #bed1d6;
  margin: 1.1rem 0 0;
  padding: clamp(.78rem, 2vw, 1.18rem);
  min-width: 0;
  border: 1px solid #adccd1;
  border-radius: 16px;
  background: linear-gradient(150deg, #f8fcfb, #eef6f4);
  color: var(--tv4-ink);
  box-shadow: 0 5px 15px rgb(20 64 70 / .07);
}
.tv4 *, .tv4 *::before, .tv4 *::after { box-sizing: border-box; }
.tv4 figcaption { margin: 0 0 .72rem; }
.tv4 h4 { margin: 0 0 .32rem; color: #153e48; font-size: clamp(1.04rem, 2.3vw, 1.2rem); }
.tv4 .tv4-line { margin: .3rem 0; line-height: 1.46; font-size: .84rem; overflow-wrap: anywhere; }
.tv4 p.tv4-line { color: var(--tv4-ink); }
.tv4 .tv4-job { color: #1b4650; font-weight: 700; }
.tv4 p.tv4-boundary { color: var(--tv4-muted); font-size: .86rem; }
.tv4-controls { display: flex; flex-wrap: wrap; gap: .42rem; margin: .72rem 0 .85rem; }
.tv4-choice { border: 1px solid #9cb8c0; border-radius: 999px; background: #fff; color: #183d49; padding: .43rem .65rem; font: inherit; font-size: .8rem; line-height: 1.25; font-weight: 700; cursor: pointer; white-space: normal; text-align: center; }
.tv4-choice:hover { border-color: #236f78; background: #f0f8f8; }
.tv4-choice[aria-pressed="true"] { background: #155764; color: #fff; border-color: #155764; }
.tv4-choice:focus-visible, .tv4-details summary:focus-visible { outline: 3px solid #c88020; outline-offset: 2px; }
.tv4-board { display: grid; gap: .7rem; min-width: 0; }
.tv4-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .56rem; min-width: 0; }
.tv4-tile, .tv4-trace, .tv4-rail, .tv4-intervals, .tv4-concept, .tv4-same-lead, .tv4-line.tv4-attention { border: 1px solid var(--tv4-border); border-radius: 10px; background: #fff; min-width: 0; padding: .55rem .62rem; overflow-wrap: anywhere; }
.tv4-tile { display: grid; align-content: start; gap: .22rem; }
.tv4-tile strong { font-size: .84rem; line-height: 1.38; font-weight: 670; }
.tv4-label { display: block; color: #41636c; font-size: .75rem; font-weight: 780; letter-spacing: .025em; text-transform: uppercase; }
.tv4-tile.attention, .tv4-line.tv4-attention { border-color: #d29b5b; background: #fff7e9; }
.tv4-tile.selected { border-color: #368390; background: #e8f5f4; }
.tv4-trace-label, .tv4-rail-title { display: block; margin: 0 0 .35rem; color: #3d5f6a; font-size: .78rem; line-height: 1.32; font-weight: 760; }
.tv4-trace svg { display: block; width: 100%; height: 5.25rem; border-radius: 6px; background: #f6faf9; }
.tv4-grid { fill: none; stroke: #dce9e6; stroke-width: 1; }
.tv4-wave { fill: none; stroke: #1a6d7c; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tv4-intervals.selected { border-color: #52979e; background: #f4fbfa; }
.tv4-interval-bars { display: grid; gap: .28rem; }
.tv4-interval-bar { display: block; width: max(4.3rem, var(--length)); max-width: 100%; padding: .17rem .35rem; border-radius: 4px; background: #d6e9e8; color: #184350; font-size: .75rem; line-height: 1.2; font-weight: 720; white-space: nowrap; }
.tv4-intervals.selected .tv4-interval-bar { background: #8ec9c9; }
.tv4-rail-track { position: relative; height: 2.25rem; border: 1px solid #b6cbd1; border-radius: 6px; background: repeating-linear-gradient(90deg, #f7fbfa 0, #f7fbfa calc(16.66% - 1px), #d9e5e6 16.66%, #f7fbfa calc(16.66% + 1px)); }
.tv4-mark { position: absolute; top: .39rem; width: .92rem; height: .92rem; border-radius: 50%; transform: translateX(-50%); border: 2px solid #fff; background: #477581; box-shadow: 0 0 0 1px #416774; }
.tv4-mark.expected { background: #d5964f; box-shadow: 0 0 0 1px #a96b2c; }
.tv4-mark.observed, .tv4-mark.paced { background: #1a7584; box-shadow: 0 0 0 1px #125c69; }
.tv4-mark.early-wide, .tv4-mark.native { background: #cb7a42; box-shadow: 0 0 0 1px #aa5830; }
.tv4-mark.expected, .tv4-mark.paced { border-radius: 3px; }
.tv4-mark.early-wide { border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.tv4-rail-foot { display: block; margin-top: .32rem; color: #496773; font-size: .76rem; line-height: 1.35; }
.tv4-event-timeline, .tv4-prerequisites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; margin: 0; padding: 0; list-style: none; }
.tv4-event-timeline li, .tv4-prerequisites li { display: grid; align-content: start; gap: .15rem; min-width: 0; padding: .48rem; border: 1px solid #bdd0d5; border-radius: 8px; background: #fff; overflow-wrap: anywhere; font-size: .76rem; line-height: 1.35; }
.tv4-event-timeline li strong, .tv4-prerequisites li strong { font-size: .78rem; }
.tv4-event-timeline li.current, .tv4-prerequisites li.ready { border-color: #48929a; background: #e9f6f4; }
.tv4-event-timeline li.future { color: #667c83; background: #f7f9f9; }
.tv4-prerequisites { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tv4-prerequisites li.check { border-color: #d6a469; background: #fff8eb; }
.tv4-junction-sequence, .tv4-pacing-snapshots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; }
.tv4-pacing-snapshots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv4-concept .tv4-controls, .tv4-same-lead .tv4-controls { margin: .35rem 0 .58rem; }
.tv4-pqrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; width: min(100%, 24rem); min-height: 3.3rem; margin: .3rem auto; border: 1px solid #c3d3d8; border-radius: 7px; background: #f8fbfa; text-align: center; }
.tv4-p-wave { grid-column: 1; grid-row: 1; width: max-content; min-width: 2.2rem; margin: auto; border-bottom: 3px solid #c77e42; color: #8a4b25; font-size: .9rem; font-weight: 800; }
.tv4-qrs { grid-column: 2; grid-row: 1; padding: .46rem .22rem; border-left: 3px solid #286f7d; border-right: 3px solid #286f7d; color: #215766; font-size: .84rem; font-weight: 800; }
.tv4-pqrs[data-position="within"] .tv4-p-wave { grid-column: 2; opacity: .5; z-index: 1; }
.tv4-pqrs[data-position="after"] .tv4-p-wave { grid-column: 3; }
.tv4-same-lead { display: grid; gap: .4rem; }
.tv4-same-lead .tv4-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv4-details { margin-top: .75rem; padding-top: .55rem; border-top: 1px dashed #adc8cd; }
.tv4-details summary { width: fit-content; color: #225a69; font-weight: 730; font-size: .82rem; cursor: pointer; }
.tv4-equivalent { color: #496773; font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 690px) {
  .tv4-row, .tv4-same-lead .tv4-row { grid-template-columns: 1fr; }
  .tv4-event-timeline, .tv4-prerequisites, .tv4-junction-sequence, .tv4-pacing-snapshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .tv4 { padding: .68rem; border-radius: 13px; }
  .tv4-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv4-choice { padding: .42rem .36rem; }
  .tv4-event-timeline, .tv4-prerequisites, .tv4-junction-sequence, .tv4-pacing-snapshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv4-trace svg { height: 4.9rem; }
}