/* Guided tour page */
.tour-main { max-width: 1680px; padding: 2.5rem .75rem 4rem; }
.tour-title { color: #fff; font-size: 2.4rem; margin-bottom: .5rem; }
.tour-lede { color: #eef2ff; max-width: 46rem; margin-bottom: 2rem; }
.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; align-items: start; }
.tour-stage { position: sticky; top: 5rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem 1.25rem 1.25rem; }
.tour-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.tour-counter { font-family: var(--font-mono); font-weight: 700; color: var(--accent-orange); }
.tour-chapter { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin: 0 0 .75rem; }
.tour-controls button { background: var(--bg-primary); color: #fff; border: 0; border-radius: var(--radius-sm); width: 2.5rem; height: 2.5rem; cursor: pointer; font-size: .8rem; }
.tour-controls button:hover, .tour-controls button:focus-visible { background: var(--accent-orange); outline: none; }
.tour-video-wrap { width: min(100%, calc((100vh - 18rem) * 16 / 9)); min-width: 20rem; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; }
.tour-video-wrap video { width: 100%; height: 100%; display: block; cursor: pointer; }
.tour-progress { height: 4px; background: var(--bg-surface); border-radius: 2px; margin-top: .6rem; overflow: hidden; }
.tour-progress div { height: 100%; width: 0; background: var(--accent-orange); }
.tour-caption { min-height: 3.2em; margin: .75rem 0 .25rem; font-size: 1.05rem; }
.tour-auto, .tour-speed { font-size: .9rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .4rem; }
.tour-speed select { font: inherit; padding: .2rem .4rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--ink); }
.tour-links { margin-top: .5rem; font-size: .95rem; }
.tour-nav { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; max-height: calc(100vh - 7rem); overflow-y: auto; position: sticky; top: 5rem; }
.tour-nav h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: .9rem 0 .3rem; }
.tour-nav h3:first-child { margin-top: 0; }
.tour-nav a { display: flex; gap: .6rem; padding: .3rem .6rem; border-radius: 12px; color: var(--text-main); }
.tour-nav a .n { font-family: var(--font-mono); color: var(--text-dim); }
.tour-nav a:hover { background: var(--bg-card-hover); }
.tour-nav a.active { background: var(--bg-primary); color: #fff; }
.tour-nav a.active .n { color: #fff; }
.tour-transcript { margin-top: 3rem; background: var(--bg-card); border-radius: var(--radius-md); padding: 1.5rem 1.75rem; }
.tour-transcript h2 { margin-bottom: .5rem; }
.tour-transcript h3 { margin: 1.5rem 0 .25rem; }
.tour-transcript h4 { margin: 1rem 0 .25rem; font-size: 1rem; color: var(--text-muted); }
.tour-note { color: var(--text-dim); font-size: .9rem; }
.tour-transcript ol { list-style: none; }
.tour-transcript li { display: flex; gap: .75rem; padding: .2rem .5rem; border-radius: 10px; cursor: pointer; }
.tour-transcript li:hover { background: var(--bg-card-hover); }
.tour-transcript li.now { background: var(--accent-green); }
.tour-transcript time { font-family: var(--font-mono); color: var(--text-dim); flex: none; }
.tour-transcript .late em { color: var(--text-dim); font-size: .8rem; margin-left: .4rem; }
@media (max-width: 900px) {
  .tour-layout { grid-template-columns: 1fr; }
  .tour-stage, .tour-nav { position: static; max-height: none; }
  .tour-stage { position: sticky; top: 4rem; z-index: 5; }
}