/* The tour stays inside the landing page and uses its existing colour tokens. */
#demo { margin-bottom: clamp(42px, 6vw, 84px); scroll-margin-top: 16px; }
#demo [hidden] { display: none; }
#demo button, #demo select { font: inherit; cursor: pointer; }
#demo button:focus-visible, #demo select:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
#demo .demo-top { background: #0a202a; min-height: 54px; }
#demo .demo-brand { font-size: 12px; letter-spacing: .04em; }
#demo .brand-bars { height: 18px; gap: 2px; }
#demo .brand-bars i { width: 4px; height: 11px; }
#demo .brand-bars i:nth-child(n+2) { height: 16px; }
#demo .sample-tag { font-size: 10px; letter-spacing: .04em; }
.tour-layout { display: grid; grid-template-columns: minmax(175px, .8fr) minmax(0, 3.1fr); }
.tour-rail { padding: 30px 18px; background: #091e28; border-right: 1px solid var(--line); }
.tour-company { display: flex; align-items: center; gap: 11px; }
.tour-company > b { display: grid; place-items: center; flex: none; width: 39px; height: 39px; border-radius: 10px; background: #f6c296; color: #3e281d; font: italic bold 24px Georgia, serif; }
.tour-company strong, .tour-company small { display: block; }
.tour-company strong { font-size: 14px; }
.tour-company small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.tour-rail nav { margin-top: 34px; display: grid; gap: 5px; }
.tour-rail button { display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 11px 12px; color: #b3c7ce; }
.tour-rail button span, .tour-kicker, .tour-editor small, .tour-evidence small, [data-timing] { font-family: ui-monospace, Consolas, monospace; }
.tour-rail button span { font-size: 10px; opacity: .8; }
.tour-rail button:hover { background: #122d37; color: white; }
.tour-rail button[aria-current] { color: #87f5e5; background: #10363c; border-color: #22545a; }
.tour-stage { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; padding: clamp(22px, 3.2vw, 44px); background: radial-gradient(ellipse at 95% 0%, #19414a66, transparent 57%), #0c222c; }
.tour-scene { grid-area: 1 / 1; min-height: 352px; }
.tour-scene:not([hidden]) { animation: tour-enter .35s ease-out; }
/* Reserve the tallest chapter's space so playback controls stay still. */
#demo .tour-scene[hidden] { display: block; visibility: hidden; pointer-events: none; }
.tour-kicker, .tour-editor small, .tour-evidence small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.tour-kicker { color: #81dace; }
.tour-stage h2 { margin: 8px 0 0; font-size: clamp(26px, 2.6vw, 37px); line-height: 1.16; letter-spacing: -.045em; }
.tour-sub { color: var(--muted); line-height: 1.5; font-size: 14px; margin: 8px 0 22px; }
.tour-editor { background: #102a35; border: 1px solid #345661; border-radius: 9px; padding: 15px 18px; margin-top: 10px; }
.tour-editor small { color: #92b2bc; }
.tour-editor p { font-size: 15px; line-height: 1.55; min-height: 1.55em; margin: 5px 0 0; }
.tour-editor:first-of-type p { min-height: 3.1em; }
.is-typing::after { content: ''; display: inline-block; vertical-align: -.12em; width: 2px; height: 1.05em; background: var(--teal); }
.tour-runbar, .tour-report-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-runbar { margin-top: 17px; }
.tour-runbar span { font-size: 12px; color: #c1d4da; }
.tour-runbar i { color: var(--teal); margin: 0 6px; }
#demo [data-run-demo] { border: 0; border-radius: 6px; padding: 11px 16px; background: var(--orange); color: #091c25; font-size: 13px; font-weight: 700; transition: box-shadow .25s; }
[data-run-demo] b { margin-left: 14px; }
[data-run-demo].is-cued { box-shadow: 0 0 0 5px #ff780c26; }
.tour-inbox { display: grid; gap: 7px; }
.tour-reply { display: flex; gap: 12px; align-items: center; border: 1px solid #294651; background: #0e2630; border-radius: 8px; padding: 11px 14px; transition: background .35s, border-color .35s; }
.tour-reply.is-received { border-color: #316462; background: #103239; }
.tour-glyph { flex: none; display: grid; place-items: center; background: #193c44; color: #83e7d5; border-radius: 7px; width: 31px; height: 31px; font-size: 22px; }
.tour-reply:nth-child(even) .tour-glyph { color: #ffc38e; background: #3d332e; }
.tour-reply div { min-width: 0; }
.tour-reply strong, .tour-reply small { display: block; }
.tour-reply strong { font-size: 13px; }
.tour-reply small { color: var(--muted); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-status { flex: none; margin-left: auto; font-size: 11px; color: #adbec6; }
.is-received .tour-status { color: #87edda; }
.tour-report-heading label { flex: none; color: var(--muted); font-size: 12px; }
#demo select { margin-left: 5px; border: 1px solid #47616b; border-radius: 5px; background: #102b35; color: white; padding: 6px; }
.tour-table { border: 1px solid #35535e; border-radius: 8px; overflow: hidden; }
.tour-summary { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.tour-summary strong { font-size: 26px; font-variant-numeric: tabular-nums; color: #87edda; letter-spacing: -.07em; }
.tour-summary span, .tour-hint { font-size: 12px; line-height: 1.4; color: var(--muted); }
.tour-meter { display: flex; gap: 3px; margin-left: auto; }
.tour-meter i { width: clamp(8px, 1.6vw, 20px); height: 18px; transform: skewX(-16deg); background: #294651; }
.tour-meter .filled { background: #70e8d2; }
.tour-hint { margin: 0 0 8px; }
.tour-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.tour-table th, .tour-table td { padding: 12px 14px; }
.tour-table th { font-weight: 550; }
.tour-table thead th { font-size: 11px; color: #a8c4cb; background: #16323d; }
.tour-table tbody tr + tr { border-top: 1px solid var(--line); }
#demo [data-result] { border: 1px solid transparent; padding: 5px 9px; border-radius: 5px; background: #263c49; color: #c4d1da; font-size: 12px; }
#demo [data-grade="Shortlisted"] { background: #153e3d; color: #8aedd2; }
#demo [data-grade="Mentioned"] { background: #3b342c; color: #ffca91; }
#demo [data-result]:hover, #demo [data-result][aria-pressed="true"] { border-color: currentColor; }
.tour-evidence { min-height: 86px; margin-top: 14px; border-left: 2px solid #58cbbb; padding: 11px 15px; background: #122d36; }
.tour-evidence small { color: #8ddcd3; }
.tour-evidence p { font-size: 14px; line-height: 1.6; margin: 7px 0 0; }
.tour-controls { display: flex; gap: 16px; align-items: center; border-top: 1px solid var(--line); background: #091e28; padding: 10px 22px; }
#demo .tour-controls button { border: none; background: transparent; padding: 8px 0; font-size: 12px; color: #e6f2f4; font-weight: 600; }
#demo .tour-controls button:hover { color: var(--teal); }
#demo .tour-controls button:disabled { cursor: default; color: var(--muted); }
.tour-controls [data-play] { min-width: 78px; text-align: left; }
.tour-controls progress { flex: 1; min-width: 12px; width: 100%; height: 3px; border: none; border-radius: 4px; overflow: hidden; appearance: none; background: #304750; color: var(--teal); }
.tour-controls progress::-webkit-progress-bar { background: #304750; }
.tour-controls progress::-webkit-progress-value { background: var(--teal); }
.tour-controls progress::-moz-progress-bar { background: var(--teal); }
[data-timing] { color: var(--muted); font-size: 11px; }
@keyframes tour-enter { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .tour-layout { grid-template-columns: minmax(0, 1fr); }
  .tour-rail { padding: 12px 15px; border: 0; border-bottom: 1px solid var(--line); }
  .tour-company { display: none; }
  .tour-rail nav { margin: 0; display: flex; gap: 4px; }
  #demo .tour-rail button { flex: 1; justify-content: center; padding: 9px 4px; gap: 6px; font-size: 12px; }
  .tour-stage { padding: 19px 15px; }
  .tour-editor { padding: 12px; }
  .tour-editor p, .tour-evidence p { font-size: 13px; }
  .tour-evidence { min-height: 124px; }
  .tour-table th, .tour-table td { padding: 10px 5px; }
  .tour-table th { font-size: 11px; }
  #demo [data-result] { padding: 6px 4px; font-size: 11px; }
  .tour-controls { padding: 8px 14px; gap: 9px; }
  .tour-controls [data-play] { min-width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-scene:not([hidden]) { animation: none; }
  #demo *, #demo *::after { transition: none; }
}