.mirror-mosaic {
  --mosaic-columns: 8;
  --mosaic-rows: 3;
  --mosaic-gap: clamp(3px, .5vw, 9px);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #050604;
  border-block: 1px solid rgba(190, 155, 83, .2);
}

.mirror-mosaic::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 50% 48%, #6e512522, transparent 70%);
  pointer-events: none;
}

.mosaic-anchor {
  position: absolute;
  top: 0;
  scroll-margin-top: -110px;
}

.site-header.over-mosaic {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  text-shadow: 0 2px 12px #000;
}

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(var(--mosaic-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--mosaic-rows), minmax(0, 1fr));
  gap: var(--mosaic-gap);
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding: var(--mosaic-gap);
}

.mosaic-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  cursor: zoom-in;
  touch-action: manipulation;
}

.mosaic-card:focus-visible {
  z-index: 1;
  outline: 2px solid #cfb277;
  outline-offset: -2px;
}

.mosaic-card-turn {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: mirror-turn var(--mosaic-duration, 10s) cubic-bezier(.46, 0, .25, 1) infinite;
  animation-delay: var(--mosaic-delay, 0s);
  animation-play-state: paused;
}

.mirror-mosaic[data-running="true"] .mosaic-card-turn {
  animation-play-state: running;
}

.mosaic-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(0deg) translateZ(.1px);
}

.mosaic-face-front {
  transform: rotateY(180deg) translateZ(.1px);
}

.mosaic-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(.85) brightness(.94);
  user-select: none;
  -webkit-user-drag: none;
}

.mosaic-motion {
  position: absolute;
  z-index: 2;
  bottom: clamp(14px, 2vw, 25px);
  right: clamp(14px, 2vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid #b998615c;
  background: #090a08e6;
  color: #e2d3b5;
  font-size: 9px;
  letter-spacing: 1px;
  line-height: 1.3;
  backdrop-filter: blur(8px);
}

.mosaic-motion::before {
  content: "Ⅱ";
  font-size: 12px;
  color: #c3a36b;
  letter-spacing: 0;
}

.mosaic-motion[aria-pressed="true"]::before {
  content: "▷";
}

.mosaic-motion:hover {
  border-color: #b99861b3;
  background: #14150fee;
}

.mosaic-motion:focus-visible {
  outline: 2px solid #cfb277;
  outline-offset: 5px;
}

.mosaic-hint {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 18px 20px;
  background: #050604;
  color: #d4c7ae;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1.5;
  text-align: center;
}

.mosaic-viewer-art {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.mosaic-viewer {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 64px clamp(16px, 3vw, 42px) 18px;
  overflow: hidden;
  border: 0;
  background: #050604;
  color: #e7e1cf;
}

.mosaic-viewer[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 24px;
}

.mosaic-viewer::backdrop { background: #050604f5; }
.mosaic-viewer-art { grid-column: 1 / -1; }

.mosaic-viewer-caption h2 {
  margin: 0;
  color: #dfd1b6;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.mosaic-viewer-caption p {
  margin: 6px 0 0;
  color: #a6a797;
  font-size: 10px;
  line-height: 1.4;
}

.mosaic-viewer button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #b998615c;
  border-radius: 0;
  background: #090a08;
  color: #e2d3b5;
}

.mosaic-viewer button:hover {
  border-color: #b99861b3;
  background: #14150f;
}

.mosaic-viewer button:focus-visible {
  outline: 2px solid #cfb277;
  outline-offset: 4px;
}

.mosaic-viewer button:disabled { opacity: .35; cursor: default; }

.mosaic-viewer-close {
  position: absolute;
  top: 12px;
  right: clamp(16px, 3vw, 42px);
  padding: 0 15px;
  font-size: 11px;
  letter-spacing: .6px;
}

.mosaic-viewer-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.mosaic-viewer-navigation button { font-size: 22px; }
.mosaic-viewer-navigation span {
  min-width: 48px;
  color: #bda77e;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}

@keyframes mirror-turn {
  0%, 23% { transform: rotateY(0deg); }
  34%, 67% { transform: rotateY(180deg); }
  78%, 100% { transform: rotateY(360deg); }
}

@media (max-width: 700px) {
  .mosaic-anchor { scroll-margin-top: -95px; }
  .mirror-mosaic { --mosaic-gap: 3px; }
  .mosaic-motion { font-size: 8px; padding: 10px 12px; }
  .mosaic-viewer[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 12px; }
  .mosaic-viewer-art { grid-column: 1; }
  .mosaic-viewer-caption { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mirror-mosaic[data-motion-enabled="false"] .mosaic-card-turn {
    animation: none;
    transform: rotateY(var(--mosaic-still-angle, 0deg));
  }
}