:is(.sidebar, .mobile-nav) nav a {
  position: relative;
  padding-inline-end: 28px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

:is(.sidebar, .mobile-nav) nav a::after {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 4px);
  inset-inline-end: 12px;
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  color: #c9aaff;
  opacity: 0;
  transform: translateX(-4px) rotate(45deg);
  transition: opacity .18s ease, transform .18s ease;
}

:is(.sidebar, .mobile-nav) nav a:is([aria-current="page"], [data-section-active]) {
  background-color: #443067;
  box-shadow: inset 2px 0 #c9aaff;
  color: #fff;
}

:is(.sidebar, .mobile-nav) nav a:focus-visible,
.mobile-nav summary:focus-visible,
.show-top a:focus-visible,
.showroom-explore a:focus-visible,
:is(.show-card, .hero-screen, .product-shot a):focus-visible,
.shot-dialog button:focus-visible {
  outline: 2px solid #d9c6ff;
  outline-offset: 2px;
}

:is(.sidebar, .mobile-nav) nav a:focus-visible {
  outline-offset: -2px;
  color: #fff;
  text-decoration: none;
}

:is(.sidebar, .mobile-nav) nav a:focus-visible::after {
  opacity: 1;
  transform: rotate(45deg);
}

.mobile-nav summary {
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.mobile-nav[open] summary {
  border-color: #a584db;
  background-color: #342455;
}

.show-top .top-cta {
  transition: background-color .18s ease;
}

.show-card,
.hero-screen,
.showroom-explore a,
.product-shot .shot-link {
  transition: border-color .2s ease, box-shadow .22s ease, transform .22s ease;
}

:is(.show-card, .hero-screen, .product-shot .shot-link) img {
  transition: transform .26s ease;
}

.hero-screen {
  --glow: #c3a0ff;
  overflow: hidden;
}

.show-card .card-arrow,
.showroom-explore a > span:last-child {
  transition: transform .22s ease, background-color .22s ease, color .22s ease;
}

.product-shot .shot-link[aria-haspopup="dialog"] {
  position: relative;
  cursor: zoom-in;
}

.shot-zoom-icon {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  inline-size: 35px;
  block-size: 35px;
  border: 1px solid #b596ef;
  border-radius: 8px;
  background: #171127f2;
  color: #fff;
  transition: background-color .2s ease, color .2s ease;
  pointer-events: none;
}

.shot-zoom-icon svg {
  inline-size: 19px;
  block-size: 19px;
}

@media (hover: hover) and (pointer: fine) {
  :is(.sidebar, .mobile-nav) nav a:hover {
    background-color: #3d2b60;
    border-color: #8b68bc;
    color: #fff;
    text-decoration: none;
  }

  :is(.sidebar, .mobile-nav) nav a:hover::after {
    opacity: 1;
    transform: rotate(45deg);
  }

  .mobile-nav summary:hover {
    background-color: #342455;
    border-color: #8b68bc;
  }

  .show-top .top-cta:hover {
    background-color: #d2ff9e;
  }

  .shelf-head a:hover {
    color: #eee1ff;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  :is(.show-card, .hero-screen):hover {
    border-color: color-mix(in srgb, var(--glow) 60%, #f4eaff);
    box-shadow: 0 10px 26px #09051580, 0 0 20px color-mix(in srgb, var(--glow) 23%, transparent);
    transform: translateY(-4px);
  }

  :is(.show-card, .hero-screen):hover img {
    transform: scale(1.035);
  }

  .show-card:hover .card-arrow {
    background-color: #d9c6ff;
    color: #201632;
    transform: translate(2px, -2px);
  }

  .showroom-explore a:hover > span:last-child {
    transform: translate(2px, -2px);
  }

  .product-shot .shot-link[aria-haspopup="dialog"]:hover {
    border-color: #d9c6ff;
  }

  .product-shot .shot-link[aria-haspopup="dialog"]:hover img {
    transform: scale(1.025);
  }

  .product-shot .shot-link:hover .shot-zoom-icon,
  .product-shot .shot-link:focus-visible .shot-zoom-icon {
    background-color: #d9c6ff;
    color: #201632;
  }
}

:is(.show-card, .hero-screen):active {
  transform: scale(.986);
}

.shot-dialog {
  inline-size: min(94%, 78rem);
  max-inline-size: none;
  max-block-size: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid #9c7bd1;
  border-radius: 16px;
  background: #1b142d;
  color: #f8f6ff;
  box-shadow: 0 18px 70px #000a;
}

.shot-dialog::backdrop {
  background: #08050ee6;
}

html:has(.shot-dialog[open]) {
  overflow: hidden;
}

.shot-dialog[open] {
  animation: shot-appear .22s ease-out both;
}

.shot-dialog__panel {
  padding: clamp(8px, 2vw, 16px);
}

.shot-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block-end: 9px;
}

.shot-dialog__head h2 {
  font-size: clamp(18px, 2.5vw, 23px);
  padding-inline-start: 4px;
}

.shot-dialog__head button {
  min-block-size: 44px;
  padding: 6px 13px;
  border: 1px solid #b596ef;
  border-radius: 8px;
  background: #362658;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.shot-dialog__head button:hover {
  background: #4b3673;
}

.shot-dialog__image {
  display: block;
  inline-size: 100%;
  max-block-size: calc(100dvh - 124px);
  object-fit: contain;
  border: 1px solid #ffffff32;
  border-radius: 9px;
  background: #0c0c10;
}

.shot-dialog--game { inline-size:min(94%, 52rem); }
.shot-dialog--game .shot-dialog__head { align-items:flex-start; }
.shot-dialog--game .shot-dialog__head button { flex-shrink:0; }
.shot-dialog--game .shot-dialog__image { max-block-size:min(56dvh, 31rem); }
.shot-dialog__details { padding:14px 5px 5px; }
.shot-dialog__details p { margin:0 0 9px; }
.shot-dialog__source { display:inline-block; }

@keyframes shot-appear {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.sidebar, .mobile-nav) nav a,
  :is(.sidebar, .mobile-nav) nav a::after,
  .show-top .top-cta,
  :is(.show-card, .hero-screen, .showroom-explore a, .product-shot .shot-link),
  :is(.show-card, .hero-screen, .product-shot .shot-link) img,
  .show-card .card-arrow,
  .showroom-explore a > span:last-child,
  .shot-zoom-icon {
    transition: none;
  }

  :is(.show-card, .hero-screen):hover,
  :is(.show-card, .hero-screen):active,
  :is(.show-card, .hero-screen, .product-shot .shot-link[aria-haspopup="dialog"]):hover img,
  .show-card:hover .card-arrow,
  .showroom-explore a:hover > span:last-child {
    transform: none;
  }

  .shot-dialog[open] {
    animation: none;
  }
}