@font-face {
  font-family: 'IBM MDA';
  src: url('./fonts/ibm-mda.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* A display treatment, with the original DOM, links and controls intact. */
:root[data-display="crt"] {
  color-scheme: dark;
  --canvas: #030703 !important;
  --text: #78e34a !important;
  --bright: #a4ff70 !important;
  --muted: #569d38 !important;
  --edge: #335322 !important;
  --font-mono: 'IBM MDA', monospace;
  --crt-scan: repeating-linear-gradient(to right, transparent 0 2px, #0006 2px 3px), repeating-linear-gradient(to bottom, transparent 0 1.5px, #0001 1.5px 2px);
  background: var(--canvas) !important;
}
:root[data-display="crt"] body,
:root[data-display="crt"] body * {
  font-family: 'IBM MDA', monospace !important;
  font-weight: 400 !important;
  -webkit-text-stroke: 0 !important;
  -webkit-font-smoothing: none;
  color: var(--text) !important;
  font-kerning: none;
  font-variant-ligatures: none;
  text-shadow: 0 0 1px #b0ff6b70, 0 0 5px #72ff3050, 0 0 14px #60ed2820;
  border-color: var(--edge);
  outline-color: var(--bright);
  caret-color: var(--bright);
}
:root[data-display="crt"] :is(a, button, b, strong, .mono-accent, .startup-ok, .instrument-state, .clock-reading time, output) {
  color: var(--bright) !important;
}
:root[data-display="crt"] :is(.command-header, .command-tag, .command-help, .command-prompt, .instrument-note, .selfie-trace, .trace-time, .trace-prefix, .clock-city, .colophon, .settings-status) {
  color: var(--muted) !important;
}
:root[data-display="crt"] ::selection { color: #030703 !important; background: #a4ff70 !important; text-shadow: none; }
:root[data-display="crt"] main {
  width: min(86ch, 100%);
  font-size: 32px;
  line-height: 1.125;
}
:root[data-display="crt"] blockquote {
  letter-spacing: 0; word-spacing: 0;
}
:root[data-display="crt"] .content { padding-inline: 3ch; }
:root[data-display="crt"] :is(.contact-line, .colophon, .world-footer, .contact-row .colophon, .site-footer .contact-line) { font-size: 16px !important; line-height: 1.5; }
:root[data-display="crt"] :is(.site-footer, .contact-rail) { --rule-ink: #569d38 !important; }
:root[data-display="crt"] :is(.site-footer::after, .footer-details summary::after) { color: var(--muted); font-size: 16px; }
:root[data-display="crt"] main a,
:root[data-display="crt"] .contact-line button.contact-link { border-color: #3a7549; }
:root[data-display="crt"] main a:hover { border-color: var(--bright); }

/* Phosphor mask and edge falloff never intercept a click or change layout. */
:root[data-display="crt"] body::before {
  display: block; position: fixed; inset: 0; z-index: 5;
  border: 0; border-radius: 0; pointer-events: none;
  background: radial-gradient(ellipse at 45% -6%, #c2edac0c, transparent 54%), radial-gradient(ellipse at 50% 45%, transparent 48%, #000c 100%) !important;
  box-shadow: 0 0 0 32px #000, inset 0 0 22px #000b, inset 0 0 100px #0005 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root[data-display="crt"] body::after {
  display: block; position: fixed; inset: 0; z-index: 6;
  border: 0; border-radius: 0; pointer-events: none; box-shadow: none;
  background: var(--crt-scan), rgb(0 0 0 / .035);
  animation: crt-phosphor-flicker 4.6s steps(1, end) infinite;
}
:root[data-display="crt"] #water-field { filter: brightness(var(--background-brightness, 1.5)); image-rendering: pixelated; opacity: calc(.55 * var(--startup-background-progress, 1)); }
:root[data-display="crt"] :is(#ascii-field, #ascii-accents) { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(75deg); }
:root[data-display="crt"] .atmosphere {
  background: radial-gradient(ellipse at 50% 40%, #03070300, #03070366 90%) !important;
}
:root[data-display="crt"] :is(img, video) { filter: grayscale(1) sepia(1) saturate(4) hue-rotate(45deg); image-rendering: pixelated; }
:root[data-display="crt"] :is(.reading-settings, .command-dialog) {
  --reading-surface: #050c03; --reading-border: #486e2b;
  --terminal-bg: #050c03 !important; --terminal-chrome: #091304 !important;
  --terminal-border: #486e2b !important; --terminal-divider: #335322 !important;
  --terminal-ink: #78e34a !important; --terminal-dim: #569d38 !important; --terminal-accent: #a4ff70 !important;
  --terminal-prefix: #569d38 !important; --terminal-selection: #78e34a !important;
}
:root[data-display="crt"] :is(.command-dialog, .reading-panel, .contact-popover, .weather-credit) {
  background: #050c03 !important; border-color: #486e2b !important;
  box-shadow: 0 0 0 1px #030703, 0 12px 50px #0008;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  text-shadow: 0 0 4px #72ff3040;
}
:root[data-display="crt"] .command-dialog { width: 690px; font-size: 16px; line-height: 1.5; border-style: double; border-width: 3px; }
:root[data-display="crt"] .command-dialog::backdrop { background: #000a !important; }
/* Native dialogs sit above the page mask, so give their contents the same raster. */
:root[data-display="crt"] .command-dialog::after {
  content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: var(--crt-scan), rgb(0 0 0 / .035);
  animation: crt-phosphor-flicker 4.6s steps(1, end) infinite;
}
:root[data-display="crt"] :is(.command-header, .command-help, .instrument-note, .instrument-source, .instrument-event-time, .panic-trace p) { font-size: 16px; }
:root[data-display="crt"] .command-body { grid-template-columns: 13ch minmax(0, 1fr); gap: 1ch; }
:root[data-display="crt"] .command-option { grid-template-columns: 1ch 9ch minmax(0, 1fr); }
:root[data-display="crt"] .command-option[aria-selected="true"] { background: #78e34a; }
:root[data-display="crt"] .command-option[aria-selected="true"],
:root[data-display="crt"] .command-option[aria-selected="true"] * { color: #081603 !important; text-shadow: none; }
:root[data-display="crt"] .selfie-frame { background: #030703; }
:root[data-display="crt"] :is(.reading-panel, .contact-popover, .posts-list .post-title, .social-list, .weather-credit) { font-size: 16px; }
:root[data-display="crt"] :is(.posts-list time, #reading-status, .settings-status) { font-size: 14px; }
:root[data-display="crt"] .reading-control { grid-template-columns: 72px minmax(0,1fr) 44px; }
:root[data-display="crt"] .reading-settings { font-size: 16px; }
:root[data-display="crt"] .reading-settings .reading-toggle { font-size: 16px; width: 56px; }
:root[data-display="crt"] .reading-toggle > :is(svg,span) { display: none; }
:root[data-display="crt"] #command-trigger::before { content: '[>_]'; }
:root[data-display="crt"] #background-toggle::before { content: '[~]'; }
:root[data-display="crt"] #reading-toggle::before { content: '[Aa]'; }
:root[data-display="crt"] .reading-settings { right: max(24px, env(safe-area-inset-right)); }
:root[data-display="crt"] .background-settings { right: max(80px, calc(env(safe-area-inset-right) + 56px)); }
:root[data-display="crt"] .command-settings { right: max(136px, calc(env(safe-area-inset-right) + 112px)); }
:root[data-display="crt"] .reading-toggle:hover { background: var(--bright); color: var(--canvas) !important; text-shadow: none; }
:root[data-display="crt"] :is(.command-session, .startup-session, .visitor-title) { letter-spacing: 0; }
:root[data-display="crt"] :is(.startup-terminal, .visitor-readout) { font-size: 16px; line-height: 1.35; }
:root[data-display="crt"] :is(.startup-session, .visitor-title, .startup-skip) { font-size: 14px; }
:root[data-display="crt"] .startup-trace { font-size: 16px; }
:root[data-display="crt"] .startup-terminal { max-width: calc(100vw - 2 * var(--terminal-inset)); }
:root[data-display="crt"] :is(.startup-line, .visitor-readout dd) { overflow-wrap: anywhere; }
:root[data-display="crt"] :is(.panic-shell, .panic-console, .command-panicked) { background-color: #030703; }
@media (max-width: 760px) {
  :root[data-display="crt"] main { font-size: 24px; line-height: 1.25; }
  :root[data-display="crt"] .content { padding-inline: 28px; }
  :root[data-display="crt"] :is(.contact-line, .colophon, .world-footer, .contact-row .colophon, .site-footer .contact-line) { font-size: 16px !important; }
  :root[data-display="crt"] .world-clocks { gap: 4px; }
  :root[data-display="crt"] .command-body { grid-template-columns: minmax(0,1fr); gap: 0; }
  :root[data-display="crt"] .command-dialog { padding-inline: 16px; }
  :root[data-display="crt"] :is(.visitor-readout, .startup-terminal, .startup-trace) { font-size: 14px; }
}
@media (max-width: 520px) {
  :root[data-display="crt"] .command-query-field { height: auto; }
  :root[data-display="crt"] #command-query { font-size: 16px; width: 100%; transform: none; }
}
/* Brief, irregular luminance dips affect the whole picture, not just the mask.
   Keep the vertical phosphor lines steady and never flash above the base image. */
@keyframes crt-phosphor-flicker {
  0%, 100% { background-color: rgb(0 0 0 / .035); }
  8% { background-color: rgb(0 0 0 / .15); }
  10% { background-color: rgb(0 0 0 / .06); }
  13% { background-color: rgb(0 0 0 / .025); }
  32% { background-color: rgb(0 0 0 / .09); }
  35% { background-color: rgb(0 0 0 / .04); }
  59% { background-color: rgb(0 0 0 / .13); }
  61% { background-color: rgb(0 0 0 / .055); }
  64% { background-color: rgb(0 0 0 / .025); }
  84% { background-color: rgb(0 0 0 / .08); }
  87% { background-color: rgb(0 0 0 / .035); }
}
:root[data-display="crt"] body:has(#motion-toggle[aria-pressed="true"])::after,
:root[data-display="crt"] body:has(#motion-toggle[aria-pressed="true"]) .command-dialog::after {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-display="crt"] body::after, :root[data-display="crt"] .command-dialog::after { animation: none; }
}