.tv3 {
  --tv3-ink: #173746;
  --tv3-muted: #506a77;
  --tv3-border: #bdd0d9;
  margin: 1.1rem 0 0;
  padding: clamp(.8rem, 2vw, 1.2rem);
  min-width: 0;
  border: 1px solid #a9cbd4;
  border-radius: 16px;
  background: linear-gradient(150deg, #f8fcfd, #eef7f8);
  color: var(--tv3-ink);
  box-shadow: 0 5px 16px rgb(20 64 76 / .07);
}
.tv3 *, .tv3 *::before, .tv3 *::after { box-sizing: border-box; }
.tv3 figcaption { margin: 0 0 .7rem; }
.tv3 h4 { margin: 0 0 .35rem; color: #14394a; font-size: clamp(1.03rem, 2.4vw, 1.2rem); }
.tv3 h5 { margin: 0 0 .48rem; color: #174459; font-size: .93rem; }
.tv3 p { margin: .3rem 0; line-height: 1.45; }
.tv3 .tv3-job { color: #173746; font-weight: 680; }
.tv3 .tv3-note { color: var(--tv3-muted); font-size: .87rem; overflow-wrap: anywhere; }
.tv3-choices { display: flex; flex-wrap: wrap; gap: .42rem; margin: .75rem 0 .9rem; }
.tv3-choice { border: 1px solid #9fbcc8; border-radius: 999px; background: #fff; color: #173746; padding: .4rem .65rem; font: inherit; font-size: .82rem; font-weight: 680; cursor: pointer; white-space: normal; text-align: center; }
.tv3-choice:hover { border-color: #256378; background: #f1f8fa; }
.tv3-choice[aria-pressed="true"] { background: #17536a; color: #fff; border-color: #17536a; }
.tv3-choice:focus-visible, .tv3-details summary:focus-visible { outline: 3px solid #d1841f; outline-offset: 2px; }
.tv3-board { display: grid; gap: .7rem; min-width: 0; }
.tv3-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: .55rem; min-width: 0; }
.tv3-card, .tv3-panel, .tv3-status { border: 1px solid var(--tv3-border); background: #fff; border-radius: 10px; min-width: 0; padding: .55rem .65rem; overflow-wrap: anywhere; }
.tv3-card { display: grid; align-content: start; gap: .22rem; }
.tv3-card strong { font-size: .84rem; line-height: 1.35; font-weight: 670; }
.tv3-label { display: block; color: #456372; font-size: .75rem; font-weight: 770; letter-spacing: .028em; text-transform: uppercase; }
.tv3-card.good { border-color: #79a98e; background: #f0f8f1; }
.tv3-card.warn, .tv3-status.warn { border-color: #ce9c64; background: #fff8eb; }
.tv3-card.current { border-color: #24889b; background: #e8f7f8; }
.tv3-card.muted { border-style: dashed; background: #f5f8f8; }
.tv3-panel { display: grid; gap: .35rem; }
.tv3-panel > .tv3-card { padding: .4rem .5rem; }
.tv3 .tv3-status { margin: 0; color: #345666; font-size: .84rem; }
.tv3-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .4rem; }
.tv3-trace { min-width: 0; border: 1px solid #b6cbd4; background: #fff; border-radius: 9px; padding: .3rem; }
.tv3-trace-label { display: block; margin: .05rem .2rem .2rem; color: #426474; font-size: .75rem; font-weight: 760; }
.tv3-trace svg { display: block; width: 100%; height: 5.4rem; border-radius: 5px; background: #f7fbfa; }
.tv3-grid { stroke: #dce9e8; stroke-width: 1; fill: none; }
.tv3-wave { stroke: #1f697f; stroke-width: 3.3; fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tv3-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.tv3-path .tv3-card { border-top: 4px solid #44889a; }
.tv3-ruler { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 5.4rem; padding: .55rem .45rem; border: 1px solid #a6c6ce; border-radius: 10px; background: #ecf5f6; }
.tv3-ruler::before { content: ""; position: absolute; left: 10%; right: 10%; top: 2.55rem; border-top: 3px solid #4c8999; }
.tv3-ruler.unverified { background: repeating-linear-gradient(90deg, #eef4f5, #eef4f5 14px, #e4eef0 14px, #e4eef0 28px); }
.tv3-ruler.unverified::before { border-top-style: dashed; }
.tv3-ruler-mark { position: relative; z-index: 1; display: grid; justify-items: center; align-content: space-between; gap: .25rem; min-width: 0; color: #305969; text-align: center; font-size: .75rem; }
.tv3-ruler-mark strong { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 2px solid #267d90; border-radius: 50%; background: #fff; color: #17536a; font-size: .75rem; }
.tv3-ruler-mark > span { font-weight: 700; white-space: nowrap; }
.tv3-interval-ruler { position: relative; min-height: 5.7rem; border: 1px solid #a6c6ce; border-radius: 10px; background: linear-gradient(to right, #e9f3f4, #dbecee); }
.tv3-interval-ruler::before { content: ""; position: absolute; left: 8%; right: 8%; top: 2.65rem; border-top: 3px solid #4c8999; }
.tv3-interval-mark { position: absolute; top: .35rem; display: grid; gap: 1.3rem; color: #265263; font-size: .75rem; font-weight: 700; line-height: 1.2; }
.tv3-interval-mark::after { content: ""; position: absolute; top: 1.75rem; left: 0; height: 1.15rem; border-left: 3px solid #1d758a; }
.tv3-interval-mark.start { left: 8%; }
.tv3-interval-mark.end { transform: translateX(-25%); }
.tv3-interval-mark.end.shifted { color: #895423; }
.tv3-interval-mark.end.shifted::after { border-color: #b97933; }
.tv3-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; height: 9rem; align-items: end; }
.tv3-bar-cell { display: flex; flex-direction: column; justify-content: end; align-items: center; min-width: 0; height: 100%; gap: .15rem; font-size: .75rem; text-align: center; color: #345666; }
.tv3-bar-cell strong { font-size: .75rem; order: 2; }
.tv3-bar-cell > span { order: 3; }
.tv3-bar-stem { order: 1; width: min(100%, 2.3rem); min-height: 1px; display: block; background: #278397; border-radius: 5px 5px 0 0; }
.tv3-details { margin-top: .75rem; padding-top: .55rem; border-top: 1px dashed #b3cbd2; }
.tv3-details summary { width: fit-content; color: #235b70; font-weight: 700; font-size: .8rem; cursor: pointer; }
.tv3 .tv3-equivalent { color: #476473; font-size: .79rem; }
@media (max-width: 680px) {
  .tv3-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv3-row > .tv3-trace { grid-column: 1 / -1; }
  .tv3-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv3-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .tv3 { padding: .7rem; border-radius: 13px; }
  .tv3-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv3-choice { font-size: .78rem; padding: .4rem .34rem; }
  .tv3-row { grid-template-columns: 1fr; }
  .tv3-trace svg { height: 5rem; }
  .tv3-interval-mark.end { transform: translateX(-10%); }
}