/* The synchronization demonstration is chapter 02 of the screenshot tour. */
.tour-video-chapter { display: block; background: radial-gradient(ellipse at top left, #fe365309, transparent 60%); }
.replay-sync-intro { max-width: 950px; }
.replay-sync-intro .boxbox-lead { margin: 22px 0 26px; }
.replay-sync-language { color: #b6b6c1; font-size: 12px; margin: -12px 0 26px; }
.replay-sync-version { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 2fr); gap: 12px 28px; padding: 19px 22px; border-left: 3px solid var(--accent); background: #211b20; }
.replay-sync-version strong { font-size: 12px; line-height: 1.75; }
.replay-sync-version p { margin: 0; font-size: 12px; line-height: 1.8; color: #c1b7c0; }
.replay-sync-panel { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.7fr); gap: 64px; align-items: start; padding-block: 40px; min-width: 0; scroll-margin-top: calc(var(--tour-top) - 40px); }
.replay-sync-panel + .replay-sync-panel { border-top: 1px solid #34303a; }
.replay-sync-panel-heading { position: sticky; top: var(--tour-top); }
.replay-sync-index { color: #ed7d93; font: 12px Consolas, monospace; }
.replay-sync-panel-heading h4 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; margin: 18px 0; }
.replay-sync-panel-heading p { margin: 0; color: #b6b6c1; font-size: 14px; line-height: 1.9; }
.replay-sync-video { margin: 0; min-width: 0; overflow: hidden; border: 1px solid #66414e; border-radius: 7px; background: #09090a; box-shadow: 0 20px 55px #0004; }
.replay-sync-video video { display: block; width: 100%; height: auto; max-height: max(0px, calc(100dvh - var(--tour-top) - var(--media-chrome-height, 120px) - 24px)); aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.replay-sync-video video:fullscreen { height: 100%; max-height: none; object-fit: contain; }
.replay-sync-video video a { color: #ff7889; text-decoration: underline; }
.replay-sync-video figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 13px 18px; border-top: 1px solid var(--line); background: #211b23; color: #bdb1c1; font-size: 11px; line-height: 1.75; }
.replay-sync-meta { display: inline-flex; flex-wrap: wrap; gap: 8px 18px; font-variant-numeric: tabular-nums; }
.replay-sync-meta > span + span { padding-left: 18px; border-left: 1px solid #53424f; }
.replay-sync-hd { display: inline-flex; align-items: center; gap: 8px; color: #ff91a2; text-decoration: underline; text-underline-offset: 3px; }
.replay-sync-hd .icon { width: 14px; height: 14px; }
.replay-sync-requirement { max-width: 950px; margin: 15px 0 0; padding-left: 18px; border-left: 2px solid var(--accent); color: #b6b6c1; font-size: 13px; line-height: 1.85; }
@media (max-width: 1100px) {
  .replay-sync-panel { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.3fr); gap: 34px; }
}
@media (max-width: 900px) {
  .replay-sync-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .replay-sync-panel-heading { position: static; max-width: 700px; }
}
@media (max-width: 760px) {
  .replay-sync-version { grid-template-columns: 1fr; gap: 5px; padding: 16px 18px; }
  .replay-sync-panel { padding-block: 30px; scroll-margin-top: calc(var(--tour-top) - 30px); }
  .replay-sync-panel-heading h4 { font-size: 24px; margin-block: 12px; }
  .replay-sync-panel-heading p, .replay-sync-requirement { font-size: 13px; }
  .replay-sync-video figcaption { padding: 12px 14px; }
}
@media (max-height: 650px) {
  .replay-sync-panel-heading { position: static; }
}