/* Every visual rule is gated by html.crt-on. CRT off stays untouched. */
.crt-overlay,
.crt-object-overlay {
  display: none;
  pointer-events: none;
}

.crt-overlay { position: fixed; inset: 0; z-index: 2147482500; }
.crt-object-overlay { position: absolute; inset: 0; z-index: 90; }

html.crt-on[data-crt-scope="page"] .crt-overlay,
html.crt-on[data-crt-scope="objects"] .crt-object-overlay {
  display: block;
  overflow: hidden;
  background:
    radial-gradient(ellipse var(--crt-dome-size, 68%) var(--crt-dome-size-y, 58%) at center,
      rgb(var(--crt-glow-color, 142 226 255) / var(--crt-dome-intensity, .11)) 0,
      rgb(var(--crt-glow-color, 142 226 255) / var(--crt-dome-mid-intensity, .044)) 46%, transparent 100%),
    radial-gradient(circle at top left, rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-corner-intensity, .32)) 0, transparent var(--crt-corner-size, clamp(82px, 29vmin, 310px))),
    radial-gradient(circle at top right, rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-corner-intensity, .32)) 0, transparent var(--crt-corner-size, clamp(82px, 29vmin, 310px))),
    radial-gradient(circle at bottom left, rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-corner-intensity, .32)) 0, transparent var(--crt-corner-size, clamp(82px, 29vmin, 310px))),
    radial-gradient(circle at bottom right, rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-corner-intensity, .32)) 0, transparent var(--crt-corner-size, clamp(82px, 29vmin, 310px))),
    repeating-linear-gradient(to bottom,
      rgb(var(--crt-scanline-glow-color, 130 210 255) / var(--crt-scanline-glow-intensity, .04)) 0,
      transparent var(--crt-scanline-glow-end, .55px),
      transparent var(--crt-scanline-start, 2.65px),
      rgb(var(--crt-scanline-color, 0 0 0) / var(--crt-scanline-edge-intensity, .025)) var(--crt-scanline-edge-start, 2.94px),
      rgb(var(--crt-scanline-color, 0 0 0) / var(--crt-scanline-intensity, .075)) var(--crt-scanline-peak-start, 3.23px),
      rgb(var(--crt-scanline-color, 0 0 0) / var(--crt-scanline-intensity, .075)) var(--crt-scanline-peak-end, 3.42px),
      rgb(var(--crt-scanline-color, 0 0 0) / var(--crt-scanline-edge-intensity, .025)) var(--crt-scanline-edge-end, 3.71px),
      transparent var(--crt-scanline-cycle, 4px)),
    radial-gradient(ellipse at center,
      transparent var(--crt-vignette-start, 30%),
      rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-vignette-mid-intensity, .09)) var(--crt-vignette-mid, 67%),
      rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-vignette-intensity, .30)) 100%);
  box-shadow:
    inset 0 0 var(--crt-edge-size, clamp(60px, 21.5vmin, 230px)) rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-edge-intensity, .20)),
    inset 0 0 var(--crt-curvature-shadow-size, 104px) rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-curvature-shadow-intensity, .16)),
    inset 0 0 0 2px rgb(var(--crt-glow-color, 142 226 255) / var(--crt-curvature-highlight-intensity, .08));
  contain: paint;
}

/* Keep the page layer square so the mask below can fill the literal viewport
   corners outside its rounded inner screen. Object layers still clip as glass. */
html.crt-on[data-crt-scope="page"] .crt-overlay { border-radius: 0; }

/* A large outer shadow blacks out everything beyond a rounded screen contour.
   The inset shadow and fine highlight make that contour read as curved glass,
   rather than four unrelated dark spots floating in the viewport corners. */
html.crt-on[data-crt-scope="page"] .crt-overlay::before {
  position: absolute;
  z-index: 1;
  inset: var(--crt-tube-inset-y, 7px) var(--crt-tube-inset-x, 8px);
  border: 1px solid rgb(var(--crt-glow-color, 142 226 255) / var(--crt-tube-edge-glow-intensity, .1));
  border-radius: var(--crt-curvature-radius-x, clamp(36px, 8vmin, 86px)) / var(--crt-curvature-radius-y, clamp(26px, 5.76vmin, 62px));
  box-shadow:
    0 0 0 100vmax rgb(0 0 0 / var(--crt-tube-mask-intensity, .86)),
    inset 0 0 var(--crt-tube-inner-shadow-size, 48px) rgb(var(--crt-vignette-color, 3 6 20) / var(--crt-tube-inner-shadow-intensity, .34)),
    inset 0 0 0 1px rgb(var(--crt-glow-color, 142 226 255) / var(--crt-tube-edge-glow-soft-intensity, .055));
  content: "";
}

/* Keep background visible above and below every page shell, including below
   the foreground container at the end of a long scroll. Padding the shared
   page canvas leaves each shell's own margin and styling untouched. */
html.crt-on[data-crt-scope="page"] body {
  padding-block: var(--crt-shell-vertical-clearance, clamp(24px, 6vmin, 48px));
}

html.crt-on[data-crt-scope="objects"] .crt-object-overlay {
  border-radius: var(--crt-curvature-radius-x, clamp(36px, 8vmin, 86px)) / var(--crt-curvature-radius-y, clamp(26px, 5.76vmin, 62px));
}

html.crt-on[data-crt-scope="objects"] .crt-surface { position: relative; isolation: isolate; }

html.crt-on[data-crt-scope="page"] .crt-phosphor,
html.crt-on[data-crt-scope="objects"] .crt-surface .crt-phosphor,
html.crt-on[data-crt-scope="objects"] .crt-surface.crt-phosphor {
  filter:
    drop-shadow(var(--crt-rgb-negative-offset, -.55px) 0 rgb(var(--crt-rgb-red, 255 48 88) / var(--crt-rgb-intensity, .14)))
    drop-shadow(var(--crt-rgb-positive-offset, .55px) 0 rgb(var(--crt-rgb-blue, 48 211 255) / var(--crt-rgb-intensity, .14)))
    drop-shadow(0 0 var(--crt-glow-radius, 2.4px) rgb(var(--crt-glow-color, 142 226 255) / var(--crt-glow-intensity, .26)));
}

html.crt-on[data-crt-scope="page"] .crt-overlay::after,
html.crt-on[data-crt-scope="objects"] .crt-object-overlay::after {
  position: absolute;
  top: calc(0% - var(--crt-shimmer-band-height, 32%));
  right: 0;
  left: 0;
  height: var(--crt-shimmer-band-height, 32%);
  background:
    linear-gradient(to bottom,
      transparent calc(50% - var(--crt-shimmer-contrast-half-width, 36px)),
      rgb(var(--crt-scanline-color, 0 0 0) / var(--crt-shimmer-contrast-intensity, .018)) 50%,
      transparent calc(50% + var(--crt-shimmer-contrast-half-width, 36px))),
    linear-gradient(to bottom,
      transparent,
      rgb(var(--crt-glow-color, 142 226 255) / var(--crt-shimmer-intensity, .14)) 52%,
      transparent);
  content: "";
  animation: crt-refresh-shimmer var(--crt-shimmer-duration, 6500ms) linear infinite;
  will-change: transform;
}

@keyframes crt-refresh-shimmer { from { transform: translateY(-100%); } to { transform: translateY(590%); } }

/* Toggle-only tube startup and shutdown. The two black shutters reveal or
   conceal the live page from its center line; the remaining layers supply
   phosphor bloom, retrace noise, and the brief high-voltage flashes. */
.crt-transition,
.crt-transition > span {
  pointer-events: none;
}

.crt-transition {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: none;
  overflow: hidden;
  background: transparent;
  contain: strict;
  isolation: isolate;
}

html.crt-powering-on .crt-transition,
html.crt-powering-off .crt-transition {
  display: block;
}

.crt-transition__shade,
.crt-transition__noise,
.crt-transition__bloom,
.crt-transition__beam {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

.crt-transition__shade {
  z-index: 1;
  right: -3vw;
  left: -3vw;
  height: calc(50% + 2px);
  background:
    linear-gradient(to right, #000 0, #020307 48%, #000 100%);
  box-shadow: 0 0 22px 3px rgb(105 207 255 / .15);
}

.crt-transition__shade--top { top: -1px; transform-origin: center bottom; }
.crt-transition__shade--bottom { bottom: -1px; transform-origin: center top; }

.crt-transition__noise {
  z-index: 2;
  inset: -12%;
  opacity: 0;
  background:
    repeating-linear-gradient(to bottom,
      rgb(212 248 255 / .17) 0,
      rgb(212 248 255 / .17) 1px,
      transparent 1px,
      transparent 4px),
    repeating-linear-gradient(to right,
      rgb(255 42 92 / .055) 0,
      transparent 2px,
      rgb(45 218 255 / .065) 5px,
      transparent 8px),
    linear-gradient(115deg, transparent 18%, rgb(255 255 255 / .16) 50%, transparent 74%);
  background-position: 0 0, 0 0, -50vw 0;
  background-size: auto, auto, 58vw 100%;
  mix-blend-mode: screen;
  filter: contrast(1.35) saturate(1.2);
}

.crt-transition__noise::after {
  position: absolute;
  top: -28%;
  right: 0;
  left: 0;
  height: 18%;
  background: linear-gradient(to bottom,
    transparent,
    rgb(174 237 255 / .08) 24%,
    rgb(244 253 255 / .68) 50%,
    rgb(82 207 255 / .16) 63%,
    transparent);
  box-shadow: 0 0 45px rgb(89 210 255 / .18);
  content: "";
}

.crt-transition__bloom {
  z-index: 3;
  inset: -24%;
  opacity: 0;
  background:
    radial-gradient(ellipse 66% 7% at 50% 50%,
      rgb(255 255 255 / .98) 0,
      rgb(185 240 255 / .78) 14%,
      rgb(65 196 255 / .28) 48%,
      transparent 100%),
    radial-gradient(ellipse 42% 58% at 49.4% 50%,
      rgb(61 218 255 / .42), transparent 72%),
    radial-gradient(ellipse 38% 54% at 50.7% 50%,
      rgb(255 49 112 / .26), transparent 74%);
  mix-blend-mode: screen;
  filter: saturate(1.25);
}

.crt-transition__beam {
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 108vw;
  height: 2px;
  opacity: 0;
  background: rgb(247 254 255);
  box-shadow:
    0 0 2px 1px rgb(255 255 255),
    0 0 12px 4px rgb(181 239 255 / .95),
    0 0 42px 12px rgb(62 203 255 / .62),
    0 0 96px 28px rgb(255 38 104 / .16);
  transform: translate(-50%, -50%) scaleX(.04);
  transform-origin: center;
}

html.crt-powering-on .crt-transition {
  animation: crt-power-up-shell var(--crt-transition-duration, 7836ms) linear both;
}

html.crt-powering-on .crt-transition__shade--top {
  animation: crt-power-up-shade-top var(--crt-transition-duration, 7836ms) cubic-bezier(.42, 0, .2, 1) both;
}

html.crt-powering-on .crt-transition__shade--bottom {
  animation: crt-power-up-shade-bottom var(--crt-transition-duration, 7836ms) cubic-bezier(.42, 0, .2, 1) both;
}

html.crt-powering-on .crt-transition__noise {
  animation: crt-power-up-noise var(--crt-transition-duration, 7836ms) steps(2, jump-none) both;
}

html.crt-powering-on .crt-transition__noise::after {
  animation: crt-power-up-roll var(--crt-transition-duration, 7836ms) linear both;
}

html.crt-powering-on .crt-transition__bloom {
  animation: crt-power-up-bloom var(--crt-transition-duration, 7836ms) linear both;
}

html.crt-powering-on .crt-transition__beam {
  animation: crt-power-up-beam var(--crt-transition-duration, 7836ms) linear both;
}

html.crt-powering-off .crt-transition {
  animation: crt-power-down-shell var(--crt-transition-duration, 1042ms) linear both;
}

html.crt-powering-off .crt-transition__shade--top {
  animation: crt-power-down-shade-top var(--crt-transition-duration, 1042ms) cubic-bezier(.72, 0, .86, .42) both;
}

html.crt-powering-off .crt-transition__shade--bottom {
  animation: crt-power-down-shade-bottom var(--crt-transition-duration, 1042ms) cubic-bezier(.72, 0, .86, .42) both;
}

html.crt-powering-off .crt-transition__noise {
  animation: crt-power-down-noise var(--crt-transition-duration, 1042ms) steps(2, jump-none) both;
}

html.crt-powering-off .crt-transition__bloom {
  animation: crt-power-down-bloom var(--crt-transition-duration, 1042ms) linear both;
}

html.crt-powering-off .crt-transition__beam {
  animation: crt-power-down-beam var(--crt-transition-duration, 1042ms) linear both;
}

@keyframes crt-power-up-shell {
  0%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes crt-power-up-shade-top {
  0%, 24.5% { transform: translateY(0); }
  26.5% { transform: translateY(-2%); }
  29.5% { transform: translateY(-38%); }
  33%, 100% { transform: translateY(-103%); }
}

@keyframes crt-power-up-shade-bottom {
  0%, 24.5% { transform: translateY(0); }
  26.5% { transform: translateY(2%); }
  29.5% { transform: translateY(38%); }
  33%, 100% { transform: translateY(103%); }
}

@keyframes crt-power-up-beam {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.04) scaleY(.5); }
  1.2% { opacity: .22; transform: translate(-50%, -50%) scaleX(.22) scaleY(.7); }
  2.1% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(1.2); }
  3.1% { opacity: .22; transform: translate(-50%, -50%) scaleX(1) scaleY(.65); }
  5%, 23.5% { opacity: 0; transform: translate(-50%, -50%) scaleX(1) scaleY(.4); }
  24.6% { opacity: .24; transform: translate(-50%, -50%) scaleX(.12) scaleY(.7); }
  25.7% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(2.6); }
  27.8% { opacity: .86; transform: translate(-50%, -50%) scaleX(1) scaleY(1.35); }
  31% { opacity: .26; transform: translate(-50%, -50%) scaleX(1) scaleY(.8); }
  34%, 69.2% { opacity: 0; transform: translate(-50%, -50%) scaleX(1) scaleY(.55); }
  70.4% { opacity: .7; transform: translate(-50%, -50%) scaleX(1) scaleY(1.4); }
  71.8%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1) scaleY(.5); }
}

@keyframes crt-power-up-bloom {
  0% { opacity: 0; filter: brightness(1) saturate(1.1); }
  1.1% { opacity: .12; }
  2.1% { opacity: .78; filter: brightness(2.1) saturate(.72); }
  4.5%, 23.5% { opacity: 0; }
  25.3% { opacity: 1; filter: brightness(2.8) saturate(.5); }
  27.5% { opacity: .84; filter: brightness(1.7) saturate(1.15); }
  31% { opacity: .34; }
  36% { opacity: .1; }
  42% { opacity: .27; }
  48% { opacity: .07; }
  55% { opacity: .15; }
  66.5% { opacity: .05; }
  70.5% { opacity: .62; filter: brightness(1.75) saturate(.8); }
  73% { opacity: .12; filter: brightness(1.05) saturate(1.15); }
  83% { opacity: .07; }
  95% { opacity: .025; }
  100% { opacity: 0; }
}

@keyframes crt-power-up-noise {
  0% { opacity: .04; transform: translate3d(0, -1.2%, 0); }
  2% { opacity: .44; transform: translate3d(.35%, .5%, 0); }
  5%, 23% { opacity: .025; transform: translate3d(-.2%, -.25%, 0); }
  25.5% { opacity: .58; transform: translate3d(.4%, .8%, 0); }
  29% { opacity: .31; transform: translate3d(-.5%, -.4%, 0); }
  35% { opacity: .19; transform: translate3d(.3%, .15%, 0); }
  44% { opacity: .11; transform: translate3d(-.2%, .3%, 0); }
  57% { opacity: .075; transform: translate3d(.2%, -.2%, 0); }
  70.5% { opacity: .36; transform: translate3d(-.45%, .55%, 0); }
  75% { opacity: .08; transform: translate3d(.2%, -.1%, 0); }
  92% { opacity: .035; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes crt-power-up-roll {
  0%, 24% { transform: translateY(-120%); opacity: 0; }
  25% { opacity: .9; }
  42% { transform: translateY(760%); opacity: .18; }
  48% { transform: translateY(-120%); opacity: 0; }
  51% { opacity: .45; }
  69% { transform: translateY(760%); opacity: .08; }
  70% { transform: translateY(-120%); opacity: .58; }
  83% { transform: translateY(760%); opacity: 0; }
  100% { transform: translateY(760%); opacity: 0; }
}

@keyframes crt-power-down-shell {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes crt-power-down-shade-top {
  0%, 7% { transform: translateY(-103%); }
  13% { transform: translateY(-98%); }
  29% { transform: translateY(-14%); }
  36%, 100% { transform: translateY(0); }
}

@keyframes crt-power-down-shade-bottom {
  0%, 7% { transform: translateY(103%); }
  13% { transform: translateY(98%); }
  29% { transform: translateY(14%); }
  36%, 100% { transform: translateY(0); }
}

@keyframes crt-power-down-beam {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(1) scaleY(.7); }
  6% { opacity: .28; transform: translate(-50%, -50%) scaleX(1) scaleY(1); }
  11% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(2.4); }
  17% { opacity: .22; transform: translate(-50%, -50%) scaleX(1) scaleY(.8); }
  27% { opacity: .38; transform: translate(-50%, -50%) scaleX(1) scaleY(1.1); }
  34% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(2.2); }
  46% { opacity: .9; transform: translate(-50%, -50%) scaleX(.55) scaleY(2); }
  58% { opacity: .88; transform: translate(-50%, -50%) scaleX(.08) scaleY(2.4); }
  68% { opacity: .62; transform: translate(-50%, -50%) scaleX(.002) scaleY(2.6); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(.001) scaleY(.4); }
}

@keyframes crt-power-down-bloom {
  0% { opacity: .08; filter: brightness(1.1); }
  8% { opacity: .82; filter: brightness(2.25) saturate(.55); }
  16% { opacity: .16; }
  31% { opacity: .52; filter: brightness(1.6) saturate(.85); }
  41% { opacity: .15; }
  64% { opacity: .07; }
  82%, 100% { opacity: 0; }
}

@keyframes crt-power-down-noise {
  0% { opacity: .08; transform: translate3d(0, 0, 0); }
  8% { opacity: .34; transform: translate3d(.4%, -.3%, 0); }
  18% { opacity: .12; transform: translate3d(-.35%, .4%, 0); }
  31% { opacity: .42; transform: translate3d(.25%, -.5%, 0); }
  42% { opacity: .18; transform: translate3d(-.2%, .2%, 0); }
  63% { opacity: .045; transform: translate3d(0, 0, 0); }
  72%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html.crt-on[data-crt-scope="page"] .crt-overlay::after,
  html.crt-on[data-crt-scope="objects"] .crt-object-overlay::after { display: none; animation: none; }

  html.crt-powering-on .crt-transition,
  html.crt-powering-off .crt-transition { background: #000; }

  .crt-transition > span { display: none; }
}