.case-viewer { background: #1c1c1c; }
.case-viewer__main { position: relative; display: block; width: 100%; min-height: 260px; height: min(75svh, 850px); color: #fff; background: #161616; }
.case-viewer__main img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.case-viewer__main:focus-visible, .case-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.case-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 16px; color: rgba(255,255,255,.7); font-size: 13px; }
.case-viewer__controls { display: flex; align-items: center; gap: 14px; color: #fff; white-space: nowrap; }
.case-viewer__controls button, .case-viewer__scroll { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; color: #fff; background: transparent; font: inherit; font-size: 20px; cursor: pointer; }
.case-viewer__controls button:hover, .case-viewer__scroll:hover { background: rgba(255,255,255,.15); }
.case-viewer__strip { display: flex; align-items: center; gap: 10px; padding: 0 16px 16px; }
.case-viewer__thumbs { display: flex; flex: 1; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) transparent; scroll-snap-type: x proximity; }
.case-viewer__thumb { display: block; position: relative; flex: 0 0 clamp(88px, 9vw, 132px); aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 2px solid transparent; background: #343434; cursor: pointer; scroll-snap-align: start; }
.case-viewer__thumb[aria-pressed="true"] { border-color: #fff; }
.case-viewer__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.case-viewer__thumb[aria-pressed="true"] img, .case-viewer__thumb:hover img { opacity: 1; }
@media (max-width: 760px) {
  .case-viewer__main { height: min(62svh, 650px); }
  .case-viewer__toolbar { padding: 10px; }
  .case-viewer__hint, .case-viewer__scroll { display: none; }
  .case-viewer__strip { padding: 0 10px 10px; }
  .case-viewer__thumb { flex-basis: 90px; }
}