/* Animated teaser (js/widgets/teaser-anim.js) */
.cn-tz { max-width: 1100px; margin: 0 auto 10px; user-select: none; --tz-blue: #1f6bff; }
.cn-tz-fig { position: relative; }
.cn-tz-fig svg { display: block; width: 100%; height: auto; }

/* ---- bar (above the figure) ---- */
.cn-tz-bar { display: flex; align-items: flex-end; gap: 12px; margin: 0 3% 10px; }
.cn-tz-play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #bbb; background: #fff; color: #333;
  cursor: pointer; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; }
.cn-tz-play:hover { background: #f0f0f0; }
.cn-tz-play svg { display: block; fill: #333; }
.cn-tz-segs { flex: 1; display: flex; gap: 6px; cursor: pointer; touch-action: none; }
.cn-tz-seg { position: relative; flex-basis: 0; min-width: 0; }
.cn-tz-num { display: none; }
.cn-tz-lab { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #8a8f99; }
.cn-tz-seg:hover .cn-tz-lab { color: #444; }
.cn-tz-seg.on .cn-tz-lab { color: var(--tz-blue); font-weight: 600; }
.cn-tz-rail { position: relative; height: 6px; background: #e3e3e3; border-radius: 3px; }
.cn-tz-rail::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -8px; }
.cn-tz-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tz-blue); border-radius: 3px; }
.cn-tz-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tz-blue); box-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }
.cn-tz-seg.on .cn-tz-knob { display: block; }

/* A: chapters — label sits on top of its own segment of the bar */
.cn-tz[data-bar="a"] .cn-tz-lab, .cn-tz:not([data-bar]) .cn-tz-lab { margin: 0 0 5px 2px; }
.cn-tz[data-bar="a"] .cn-tz-play, .cn-tz:not([data-bar]) .cn-tz-play { margin-bottom: -12px; }

/* B: pills — each part is a pill that fills up as it plays, title inside */
.cn-tz[data-bar="b"] .cn-tz-bar { align-items: center; }
.cn-tz[data-bar="b"] .cn-tz-seg { height: 34px; border-radius: 17px; background: #eef0f4; overflow: hidden; border: 1.5px solid transparent; }
.cn-tz[data-bar="b"] .cn-tz-seg.on { border-color: var(--tz-blue); }
.cn-tz[data-bar="b"] .cn-tz-rail { position: absolute; inset: 0; height: auto; background: none; border-radius: 0; }
.cn-tz[data-bar="b"] .cn-tz-fill { background: #d6e3ff; border-radius: 0; }
.cn-tz[data-bar="b"] .cn-tz-seg.done .cn-tz-fill { background: #e3eaf9; }
.cn-tz[data-bar="b"] .cn-tz-knob { display: none; }
.cn-tz[data-bar="b"] .cn-tz-lab { position: relative; z-index: 1; line-height: 31px; text-align: center; padding: 0 10px; color: #6b7280; }
.cn-tz[data-bar="b"] .cn-tz-seg.on .cn-tz-lab { color: #123a9c; }

/* C: stepper — numbered steps, title next to the number, thin progress line below */
.cn-tz[data-bar="c"] .cn-tz-segs { gap: 14px; }
.cn-tz[data-bar="c"] .cn-tz-seg { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 6px; }
.cn-tz[data-bar="c"] .cn-tz-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #c8ccd4; color: #8a8f99; font-size: 13px; font-weight: 700; box-sizing: border-box; }
.cn-tz[data-bar="c"] .cn-tz-seg.on .cn-tz-num { border-color: var(--tz-blue); color: var(--tz-blue); }
.cn-tz[data-bar="c"] .cn-tz-seg.done .cn-tz-num { border-color: var(--tz-blue); background: var(--tz-blue); color: #fff; }
.cn-tz[data-bar="c"] .cn-tz-rail { grid-column: 1 / -1; height: 3px; }
.cn-tz[data-bar="c"] .cn-tz-knob { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.cn-tz[data-bar="c"] .cn-tz-play { margin-bottom: -10px; }

/* ---- caption (between the stepper and the figure) ---- */
.cn-tz-cap { box-sizing: border-box; display: grid; place-items: center; min-height: 2.9em; margin: 6px 3% 14px; padding: 7px 14px; background: #f1f2f4; border-radius: 6px;
  text-align: center; font-size: 15px; line-height: 1.45; color: #333; }
.cn-tz-cap b:first-child { color: #111; }

/* stepper steps are the controls: make them look like buttons */
.cn-tz[data-bar="c"] .cn-tz-bar { margin-bottom: 12px; }
.cn-tz[data-bar="c"] .cn-tz-seg { cursor: default; }
.cn-tz[data-bar="c"] .cn-tz-num, .cn-tz[data-bar="c"] .cn-tz-lab { cursor: pointer; }
.cn-tz[data-bar="c"] .cn-tz-lab { justify-self: start; max-width: 100%; box-sizing: border-box; padding: 3px 10px; margin-left: -6px;
  border-radius: 14px; border: 1px solid transparent; color: #5f6570; transition: background .15s, border-color .15s; }
.cn-tz[data-bar="c"] .cn-tz-seg:hover .cn-tz-lab { background: #eef3ff; border-color: #c9d8ff; color: #1f3f99; }
.cn-tz[data-bar="c"] .cn-tz-seg.on .cn-tz-lab { background: none; border-color: transparent; color: var(--tz-blue); }
.cn-tz[data-bar="c"] .cn-tz-seg:hover .cn-tz-num { border-color: var(--tz-blue); color: var(--tz-blue); }
.cn-tz[data-bar="c"] .cn-tz-rail { cursor: pointer; }
.cn-tz-fig { cursor: default; }

@media (max-width: 700px) {
  .cn-tz-lab { font-size: 11.5px; }
  .cn-tz[data-bar="c"] .cn-tz-num { display: none; }
}