.math-timeline {
  --tl-ui: var(--flagship-ui, Inter, sans-serif);
  --tl-stop-width: 256px;
  --tl-surface: var(--flagship-page, #fff);
  --tl-ink: var(--flagship-ink, #202020);
  --tl-muted: var(--flagship-muted, #666);
  --tl-rule: var(--flagship-rule, #dedede);
  box-sizing: border-box;
  min-width: 0;
  max-width: 46rem;
  margin: 48px auto;
  padding: 0;
  color: var(--tl-ink);
  background: transparent;
  font-family: var(--tl-ui);
  font-size: 14px;
  line-height: 1.5;
}
.math-timeline *, .math-timeline *::before, .math-timeline *::after { box-sizing: border-box; }
.math-timeline__heading { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.math-timeline__intro { flex: 1; }
.math-timeline__label { color: var(--tl-ink); font-size: 15px; font-weight: 600; }
.math-timeline .math-timeline__intro p { margin: 4px 0 0; color: var(--tl-muted); font: 400 13px/1.5 var(--tl-ui); }
.math-timeline__cue { margin-left: auto; color: var(--tl-muted); font-size: 12px; }
.math-timeline__controls { display: flex; align-items: center; gap: 8px; }
.math-timeline__controls[hidden] { display: none; }
.math-timeline__controls button {
  display: grid;
  place-items: center;
  appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--tl-rule);
  border-radius: 50%;
  color: var(--tl-ink);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.math-timeline__controls button:hover:not(:disabled) { border-color: var(--tl-ink); }
.math-timeline__controls button:disabled { opacity: .3; cursor: default; }
.math-timeline__controls svg, .math-timeline__passage svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.math-timeline__rail {
  display: block;
  /* The measured width excludes a classic vertical scrollbar. Without script,
     keep the complete sequence in a native scroller inside the reading width. */
  width: var(--tl-viewport-width, 100%);
  max-width: none;
  margin-inline-start: var(--tl-rail-offset, 0px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0 12px;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--tl-start-inset, 0px) var(--tl-end-inset, 0px);
  scrollbar-width: thin;
  scrollbar-color: var(--tl-muted) var(--tl-surface);
  -webkit-overflow-scrolling: touch;
}
.math-timeline__rail::-webkit-scrollbar { height: 4px; }
.math-timeline__rail::-webkit-scrollbar-track { background: var(--tl-rule); }
.math-timeline__rail::-webkit-scrollbar-thumb { background: var(--tl-muted); border-radius: 2px; }
.math-timeline__stops { position: relative; display: flex; width: max-content; min-width: 100%; margin: 0; padding: 0 var(--tl-end-inset, 0px) 0 var(--tl-start-inset, 0px); list-style: none; }
.math-timeline__stops > li {
  position: relative;
  display: grid;
  grid-template-rows: 100px 56px 24px 48px 1fr 44px;
  flex: 0 0 var(--tl-stop-width);
  width: var(--tl-stop-width);
  margin: 0;
  padding: 0 32px 8px 4px;
  list-style: none;
  scroll-snap-align: start;
}
.math-timeline__stops > li::marker { content: ''; }
.math-timeline__image { width: 152px; height: 100px; }
.math-timeline__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.math-timeline__signal { display: block; position: relative; width: var(--tl-stop-width); margin-left: -4px; color: var(--tl-event-color); }
.math-timeline__signal::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 40px;
  right: 8px;
  height: 1px;
  background: var(--tl-event-color);
  opacity: .5;
}
.math-timeline__stops > li:last-child .math-timeline__signal::before { display: none; }
.math-timeline__constellation { display: block; position: relative; top: 4px; fill: currentColor; }
.math-timeline__date { display: block; color: var(--tl-muted); font-size: 11px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.math-timeline .math-timeline__name { margin: 0; color: var(--tl-ink); font: 600 17px/1.3 var(--tl-ui); letter-spacing: -.02em; text-wrap: balance; }
.math-timeline .math-timeline__annotation { margin: 8px 0 12px; padding: 0; color: var(--tl-muted); font: 400 13px/1.55 var(--tl-ui); letter-spacing: 0; text-align: left; }
.math-timeline .math-timeline__passage { display: inline-flex; align-items: center; justify-self: start; gap: 6px; min-height: 44px; margin: 0; padding: 0; color: var(--tl-ink); background: transparent; font: 500 12px/1.4 var(--tl-ui); text-decoration: none; text-align: left; }
.math-timeline .math-timeline__passage:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.math-timeline .math-timeline__passage[aria-current='location'] { text-decoration: underline; text-underline-offset: 4px; }
.math-timeline__controls button:focus-visible, .math-timeline .math-timeline__passage:focus-visible { outline: 2px solid var(--tl-ink); outline-offset: 2px; }
.math-timeline__stops > li[data-active='true'] .math-timeline__constellation,
.math-timeline__stops > li:focus-within .math-timeline__constellation { filter: saturate(1.2); }
.math-timeline__stops > li[data-active='true'] .math-timeline__signal::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 47px;
  width: 8px;
  height: 2px;
  background: var(--tl-event-color);
}
.math-timeline__caption { max-width: 780px; margin-top: 16px; color: var(--tl-muted); font: 400 11px/1.6 var(--tl-ui); }
html[data-aligned-feature-theme='night'] .math-timeline__constellation,
html[data-aligned-feature-theme='night'] .math-timeline__signal::before,
html[data-aligned-feature-theme='night'] .math-timeline__signal::after { filter: brightness(1.5); }
@media (max-width: 640px) {
  .math-timeline { --tl-stop-width: 248px; margin: 32px 0; }
  .math-timeline__heading { align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .math-timeline__label { font-size: 14px; }
  .math-timeline .math-timeline__intro p { max-width: 190px; font-size: 12px; }
  .math-timeline__cue { display: none; }
  .math-timeline__controls { margin-left: auto; gap: 4px; }
  .math-timeline__stops > li { grid-template-rows: 88px 56px 24px 48px 1fr 44px; padding-right: 28px; }
  .math-timeline__image { width: 134px; height: 88px; }
}
@media (prefers-reduced-motion: no-preference) {
  .math-timeline__controls button { transition: opacity 160ms ease-out, border-color 160ms ease-out; }
  .math-timeline__constellation { transition: filter 180ms ease-out; }
}

/* A single brief response ties an image, its marker and its passage together. */
.math-timeline__image { transform-origin: left bottom; }
.math-timeline__stops > li:focus-within .math-timeline__image { transform: translateY(-4px) scale(1.025); }
.math-timeline__stops > li:focus-within .math-timeline__annotation { color: var(--tl-ink); }
.math-timeline__stops > li:focus-within .math-timeline__signal::before { opacity: 1; height: 2px; }
.math-timeline__stops > li:focus-within .math-timeline__passage svg { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .math-timeline__stops > li:hover .math-timeline__image { transform: translateY(-4px) scale(1.025); }
  .math-timeline__stops > li:hover .math-timeline__annotation { color: var(--tl-ink); }
  .math-timeline__stops > li:hover .math-timeline__signal::before { opacity: 1; height: 2px; }
  .math-timeline__stops > li:hover .math-timeline__passage svg { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .math-timeline__image, .math-timeline__passage svg { transition: transform 240ms cubic-bezier(.16,1,.3,1); }
  .math-timeline__annotation, .math-timeline__signal::before { transition: color 180ms ease-out, opacity 180ms ease-out; }
  .math-timeline__stops > li:focus-within .math-timeline__constellation circle { animation: timeline-dot-reveal 380ms ease-out both; }
  .math-timeline__constellation circle:nth-child(3n+2) { animation-delay: 45ms !important; }
  .math-timeline__constellation circle:nth-child(3n) { animation-delay: 90ms !important; }
  @media (hover: hover) and (pointer: fine) {
    .math-timeline__stops > li:hover .math-timeline__constellation circle { animation: timeline-dot-reveal 380ms ease-out both; }
  }
}
@keyframes timeline-dot-reveal { from { opacity: .3; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .math-timeline__stops > li:hover .math-timeline__image, .math-timeline__stops > li:focus-within .math-timeline__image,
  .math-timeline__stops > li:hover .math-timeline__passage svg, .math-timeline__stops > li:focus-within .math-timeline__passage svg { transform: none; }
}
@media print {
  .math-timeline__rail { width: 100%; margin-inline-start: 0; --tl-start-inset: 0px; --tl-end-inset: 0px; }
}