/* Deck Neon — generated from tokens.json */
:root, [data-theme="dark"] {
  --ground: #0b0c13; /* The base background: page bottom, terminal background, the deck itself. Every text token reads on it. In light: the page bottom, a cool paper grey. */
  --page-top: #161827; /* Top stop of the page gradient (page-top to ground, top to bottom). Text and muted both pass on it. */
  --panel: #12131d; /* Solid surface for page furniture outside the deck (rule cards, notes) from the original Deck XL page. Keyed surfaces stay transparent instead. */
  --chassis: #050608; /* The Stream Deck hardware frame behind the key grid in mockups. Never a content surface. */
  --track: #262838; /* Empty meter tracks, subtle fills, dividers and split lines. ANSI black. Too dark for text. */
  --dot: #21222a; /* The dot-grid dots on the page background (sampled from bg-standard.png). Decorative only, deliberately near-invisible. */
  --text: #eeebf5; /* Primary text: labels, big numbers, body copy. 16.6:1 on ground, 14.9:1 on page-top, 12.4:1 on track. In light: near-black ink, 15.6:1 on ground and 17:1 on Lens glass. */
  --muted: #9a98ae; /* Secondary text: notes, captions, and labels on dimmed items. 6.9:1 on ground, 5.2:1 on track. In light: 5.6:1 on ground, 6.2:1 on Lens glass. */
  --gray: #5b5f7a; /* The unavailable state, for marks only: the icon and meter of anything that can't act, and the rim, tab and stripe of a dimmed careful key (other dimmed rims keep their own color at dim strength). 3.1:1 on ground clears the 3:1 bar for icons. Never use it for words, including on dimmed items: their eyebrow (the reason), label and note use muted. Kept exact from svg.ts. In light: 3.4:1 on ground, still marks only. */
  --claude: #ff8a5b; /* Claude's rim and tab (coral, rounded corners), the terminal cursor, and selection wash. Rim only; never a state. In light: a deeper coral so the rim keeps 3.9:1 on ground. */
  --codex: #eeebf5; /* ChatGPT and Codex rim and tab (white, 45-degree cut corners). Same value as text, different job: rim only. In light: the white rim becomes ink. */
  --lens: #f6f4fb; /* Lens's light leak: the bright core of the sliver on a Lens surface's top edge, which stands in for the tab, and the brand's mark and accent (the current nav link, link underlines). Never a state. */
  --lens-fringe-warm: #ff7ac3; /* The warm end of the light leak's prism fringe (left). Hairline decoration only, never text or state. */
  --lens-fringe-cool: #52e0dc; /* The cool end of the light leak's prism fringe (right). Hairline decoration only, never text or state. */
  --lens-glass: rgba(255, 255, 255, 0.05); /* A Lens surface's glass at the bottom of its gradient, over a 16px backdrop blur. In dark, text reads 13.9:1 and muted 5.8:1 on it; gray drops to 2.6:1, so dimmed Lens surfaces draw their marks in muted. In light, text reads 17:1 and muted 6.2:1. */
  --lens-glass-top: rgba(255, 255, 255, 0.09); /* The top of a Lens surface's glass gradient, where the light comes in. */
  --lens-glass-strong: rgba(20, 22, 33, 0.86); /* Thicker glass for surfaces that float over content: dialogs, toasts and the nav bar. */
  --lens-edge: rgba(255, 255, 255, 0.12); /* A Lens surface's 1px edge: the glass's own outline, with no hue. Decoration; the words and icons carry the meaning. */
  --lens-sheen: rgba(255, 255, 255, 0.16); /* The 1px highlight along the inside of a Lens surface's top edge. */
  --lens-wash-a: rgba(180, 140, 255, 0.14); /* A faint violet wash on a Lens page (top left), so the glass has something to refract. Background only. */
  --lens-wash-b: rgba(77, 182, 255, 0.11); /* A faint blue wash on a Lens page (bottom right). Background only. */
  --mikah: #f3ead3; /* Mikah's Workbench rim: cream silkscreen on a green circuit board. Used only when Mikah asks for Workbench by name; Lens is the default. Rim, tab and board lettering only; never a state. 16.3:1 on ground, 10.6:1 on the board plate. Workbench surfaces are dark in both themes. */
  --mikah-mask: #123f29; /* Mikah's board plate: solder-mask green, filling the rim at board-plate (90%). The green of the brand. Every state color reads on it (green 7.7:1, amber 8.9:1, red 4.2:1 for icons). Workbench only. */
  --mikah-trace: #2e7d4f; /* Copper traces on a Mikah board: faint decoration along the edges, never behind text. 2.5:1 on the plate, deliberately quiet. Workbench only. */
  --mikah-brass: #e8c26a; /* Brass hardware on a Mikah board: mounting holes, edge-finger tab, solder pads, and the brand's accent on pages (links, list markers, the current nav section). Decoration and accent only; amber is the state. Workbench only. */
  --mikah-silk-muted: #b8c4ae; /* Secondary text on a Mikah board (notes, help, placeholders): 7:1 on the plate, where muted would be 4.5:1. Workbench only. */
  --ha-office: var(--cat-lights); /* HA OFFICE rim and tab: the Lights category purple, the same as the HA Office folder key on Main, with standard radius-key corners. Rim only, never a state. Pink stays the heartbeat's. */
  --ha-glass: #130d2b; /* The dark glass plate inside HA OFFICE rims, at glass-plate (84%), so labels read over the skyline wallpaper. Only for surfaces that sit on a picture. Even over pure white, text stays 10:1 on the plate; muted drops to 4.2:1 there, so keep notes short on the brightest windows. */
  --light-warm: #ffe7b0; /* Warm white for lights: an HA OFFICE light that is ON (with the active wash), and controls that change light (brightness, steps, Studio On). Never amber, which means needs you. 16.1:1 on ground. */
  --green: #4be39a; /* State: ready, done, success, allow. Inside the component (icon, ring, eyebrow, tint), never on the rim. Meters below 70%. In light: #0a7a4a, 4.7:1 on ground, so its eyebrows still read as words. */
  --blue: #4db6ff; /* State: working, in progress, informational. In light: #1765c4, 5.0:1 on ground, so its eyebrows still read as words. */
  --amber: #ffd447; /* State: needs you, warning, waiting on a person. Meters from 70% to 89%. In light: #9a5c00, 4.7:1 on ground, so its eyebrows still read as words. */
  --purple: #b48cff; /* State: unread; also settings (level, effort, speed and Fast mode). In light: #6d44d6, 5.3:1 on ground, so its eyebrows still read as words. */
  --red: #ff5a64; /* State: trouble, error, destructive. Meters at 90% and above. The careful rim (with the hazard stripe) is the one place red goes on a rim. In light: #c42b38, 4.9:1 on ground, so its eyebrows still read as words. */
  --pink: #ff7ac3; /* Spare accent, used sparingly. On the deck it marks the heartbeat critter. In light: #bf2f7d, 4.7:1 on ground, so its eyebrows still read as words. */
  --cat-heartbeat: var(--pink); /* Category rim: the one animated critter per page, always top right. */
  --cat-errands: var(--green); /* Category rim: errands (Masked Email, Time Change, Make .ics). */
  --cat-show-prep: #ff9a3d; /* Category rim: show prep (Clockwise, TNW). 9.2:1 on ground. */
  --cat-text-tools: var(--amber); /* Category rim: text tools (Type Clip, Title Case, Clean Links, Transform). */
  --cat-lights: var(--purple); /* Category rim: lights (HA Office, Fix Elgato Lights). */
  --cat-prompter: var(--blue); /* Category rim: prompter (Preview, Window, 50%). */
  --cat-careful: var(--red); /* Category rim: careful keys, hold-only or high-impact (Display Sleep, Studio Off, All Office Off, Go Live, Publish, Pause). Always with the hazard stripe. */
  --cat-navigation: #edeaf6; /* Category rim: navigation (Main, Back), always bottom right. */
  --show-hoa: #ffd447; /* MAIN key rim on Hands on Apple pages (sampled from cl-nav-main-hoa.png). */
  --show-tnw: #4d8bff; /* MAIN key rim on Tech News Weekly pages (sampled from cl-nav-main-tnw.png). */
  --show-hot: #ff5a4e; /* MAIN key rim on Hands on Tech pages (sampled from cl-nav-main-hot.png). */
  --show-hoai: #a77bff; /* MAIN key rim on Hands on AI pages (sampled from cl-nav-main-hoai.png). */
  --show-ios-today: #d98bff; /* MAIN key rim on iOS Today pages (sampled from cl-nav-main-ios-today.png). */
  --show-crafting: #ff9a6b; /* MAIN key rim on Mikah's Crafting Corner pages (sampled from cl-nav-main-crafting.png). */
  --show-media: #8c8cff; /* MAIN key rim on Media Club pages (sampled from cl-nav-main-media.png). */
  --show-live: #ff5e7a; /* MAIN key rim on Live Stream pages (sampled from cl-nav-main-live.png). */
  --ansi-black: var(--track); /* ANSI 0 (black). */
  --ansi-red: var(--red); /* ANSI 1. */
  --ansi-green: var(--green); /* ANSI 2. */
  --ansi-yellow: var(--amber); /* ANSI 3. */
  --ansi-blue: var(--blue); /* ANSI 4. */
  --ansi-magenta: var(--purple); /* ANSI 5. */
  --ansi-cyan: #52e0dc; /* ANSI 6. Cyan exists only in the terminal palette. */
  --ansi-white: var(--muted); /* ANSI 7 (white is the muted grey). */
  --ansi-bright-black: #6f728a; /* ANSI 8: comments and autosuggestions. 4.1:1 on ground, just under 4.5:1; kept exact from the Terminal and Ghostty profiles. */
  --ansi-bright-red: #ff838b; /* ANSI 9: red mixed 25% toward white. */
  --ansi-bright-green: #78eab3; /* ANSI 10. */
  --ansi-bright-yellow: #ffdf75; /* ANSI 11. */
  --ansi-bright-blue: #7ac8ff; /* ANSI 12. */
  --ansi-bright-magenta: #c7a9ff; /* ANSI 13. */
  --ansi-bright-cyan: #7de8e5; /* ANSI 14. */
  --ansi-bright-white: var(--text); /* ANSI 15. */
  --term-selection: #59342a; /* Terminal selection: coral at 32% over ground, text stays text. */
  --shadow-deck: 0 30px 60px -20px #000000, inset 0 1px 0 #2b2d38; /* The hardware deck mockup only. Keyed surfaces glow rather than cast shadows; Lens glass is the one exception (shadow-lens). */
  --shadow-lens: 0 10px 28px rgba(0, 0, 0, 0.35); /* The soft lift under a Lens surface. The only shadow on a keyed surface; every other brand glows instead. */
}
[data-theme="light"] {
  --ground: #eef0f4;
  --page-top: #f8f9fb;
  --panel: #ffffff;
  --track: #dcdfe6;
  --dot: #d9dce4;
  --text: #16171f;
  --muted: #5b5e70;
  --gray: #7d8195;
  --claude: #c9542a;
  --codex: #16171f;
  --lens: #22232d;
  --lens-fringe-warm: #d9468f;
  --lens-fringe-cool: #13958f;
  --lens-glass: rgba(255, 255, 255, 0.70);
  --lens-glass-top: rgba(255, 255, 255, 0.92);
  --lens-glass-strong: rgba(250, 251, 253, 0.92);
  --lens-edge: rgba(22, 23, 31, 0.11);
  --lens-sheen: #ffffff;
  --lens-wash-a: rgba(160, 120, 255, 0.18);
  --lens-wash-b: rgba(77, 160, 255, 0.16);
  --ha-office: var(--cat-lights);
  --green: #0a7a4a;
  --blue: #1765c4;
  --amber: #9a5c00;
  --purple: #6d44d6;
  --red: #c42b38;
  --pink: #bf2f7d;
  --cat-heartbeat: var(--pink);
  --cat-errands: var(--green);
  --cat-text-tools: var(--amber);
  --cat-lights: var(--purple);
  --cat-prompter: var(--blue);
  --cat-careful: var(--red);
  --ansi-black: var(--track);
  --ansi-red: var(--red);
  --ansi-green: var(--green);
  --ansi-yellow: var(--amber);
  --ansi-blue: var(--blue);
  --ansi-magenta: var(--purple);
  --ansi-white: var(--muted);
  --ansi-bright-white: var(--text);
  --shadow-lens: 0 10px 26px rgba(30, 35, 70, 0.10);
}
:root {
  --space-1: 6px; /* Tight gaps: legend rows, icon-to-text. */
  --space-2: 8px; /* Gaps between pills and list items. */
  --space-3: 14px; /* Gaps between cards and keys; card padding (vertical). */
  --space-4: 18px; /* Card padding (horizontal); column gaps. */
  --space-5: 26px; /* Deck padding; space above a section. */
  --space-6: 40px; /* Section padding; page gutter on wide screens. */
  --key-size: 144px; /* A key at design scale (Stream Deck XL keys are 96 x 96 @2x; art is drawn at 144 and exported at 288). */
  --key-gap: 14px; /* Gap between keys in a deck grid. */
  --key-inset: 5px; /* The rim's inset inside a key, so its glow fits. */
  --dot-pitch: 24px; /* Dot-grid pitch on page backgrounds. */
  --tab-width: 32px; /* The tab's width along the rim's outer edge. It hangs inside the rim. */
  --tab-height: 5.6px; /* How far the tab hangs down from the rim's outer edge. */
  --tab-slant: 2.4px; /* How far each side of the tab angles in, top to bottom. */
  --rim-glow: 7px; /* Wide rim stroke at 17% opacity. */
  --rim-line: 2.2px; /* Crisp rim stroke at 90% opacity. */
  --icon-stroke: 4.2px; /* Line-icon stroke at 144 scale; its glow pass is 10px at 18%. */
  --ring-stroke: 8px; /* Ring meter track and arc width; the arc's glow pass is 14px at 20%. */
  --radius-key: 20px; /* Claude rim corner on a 144 key, panels and dialogs. */
  --chamfer-key: 19px; /* Codex rim: 45-degree cut corners on a 144 key, panels and dialogs. */
  --radius-surface: 14px; /* Rim corner on large surfaces (terminal windows, Ghostty splits) and page cards. */
  --radius-control: 10px; /* Rim corner on buttons, fields, segmented controls and toasts (the key's ratio at control size). */
  --chamfer-control: 10px; /* Codex cut on buttons, fields, segmented controls and toasts. */
  --radius-lens: 14px; /* Lens corner on keys (16 at 144 scale), panels, dialogs and metrics. */
  --radius-lens-control: 9px; /* Lens corner on buttons, fields, segmented controls and toasts. Switches and pills round fully. */
  --radius-board: 12px; /* Mikah's board corner on a 144 key, panels and dialogs: tighter than radius-key, like a cut circuit board. */
  --radius-board-control: 6px; /* Mikah's board corner on buttons, fields, segmented controls, toggles and toasts. */
  --radius-tab: 3.75px; /* The folder key's pill tab (half its 7.5 height). Ordinary keys use the inset, angled tab. */
  --radius-chassis: 16px; /* The deck's key well in mockups. */
  --radius-pill: 999px; /* Status pills and nav chips. */
  --rim-glow-opacity: 0.17; /* Wide rim stroke. */
  --rim-line-opacity: 0.9; /* Crisp rim stroke. */
  --dim: 0.42; /* Rim strength on anything that can't act (multiplies both rim strokes). */
  --tab-dim: 0.5; /* Tab opacity on a dimmed component. */
  --active-tint: 0.13; /* Face wash in the state color. On an active key, a band between the eyebrow and the label, never under text; on the web, a pressed control or the panel that needs you. */
  --face-glow: 0.3; /* Radial glow behind the icon (radius 52 at 144). 0.26 meters, 0.12 dimmed; active keys use face-glow-active. */
  --face-glow-active: 0.7; /* An active key's icon glow (a light that's on, the current option): radius 30 at 144, so it stays clear of the eyebrow and label. */
  --icon-glow: 0.18; /* The icon's wide glow pass. */
  --level-empty: 0.45; /* Empty level-meter bars (outline only). */
  --hazard: 0.95; /* Hazard stripe fill; 0.4 when dimmed. */
  --glass-plate: 0.84; /* Opacity of the ha-glass plate inside HA OFFICE keys and surfaces. */
  --board-plate: 0.9; /* Opacity of the mikah-mask plate inside Mikah surfaces; half that when the surface can't act (an unpowered board). */
  --meter-amber-at: 70; /* Meters turn amber at this percentage. */
  --meter-red-at: 90; /* Meters turn red at this percentage. */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: Barlow, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --text-key-label: 800 28px/28px var(--font-display); /* The main word on a key, all caps, text color. Shrinks to fit 120px wide, down to 17px, before it truncates. */
  --text-key-label-wrap: 800 22px/22px var(--font-display); /* Two-line label for long titles (chat names). Replaces the note. */
  --text-key-eyebrow: 600 15px/15px var(--font-display); /* Small tracked caps above the icon, in the state color. Tracking is 14% of the size; shrinks to 12px, then ellipsizes. */
  --text-key-note: 800 15px/15px var(--font-display); /* One line of muted sentence-case context above the label, ellipsized at about 20 characters. */
  --text-key-stat: 800 44px/44px var(--font-display); /* Big number on a stat key (costs). 36px when longer than 5 characters. */
  --text-key-ring-value: 800 31px/31px var(--font-display); /* Percentage in a ring meter's center. 27px for 4 characters, 24px for 5 or more. */
  --text-page-title: 800 84px/0.9 var(--font-display); /* Page title, all caps. Scales down to 44px on narrow screens. */
  --text-page-heading: 800 40px/1 var(--font-display); /* Section heading, all caps. Down to 28px on narrow screens. */
  --text-page-subhead: 800 19px/1.2 var(--font-display); /* Card and rule titles, all caps. */
  --text-page-eyebrow: 600 13px/1.2 var(--font-display); /* Eyebrows on panels, pills and rows: caps, tracked 14%, state color. */
  --text-lede: 400 17px/1.55 var(--font-body); /* Intro paragraph under a title, in muted. */
  --text-body: 400 16px/1.55 var(--font-body); /* Running text, in text or muted. */
  --text-small: 400 14.5px/1.5 var(--font-body); /* Notes and secondary copy, in muted. */
  --text-control: 600 13px/1.2 var(--font-body); /* Nav pills, segmented options and small controls. */
  --text-code: 500 13px/1.45 var(--font-mono); /* Terminal output, code and data, in JetBrains Mono Medium. The Deck Neon Terminal and Ghostty profiles use the same face at 13pt with 10% extra line height. */
}
.key-label {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: 0;
}
.key-label-wrap {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: 0;
}
.key-eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 2.1px;
}
.key-note {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 15px;
  font-weight: 800;
  letter-spacing: 0;
}
.key-stat {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: 0;
}
.key-ring-value {
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 31px;
  font-weight: 800;
  letter-spacing: 0;
}
.page-title {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.page-heading {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.page-subhead {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.page-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 1.8px;
}
.lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.control {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
}

/* Added by scripts/sync-deck-neon.mjs: follow the system unless a page sets data-theme. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --ground: #eef0f4;
  --page-top: #f8f9fb;
  --panel: #ffffff;
  --track: #dcdfe6;
  --dot: #d9dce4;
  --text: #16171f;
  --muted: #5b5e70;
  --gray: #7d8195;
  --claude: #c9542a;
  --codex: #16171f;
  --lens: #22232d;
  --lens-fringe-warm: #d9468f;
  --lens-fringe-cool: #13958f;
  --lens-glass: rgba(255, 255, 255, 0.70);
  --lens-glass-top: rgba(255, 255, 255, 0.92);
  --lens-glass-strong: rgba(250, 251, 253, 0.92);
  --lens-edge: rgba(22, 23, 31, 0.11);
  --lens-sheen: #ffffff;
  --lens-wash-a: rgba(160, 120, 255, 0.18);
  --lens-wash-b: rgba(77, 160, 255, 0.16);
  --ha-office: var(--cat-lights);
  --green: #0a7a4a;
  --blue: #1765c4;
  --amber: #9a5c00;
  --purple: #6d44d6;
  --red: #c42b38;
  --pink: #bf2f7d;
  --cat-heartbeat: var(--pink);
  --cat-errands: var(--green);
  --cat-text-tools: var(--amber);
  --cat-lights: var(--purple);
  --cat-prompter: var(--blue);
  --cat-careful: var(--red);
  --ansi-black: var(--track);
  --ansi-red: var(--red);
  --ansi-green: var(--green);
  --ansi-yellow: var(--amber);
  --ansi-blue: var(--blue);
  --ansi-magenta: var(--purple);
  --ansi-white: var(--muted);
  --ansi-bright-white: var(--text);
  --shadow-lens: 0 10px 26px rgba(30, 35, 70, 0.10);
}
}