:root {
    --phosphor: #33FFCC;
    --phosphor-dim: #1a8066;
    --bg: #050505;
    --bloom: 50%;
    --jitter: 40%;
    --flicker: 90%;
    --static-noise: 30%;
    --rgb-shift: 30%;
    --hsync: 42%;
    --burnin: 50%;
    --glowline-intensity: 30%;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    height: 100%;
    overflow: hidden;
  }

  .crt-frame {
    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--bg);
    overflow: hidden;
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  }

  .crt-vignette {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  }

  .crt-scanlines {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0.18) 1px,
      rgba(0,0,0,0) 2px
    );
    mix-blend-mode: multiply;
  }

  .crt-noise {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: calc(var(--static-noise) / 100 * 0.5);
    mix-blend-mode: overlay;
  }

  .crt-flicker {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    background: rgba(51,255,204,0.02);
    animation: flicker 6s infinite steps(60);
  }

  .crt-glowline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 22;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(51,255,204,0) 0%,
      rgba(51,255,204,0.10) 45%,
      rgba(51,255,204,0.16) 50%,
      rgba(51,255,204,0.10) 55%,
      rgba(51,255,204,0) 100%
    );
    opacity: 0.6;
    animation: glowsweep 7s linear infinite;
  }

  @keyframes glowsweep {
    0% { top: -60px; }
    100% { top: 100%; }
  }

  .crt-hsync {
    position: relative;
    animation: hsyncGlitch 9s infinite;
  }

  @keyframes hsyncGlitch {
    0%, 96%, 100% {
      transform: translateX(0);
      clip-path: none;
    }
    96.3% {
      transform: translateX(6px);
      clip-path: inset(20% 0 60% 0);
    }
    96.6% {
      transform: translateX(-8px);
      clip-path: inset(55% 0 20% 0);
    }
    96.9% {
      transform: translateX(3px);
      clip-path: inset(10% 0 75% 0);
    }
    97.2% {
      transform: translateX(0);
      clip-path: none;
    }
  }

  .crt-burnin {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    max-width: 68ch;
    margin: 0 auto;
    padding: 4rem 2rem 2rem;
    opacity: 0.1;
    filter: blur(1.5px);
    color: var(--phosphor);
    animation: burninfade 14s ease-in-out infinite;
  }

  @keyframes burninfade {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.16; }
  }

  @keyframes flicker {
    0%, 100% { opacity: 0.3; }
    3% { opacity: 0.7; }
    6% { opacity: 0.2; }
    9% { opacity: 0.5; }
    12% { opacity: 0.25; }
    50% { opacity: 0.35; }
    52% { opacity: 0.6; }
    80% { opacity: 0.25; }
    83% { opacity: 0.55; }
  }

  .crt-content {
    position: relative;
    z-index: 10;
    max-width: 68ch;
    height: 100vh;
    overflow-y: auto;
    margin: 0 auto;
    padding: 4rem 2rem 4rem;
    color: var(--phosphor);
    text-shadow:
      0 0 1px rgba(51,255,204,0.8),
      0 0 3px rgba(51,255,204,0.6),
      0 0 8px rgba(51,255,204,0.4),
      0 0 16px rgba(51,255,204,0.2),
      -1.5px 0 rgba(255,51,85,0.35),
      1.5px 0 rgba(51,120,255,0.35);
    animation: jitter 0.15s infinite;
    filter: brightness(1.05);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .crt-content::-webkit-scrollbar {
    display: none;
  }

  @keyframes jitter {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-0.4px, 0); }
    50% { transform: translate(0, 0.3px); }
    75% { transform: translate(0.4px, 0); }
  }

  .status-line {
    font-size: 11px;
    letter-spacing: 0.05em;
    opacity: 0.65;
    border-bottom: 1px solid var(--phosphor-dim);
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  .terminal-line {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 18px;
    min-height: 1.7em;
  }

  .nav-block {
    margin-top: 2rem;
    border: 1px solid var(--phosphor-dim);
    padding: 1rem 1.25rem;
  }

  .nav-title {
    font-size: 12px;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 0.75rem;
  }

  .nav-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-block > ul {
    margin-top: 0;
  }

  .nav-block ul ul {
    padding-left: 1.4rem;
  }

  .nav-item {
    padding: 0.25rem 0;
    font-size: 16px;
  }

  .nav-block ul ul .nav-item {
    opacity: 0.85;
  }

  .nav-block ul ul ul .nav-item {
    opacity: 0.7;
    font-size: 15px;
  }

  .track-item {
    padding-left: 0 !important;
  }

  .nav-item a, .reveal-after-intro a, .status-line a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
  }

  .status-line a {
    text-decoration: underline;
    cursor: pointer;
  }

  .nav-item a:hover, .nav-item a.selected {
    background: var(--phosphor);
    color: var(--bg);
    text-shadow: none;
  }

  .cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--phosphor);
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
    box-shadow: 0 0 6px rgba(51,255,204,0.7);
  }

  .end-cursor {
    display: none;
    margin-top: 1.5rem;
  }

  @keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  .rgb-shift {
    position: relative;
  }
  .rgb-shift::before, .rgb-shift::after {
    content: attr(data-text);
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    opacity: calc(var(--rgb-shift) / 100 * 0.4);
    pointer-events: none;
  }
  .rgb-shift::before {
    color: #ff3355;
    transform: translate(-1px, 0);
    mix-blend-mode: screen;
  }
  .rgb-shift::after {
    color: #3355ff;
    transform: translate(1px, 0);
    mix-blend-mode: screen;
  }

  @media (max-width: 600px) {
    .crt-content { padding: 2rem 1.25rem; }
    .status-line { font-size: 10px; }
  }

  .theme-uss {
    --phosphor: #729fcf;
    --phosphor-dim: #3d5877;
  }

  .theme-uss .crt-content {
    text-shadow:
      0 0 1px rgba(114,159,207,0.8),
      0 0 3px rgba(114,159,207,0.6),
      0 0 6px rgba(114,159,207,0.3);
  }

  .theme-uss .crt-hsync {
    animation: none;
  }

  .theme-uss .crt-glowline {
    opacity: 0.25;
    animation-duration: 11s;
  }

  .theme-uss .crt-flicker {
    animation-duration: 9s;
  }