.mlw-window {
  --mlw-noise-opacity: 0.16;
  position: fixed;
  z-index: var(--mlw-z-index, 2147481200);
  width: var(--mlw-width, 52vw);
  height: var(--mlw-height, 52vh);
  left: var(--mlw-left, 24px);
  top: var(--mlw-top, 24px);
  overflow: hidden;
  border: 1px solid rgba(9, 10, 10, 0.9);
  border-radius: 5px;
  background: #030404;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 0 44px rgba(0, 0, 0, 0.62);
  pointer-events: none;
  isolation: isolate;
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.985);
  animation: mlw-window-in 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mlw-window::before,
.mlw-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

.mlw-window::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%, rgba(0, 0, 0, 0.34)),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.055) 0,
      rgba(255, 255, 255, 0.055) 1px,
      rgba(0, 0, 0, 0.13) 2px,
      rgba(0, 0, 0, 0.13) 5px
    );
  mix-blend-mode: soft-light;
}

.mlw-window::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(0, 0, 0, 0.32) 67%, rgba(0, 0, 0, 0.64)),
    linear-gradient(90deg, rgba(255, 20, 110, 0.09), rgba(30, 230, 210, 0.07));
  opacity: 0.56;
  mix-blend-mode: screen;
}

.mlw-window.is-frozen {
  animation-play-state: paused;
}

.mlw-window.is-fading {
  animation: mlw-window-out 900ms ease forwards;
}

.mlw-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.055), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.28)),
    #040505;
  perspective: 980px;
  perspective-origin: 50% 50%;
}

.mlw-tunnel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.mlw-pane {
  --mlw-depth: 0;
  --mlw-pane-scale: calc(1 - (var(--mlw-depth) * 0.036));
  position: absolute;
  inset: clamp(12px, 3.2vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(229, 241, 230, calc(0.24 - (var(--mlw-depth) * 0.006)));
  border-radius: 4px;
  background: #060707;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.38),
    0 0 calc(18px - (var(--mlw-depth) * 0.35px)) rgba(255, 255, 255, 0.08),
    inset 0 0 22px rgba(0, 0, 0, 0.4);
  opacity: calc(0.96 - (var(--mlw-depth) * 0.027));
  transform:
    translate3d(
      calc(var(--mlw-depth) * 1.1%),
      calc(var(--mlw-depth) * 0.72%),
      calc(var(--mlw-depth) * -42px)
    )
    scale(var(--mlw-pane-scale));
  transform-origin: 50% 50%;
  animation:
    mlw-pane-rush 740ms cubic-bezier(0.7, 0, 0.96, 0.38) infinite,
    mlw-pane-flicker 118ms steps(2, end) infinite;
  animation-delay: var(--mlw-pane-delay, 0ms), var(--mlw-pane-delay, 0ms);
}

.mlw-pane::before,
.mlw-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.mlw-pane::before {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.42);
}

.mlw-pane::after {
  background:
    linear-gradient(90deg, rgba(255, 0, 120, 0.12), transparent 24%, transparent 76%, rgba(0, 255, 220, 0.12)),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(255, 255, 255, 0.045) 8px, transparent 10px);
  opacity: 0.46;
  mix-blend-mode: screen;
}

.mlw-pane.is-stopped {
  animation-play-state: paused;
  filter: contrast(1.22) brightness(0.82) saturate(0.72);
}

.mlw-pane.is-stopped::before {
  border-color: rgba(255, 255, 255, 0.21);
}

.mlw-capture {
  position: absolute;
  left: var(--mlw-capture-left, 0);
  top: var(--mlw-capture-top, 0);
  width: var(--mlw-capture-width, 100vw);
  min-height: var(--mlw-capture-height, 100vh);
  transform: scale(var(--mlw-capture-scale, 0.35));
  transform-origin: 0 0;
  filter: saturate(0.78) contrast(1.14) brightness(0.82) blur(0.16px);
  opacity: 0.92;
  pointer-events: none !important;
  user-select: none !important;
}

.mlw-pane:nth-child(3n) .mlw-capture {
  filter: saturate(0.9) contrast(1.26) brightness(0.72) hue-rotate(3deg);
}

.mlw-pane:nth-child(4n) .mlw-capture {
  filter: saturate(0.66) contrast(1.34) brightness(0.88) hue-rotate(-4deg);
}

.mlw-capture *,
.mlw-capture {
  pointer-events: none !important;
}

.mlw-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  padding: 12px;
  opacity: 0.72;
}

.mlw-fallback span {
  display: block;
  min-height: 12px;
  background: var(--mlw-swatch, rgba(255, 255, 255, 0.16));
  filter: saturate(0.8);
}

.mlw-text-fragment {
  position: absolute;
  right: clamp(16px, 3.5vw, 38px);
  bottom: clamp(14px, 3vw, 30px);
  max-width: 72%;
  color: rgba(238, 244, 237, 0.72);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 7;
}

.mlw-noise,
.mlw-skip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.mlw-noise {
  opacity: var(--mlw-noise-opacity);
  background-image:
    repeating-radial-gradient(circle at 18% 32%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  animation: mlw-noise-step 620ms steps(2, end) infinite;
}

.mlw-skip {
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent),
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.48) 46%, transparent 48%);
  transform: translateX(-22%);
}

.mlw-window[data-phase="1"] .mlw-pane {
  animation-duration: 1280ms, 180ms;
}

.mlw-window[data-phase="2"] .mlw-pane {
  animation-duration: 960ms, 138ms;
}

.mlw-window[data-phase="3"] .mlw-pane {
  animation-duration: 690ms, 104ms;
}

.mlw-window[data-phase="4"] .mlw-pane {
  animation-duration: 460ms, 78ms;
}

.mlw-window[data-phase="5"] .mlw-pane {
  animation-duration: 280ms, 54ms;
}

.mlw-window[data-phase="6"] .mlw-pane {
  animation-duration: 142ms, 34ms;
}

.mlw-window[data-phase="3"] .mlw-skip,
.mlw-window[data-phase="4"] .mlw-skip,
.mlw-window[data-phase="5"] .mlw-skip,
.mlw-window[data-phase="6"] .mlw-skip {
  opacity: 0.38;
  animation: mlw-skip-sweep 260ms steps(2, end) infinite;
}

.mlw-window[data-phase="5"],
.mlw-window[data-phase="6"] {
  --mlw-noise-opacity: 0.36;
}

.mlw-window.is-frozen .mlw-noise,
.mlw-window.is-frozen .mlw-skip {
  animation-play-state: paused;
}

@keyframes mlw-window-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mlw-window-out {
  to {
    opacity: 0;
    transform: translate3d(0, -5px, 0) scale(0.992);
    filter: blur(0.8px);
  }
}

@keyframes mlw-pane-rush {
  0% {
    transform:
      translate3d(
        calc(var(--mlw-depth) * 1.1%),
        calc(var(--mlw-depth) * 0.72%),
        calc(var(--mlw-depth) * -42px)
      )
      scale(calc(1 - (var(--mlw-depth) * 0.036)));
  }
  64% {
    transform:
      translate3d(
        calc((var(--mlw-depth) * 0.45%) - 2.2%),
        calc((var(--mlw-depth) * 0.3%) + 1.4%),
        calc((var(--mlw-depth) * -64px) - 230px)
      )
      scale(calc(0.78 - (var(--mlw-depth) * 0.026)));
  }
  100% {
    transform:
      translate3d(
        calc((var(--mlw-depth) * 1.36%) + 3.4%),
        calc((var(--mlw-depth) * 0.86%) - 2.6%),
        calc((var(--mlw-depth) * -24px) + 180px)
      )
      scale(calc(1.18 - (var(--mlw-depth) * 0.026)));
  }
}

@keyframes mlw-pane-flicker {
  50% {
    opacity: calc(0.72 - (var(--mlw-depth) * 0.018));
    filter: contrast(1.28) brightness(0.78);
  }
}

@keyframes mlw-noise-step {
  50% {
    transform: translate3d(3px, -2px, 0);
  }
}

@keyframes mlw-skip-sweep {
  to {
    transform: translateX(26%);
  }
}

@media (max-width: 640px) {
  .mlw-window {
    border-radius: 4px;
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.32),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  .mlw-pane {
    inset: 12px;
  }

  .mlw-text-fragment {
    max-width: 78%;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mlw-window,
  .mlw-pane,
  .mlw-noise,
  .mlw-skip {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}