/* All screen effects are static. Native text, links, and focus stay intact. */
:root {
  --crt-gutter: clamp(10px, 1.7vw, 28px);
  --crt-rim: clamp(6px, 0.85vw, 12px);
  background: #060806;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.crt-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.crt-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: var(--crt-gutter);
  padding: var(--crt-rim);
  border: 1px solid #262d25;
  border-radius: 48px / 42px;
  background: linear-gradient(145deg, #30372c 0%, #171c16 12%, #0b0f0a 55%, #232a20 100%);
  box-shadow:
    0 14px 36px #0009,
    0 1px 0 #59604a66 inset,
    0 -2px 3px #000c inset,
    0 0 28px #a0ce6908;
}

.crt-screen {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  min-width: 0;
  border-radius: 40px / 34px;
  background: #020502;
  overflow: clip;

}

.crt-screen #app {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
  background: radial-gradient(ellipse at 50% 42%, #111d10 0%, var(--bg) 72%);
  text-shadow: 0 0 2px #bcf58b45, 0 0 8px #a7e4781c;
}

html[data-crt-ready='true'] .crt-screen {
  clip-path: url(#crt-glass-shape);
}

html[data-crt-ready='true'] .crt-screen #app {
  filter: url(#crt-barrel);
}

.crt-screen .terminal {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 30px 42px 25px;
}

.crt-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 48%, #0206022b 77%, #000b 100%),
    linear-gradient(118deg, #d7ffd006 0%, transparent 26%, transparent 77%, #a2c69703 100%);
  box-shadow: inset 0 0 28px 7px #0009, inset 0 0 3px 2px #a7c18e12;
}

.crt-glass::before,
.crt-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.crt-glass::before {
  /* Fine, low-contrast scanlines and a faint phosphor-column texture. */
  background:
    repeating-linear-gradient(0deg, #0000 0px, #0000 2px, #0003 2px, #0003 3px),
    repeating-linear-gradient(90deg, #9aff7804 0px, #9aff7804 1px, #0000 1px, #0000 3px);
  opacity: 0.56;
}

.crt-glass::after {
  background: radial-gradient(ellipse at 50% -17%, #d2edba10 0%, #c6e5b304 33%, transparent 57%);
  box-shadow: inset 0 1px 1px #d4eac82b;
}

/* A flat display remains available in Help without changing the font choice. */
html[data-crt='off'] .crt-shell {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html[data-crt='off'] .crt-screen {
  border-radius: 0;
  clip-path: none;
  overflow: visible;
}

html[data-crt='off'] .crt-screen #app {
  filter: none;
  background: var(--bg);
  text-shadow: none;
}

html[data-crt='off'] .crt-glass {
  display: none;
}

@media (max-width: 700px) {
  .crt-shell {
    border-radius: 30px / 26px;
  }
  .crt-screen {
    border-radius: 24px / 20px;
  }
  .crt-screen .terminal {
    padding: 26px 24px 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --crt-gutter: 5px;
    --crt-rim: 4px;
  }
  .crt-screen .terminal {
    padding: 25px 14px 26px;
  }
  .crt-screen .site-header {
    flex-wrap: wrap;
  }
  .crt-screen .hostname {
    margin-left: auto;
  }
  .crt-glass {
    box-shadow: inset 0 0 16px 2px #0008;
  }
  .crt-glass::before {
    opacity: 0.36;
  }
}

@media (forced-colors: active) {
  .crt-shell {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .crt-screen {
    clip-path: none !important;
    border-radius: 0;
    overflow: visible;
  }
  .crt-screen #app {
    filter: none !important;
    text-shadow: none;
  }
  .crt-glass {
    display: none;
  }
}