@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");

:root {
  --bg-top: #141414;
  --bg-bottom: #141414;
  --ink: #ffffff;
  --muted: #6a6358;
  --link: #1d4f8c;
  --max: 81ch;
  --pad: clamp(1rem, 3vw, 2.5rem);
  --bp-bg: #141414;
  --bp-ink-dim: rgba(190,255,245,.62);
  --bp-grid: rgba(120,255,235,.07);
  --bp-grid-strong: rgba(120,255,235,.14);
  --bp-glow: rgba(120,255,235,.18);
  --cell: 3ch;    /* minor grid size */
  --major: 6;      /* major grid every N minor cells */
  --radius: 4ch;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  padding: var(--pad);
  background: 
        /* major vertical */
        repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent calc(var(--cell) * var(--major) - 1px),
          var(--bp-grid-strong) calc(var(--cell) * var(--major))
        ),
        /* major horizontal */
        repeating-linear-gradient(
          0deg,
          transparent 0,
          transparent calc(var(--cell) * var(--major) - 1px),
          var(--bp-grid-strong) calc(var(--cell) * var(--major))
        ),
        /* minor vertical */
        repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent calc(var(--cell) - 1px),
          var(--bp-grid) var(--cell)
        ),
        /* minor horizontal */
        repeating-linear-gradient(
          0deg,
          transparent 0,
          transparent calc(var(--cell) - 1px),
          var(--bp-grid) var(--cell)
        ),
        /* base */
        radial-gradient(1200px 900px at 20% 10%, rgba(255,255,255,.06), transparent 55%),
        radial-gradient(1000px 800px at 80% 30%, rgba(255,255,255,.04), transparent 60%),
        var(--bp-bg);
  color: var(--ink);
  font-family:
    "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main.txt {
  max-width: var(--max);
  margin: 0 auto;
}

pre.txt-block {
  font-family: "Share Tech Mono", monospace;
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:visited {
  color: inherit;
}

a:where(:hover, :focus) {
  color: var(--link);
}

::selection {
  background: rgba(29, 79, 140, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  main.txt {
    animation: fade-in 600ms ease-out both;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 700px) {
  body {
    font-size: 15px;
    padding: 1rem;
  }
  pre.txt-block {
    white-space: pre-wrap;
  }
}

.cyaneon-sweep{
  background: linear-gradient(90deg,
    #00f6ff 0%,
    #8dfffb 20%,
    #00f6ff 40%,
    #00a7ff 60%,
    #00f6ff 80%,
    #8dfffb 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 0.12em rgba(0,246,255,.7),
    0 0 0.6em rgba(0,246,255,.35);

  animation: sweep 0.618s linear infinite;
}

@keyframes sweep{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.cyaneon-flicker{
  animation: cyaneon-pulse 0.309s ease-in-out infinite, flicker 6s infinite;
}

@keyframes flicker{
  0%, 3%, 5%, 100% { opacity: 1; filter: brightness(1); }
  4% { opacity: .75; filter: brightness(.9); }
  6% { opacity: .92; filter: brightness(1.1); }
  52% { opacity: .88; }
  53% { opacity: 1; }
}

/* base: your page already black */
body.crt{
  margin:0;
}

/* keep your content in its own stacking context */
body.crt .app{
  position:relative;
  z-index:1;
}

/* CRT overlay */
body.crt .crt-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;

  /* layered overlays */
  background:
    /* vignette / edge darkening */
    radial-gradient(120% 90% at 50% 50%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0.35) 75%,
      rgba(0,0,0,0.75) 100%
    ),
    /* scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 2px,
      rgba(0,0,0,0.22) 3px
    ),
    /* subtle phosphor mask (RGB triad-ish) */
    repeating-linear-gradient(
      to right,
      rgba(255,0,80,0.035) 0px,
      rgba(255,0,80,0.035) 1px,
      rgba(0,246,255,0.030) 2px,
      rgba(0,246,255,0.030) 3px,
      rgba(120,255,120,0.025) 4px,
      rgba(120,255,120,0.025) 5px
    );

  mix-blend-mode: multiply;
  opacity: .85;

  /* subtle jitter/flicker */
  animation: crt-flicker 5.5s infinite;
}

/* optional: slight global softness + brightness on content */
body.crt .app{
  filter: contrast(1.05) saturate(1.05);
}

/* flicker */
@keyframes crt-flicker{
  0%, 100% { opacity: .78; transform: translate(0,0); }
  2% { opacity: .86; }
  3% { opacity: .76; }
  10% { opacity: .84; }
  11% { opacity: .80; }
  55% { opacity: .83; }
  56% { opacity: .76; }
  70% { opacity: .86; }
  71% { opacity: .80; }
}