.image-viewer-target { cursor: zoom-in; }
.image-viewer-target:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

dialog.image-viewer {
  position: fixed;
  inset: 0;
  width: min(82vw, 80rem);
  max-height: 88vh;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  color: #f4f8ff;
  background: transparent;
}
.image-viewer::backdrop {
  background: rgb(3 8 18 / .76);
  backdrop-filter: blur(8px);
}
body:has(.image-viewer[open]) { overflow: hidden; }
.image-viewer figure {
  position: relative;
  margin: 0;
  border: 1px solid #ffffff35;
  border-radius: 14px;
  background: #0c1421;
  box-shadow: 0 12px 50px #0009;
}
.image-viewer img {
  display: block;
  width: 100%;
  height: 74vh;
  height: 74dvh;
  margin-inline: auto;
  border-radius: 13px;
  object-fit: contain;
}
.image-viewer button {
  position: absolute;
  z-index: 1;
  top: .65rem;
  right: .65rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ffffff60;
  border-radius: 50%;
  color: #fff;
  background: #0a1423eb;
  font: 1.7rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.image-viewer button:hover { background: #243550; }
.image-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.image-viewer figcaption { padding: .55rem 1rem; text-align: center; font-size: .86rem; }
@media (max-width: 600px) {
  dialog.image-viewer { width: 92vw; }
  .image-viewer img { height: 66vh; height: 66dvh; }
}

.course-art-switcher { position:relative; isolation:isolate; overflow:hidden; aspect-ratio:16/9; border-radius:18px; background:#101827; perspective:900px }
.course-art-switcher > img { display:block; width:100%; height:100%; object-fit:contain; border:0; border-radius:0 }
.course-art-switcher > .course-art-incoming { position:absolute; inset:0; z-index:1; pointer-events:none }
.course-art-switcher > .course-art-side { position:absolute; inset-block:0; z-index:2; width:35%; padding:0 12px; margin:0; border:0; border-radius:0; background:transparent; color:white; font:38px/1 system-ui; cursor:pointer; opacity:.65 }
.course-art-switcher > .course-art-left { left:0; text-align:left }
.course-art-switcher > .course-art-right { right:0; text-align:right }
.course-art-switcher > .course-art-side:hover, .course-art-switcher > .course-art-side:focus-visible { opacity:1; background:linear-gradient(90deg,#0005,transparent) }
.course-art-switcher > .course-art-right:hover, .course-art-switcher > .course-art-right:focus-visible { background:linear-gradient(270deg,#0005,transparent) }
.course-art-switcher > .course-art-side:focus-visible { outline:2px solid #8de5dc; outline-offset:-4px }