#vr-toolbar #gallery-auto-tour { margin-left: 6px; color: var(--paper); background: var(--ink); border: 1px solid #ffffff40; border-radius: 22px; padding-inline: 18px; }
#gallery-auto-tour > span { margin-right: 5px; font-size: 16px; }
#auto-tour-player { position: fixed; z-index: 8; bottom: max(15px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(540px, calc(100vw - 32px)); box-sizing: border-box; padding: 17px 22px 0; color: var(--paper); background: #173138f5; border: 1px solid #ffffff30; border-radius: 14px; box-shadow: 0 12px 40px #0e242633; }
#auto-tour-player[hidden] { display: none; }
.tour-heading { display: flex; justify-content: space-between; gap: 20px; font-size: 9px; letter-spacing: .14em; color: #c4d2c9; }
#auto-tour-count { font-variant-numeric: tabular-nums; }
.tour-body { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 9px; }
.tour-work { min-width: 0; }
#auto-tour-title { font: 400 25px/1.15 var(--display); letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
#auto-tour-artist { font-size: 11px; margin: 5px 0 0; color: #c4d2c9; }
.tour-actions { display: flex; gap: 5px; flex-shrink: 0; }
.tour-actions button { min-width: 44px; min-height: 44px; padding: 9px 11px; border: 1px solid #ffffff35; border-radius: 22px; color: var(--paper); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.tour-actions #auto-tour-toggle { background: var(--paper); color: var(--ink); border-color: var(--paper); min-width: 68px; }
.tour-actions button:hover { border-color: var(--paper); }
.tour-actions button:disabled { opacity: .5; cursor: default; }
#auto-tour-message { margin: 12px 0; min-height: 16px; font-size: 10px; line-height: 1.5; color: #c4d2c9; }
.tour-route { display: flex; gap: 5px; height: 3px; margin: 0 -7px; }
.tour-route i { flex: 1; background: #ffffff20; }
.tour-route i[data-current] { background: #cdb98d; }
body[data-auto-tour] #gallery-auto-tour { display: none; }
#auto-tour-player :focus-visible, #gallery-auto-tour:focus-visible { outline: 3px solid #cdb98d; outline-offset: 3px; }
@media (max-width: 1120px) { body[data-auto-tour] #vr-toolbar { bottom: 190px; } }
@media (max-width: 520px) {
  #auto-tour-player { padding: 15px 17px 0; }
  .tour-body { align-items: flex-start; flex-direction: column; gap: 13px; }
  .tour-actions { width: 100%; }
  .tour-actions button { flex: 1; }
  #auto-tour-title { font-size: 24px; }
  body[data-auto-tour] #vr-toolbar { bottom: 254px; }
  #vr-toolbar #gallery-auto-tour { padding-inline: 12px; }
}
