html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.crt-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.desktop-frame {
  display: block;
  width: 100%;
  height: 100%;
}

.crt-surface {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.crt-surface.is-active {
  display: block;
}

.desktop-frame {
  border: 0;
  background: #c0c0c0;
}

body.crt-enabled .crt-screen {
  inset: var(--crt-screen-inset-y) var(--crt-screen-inset-x);
  border-radius: var(--crt-screen-radius-x) / var(--crt-screen-radius-y);
}

body.crt-enabled .desktop-frame {
  width: 100%;
  height: 100%;
  filter: contrast(1.02) saturate(0.9) brightness(1.08);
}

body.crt-optical-fallback {
  --crt-scanline-opacity: 0.105;
  --crt-mask-opacity: 0.032;
  --crt-vignette-opacity: 0.48;
  --crt-vignette-mid-opacity: 0.17;
  --crt-neon-cyan: rgba(0, 238, 255, 0.17);
  --crt-neon-magenta: rgba(255, 0, 222, 0.15);
}

body.crt-optical-fallback.crt-enabled .crt-screen {
  box-shadow:
    inset 0 0 2px rgba(255, 255, 255, 0.7),
    inset 0 0 28px rgba(255, 255, 255, 0.14),
    inset 0 0 86px rgba(0, 0, 0, 0.3);
}

body.crt-optical-fallback.crt-enabled .desktop-frame {
  filter: none;
}

/* WebKit cannot geometrically displace a live HTML frame with an SVG filter.
   Build the lens out of composited paint-only layers instead: this keeps every
   window interactive and in the same stacking context while giving the glass
   a visibly convex edge, RGB fringe and phosphor texture. */
body.crt-optical-fallback.crt-enabled .crt-overlay {
  border: 2px solid #e2e6e5;
  box-sizing: border-box;
}

body.crt-optical-fallback.crt-enabled .crt-overlay::after {
  background:
    radial-gradient(ellipse at 50% -18%, rgba(255, 255, 255, 0.16), transparent 43%),
    radial-gradient(ellipse at 50% 118%, rgba(255, 255, 255, 0.075), transparent 39%),
    radial-gradient(ellipse at -7% 50%, rgba(0, 238, 255, 0.15), transparent 24%),
    radial-gradient(ellipse at 107% 50%, rgba(255, 0, 222, 0.14), transparent 24%),
    radial-gradient(ellipse at 0 0, rgba(0, 0, 0, 0.4), transparent 30%),
    radial-gradient(ellipse at 100% 0, rgba(0, 0, 0, 0.4), transparent 30%),
    radial-gradient(ellipse at 0 100%, rgba(0, 0, 0, 0.46), transparent 32%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.46), transparent 32%),
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(0, 0, 0, var(--crt-vignette-mid-opacity)) 75%,
      rgba(0, 0, 0, var(--crt-vignette-opacity)) 100%
    );
  box-shadow:
    inset 0 0 3px rgba(255, 255, 255, 0.72),
    inset 12px 0 34px rgba(0, 238, 255, 0.09),
    inset -12px 0 34px rgba(255, 0, 222, 0.085),
    inset 0 0 68px rgba(0, 0, 0, 0.36);
}

body:not(.crt-enabled) .crt-overlay {
  display: none;
}

@media (max-width: 640px), (pointer: coarse) {
  body.crt-enabled .desktop-frame {
    filter: contrast(1.02) saturate(0.9) brightness(1.08);
  }

  body.crt-optical-fallback {
    --crt-scanline-opacity: 0.06;
    --crt-mask-opacity: 0.018;
    --crt-vignette-opacity: 0.25;
    --crt-vignette-mid-opacity: 0.075;
    --crt-neon-cyan: rgba(0, 238, 255, 0.08);
    --crt-neon-magenta: rgba(255, 0, 222, 0.07);
  }

  body.crt-optical-fallback.crt-enabled .desktop-frame {
    filter: none;
  }

  body.crt-optical-fallback.crt-enabled .crt-screen {
    box-shadow:
      inset 0 0 1px rgba(255, 255, 255, 0.55),
      inset 0 0 32px rgba(0, 0, 0, 0.16);
  }

  body.crt-optical-fallback.crt-enabled .crt-overlay {
    border-width: 1px;
  }

  body.crt-optical-fallback.crt-enabled .crt-overlay::after {
    opacity: 0.62;
  }
}