decklight 0.1.0

package/themes/eclipse.css

@@ -0,0 +1,82 @@
+/* ═══════════════════════════════════════════════════════════════
+   Decklight theme · eclipse
+   dark · Total black, one corona of gold — maximum drama, minimum palette
+   Token contract: SPEC.md §5 — all values validated by test/contrast.mjs
+   ═══════════════════════════════════════════════════════════════ */
+
+.decklight {
+  /* ── canvas ─────────────────────────────── */
+  --bg: #0b0b0d;
+  --bg-accent: radial-gradient(circle at 50% 0%, #262008 0%, #0b0b0d 60%);
+  --fg: #ecebe6;
+  --muted: #a5a49c;
+
+  /* ── type ───────────────────────────────── */
+  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-heading: "Avenir Next", Avenir, Futura, "Century Gothic", "Segoe UI", sans-serif;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+  --heading-color: #f5c542;
+  --heading-weight: 900;
+  --link: #e0c268;
+
+  /* ── accent ─────────────────────────────── */
+  --accent: #e3bd54;
+  --accent-contrast: #241a00;
+
+  /* ── blocks ─────────────────────────────── */
+  --block-bg: #141416;
+  --block-border: 1px solid #26262a;
+  --block-radius: 6px;
+  --shadow: 0 10px 32px rgba(0, 0, 0, 0.7);
+
+  /* ── code ───────────────────────────────── */
+  --code-bg: #101012;
+  --code-fg: #e6e5e0;
+  --hl-keyword: #ecc14b;
+  --hl-string: #b9cc8c;
+  --hl-number: #e8a86b;
+  --hl-comment: #84837c;
+  --hl-function: #b3b3dd;
+  --hl-type: #d8cfa0;
+  --hl-punct: #a8a7a0;
+
+  /* ── diagram ────────────────────────────── */
+  --d-stroke: #8f8455;
+  --d-text: #ecebe6;
+  --d-muted: #98978f;
+  --d-accent: #f5c542;
+  --d-fill-1: #1a1812;
+  --d-fill-2: #211d10;
+  --d-fill-3: #191919;
+  --d-fill-4: #262014;
+  --d-fill-5: #1e1c15;
+  --d-fill-6: #232118;
+
+  /* ── terminal ───────────────────────────── */
+  --term-bg: #0d0d0f;
+  --term-fg: #e2e1dc;
+  --term-prompt: #f5c542;
+  --term-cursor: #f5c542;
+  --term-selection: rgba(245, 197, 66, 0.25);
+  --ansi-black: #8a8981;
+  --ansi-red: #e5897d;
+  --ansi-green: #a5c987;
+  --ansi-yellow: #f5c542;
+  --ansi-blue: #96abd0;
+  --ansi-magenta: #c2a0c8;
+  --ansi-cyan: #93ccc0;
+  --ansi-white: #e8e7e2;
+  --ansi-bright-black: #a2a199;
+  --ansi-bright-red: #f0aba1;
+  --ansi-bright-green: #c0dca6;
+  --ansi-bright-yellow: #fad76e;
+  --ansi-bright-blue: #b3c4e2;
+  --ansi-bright-magenta: #d8bcdd;
+  --ansi-bright-cyan: #b0e0d5;
+  --ansi-bright-white: #fdfcf7;
+
+  /* ── builds ─────────────────────────────── */
+  --dim-opacity: 0.25;
+}
+
+.decklight h1, .decklight h2 { letter-spacing: -0.03em; text-transform: uppercase; }

package/themes/ember.css

@@ -0,0 +1,80 @@
+/* ═══════════════════════════════════════════════════════════════
+   Decklight theme · ember
+   dark · Fireside warmth — smoked umber, glowing coals
+   Token contract: SPEC.md §5 — all values validated by test/contrast.mjs
+   ═══════════════════════════════════════════════════════════════ */
+
+.decklight {
+  /* ── canvas ─────────────────────────────── */
+  --bg: #1a1210;
+  --bg-accent: linear-gradient(160deg, #2a160e 0%, #1a1210 70%);
+  --fg: #f3e8e0;
+  --muted: #c2ab9d;
+
+  /* ── type ───────────────────────────────── */
+  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+  --heading-color: #ffc9a3;
+  --heading-weight: 800;
+  --link: #ffab7a;
+
+  /* ── accent ─────────────────────────────── */
+  --accent: #e5855f;
+  --accent-contrast: #2d0f00;
+
+  /* ── blocks ─────────────────────────────── */
+  --block-bg: #241813;
+  --block-border: 1px solid #3d2a20;
+  --block-radius: 12px;
+  --shadow: 0 10px 30px rgba(8, 3, 1, 0.6);
+
+  /* ── code ───────────────────────────────── */
+  --code-bg: #150e0b;
+  --code-fg: #eee0d6;
+  --hl-keyword: #f99c68;
+  --hl-string: #d0c973;
+  --hl-number: #fab98f;
+  --hl-comment: #98857a;
+  --hl-function: #e8a3a3;
+  --hl-type: #d9b380;
+  --hl-punct: #bfab9e;
+
+  /* ── diagram ────────────────────────────── */
+  --d-stroke: #a86a48;
+  --d-text: #f3e8e0;
+  --d-muted: #ab9689;
+  --d-accent: #ff7a45;
+  --d-fill-1: #2b1c14;
+  --d-fill-2: #332014;
+  --d-fill-3: #2a2015;
+  --d-fill-4: #3a2417;
+  --d-fill-5: #302019;
+  --d-fill-6: #28211a;
+
+  /* ── terminal ───────────────────────────── */
+  --term-bg: #120c09;
+  --term-fg: #ecdfd4;
+  --term-prompt: #ff7a45;
+  --term-cursor: #ff7a45;
+  --term-selection: rgba(255, 122, 69, 0.28);
+  --ansi-black: #9a8a7e;
+  --ansi-red: #ff7d68;
+  --ansi-green: #b5cc7a;
+  --ansi-yellow: #ffc36b;
+  --ansi-blue: #d9a878;
+  --ansi-magenta: #e09a9a;
+  --ansi-cyan: #a8ccb8;
+  --ansi-white: #efe4da;
+  --ansi-bright-black: #b0a094;
+  --ansi-bright-red: #ffa392;
+  --ansi-bright-green: #ccdf9c;
+  --ansi-bright-yellow: #ffd695;
+  --ansi-bright-blue: #e8c19a;
+  --ansi-bright-magenta: #f0bcbc;
+  --ansi-bright-cyan: #c5e0d0;
+  --ansi-bright-white: #fff8f2;
+
+  /* ── builds ─────────────────────────────── */
+  --dim-opacity: 0.3;
+}

package/themes/fjord.css

@@ -0,0 +1,80 @@
+/* ═══════════════════════════════════════════════════════════════
+   Decklight theme · fjord
+   dark · Nordic blue-gray dusk, glacial pastels, quiet and steady
+   Token contract: SPEC.md §5 — all values validated by test/contrast.mjs
+   ═══════════════════════════════════════════════════════════════ */
+
+.decklight {
+  /* ── canvas ─────────────────────────────── */
+  --bg: #232a35;
+  --bg-accent: #2b3442;
+  --fg: #e3e9f2;
+  --muted: #a8b4c4;
+
+  /* ── type ───────────────────────────────── */
+  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+  --heading-color: #c9dcf0;
+  --heading-weight: 600;
+  --link: #8fc3e8;
+
+  /* ── accent ─────────────────────────────── */
+  --accent: #8cc0ec;
+  --accent-contrast: #0b2338;
+
+  /* ── blocks ─────────────────────────────── */
+  --block-bg: #2b3340;
+  --block-border: 1px solid #3a4554;
+  --block-radius: 12px;
+  --shadow: 0 8px 26px rgba(10, 14, 20, 0.5);
+
+  /* ── code ───────────────────────────────── */
+  --code-bg: #1b212a;
+  --code-fg: #dde4ee;
+  --hl-keyword: #8fc3e8;
+  --hl-string: #a8d5a2;
+  --hl-number: #e8b98a;
+  --hl-comment: #8b98aa;
+  --hl-function: #98b8e8;
+  --hl-type: #b8a8e0;
+  --hl-punct: #a8b4c4;
+
+  /* ── diagram ────────────────────────────── */
+  --d-stroke: #7591ab;
+  --d-text: #e3e9f2;
+  --d-muted: #94a3b5;
+  --d-accent: #88c0f0;
+  --d-fill-1: #2e3946;
+  --d-fill-2: #31424f;
+  --d-fill-3: #3a3f50;
+  --d-fill-4: #2c4452;
+  --d-fill-5: #38414e;
+  --d-fill-6: #324457;
+
+  /* ── terminal ───────────────────────────── */
+  --term-bg: #171c24;
+  --term-fg: #dbe2ec;
+  --term-prompt: #88c0f0;
+  --term-cursor: #88c0f0;
+  --term-selection: rgba(136, 192, 240, 0.26);
+  --ansi-black: #8a97a8;
+  --ansi-red: #e88797;
+  --ansi-green: #9fd0a0;
+  --ansi-yellow: #ecc788;
+  --ansi-blue: #8ab4dd;
+  --ansi-magenta: #c2a3d8;
+  --ansi-cyan: #8fd4cf;
+  --ansi-white: #e5ecf4;
+  --ansi-bright-black: #a2afc0;
+  --ansi-bright-red: #f2a8b5;
+  --ansi-bright-green: #bce3bd;
+  --ansi-bright-yellow: #f5d9a8;
+  --ansi-bright-blue: #aacbe8;
+  --ansi-bright-magenta: #d6bfe8;
+  --ansi-bright-cyan: #aee5e0;
+  --ansi-bright-white: #fafafa;
+
+  /* ── builds ─────────────────────────────── */
+  --dim-opacity: 0.32;
+}

package/themes/friends.css

@@ -0,0 +1,82 @@
+/* ═══════════════════════════════════════════════════════════════
+   Decklight theme · friends
+   light · warm cream, door purple, frame yellow, couch orange
+   Inspired by Friends — the purple door, the yellow frame, the orange couch — palette kept canonical where possible,
+   every gated pair fitted to the WCAG contract.
+   Token contract: SPEC.md §5 — validated by test/contrast.mjs
+   ═══════════════════════════════════════════════════════════════ */
+
+.decklight {
+  /* ── canvas ─────────────────────────────── */
+  --bg: #f7f1e2;
+  --bg-accent: none;
+  --fg: #3a3129;
+  --muted: #7d7261;
+
+  /* ── type ───────────────────────────────── */
+  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+  --heading-color: #6b4d9e;
+  --heading-weight: 700;
+  --link: #8a5f3f;
+
+  /* ── accent ─────────────────────────────── */
+  --accent: #7b5aa6;
+  --accent-contrast: #fbfbfa;
+
+  /* ── blocks ─────────────────────────────── */
+  --block-bg: #e9e5db;
+  --block-border: 1px solid #d0ccc1;
+  --block-radius: 12px;
+  --shadow: 0 5px 18px rgba(30, 30, 40, 0.12);
+
+  /* ── code ───────────────────────────────── */
+  --code-bg: #3a3129;
+  --code-fg: #f2ead8;
+  --hl-keyword: #c8a8f0;
+  --hl-string: #b9cd89;
+  --hl-number: #eeb062;
+  --hl-comment: #94897a;
+  --hl-function: #8fc0e8;
+  --hl-type: #e8c078;
+  --hl-punct: #d8cfc0;
+
+  /* ── diagram ────────────────────────────── */
+  --d-stroke: #7d7261;
+  --d-text: #3a3129;
+  --d-muted: #7d7261;
+  --d-accent: #7b5aa6;
+  --d-fill-1: #ddd6e5;
+  --d-fill-2: #e3decd;
+  --d-fill-3: #e2cec4;
+  --d-fill-4: #dde5d6;
+  --d-fill-5: #cddae3;
+  --d-fill-6: #e2c4d3;
+
+  /* ── terminal ───────────────────────────── */
+  --term-bg: #332b24;
+  --term-fg: #eceae6;
+  --term-prompt: #8b6eb1;
+  --term-cursor: #8b6eb1;
+  --term-selection: rgba(123, 90, 166, 0.28);
+  --ansi-black: #92899f;
+  --ansi-red: #c38b79;
+  --ansi-green: #79c388;
+  --ansi-yellow: #c3bc79;
+  --ansi-blue: #7990c3;
+  --ansi-magenta: #bf79c3;
+  --ansi-cyan: #79c1c3;
+  --ansi-white: #e0dee3;
+  --ansi-bright-black: #ada7b4;
+  --ansi-bright-red: #dbad9e;
+  --ansi-bright-green: #9edbaa;
+  --ansi-bright-yellow: #dbd69e;
+  --ansi-bright-blue: #9eb1db;
+  --ansi-bright-magenta: #d89edb;
+  --ansi-bright-cyan: #9edadb;
+  --ansi-bright-white: #f2f2f3;
+
+  /* ── builds ─────────────────────────────── */
+  --dim-opacity: 0.3;
+}

package/themes/gallery.html

@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Decklight — Theme Gallery</title>
+<style>
+  /* Gallery chrome (independent of the Decklight runtime) */
+  :root { color-scheme: light; }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0; padding: 32px 40px 80px;
+    background: #eceef2; color: #1c2430;
+    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  }
+  header { max-width: 1400px; margin: 0 auto 20px; }
+  header h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.01em; }
+  header p { margin: 0; color: #5b6675; }
+  #filters { max-width: 1400px; margin: 14px auto 26px; display: flex; gap: 8px; }
+  #filters button {
+    border: 1px solid #c6cdd8; background: #fff; color: #38445a;
+    padding: 5px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
+  }
+  #filters button.on { background: #1c2430; color: #fff; border-color: #1c2430; }
+  #warn {
+    display: none; max-width: 1400px; margin: 0 auto 24px; padding: 14px 18px;
+    background: #fff3cd; border: 1px solid #e0c76a; border-radius: 10px; color: #5c4a00;
+  }
+  #warn code { background: #f5e7ad; padding: 1px 6px; border-radius: 4px; }
+  #grid {
+    max-width: 1400px; margin: 0 auto; display: grid; gap: 22px;
+    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
+  }
+  .card { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 3px 14px rgba(20, 30, 50, 0.1); }
+  .card footer {
+    display: flex; justify-content: space-between; align-items: baseline;
+    padding: 10px 14px; font-size: 13px; color: #38445a; background: #fff;
+  }
+  .card footer .mode { color: #7a8494; font-size: 12px; }
+
+  /* Mini slide — consumes ONLY theme tokens */
+  .mini {
+    background: var(--bg); color: var(--fg);
+    font-family: var(--font-body);
+    padding: 18px 20px 16px; min-height: 300px;
+    display: flex; flex-direction: column; gap: 10px;
+  }
+  .mini h3 {
+    margin: 0; font-family: var(--font-heading); color: var(--heading-color);
+    font-weight: var(--heading-weight); font-size: 21px; line-height: 1.15;
+  }
+  .mini .body { margin: 0; font-size: 12.5px; line-height: 1.45; }
+  .mini .body .mut { color: var(--muted); }
+  .mini .body a { color: var(--link); }
+  .mini .chips { display: flex; gap: 8px; align-items: center; }
+  .mini .chip {
+    background: var(--accent); color: var(--accent-contrast);
+    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
+  }
+  .mini .block-demo {
+    background: var(--block-bg); border: var(--block-border);
+    border-radius: var(--block-radius); box-shadow: var(--shadow);
+    color: var(--fg); font-size: 11px; padding: 4px 10px;
+  }
+  .mini pre {
+    margin: 0; background: var(--code-bg); color: var(--code-fg);
+    font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
+    padding: 9px 12px; border-radius: 8px; overflow: hidden;
+  }
+  .mini pre .k { color: var(--hl-keyword); font-weight: 600; }
+  .mini pre .s { color: var(--hl-string); }
+  .mini pre .n { color: var(--hl-number); }
+  .mini pre .c { color: var(--hl-comment); font-style: italic; }
+  .mini pre .f { color: var(--hl-function); }
+  .mini pre .t { color: var(--hl-type); }
+  .mini pre .p { color: var(--hl-punct); }
+  .mini .term {
+    background: var(--term-bg); color: var(--term-fg);
+    font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
+    padding: 8px 12px; border-radius: 8px;
+  }
+  .mini .term .pr { color: var(--term-prompt); font-weight: 700; }
+  .mini .term .a-r { color: var(--ansi-red); } .mini .term .a-g { color: var(--ansi-green); }
+  .mini .term .a-y { color: var(--ansi-yellow); } .mini .term .a-b { color: var(--ansi-blue); }
+  .mini .term .a-m { color: var(--ansi-magenta); } .mini .term .a-c { color: var(--ansi-cyan); }
+  .mini svg { display: block; width: 100%; height: auto; }
+</style>
+</head>
+<body>
+<header>
+  <h1>Decklight themes</h1>
+  <p>75 themes on one token contract — canvas · type · accent · blocks · code · diagram · terminal. All WCAG-validated by <code style="font-size:13px">test/contrast.mjs</code>.</p>
+</header>
+<div id="filters">
+  <button data-f="all" class="on">All 30</button>
+  <button data-f="light">Light</button>
+  <button data-f="dark">Dark</button>
+</div>
+<div id="warn">
+  Theme files couldn’t be fetched — you’re probably viewing this over <code>file://</code>.
+  Serve the directory instead: <code>python3 -m http.server</code> (or <code>npx serve</code>) in <code>themes/</code>, then open <code>http://localhost:8000/gallery.html</code>.
+</div>
+<div id="grid"></div>
+
+<script>
+const THEMES = [
+  ['aurora','dark','northern-lights gradient'],       ['graphite','dark','machined charcoal + orange'],
+  ['obsidian','dark','volcanic, ember red, hard edges'],['midnight','dark','indigo + lamplight amber'],
+  ['fjord','dark','nordic dusk, glacial pastels'],     ['cosmos','dark','nebula purples, stargazer pink'],
+  ['ember','dark','fireside umber + coals'],           ['moss','dark','old-forest greens, serif'],
+  ['apple2','dark','green phosphor, mono display'],       ['c64','dark','blue on blue, PETSCII spirit'],
+  ['gameboy','light','four shades of pea-soup green'],     ['snes','light','console gray, ABXY pops'],
+  ['genesis','dark','Sega black, blue + red stripe'],      ['miami-vice','dark','flamingo pink, seafoam teal'],
+  ['friends','light','cream, door purple, frame yellow'],  ['severance','dark','lumon midnight, cold teal'],
+  ['stranger-things','dark','upside-down black, title red'],['aliens','dark','motion-tracker phosphor + amber'],
+  ['blade-runner','dark','neon noir, cyan + magenta'],     ['star-wars','dark','space black, crawl yellow'],
+  ['terminator','dark','gunmetal chrome, HUD red'],        ['godfather','dark','undertaker black, serif ivory'],
+  ['pulp-fiction','dark','dime-novel black, poster yellow'],
+  ['reveal-black','dark','the Reveal.js default, classic blue'], ['reveal-white','light','plain white, Reveal blue, monokai code'],
+  ['reveal-league','dark','gunmetal wash, condensed caps, cyan'], ['reveal-beige','light','parchment wash, warm browns'],
+  ['reveal-sky','light','pale sky wash, rounded type'],          ['reveal-night','dark','true dark, Montserrat, amber'],
+  ['reveal-serif','light','ivory, Palatino, quiet inks'],        ['reveal-simple','light','bare white, black Lato, one blue'],
+  ['reveal-solarized','light','canonical Solarized base3 cream'],['reveal-moon','dark','Solarized base03 deep teal'],
+  ['reveal-blood','dark','coal black, dried-blood red'],         ['reveal-dracula','dark','the vampire palette, neon syntax'],
+  ['metropolis','light','Beamer metropolis: spruce + one orange'],['seriph','light','warm white, serif display, one gold'],
+  ['velvet','dark','plum + rose gold, serif'],         ['carbon','dark','IDE graphite, duotone syntax'],
+  ['synthwave','dark','neon horizon, retro-future'],   ['ink','dark','sumi-e minimal, vermillion'],
+  ['eclipse','dark','black + one corona of gold'],     ['storm','dark','squall slate + lightning'],
+  ['porcelain','light','gallery white, serif ink-blue'],['paper','light','typewriter manuscript'],
+  ['meadow','light','spring grass + clover'],          ['glacier','light','arctic daylight, crisp'],
+  ['citrus','light','lime + tangerine, rounded'],      ['dune','light','sandstone + terracotta serif'],
+  ['orchid','light','lilac tint, feather headings'],   ['harvest','light','october ivory, slab'],
+  ['coastal','light','sea-sky gradient + coral'],      ['linen','light','unbleached fiber + olive'],
+  ['berry','light','raspberry energy'],                ['slate','light','boardroom neutral (on purpose)'],
+  ['latte','light','steamed milk + espresso'],         ['peony','light','editorial blush, italic serif'],
+  ['mint','light','spearmint SaaS-fresh, pills'],      ['sepia','light','antique folio, oxblood'],
+  ['ibm-modern','dark','Carbon g100: Plex + IBM Blue'], ['ibm-oldschool','dark','3270 green-phosphor mainframe'],
+];
+
+const MINI = (id) => `
+  <div class="mini" id="${id}">
+    <h3>Real-Time AI, Slide by Slide</h3>
+    <p class="body">Body text with <span class="mut">muted detail</span>, a <a href="#">link</a>, and
+    <span class="chip">accent</span></p>
+    <div class="chips"><span class="block-demo">block surface</span></div>
+    <pre><span class="c">-- create a streaming agent</span>
+<span class="k">CREATE AGENT</span> <span class="f">triage</span> <span class="k">USING MODEL</span> <span class="t">claude</span>
+<span class="k">WITH</span> <span class="p">(</span><span class="s">'max_iterations'</span> <span class="p">=</span> <span class="n">5</span><span class="p">);</span></pre>
+    <div class="term"><span class="pr">$</span> decklight-rec demo.term.yaml<br>
+      <span class="a-g">✓ recorded</span> <span class="a-c">3 steps</span> · <span class="a-y">1.8s</span> · <span class="a-m">redacted 1</span> <span class="a-r">0 failed</span></div>
+    <svg viewBox="0 0 300 54">
+      <rect x="4" y="10" width="84" height="34" rx="7" fill="var(--d-fill-1)" stroke="var(--d-stroke)"/>
+      <text x="46" y="31" text-anchor="middle" font-size="11" fill="var(--d-text)">Kafka</text>
+      <line x1="92" y1="27" x2="124" y2="27" stroke="var(--d-accent)" stroke-width="2"/>
+      <rect x="128" y="10" width="84" height="34" rx="7" fill="var(--d-fill-2)" stroke="var(--d-stroke)"/>
+      <text x="170" y="31" text-anchor="middle" font-size="11" fill="var(--d-text)">Agent</text>
+      <line x1="216" y1="27" x2="248" y2="27" stroke="var(--d-muted)" stroke-width="2" stroke-dasharray="4 3"/>
+      <rect x="252" y="10" width="44" height="34" rx="7" fill="var(--d-fill-3)" stroke="var(--d-stroke)"/>
+      <text x="274" y="31" text-anchor="middle" font-size="11" fill="var(--d-text)">Act</text>
+    </svg>
+  </div>`;
+
+async function load() {
+  const grid = document.getElementById('grid');
+  const importSet = new Set();
+  let failed = false;
+
+  for (const [name, mode, tag] of THEMES) {
+    const card = document.createElement('div');
+    card.className = 'card';
+    card.dataset.mode = mode;
+    card.innerHTML = MINI('g-' + name) + `<footer><strong>${name}</strong><span>${tag} <span class="mode">· ${mode}</span></span></footer>`;
+    grid.appendChild(card);
+    try {
+      const res = await fetch(`./${name}.css`);
+      if (!res.ok) throw new Error(res.status);
+      let css = await res.text();
+      for (const imp of css.match(/@import\s+url\([^)]*\)[^;]*;/g) ?? []) importSet.add(imp);
+      css = css.replace(/@import\s+url\([^)]*\)[^;]*;/g, '');
+      css = css.replace(/\.decklight\b/g, `#g-${name}`);   // scope tokens + theme extras to this card
+      const style = document.createElement('style');
+      style.textContent = css;
+      document.head.appendChild(style);
+    } catch (e) { failed = true; }
+  }
+  if (importSet.size) {
+    const s = document.createElement('style');
+    s.textContent = [...importSet].join('\n');
+    document.head.prepend(s);
+  }
+  if (failed) document.getElementById('warn').style.display = 'block';
+}
+
+document.getElementById('filters').addEventListener('click', (e) => {
+  const f = e.target.dataset.f; if (!f) return;
+  document.querySelectorAll('#filters button').forEach(b => b.classList.toggle('on', b === e.target));
+  document.querySelectorAll('.card').forEach(c => c.style.display = (f === 'all' || c.dataset.mode === f) ? '' : 'none');
+});
+
+load();
+</script>
+</body>
+</html>

package/themes/gameboy.css

@@ -0,0 +1,118 @@
+/* ═══════════════════════════════════════════════════════════════
+   Decklight theme · gameboy
+   light · four shades of pea-soup green, chunky pixels at heart
+   Inspired by the original Game Boy DMG-01 LCD — palette kept canonical where possible,
+   every gated pair fitted to the WCAG contract.
+   rule-exception: R1 a four-shade monochrome LCD is the identity
+   rule-exception: R2 the canonical DMG pea-green screen
+   rule-exception: R8 everything is pea-soup green on this hardware
+   Token contract: SPEC.md §5 — validated by test/contrast.mjs
+   ═══════════════════════════════════════════════════════════════ */
+
+.decklight {
+  /* ── canvas ─────────────────────────────── */
+  --bg: #9bbc0f;
+  --bg-accent: none;
+  --fg: #0f380f;
+  --muted: #2f5a1f;
+
+  /* ── type ───────────────────────────────── */
+  --font-body: "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+  --font-heading: "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+  --heading-color: #0f380f;
+  --heading-weight: 800;
+  --link: #1f4a14;
+
+  /* ── accent ─────────────────────────────── */
+  --accent: #306230;
+  --accent-contrast: #fbfbfa;
+
+  /* ── blocks ─────────────────────────────── */
+  --block-bg: #828d53;
+  --block-border: 1px solid #8d9375;
+  --block-radius: 4px;
+  --shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
+
+  /* ── code ───────────────────────────────── */
+  --code-bg: #0f380f;
+  --code-fg: #9bbc0f;
+  --hl-keyword: #aed81f;
+  --hl-string: #8bac0f;
+  --hl-number: #c8e858;
+  --hl-comment: #648841;
+  --hl-function: #9bd83f;
+  --hl-type: #bcd85f;
+  --hl-punct: #8fb04f;
+
+  /* ── diagram ────────────────────────────── */
+  --d-stroke: #2f5a1f;
+  --d-text: #0f380f;
+  --d-muted: #2f5a1f;
+  --d-accent: #306230;
+  --d-fill-1: #c3d654;
+  --d-fill-2: #b8cf48;
+  --d-fill-3: #cbdd66;
+  --d-fill-4: #b2c93e;
+  --d-fill-5: #c8da5e;
+  --d-fill-6: #bdd24e;
+
+  /* ── terminal ───────────────────────────── */
+  --term-bg: #9bbc0f;
+  --term-fg: #0f380f;
+  --term-prompt: #1d4a12;
+  --term-cursor: #0f380f;
+  --term-selection: rgba(15, 56, 15, 0.22);
+  --ansi-black: #0f380f;
+  --ansi-red: #2b4f14;
+  --ansi-green: #1a4a10;
+  --ansi-yellow: #2f5716;
+  --ansi-blue: #14421c;
+  --ansi-magenta: #254c1e;
+  --ansi-cyan: #175018;
+  --ansi-white: #306230;
+  --ansi-bright-black: #204a18;
+  --ansi-bright-red: #33581a;
+  --ansi-bright-green: #245414;
+  --ansi-bright-yellow: #365c1c;
+  --ansi-bright-blue: #1c4a22;
+  --ansi-bright-magenta: #2c5424;
+  --ansi-bright-cyan: #1f561e;
+  --ansi-bright-white: #0f380f;
+
+  /* ── builds ─────────────────────────────── */
+  --dim-opacity: 0.35;
+}
+
+.decklight h1, .decklight h2 { text-transform: uppercase; letter-spacing: 0.03em; }
+
+/* ── DMG-01 LCD character ────────────────────────────────────────────────────
+   Not a CRT: no scanlines, no tear. The Game Boy look is a visible pixel
+   matrix (both axes), the famous LCD ghosting smear, a reflective
+   no-backlight vignette — and no window chrome at all. Static by nature,
+   so nothing to disable under reduced motion. */
+.decklight { --term-chrome: none; }
+.decklight .terminal-screen {
+  position: relative;
+  overflow: hidden;
+  border: 10px solid #6f7a72;               /* the bezel */
+  border-radius: 8px;
+  box-shadow: inset 0 0 26px rgba(15, 56, 15, 0.30);
+  text-shadow: 1.5px 0 0 rgba(15, 56, 15, 0.20);  /* LCD ghosting smear */
+}
+.decklight .terminal-screen::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.12) 0 1px, transparent 1px 3px),
+    repeating-linear-gradient(90deg, rgba(15, 56, 15, 0.12) 0 1px, transparent 1px 3px);
+}
+.decklight .terminal-screen::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.12), transparent 46%);
+}