:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { font: 14px/1.4 system-ui, sans-serif; color: #302d28; background: #f2f0eb; }
.tour { display: flex; width: 100%; height: 100%; min-height: 360px; overflow: hidden; }
.tour__scenes { display: flex; flex-direction: column; gap: 5px; width: 220px; padding: 15px 10px; overflow-y: auto; background: #f2f0eb; }
.tour__label { margin: 0 5px 8px; color: #655f55; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tour__scenes button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 53px; padding: 5px; border: 1px solid transparent; border-radius: 7px; color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.tour__scenes button:hover { background: #e5e0d5; }
.tour__scenes button[aria-pressed="true"] { border-color: #b7a27d; background: #fff; }
.tour__scenes button:focus-visible { outline: 3px solid #866442; outline-offset: 2px; }
.tour__scenes img { flex: none; width: 64px; height: 40px; border-radius: 4px; object-fit: cover; }
.tour__panorama { flex: 1; min-width: 0; background: #24221e; }
.tour__noscript { position: absolute; top: 20px; right: 20px; padding: 12px; color: #fff; background: #24221e; }
@media (max-width: 700px) {
  .tour { flex-direction: column-reverse; }
  .tour__scenes { flex-direction: row; flex: none; align-items: stretch; gap: 5px; width: 100%; height: 106px; padding: 6px; overflow-x: auto; overflow-y: hidden; }
  .tour__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .tour__scenes button { flex: none; flex-direction: column; align-items: start; gap: 2px; width: 126px; min-height: 0; font-size: 12px; line-height: 1.15; }
  .tour__scenes img { width: 100%; height: 38px; }
}