:root {
  --phosphor: #79d279;
  --phosphor-bright: #b4f0b4;
  --phosphor-dim: #416f41;
  --black: #000;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--black); }
body {
  color: var(--phosphor);
  font-family: Courier, "Courier New", monospace;
  font-size: 17px;
  line-height: 1.65;
}
a { color: var(--phosphor-bright); text-underline-offset: .18em; }
a:hover, a:focus { color: #dcffdc; text-shadow: 0 0 7px rgba(121,210,121,.55); }
.crt {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(18,55,18,.28), rgba(2,14,2,.14) 52%, rgba(0,0,0,.96));
  animation: power-on 850ms ease-out both;
}
.screen {
  position: relative;
  z-index: 4;
  width: min(800px, calc(100% - 2rem));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 6rem) 0 5rem;
}
.splash { min-height: calc(100vh - 11rem); display: grid; place-content: center; text-align: center; }
.splash h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 3.3rem); font-weight: 400; letter-spacing: .035em; }
.enter { display: inline-block; margin-top: 2.5rem; color: var(--phosphor-dim); font-size: .82rem; letter-spacing: .12em; }
.site-header { margin-bottom: 4rem; border-bottom: 1px solid rgba(121,210,121,.28); padding-bottom: 1rem; }
.site-header h1 { margin: 0; font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 400; }
.site-header nav { margin-top: .5rem; font-size: .9rem; }
.site-header nav a + a::before { content: " / "; color: var(--phosphor-dim); }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 1rem 0 1.25rem; border-bottom: 1px dotted rgba(121,210,121,.22); }
.post-list time, .post-meta { display: block; color: var(--phosphor-dim); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.post-list a { display: inline-block; margin-top: .25rem; font-size: 1.1rem; }
article h1 { margin: 0 0 .25rem; color: var(--phosphor-bright); font-size: clamp(1.65rem, 5vw, 2.7rem); font-weight: 400; line-height: 1.25; }
article h2, article h3, article h4 { margin-top: 2.2rem; color: var(--phosphor-bright); font-weight: 400; line-height: 1.3; }
article p { margin: 1.25rem 0; }
figure.image { margin: 2rem 0; text-align: center; }
figure.image img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid rgba(121,210,121,.34); }
figure.image figcaption { margin-top: .55rem; color: var(--phosphor-dim); font-size: .85rem; }
.image-original img, .image-dither-bw img, .image-dither-green img { filter: none; }
.image-crt img { filter: grayscale(1) sepia(.3) hue-rotate(65deg) saturate(1.5) contrast(1.08); }
.image-grayscale img { filter: grayscale(1); }
blockquote { margin: 1.8rem 0; padding-left: 1rem; border-left: 2px solid var(--phosphor-dim); color: var(--phosphor-bright); }
code { padding: .08rem .25rem; background: rgba(121,210,121,.08); }
pre code { display: block; overflow-x: auto; padding: 1rem; }
.back-link { display: inline-block; margin-top: 3rem; color: var(--phosphor-dim); }
#noise { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: .05; image-rendering: pixelated; pointer-events: none; }
.scanlines, .glass, .roll { position: fixed; inset: 0; pointer-events: none; }
.scanlines { z-index: 8; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0, rgba(255,255,255,.022) 1px, rgba(0,0,0,.14) 2px, rgba(0,0,0,.14) 4px); opacity: .58; }
.glass { z-index: 9; background: radial-gradient(ellipse at center, transparent 54%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.86) 100%); box-shadow: inset 0 0 150px rgba(0,0,0,.9); }
.roll { z-index: 3; height: 18%; top: -22%; bottom: auto; background: linear-gradient(to bottom, transparent, rgba(121,210,121,.032), transparent); animation: roll 13s linear infinite; opacity: .38; }
.screen, .splash h1 { text-shadow: 0 0 2px rgba(121,210,121,.8), 0 0 8px rgba(121,210,121,.18); }
@keyframes power-on { 0% { transform: scaleY(.005) scaleX(.15); filter: brightness(4); opacity: 0; } 45% { transform: scaleY(.015) scaleX(1); filter: brightness(2.2); opacity: 1; } 70% { transform: scaleY(1.025); filter: brightness(1.14); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(680%); } }
@media (max-width: 600px) { body { font-size: 16px; } .screen { width: min(100% - 1.4rem, 800px); } }
@media (prefers-reduced-motion: reduce) { .crt, .roll { animation: none; } #noise { display: none; } }