/* self-hosted fonts (bundled in assets/ — no external CDN, offline-capable) */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2"); } @font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/vt323-400.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/space-mono-700.woff2") format("woff2"); } :root { /* Matrix theme: phosphor green on near-black — cascades to the whole site */ --bg: #010601; --panel: #04140a; --fg: #48f56e; /* readable matrix-green body text */ --muted: #2b8f4d; /* dim green for secondary text */ --cyan: #00ffb0; /* accent (links / active tab / prompts) — brighter terminal green */ --green: #00ff41; /* classic Matrix green for highlights */ --line: #0d3c22; /* green-tinted borders */ --glow: 0 0 8px rgba(0, 255, 65, .5); color-scheme: dark; accent-color: var(--cyan); font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* amber theme — applied via [data-theme="amber"], hydrated from localStorage "df-theme" */ :root[data-theme="amber"] { --cyan: #f59e0b; --green: #fbbf24; --glow: 0 0 8px rgba(245, 158, 11, .45); --fg: #f5b942; --muted: #b3771a; --line: #4a3410; --panel: #140c04; } /* honor OS high-contrast requests by lifting the two lowest-contrast tokens (dim-green secondary text + faint borders); default look untouched */ @media (prefers-contrast: more) { :root { --muted: #4ee06e; --line: #1f7a44; } :root[data-theme="amber"] { --muted: #e0952a; --line: #7a5410; } #crtfx { display: none; } #matrix, #sky { display: none; } header .logo { text-shadow: 0 0 2px currentColor; } header .logo .cursor { text-shadow: none; } body::before { display: none; } } /* Windows High-Contrast: OS remaps CSS colors but not canvas pixels, so drop the decorative layers and let forced-colors keep real text/HUDs legible. */ @media (forced-colors: active) { #crtfx, #matrix, #sky { display: none; } body::before, body::after { display: none; } } /* reduced-motion: the matrix rain and drifting sky are pure decorative animation with no informational content, so hide them; the body's phosphor gradient keeps the look intact. */ @media (prefers-reduced-motion: reduce) { #matrix, #sky { display: none; } } /* honor Save-Data / metered connections: the matrix rain + drifting sky are pure decoration, so drop them to spare bandwidth and battery; the phosphor gradient keeps the look intact */ @media (prefers-reduced-data: reduce) { #matrix, #sky { display: none; } } * { box-sizing: border-box; } /* smooth in-page scrolling (skip-link + console-tab jumps glide instead of teleport) */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* give every glide a gutter above the landing target so headings never sit flush to the top edge */ :target, #content, .console, .kg3d, .brain-gl { scroll-margin-top: 1.25rem; } #content :target { background: rgba(0,255,65,.07); border-radius: 4px; } /* keyboard focus indicators (mouse users unaffected) */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; } /* phosphor "warm-up" on interactive links — glow + brighten on hover/focus, underline stays put */ #content a { transition: color .15s ease, text-shadow .15s ease; text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-skip-ink: auto; -webkit-tap-highlight-color: transparent; } /* balance multi-line headings so the last line isn't a lone orphaned word — inert where unsupported */ #content h1, #content h2, #content h3 { text-wrap: balance; } /* pretty-wrap essay body text so the last line isn't a lone orphan — inert where unsupported */ #content p { text-wrap: pretty; } #content li { text-wrap: pretty; } #content li + li { margin-top: .3rem; } #content li > ul, #content li > ol { margin-top: .3rem; } /* hang leading quotes and list markers into the margin so text optically aligns — inert where unsupported */ #content { hanging-punctuation: first last; } /* break otherwise-unbreakable tokens (long URLs, model/GPU IDs) so narrow screens don't scroll sideways */ #content { overflow-wrap: break-word; } /* keep embedded figures/diagrams fluid so a wide image can't force horizontal scroll either */ #content img { max-width: 100%; height: auto; } #content figure img { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } #content svg, #content video { max-width: 100%; height: auto; } #content audio { max-width: 100%; } #content figcaption { margin-top: .4rem; text-align: center; font-size: .85rem; font-style: italic; color: var(--muted); text-wrap: balance; } #content figure { margin: 1.4rem 0; } #content pre { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .75rem .9rem; line-height: 1.5; } #content pre, #content code { -moz-tab-size: 4; tab-size: 4; } #content pre, #content code, #content samp, #content kbd { font-variant-ligatures: none; } #content :not(pre) > code { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: .05em .4em; font-size: .92em; color: var(--cyan); } #content a code { color: inherit; } #content :is(h1, h2, h3, h4) code { font-size: 1em; padding: 0; border: 0; background: none; } #content a strong, #content a b, #content a em, #content a i { color: inherit; } #content mark a { color: inherit; } #content table { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; } #content pre, #content table { scrollbar-width: thin; scrollbar-color: var(--cyan) var(--panel); } #content th, #content td { border: 1px solid var(--line); padding: .4rem .6rem; text-align: left; vertical-align: top; } #content td, #content th { font-variant-numeric: tabular-nums; } #content caption { caption-side: bottom; margin-top: .5rem; font-size: .85rem; font-style: italic; color: var(--muted); text-align: left; text-wrap: pretty; } #content th { color: var(--green); } #content th[scope="col"] { text-wrap: balance; } #content td { text-wrap: pretty; } #content th[scope="row"] { font-weight: 400; color: var(--fg); position: sticky; left: 0; background: var(--bg); } #content tbody tr:nth-child(even) { background: rgba(0,255,65,.025); } #content tbody tr { transition: background .15s ease; } #content tbody tr:hover { background: rgba(0,255,65,.05); } #content tfoot td, #content tfoot th { border-top: 2px solid var(--cyan); color: var(--muted); font-variant-numeric: tabular-nums; } #content thead th { border-bottom: 2px solid var(--cyan); } #content hr { border: 0; height: 1px; margin: 2rem 0; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--cyan) 50%, var(--line) 80%, transparent); box-shadow: var(--glow); } /* visited in-content links decay to the dim phosphor green — a pixel that's already been lit */ #content a:visited { color: var(--muted); } /* light list markers in the terminal accent so each bullet reads like a lit prompt marker */ #content li::marker { color: var(--cyan); } /* the footnote you jumped to lights its own marker phosphor-green (same already-lit/active convention as ::marker cyan / :active green), so the exact landed-on item is unmistakable */ #content li:target::marker { color: var(--green); text-shadow: var(--glow); } /* second-level-and-deeper markers drop to dim phosphor so nesting depth reads at a glance (same secondary-green convention as /