:root {
  --mono: "IBM Plex Mono", ui-monospace, monospace; --pixel: "VT323", "IBM Plex Mono", monospace; --sans: "IBM Plex Sans", system-ui, sans-serif;
}
/* Palettes from sci-fi screens. Each sets the same tokens; [T]HEME switches them.
   --neon: frame glow, --edge: header line colour. */
[data-palette="wargames"] {    /* WarGames (1983): NORAD big-board blue, missile-track red */
  --bg: #00040c; --panel: #020a18; --bar: #041430; --line: #2f8cff; --fg: #e8f1ff; --soft: #a9c4ea; --hi: #ff3b3b;
  --dim: #6c86b0; --green: #9fd0ff; --link: #6fb7ff; --sel-bg: #2f8cff; --sel-fg: #ffffff; --glow: rgba(47,140,255,.3);
  --neon: rgba(47,140,255,.5); --edge: #ff3b3b;
}
[data-palette="wargames"] body { background-image: linear-gradient(rgba(47,140,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(47,140,255,.07) 1px, transparent 1px); background-size: 64px 40px; background-attachment: fixed; }
/* every palette glows like a neon screen */
[data-palette] .panel { box-shadow: 0 0 14px var(--neon), inset 0 0 14px color-mix(in srgb, var(--neon) 25%, transparent); }
[data-palette] .top { border-bottom-color: var(--edge); box-shadow: 0 6px 14px -8px var(--edge); }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 15.5px/1.7 var(--mono); background: var(--bg); min-height: 100vh; text-shadow: 0 0 4px var(--glow); }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { background: var(--sel-bg); color: var(--sel-fg); outline: none; }
::selection { background: var(--sel-bg); color: var(--sel-fg); }

/* scanlines + vignette + slight flicker */
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,.35) 100%);
  animation: flicker 6s infinite steps(1); }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 48% { opacity: 1; } }

.top, main, .bottom { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.top { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--line); }
.brand { font: 32px/1 var(--pixel); letter-spacing: .08em; color: var(--fg); }
.top nav a { margin-left: 18px; font: 14px var(--mono); color: var(--hi); }
.bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--dim); border-top: 2px solid var(--line); margin-top: 64px; padding-top: 16px; padding-bottom: 36px; }

/* boot */
.boot { padding-top: 30px; font-size: 14px; color: var(--dim); }
.boot p { margin: 0; }
.js .boot p { visibility: hidden; }
.js .boot p.on { visibility: visible; }
.js .screen { opacity: 0; transition: opacity .4s; }
.js .screen.on { opacity: 1; }

.logo { font: 600 15px/1.25 var(--mono); color: var(--fg); text-shadow: 0 0 10px var(--glow); margin: 26px 0 10px; padding-bottom: 4px; overflow: hidden; white-space: pre; font-size: min(15px, 2.45vw); }
.sub { font: 22px/1.3 var(--pixel); letter-spacing: .03em; margin: 0 0 26px; color: var(--soft); }
.cur { color: var(--hi); }
.cur { animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }

.panel { border: 3px double var(--line); padding: 16px 20px 18px; margin: 0 0 22px; background: var(--panel); box-shadow: 10px 10px 0 var(--shade); }
.panel-title { font: 20px/1 var(--pixel); color: var(--hi); margin-bottom: 14px; letter-spacing: .05em; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { padding: 12px 0; border-top: 1px dashed var(--line); }
.menu li:first-child { border-top: 0; }
.menu a { color: var(--fg); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 2px 6px; margin: 0 -6px; }
.menu .k { color: var(--hi); } .menu .n { font: 26px/1 var(--pixel); letter-spacing: .04em; } .menu .v { margin-left: auto; color: var(--green); font-size: 13px; }
.menu a:hover .v, .menu a:focus-visible .v, .menu a:hover .k, .menu a:focus-visible .k { color: var(--sel-fg); }
.menu p { margin: 6px 0 0 44px; color: var(--soft); font-size: 14px; }
.menu p.t { color: var(--dim); font-size: 12.5px; letter-spacing: .06em; }
.sys { border-collapse: collapse; font-size: 14px; }
.sys td { padding: 2px 24px 2px 0; vertical-align: top; } .sys td:first-child { color: var(--hi); white-space: nowrap; }
/* terminal-style home panels */
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }
.row2 .panel { margin: 0; }
.prompt { margin: 0 0 8px; font-size: 14px; color: var(--fg); }
.ps { color: var(--green); margin-right: 6px; }
.who { font: 40px/1 var(--pixel); letter-spacing: .06em; color: var(--fg); margin: 4px 0 10px; text-shadow: 0 0 10px var(--glow); }
.bio { margin: 0; color: var(--soft); font-size: 14px; }
.snip + .snip { margin-top: 18px; }
.snip pre { margin: 0; padding: 12px 14px; background: var(--bar); border-left: 3px solid var(--line); overflow-x: auto; font-size: 13.5px; line-height: 1.6; color: var(--fg); }
.docs { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.docs li { padding: 6px 0 6px 22px; position: relative; border-top: 1px dashed color-mix(in srgb, var(--line) 50%, transparent); }
.docs li:first-child { border-top: 0; }
.docs li::before { content: "├─"; position: absolute; left: 0; color: var(--dim); }
.docs li:last-child::before { content: "└─"; }
.docs .links { display: block; font-size: 12.5px; color: var(--dim); }
@media (max-width: 760px) { .row2 { grid-template-columns: 1fr; } }

/* content pages */
.page { padding-top: 34px; max-width: 800px; }
.crumb { font-size: 13.5px; color: var(--dim); margin: 0 0 20px; word-break: break-all; }
.crumb a { color: var(--soft); }
.page h1 { font: clamp(40px, 7vw, 58px)/1 var(--pixel); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 12px; color: var(--fg); }
.lead { font-size: 16px; color: var(--soft); }
.project-badge { display: inline-block; font: 22px/1 var(--pixel); color: var(--hi); border: 2px solid var(--hi); padding: 6px 10px; margin-bottom: 14px; }
.meta { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 13.5px; text-transform: uppercase; }
.meta span { color: var(--hi); } .meta span::after { content: ":"; margin-right: 4px; }
.tags .tag { color: var(--dim); margin-right: 12px; font-size: 13px; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.btn { border: 2px solid var(--hi); color: var(--hi); padding: 4px 12px; text-transform: uppercase; font-size: 14px; }
.btn::before { content: "> "; }
.btn.ghost { border-style: dashed; color: var(--fg); border-color: var(--line); }

.prose { margin-top: 26px; border-top: 2px solid var(--line); padding-top: 6px; }
.prose h2 { font: 30px/1.1 var(--pixel); text-transform: uppercase; letter-spacing: .04em; margin: 32px 0 10px; color: var(--hi); }
.prose h2::before { content: "■ "; }
.prose p, .prose li { color: var(--soft); }
.prose strong { color: var(--fg); }
.prose h3 { font: 24px/1.1 var(--pixel); text-transform: uppercase; margin: 24px 0 8px; }
.prose ul { padding-left: 0; list-style: none; } .prose li { padding-left: 22px; position: relative; } .prose li::before { content: "»"; position: absolute; left: 0; color: var(--dim); }
.prose strong { color: var(--hi); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose pre { border: 1px dashed var(--line); background: var(--panel); padding: 12px 14px; overflow-x: auto; font-size: 13.5px; }
.prose :not(pre) > code { color: var(--fg); background: var(--bar); padding: 1px 5px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; display: block; overflow-x: auto; margin: 14px 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.prose th { color: var(--hi); text-transform: uppercase; }
.prose pre { color: var(--fg); }
.prose li::before { color: var(--hi); }
.prose em { color: var(--dim); }
#marketplace-widget { margin: 14px 0; }

@media (prefers-reduced-motion: reduce) { .crt, .cur { animation: none; } .hud::before, .shot-zoom { transition: none; } }
@media (max-width: 600px) { .menu p { margin-left: 0; } .top nav a { margin-left: 10px; } }

/* screenshots: HUD frame with corner brackets in the palette accent, true colours above the scanlines */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; margin: 30px 0 0; }
.gallery .shot:first-child { grid-column: 1 / -1; }
.shot { position: relative; z-index: 60; margin: 0; text-shadow: none; }
.shot-cap { display: block; font: 13px var(--mono); color: var(--soft); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-idx { color: var(--hi); }
.hud { --b: var(--hi); position: relative; display: block; width: 100%; padding: 10px; border: 0; background: transparent; }
.hud::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: inset .2s ease;
  background:
    linear-gradient(var(--b), var(--b)) top left / 26px 2px no-repeat, linear-gradient(var(--b), var(--b)) top left / 2px 26px no-repeat,
    linear-gradient(var(--b), var(--b)) top right / 26px 2px no-repeat, linear-gradient(var(--b), var(--b)) top right / 2px 26px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / 26px 2px no-repeat, linear-gradient(var(--b), var(--b)) bottom left / 2px 26px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / 26px 2px no-repeat, linear-gradient(var(--b), var(--b)) bottom right / 2px 26px no-repeat; }
.hud img { display: block; width: 100%; height: auto; outline: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.shot-open { cursor: zoom-in; }
.shot-open:hover::before, .shot-open:focus-visible::before { inset: -5px; }
.shot-open:focus-visible { outline: none; }
.shot-zoom { position: absolute; right: 18px; bottom: 18px; font: 12px var(--mono); letter-spacing: .08em; color: var(--sel-fg); background: var(--sel-bg); padding: 2px 8px; opacity: 0; transition: opacity .2s; }
.shot-open:hover .shot-zoom, .shot-open:focus-visible .shot-zoom { opacity: 1; }
.hud { --b: var(--line); }
.hud::before { filter: drop-shadow(0 0 4px var(--b)) drop-shadow(0 0 8px var(--b)); }

.viewer { padding: 0; border: 0; background: transparent; max-width: min(1400px, 94vw); width: 100%; overflow: visible; }
.viewer::backdrop { background: rgba(0,0,0,.9); }
.viewer-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.viewer-bar .shot-cap { color: var(--hi); margin: 0; }
.viewer-close { font: 13px var(--mono); letter-spacing: .08em; color: var(--soft); background: none; border: 0; cursor: pointer; padding: 2px 6px; }
.viewer-close:hover, .viewer-close:focus-visible { background: var(--sel-bg); color: var(--sel-fg); outline: none; }
.viewer img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: #000; }
@media (max-width: 640px) { .gallery { grid-template-columns: minmax(0, 1fr); } }

/* ---- usability fixes ---- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--sel-bg); color: var(--sel-fg); padding: 6px 12px; }
.skip:focus { left: 12px; top: 12px; }
.hint { margin: -2px 0 10px; font-size: 13px; color: var(--hi); letter-spacing: .04em; }
.hint kbd { font: 12px var(--mono); color: var(--fg); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; }
@media (hover: none) and (pointer: coarse) { .keys-only { display: none; } }
a:focus-visible, button:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }

/* reading mode: content pages keep retro headings but drop the grid, glow and scanlines behind text */
[data-palette] body.reading { background-image: none; text-shadow: none; }
.reading .crt { display: none; }
.reading .page { max-width: 820px; }
.reading .lead { font: 18px/1.6 var(--sans); color: var(--soft); }
.reading .prose { font: 16.5px/1.75 var(--sans); max-width: 72ch; }
.reading .prose p, .reading .prose li { color: #d5e2f5; }
.reading .prose strong { color: var(--fg); }
.reading .prose h2 { text-transform: none; font-size: 32px; letter-spacing: .02em; }
.reading .prose h3 { font: 600 18px/1.3 var(--sans); text-transform: none; color: var(--fg); }
.reading .prose table { font: 15px/1.6 var(--sans); }
.reading .prose th { font: 600 12.5px var(--mono); letter-spacing: .05em; }
.reading .prose code, .reading .prose pre { font-family: var(--mono); }

/* phone width: banner scales to fit, menu entries stay on one line */
@media (max-width: 600px) {
  .menu a { flex-wrap: nowrap; gap: 10px; }
  .menu .n { font-size: 22px; flex: 1; min-width: 0; }
  .menu .v { margin-left: 0; }
  .panel { padding: 14px 14px 16px; }
}