.road-tour-launcher,
.road-tour-panel {
  --tour-ink: #173950;
  --tour-accent: #296887;
  font-family: inherit;
}
.road-tour-launcher[hidden], .road-tour-panel[hidden], .road-tour-pair [hidden] { display: none; }
.road-tour-launcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 24px;
  padding: 16px 20px;
  margin: 14px 0 18px;
  background: #eaf2f7;
  border: 1px solid #cadde8;
  border-left: 4px solid var(--tour-accent);
  border-radius: 5px;
}
.road-tour-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #466d83; }
.road-tour-intro h3 { display: inline; margin: 0 0 0 9px; font-size: 19px; color: var(--tour-ink); }
.road-tour-intro p { margin: 5px 0 0; font-size: 13px; color: #416076; line-height: 1.6; }
.road-tour-launch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.road-tour-launch-actions label { font-size: 12px; color: #3b6178; }
.road-tour-launch-actions select,
.road-tour-launch-actions button,
.road-tour-navigation button,
#road-tour-exit { font: inherit; cursor: pointer; border-radius: 5px; }
.road-tour-launch-actions select { max-width: 100%; min-height: 42px; padding: 6px 8px; border: 1px solid #a9c1d0; background: #fff; color: #214760; font-size: 14px; }
#road-tour-start, #road-tour-next { background: #255e7f; color: white; border: 1px solid #255e7f; font-size: 15px; font-weight: 650; }
#road-tour-start { padding: 10px 15px; min-height: 42px; }
#road-tour-start span { font-size: 11px; margin-right: 3px; }
#road-tour-start:hover, #road-tour-next:hover:enabled { background: #174b6a; }
#road-tour-launcher :focus-visible, #road-tour-panel :focus-visible { outline: 3px solid #d59c4c; outline-offset: 2px; }
[data-road-tour-active="true"] .road-workbench {
  display: grid;
  grid-template-columns: clamp(260px, 26%, 370px) minmax(0, 1fr);
  background: #f7fafc;
  scroll-margin-top: 14px;
}
[data-road-tour-active="true"] :is(.road-controls, .road-mission, .road-grade-panel, .road-playback, .road-manual, .road-live, .road-gap-pair, .road-chain, .road-moment, .road-event-strip, .road-summary, #road-comparison, .road-charts, .road-bridge, .road-method) { display: none; }
.road-tour-panel { background: #f6f9fb; color: var(--tour-ink); border-right: 1px solid #cedce5; padding: clamp(14px, 1.5vw, 22px); min-width: 0; }
.road-tour-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#road-tour-exit { background: transparent; border: 0; padding: 5px 0 5px 8px; color: #4c6b80; font-size: 12px; }
#road-tour-exit:hover { text-decoration: underline; }
#road-tour-scene-name { margin: 4px 0 13px; color: var(--tour-ink); font-size: 21px; line-height: 1.35; }
.road-tour-steps { display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; margin: 0 0 20px; padding: 0; gap: 3px; }
.road-tour-steps li { padding: 3px 1px 6px; border-bottom: 3px solid #d5e2e9; text-align: center; color: #566f80; font: 600 12px/1.4 system-ui,sans-serif; }
.road-tour-steps li[data-visited="true"] { border-color: #87adbf; }
.road-tour-steps li[aria-current="step"] { border-color: var(--tour-accent); color: #174e6c; background: #e0edf4; }
.road-tour-heading { display: flex; align-items: baseline; gap: 8px; }
#road-tour-grade { color: var(--tour-accent); font: 700 25px/1.3 system-ui,sans-serif; }
#road-tour-title { font-size: 18px; line-height: 1.45; margin: 0; color: var(--tour-ink); }
.road-tour-handover { background: #173e56; color: #f8fcff; padding: 10px 13px; margin: 10px 0 13px; border-radius: 5px; }
#road-tour-task { font-size: 12px; color: #bedaeb; line-height: 1.5; }
.road-tour-pair { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; margin-top: 3px; line-height: 1.45; font-size: 17px; }
#road-tour-from { color: #e6dbc9; } #road-tour-arrow { color: #a7c4d3; }
#road-tour-to { color: #fff; }
.road-tour-narration strong { display: inline-block; font-size: 13px; color: #3b657e; font-variant-numeric: tabular-nums; }
.road-tour-panel[data-phase="frame"] .road-tour-narration strong { color: #1d596a; }
.road-tour-narration p { margin: 4px 0; color: #203e54; font-size: 14px; line-height: 1.65; }
.road-tour-conditions { margin: 10px 0 15px; color: #506b7c; font-size: 12px; }
.road-tour-conditions summary { cursor: pointer; }
.road-tour-conditions p { margin: 5px 0; line-height: 1.6; }
.road-tour-navigation { display: grid; grid-template-columns: 1fr 1.45fr; gap: 7px; }
.road-tour-navigation button { padding: 8px 5px; min-height: 38px; font-size: 13px; color: #29536c; border: 1px solid #bed1dc; background: #fff; }
.road-tour-navigation button:disabled, #road-tour-next:disabled { cursor: default; background: #e5edf2; color: #526c7c; border-color: #d3dfe6; }
.road-tour-navigation :is(#road-tour-replay,#road-tour-pause) { min-height: 32px; font-size: 12px; }
[data-road-tour-active="true"] .road-viewport { height: clamp(320px, 52vh, 580px); }
[data-road-tour-active="true"] .road-grade-evidence h4 { font-size: 16px; }
[data-road-tour-level="L1"] [data-level-road-role="speed"],
[data-road-tour-level="L2"] [data-level-road-role="steering"],
[data-road-tour-level="L3"] [data-level-road-role="monitor"],
[data-road-tour-level="L4"] [data-level-road-role="fallback"],
[data-road-tour-level="L5"] [data-level-road-event] {
  outline: 2px solid #28698e; outline-offset: 1px; border-radius: 3px; font-weight: 700;
}
@media (max-width: 760px) {
  .road-tour-launcher { padding: 12px; gap: 10px; }
  .road-tour-intro h3 { font-size: 17px; }
  .road-tour-launch-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .road-tour-launch-actions label { grid-column: 1/-1; }
  #road-tour-start { padding: 7px 10px; font-size: 13px; }
  [data-road-tour-active="true"] .road-workbench { display: flex; flex-direction: column; background: #f6f9fb; }
  [data-road-tour-active="true"] .road-main, .road-tour-panel:not([hidden]) { display: contents; }
  .road-tour-top { order: 1; padding: 6px 12px 0; }
  #road-tour-scene-name { order: 2; font-size: 17px; margin: 0 12px; }
  .road-tour-steps { order: 3; margin: 3px 12px 7px; }
  .road-tour-heading { order: 4; padding: 0 12px; }
  #road-tour-grade { font-size: 20px; } #road-tour-title { font-size: 16px; }
  .road-tour-handover { order: 5; margin: 6px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; padding: 6px 9px; }
  .road-tour-pair { font-size: 14px; margin: 0; }
  [data-road-tour-active="true"] .road-viewbar { order: 6; padding: 4px 8px; }
  [data-road-tour-active="true"] .road-viewbar label { display: none; }
  [data-road-tour-active="true"] .road-viewport { order: 7; height: clamp(240px, 38svh, 350px); min-height: 240px; }
  [data-road-tour-active="true"] #road-render-note { order: 8; }
  .road-tour-narration { order: 9; margin: 8px 12px 4px; }
  .road-tour-navigation { order: 10; margin: 0 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .road-tour-conditions { order: 11; margin: 8px 12px; }
  [data-road-tour-active="true"] .road-grade-evidence { order: 12; }
}