:root { /* palette: dual-mode brand (identical in light & dark) */ --cornflower: #667eea; --indigo: #495dc6; --ultramarine: #0091ba; --tangerine: #d06900; --salmon: #e25569; --mercury: #efefef; /* neutrals: dark defaults (flipped in the light media query below) */ --bg: #0f1117; --surface: #161925; --text: #e6e8ee; --muted: #8a94a6; --border: rgba(255, 255, 255, 0.1); --land: #1b2333; --coast: #2b3a52; /* semantic: accent as surface/line is constant; accent as text is mode-aware */ --accent: var(--cornflower); --link: var(--cornflower); --menu: var(--muted); --link-hover: var(--bg); --on-accent: var(--mercury); --dot: var(--ultramarine); --dot-hi: var(--tangerine); --warn: var(--salmon); --font-family: system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* cctv: a pixel-perfect bitmap UI font (see @font-face below) to finish the retro look. */ --cctv-font: "Pixelated MS Sans Serif", "Microsoft Sans Serif", "MS Sans Serif", sans-serif; /* metrics */ --gap: clamp(1rem, 2vw, 1.5rem); /* timings */ --transition-duration: 250ms; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* z-index layers: the site otherwise uses none, so keep these low and legible. The cctv CRT glass sits at --crt-z; live playback goes one above it (calc below). */ --crt-z: 100; /* typography: fluid scale */ --font-min: 13px; --font-max: 17px; --font-base: clamp(var(--font-min), 0.72rem + 0.3vw, var(--font-max)); --text-xs: 0.8rem; /* fine print (e.g. bd-total) */ --text-sm: 0.9rem; /* sub-labels (e.g. bd-sub, filter btn) */ --h-sm: clamp(1.05rem, 2.5vw, 1.2rem); --h-md: clamp(1.1rem, 3vw, 1.5rem); --h-lg: clamp(1.1rem, 3vw, 1.6rem); --h-xl: clamp(1.5rem, 4vw, 2rem); /* layout widths: content sizing */ --content-max: 160rem; /* overall cap on
, */ --measure: var(--content-max); /* prose (.tips); set e.g. 74ch for readable line length */ --table-max: var(--content-max); /* data tables (.bd-table, .meta) */ --card-min: 22rem; /* gallery grid column min */ } /* Pixelated MS Sans Serif — the classic bitmap UI font, used only by the cctv theme. The files are copied verbatim from assets/ to out/ root, so reference them absolutely. */ @font-face { font-family: "Pixelated MS Sans Serif"; src: url("/ms_sans_serif.woff2") format("woff2"), url("/ms_sans_serif.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pixelated MS Sans Serif"; src: url("/ms_sans_serif_bold.woff2") format("woff2"), url("/ms_sans_serif_bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @media (prefers-color-scheme: light) { :root { --bg: #efefef; --surface: #f4f6f8; --text: #14171f; --muted: #5c6270; --border: rgba(0, 0, 0, 0.09); --land: #dfe6ee; --coast: #b9c4d0; --link: var(--indigo); } } /* manual theme override (opt-in, JS only): a class on — set by assets/theme.js and restored before paint by the shell's inline head script — forces a theme past the OS preference. :root. is specificity (0,2,0), so it beats both :root and the light media query in any OS mode. Values mirror the dark :root neutrals and the light media query above; the global `transition: all` animates the swap for free. */ :root.dark { --bg: #0f1117; --surface: #161925; --text: #e6e8ee; --muted: #8a94a6; --border: rgba(255, 255, 255, 0.1); --land: #1b2333; --coast: #2b3a52; --link: var(--cornflower); } :root.light { --bg: #efefef; --surface: #f4f6f8; --text: #14171f; --muted: #5c6270; --border: rgba(0, 0, 0, 0.09); --land: #dfe6ee; --coast: #b9c4d0; --link: var(--indigo); } /* cctv: green-phosphor monochrome on near-black, matched to the CRT sweep/scanline tint rgb(120,220,80). assets/theme.js layers the scanline/sweep/curvature/noise/vignette overlay (crt.css) on top; this block supplies the base colours. --accent is overridden too so hover states go green instead of the default cornflower blue. */ :root.cctv { --bg: #050a06; --surface: #0b140d; --text: #78dc50; --muted: #4c8a3a; --border: rgba(120, 220, 80, 0.22); --land: #0e1f12; --coast: #17351d; --link: #a6f06a; --accent: #78dc50; --on-accent: #050a06; /* near-black text on the lime badges/buttons (white was unreadable) */ --dot: #57d977; /* map markers: green, not the off-theme blue */ --dot-hi: #c8ff9c; /* highlighted markers: brighter green (was orange) */ --font-family: var(--cctv-font); /* whole UI switches to the pixel font in cctv */ /* Pixel look: kill font anti-aliasing and scale images nearest-neighbour. Both are inherited, so they reach the whole cctv page (live playback opts back out below). */ font-smooth: never; -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-synthesis-weight: none; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } /* CRT glass: a fixed, click-through overlay over the whole viewport, built by assets/theme.js for the cctv theme (its effect knobs are applied inline as custom properties; the layout lives here). */ #crt-overlay { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: var(--crt-z); } /* In cctv, real playback renders ABOVE the glass so the scanlines/vignette don't sit on a live stream. Only genuinely-playing media qualifies — refreshing/MJPEG stills, the mp4/HLS