.narration-tour { position: sticky; top: var(--tour-header-height, 88px); z-index: 9; max-width: 1720px; margin: 0 auto; padding: 14px 32px 10px; border-bottom: 1px solid #cedcf3; background: #f0f5ff; color: var(--ink); box-shadow: 0 6px 16px #20376608; }
.narration-tour[hidden] { display: none; }
body[data-capabilities-view="catalog"] .narration-tour { display: none; }
body[data-capabilities-view="catalog"] .workspace .guide { top: var(--tour-header-height, 88px); height: calc(100dvh - var(--tour-header-height, 88px)); }
@media (max-width:900px) { body[data-capabilities-view="catalog"] .workspace .guide { height:auto; } }
.tour-main-row, .tour-controls, .tour-bottom-row { display: flex; align-items: center; gap: 12px; }
.tour-main-row { flex-wrap: wrap; }
.tour-caption { min-width: 190px; flex: 1; display: grid; gap: 3px; }
.tour-eyebrow { color: var(--blue-dark); font-size: 10px; letter-spacing: .1em; }
.tour-caption strong { font-size: 16px; line-height: 1.35; }
.narration-tour button, .narration-tour select { border: 1px solid #bdcfea; background: #fff; color: var(--ink); border-radius: 8px; min-height: 36px; font: inherit; font-size: 12px; padding: 7px 11px; }
.narration-tour button { cursor: pointer; }
.narration-tour button:hover { border-color: var(--blue); background: #e8f0ff; }
.narration-tour button:disabled { opacity: .45; cursor: default; }
.narration-tour .tour-play { background: var(--blue); border-color: var(--blue); color: #fff; min-width: 116px; }
.narration-tour .tour-play:hover { background: var(--blue-dark); }
.tour-directory { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.tour-directory select { max-width: 215px; }
.tour-narration { font-size: 13px; line-height: 1.7; margin: 9px 0 6px; max-height: 4.9em; overflow-y: auto; }
.tour-bottom-row { align-items: flex-start; justify-content: space-between; }
.tour-status { margin: 0; font-size: 11px; line-height: 1.65; color: var(--blue-dark); flex: 1; }
.tour-settings { flex: 0 0 auto; font-size: 11px; }
.tour-settings summary { cursor: pointer; color: var(--blue-dark); padding: 2px 0; }
.tour-settings-content { position: absolute; right: 30px; display: grid; grid-template-columns: minmax(170px, 1fr) auto; align-items: end; gap: 10px; background: #fff; padding: 16px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 32px #2037661c; max-width: calc(100vw - 32px); }
.tour-settings-content label { display: grid; gap: 5px; min-width: 0; }
.tour-settings-content select { width: 100%; min-width: 0; }
.tour-progress-row { display: flex; align-items: center; gap: 12px; margin: 7px 0 8px; font-size: 11px; color: var(--muted); }
.tour-progress-row label, .tour-progress-row output { flex: none; }
.tour-progress-row output { font-variant-numeric: tabular-nums; min-width: 86px; text-align: right; }
.tour-progress-row input { flex: 1; min-width: 0; height: 22px; margin: 0; accent-color: var(--blue); cursor: pointer; background: transparent; }
.tour-progress-row input:disabled { cursor: default; opacity: .5; }
.tour-progress-row input::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(to right, var(--blue) var(--tour-progress, 0%), #cbd9ee var(--tour-progress, 0%)); }
.tour-progress-row input::-webkit-slider-thumb { margin-top: -6px; }
.tour-progress-row input::-moz-range-track { height: 4px; border-radius: 3px; background: #cbd9ee; }
.tour-progress-row input::-moz-range-progress { height: 4px; background: var(--blue); }
.tour-focus { position: relative; border-radius: 10px; }
.tour-focus::after { content: ''; position: absolute; inset: -8px; padding: 2px; border-radius: 16px; pointer-events: none; background: linear-gradient(125deg, #9abfff 0%, #4078dd 48%, #b9d4ff 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; filter: drop-shadow(0 0 4px #4b7fca26); }
#introHero, #sceneDetail, #purposeOverview, .purpose-example { scroll-margin-top: calc(var(--tour-header-height, 88px) + 24px + var(--tour-height, 0px)); }
.narration-tour:not([hidden]) ~ .workspace .guide { top: calc(var(--tour-header-height, 88px) + var(--tour-height, 0px)); height: calc(100dvh - var(--tour-header-height, 88px) - var(--tour-height, 0px)); }
@media (max-width: 1100px) { .narration-tour { padding-inline: 24px; } .tour-directory span { display: none; } .tour-directory select { max-width: 180px; } }
@media (max-width: 900px) { .narration-tour:not([hidden]) ~ .workspace .guide { height: auto; } }
@media (max-width: 600px) {
  .narration-tour { padding: 10px 16px 8px; }
  .tour-main-row { gap: 8px; }
  .tour-caption { min-width: 0; flex-basis: 100%; }
  .tour-caption strong { font-size: 14px; }
  .tour-controls { gap: 5px; }
  .narration-tour button { padding: 6px 9px; min-height: 36px; }
  .narration-tour .tour-play { min-width: 100px; }
  .tour-directory { min-width: 0; flex: 1; }
  .tour-directory select { width: 100%; max-width: none; padding-inline: 5px; }
  .tour-narration { font-size: 12px; line-height: 1.55; max-height: 4.65em; margin: 7px 0 4px; }
  .tour-bottom-row { gap: 8px; }
  .tour-status, .tour-settings { font-size: 10px; }
  .tour-progress-row { gap: 8px; margin: 4px 0; font-size: 10px; }
  .tour-progress-row output { min-width: 78px; }
  .tour-settings-content { right: 16px; left: 16px; grid-template-columns: minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .tour-focus { scroll-behavior: auto; } }
@media (forced-colors: active) { .tour-focus::after { background: transparent; -webkit-mask: none; mask: none; border: 2px solid Highlight; padding: 0; filter: none; } }