.tour-video{z-index:2;pointer-events:none}

/* The timeline belongs to the playback console, not to a floating tooltip. */
.tour-transport{position:absolute;bottom:100%;left:50%;width:280px;padding:15px 18px 18px;background:rgba(244,240,231,.96);border:1px solid rgba(21,20,18,.08);border-radius:14px;box-shadow:0 12px 34px rgba(21,20,18,.09);opacity:0;visibility:hidden;transform:translate(-50%,7px);transition:opacity .18s,transform .22s,visibility .18s}
.tour-transport label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;color:#403e37;font:9px/1 var(--mono)}
.tour-transport output{min-width:66px;text-align:right;font-variant-numeric:tabular-nums}
.tour-transport input{display:block;width:100%;height:18px;margin:0;accent-color:var(--orange);cursor:pointer}

.tour-active .director-console{bottom:18px;width:min(620px,calc(100vw - 42px));height:62px;padding:7px;gap:7px;background:rgba(21,20,18,.94);border:1px solid rgba(255,255,255,.13);border-radius:22px;box-shadow:0 12px 36px rgba(21,20,18,.2);backdrop-filter:blur(18px);transform:translateX(-50%)}
.tour-active .mode-switch{display:grid;grid-template-columns:58px 48px;flex:0 0 106px;width:106px;height:48px;padding:0;background:transparent;border-radius:15px;box-shadow:none}
.tour-active .mode-switch:after,.tour-active .mode-switch>i{display:none}
.tour-active .mode-switch button{height:48px;padding:0;border-radius:13px;color:#b9b3a8;font:8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:background .2s,color .2s}
.tour-active .mode-switch button[aria-pressed=true]{color:var(--milk)}
.tour-active .mode-switch [data-mode="listen"]{display:grid;place-items:center;background:var(--milk);color:var(--ink)}
.tour-active .mode-switch.is-listen [data-mode="listen"]{background:var(--orange);color:var(--ink)}
.tour-active .mode-switch [data-mode="listen"] svg{width:18px;height:18px}

.tour-active .tour-transport{position:static;display:block;flex:1;min-width:0;width:auto;padding:0 13px;background:transparent;border:0;border-left:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14);border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
.tour-active .tour-transport label{height:48px;grid-template-columns:auto minmax(90px,1fr) 70px;gap:12px;color:#d7d1c7}
.tour-active .tour-transport label>span{font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.tour-active .tour-transport output{color:#f2ede3;font-size:9px}
.tour-active .tour-transport input{accent-color:var(--orange)}

.tour-active .sound-orbit{flex:0 0 48px;width:48px;height:48px;margin:0;border:0;border-radius:14px;background:#292722;color:var(--milk);transform:none}
.tour-active .sound-orbit:before{display:none}
.tour-active .sound-orbit:hover{background:#34312b;transform:none}
.tour-active .sound-orbit[aria-pressed=true]{background:var(--orange);color:var(--ink)}
.tour-active .sound-orbit b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.tour-captions{position:absolute;z-index:21;bottom:92px;left:50%;width:max-content;max-width:min(720px,calc(100vw - 40px));margin:0;padding:9px 15px 10px;background:rgba(21,20,18,.84);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 8px 26px rgba(21,20,18,.14);backdrop-filter:blur(14px);color:var(--milk);font:14px/1.35 var(--display,sans-serif);text-align:center;transform:translateX(-50%);pointer-events:none}
.tour-captions[hidden]{display:none}

@media(max-width:700px){
  .tour-active .director-console{bottom:10px;width:calc(100vw - 20px);height:58px;padding:6px;gap:5px;border-radius:18px}
  .tour-active .mode-switch{grid-template-columns:42px 44px;flex-basis:86px;width:86px;height:46px}
  .tour-active .mode-switch button{height:46px;font-size:7px}
  .tour-active .mode-switch [data-mode="listen"] svg{width:16px;height:16px}
  .tour-active .tour-transport{padding:0 8px}
  .tour-active .tour-transport label{height:46px;grid-template-columns:minmax(78px,1fr) 44px;gap:7px}
  .tour-active .tour-transport label>span{display:none}
  .tour-active .tour-transport output{min-width:44px;font-size:7px}
  .tour-active .sound-orbit{flex-basis:46px;width:46px;height:46px;border-radius:12px}
  .tour-captions{bottom:78px;max-width:calc(100vw - 28px);padding:8px 12px;font-size:12px}
}

@media(prefers-reduced-motion:reduce){.tour-transport{transition:none}}