.mirror-viewport {
  opacity: var(--mirror-live);
  transition: opacity 360ms ease;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #030407;
}

.mirror-flip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scaleY(-1);
  transform-origin: center center;
  opacity: .62;
  filter: blur(1.05px) saturate(.76) contrast(1.16) brightness(.74);
}

.mirror-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  will-change: transform;
  pointer-events: none;
}

.mirror-content main {
  padding-top: 0;
}

.mirror-cursor {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  pointer-events: none;
  opacity: var(--cursor-opacity, 0);
  will-change: left, top, filter, opacity;
  transform-origin: 5px 29px;
  transform: translate(-5px, -29px);
  filter:
    blur(var(--cursor-blur, 2px))
    brightness(var(--cursor-brightness, .58))
    drop-shadow(0 0 var(--cursor-glow, 3px) rgba(255,255,255,.45));
}

.mirror-cursor.is-pointer {
  transform-origin: 12px 29px;
  transform: translate(-12px, -29px);
}

.mirror-cursor.is-pointer .cursor-arrow {
  display: none;
}

.mirror-cursor.is-pointer .cursor-hand {
  display: block;
}

.mirror-cursor.is-pointer .mirror-cursor-probe {
  left: 12px !important;
  top: 29px !important;
}

.mirror-cursor.visible {
  opacity: calc(var(--cursor-opacity, .45) * var(--mirror-live));
}

.mirror-cursor.touching {
  opacity: calc(.98 * var(--mirror-live));
  filter: blur(.02px) brightness(1.12) drop-shadow(0 0 14px rgba(255,255,255,.95));
}

.base-reflection {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,1);
  opacity: calc(var(--base-reflect-opacity, .95) * var(--mirror-live));
  filter: blur(var(--base-reflect-blur, .02px));
  transform: scaleY(-1) translateY(-1px);
  transform-origin: bottom center;
  pointer-events: none;
  mix-blend-mode: normal;
  text-shadow: 0 0 8px rgba(255,255,255,.5), 0 0 18px rgba(130,210,255,.35);
}

.base-reflection .brand-mini {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .16em;
}

.base-reflection nav {
  display: flex;
  gap: 14px;
}

.base-reflection nav span {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .95;
}

.base-reflection .mini-button {
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.mirror-haze {
  opacity: calc(.12 + (var(--mirror-live) * .88));
  transition: opacity 360ms ease;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(255,255,255,.42), transparent 24%, rgba(54,231,255,.12) 48%, transparent 74%),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.38), transparent 18%),
    linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.42));
  mix-blend-mode: screen;
  pointer-events: none;
}

.mirror-label {
  position: absolute;
  right: 12px;
  bottom: 5px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.48);
}


/* Mirror surface polish. */
.mirror-viewport {
  background:
    radial-gradient(circle at 50% 40%, rgba(54,231,255,.12), transparent 50%),
    linear-gradient(180deg, #020307, #05070b);
}

.mirror-flip {
  opacity: .68;
  filter: blur(.92px) saturate(.78) contrast(1.18) brightness(.70);
}

.mirror-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  opacity: .24;
  mix-blend-mode: screen;
}

.mirror-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,.36), transparent 18%, transparent 74%, rgba(54,231,255,.10)),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 16%);
  mix-blend-mode: screen;
  opacity: .64;
}

.mirror-haze {
  z-index: 18;
  background:
    linear-gradient(105deg, rgba(255,255,255,.38), transparent 22%, rgba(54,231,255,.14) 48%, transparent 76%),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(246,255,74,.15), transparent 14%),
    linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.45));
}

.base-reflection {
  z-index: 19;
}