/* Deck Neon: web surfaces in the Stream Deck XL key language.
   Everything reads tokens.css. Rims are drawn by DeckNeon.rims() as an SVG overlay;
   until then (or without script) a plain border stands in. */

.dn-page {
	color-scheme: dark;
	background-color: var(--ground);
	background-image:
		radial-gradient(circle at 50% 50%, var(--dot) 0 1.6px, transparent 2.2px),
		linear-gradient(180deg, var(--page-top), var(--ground));
	background-size: var(--dot-pitch) var(--dot-pitch), 100% 100%;
	color: var(--text);
	font: 400 16px/1.55 var(--font-body);
	-webkit-font-smoothing: antialiased;
	min-height: 100%;
	box-sizing: border-box;
}
.dn-page *, .dn-page *::before, .dn-page *::after { box-sizing: border-box; }
[data-theme="light"] .dn-page, .dn-page[data-theme="light"] { color-scheme: light; }

/* ---- themes ----
   Deck Neon has a dark theme (the default) and a light one: set data-theme="light" on <html> or any element, or call
   DeckNeon.theme("light" | "dark" | "auto"). Some things are dark in both themes, because they're the deck or sit on it:
   keys, the deck mockup, terminals and code, HA OFFICE's glass, and Workbench boards. Each of those is a dark island: it
   re-declares the dark values of every color token, so whatever sits inside reads as it does on the deck. Wrap anything else
   that must stay dark in .dn-dark. */
.dn-dark, .dn-deck, .dn-grid, .dn-code, .dn-ha, .dn-mikah { color-scheme: dark; color: var(--text); --dn-glow-k: 1; --dn-key-bg: transparent; --ground: #0b0c13; --page-top: #161827; --panel: #12131d; --chassis: #050608; --track: #262838; --dot: #21222a; --text: #eeebf5; --muted: #9a98ae; --gray: #5b5f7a; --claude: #ff8a5b; --codex: #eeebf5; --lens: #f6f4fb; --lens-fringe-warm: #ff7ac3; --lens-fringe-cool: #52e0dc; --lens-glass: rgba(255, 255, 255, 0.05); --lens-glass-top: rgba(255, 255, 255, 0.09); --lens-glass-strong: rgba(20, 22, 33, 0.86); --lens-edge: rgba(255, 255, 255, 0.12); --lens-sheen: rgba(255, 255, 255, 0.16); --lens-wash-a: rgba(180, 140, 255, 0.14); --lens-wash-b: rgba(77, 182, 255, 0.11); --mikah: #f3ead3; --mikah-mask: #123f29; --mikah-trace: #2e7d4f; --mikah-brass: #e8c26a; --mikah-silk-muted: #b8c4ae; --ha-office: #b48cff; --ha-glass: #130d2b; --light-warm: #ffe7b0; --green: #4be39a; --blue: #4db6ff; --amber: #ffd447; --purple: #b48cff; --red: #ff5a64; --pink: #ff7ac3; --cat-heartbeat: #ff7ac3; --cat-errands: #4be39a; --cat-show-prep: #ff9a3d; --cat-text-tools: #ffd447; --cat-lights: #b48cff; --cat-prompter: #4db6ff; --cat-careful: #ff5a64; --cat-navigation: #edeaf6; --show-hoa: #ffd447; --show-tnw: #4d8bff; --show-hot: #ff5a4e; --show-hoai: #a77bff; --show-ios-today: #d98bff; --show-crafting: #ff9a6b; --show-media: #8c8cff; --show-live: #ff5e7a; --ansi-black: #262838; --ansi-red: #ff5a64; --ansi-green: #4be39a; --ansi-yellow: #ffd447; --ansi-blue: #4db6ff; --ansi-magenta: #b48cff; --ansi-cyan: #52e0dc; --ansi-white: #9a98ae; --ansi-bright-black: #6f728a; --ansi-bright-red: #ff838b; --ansi-bright-green: #78eab3; --ansi-bright-yellow: #ffdf75; --ansi-bright-blue: #7ac8ff; --ansi-bright-magenta: #c7a9ff; --ansi-bright-cyan: #7de8e5; --ansi-bright-white: #eeebf5; --term-selection: #59342a; --shadow-deck: 0 30px 60px -20px #000000, inset 0 1px 0 #2b2d38; --shadow-lens: 0 10px 28px rgba(0, 0, 0, 0.35); }
/* Glow strength: state light glows on dark grounds and sits flat on light ones. Keys draw dark in both themes, so on a light page each one gets its own dark face, like the deck's LCD. */
:root, [data-theme="dark"] { --dn-glow-k: 1; --dn-key-bg: transparent; }
[data-theme="light"] { --dn-glow-k: 0; --dn-key-bg: #0b0c13; }

/* ---- type ---- */
.dn-display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 0.95; margin: 0; }
.dn-eyebrow { font: 600 13px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--dn-state); }
.dn-label { font: 800 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.3px; color: var(--text); }
.dn-note { font: 400 14.5px/1.4 var(--font-body); color: var(--muted); }
.dn-muted { color: var(--muted); }
.dn-mono { font: 500 13px/1.45 var(--font-mono); }

/* ---- the rim (shared by every keyed surface) ---- */
.dn-rim {
	--dn-rim: var(--claude);
	--dn-state: var(--green);
	--dn-k: 1;          /* rim strength: 1 lit, var(--dim) when it can't act */
	--dn-tab: 1;        /* tab opacity */
	--dn-tint: 0;       /* face wash: var(--active-tint) when active */
	--dn-radius: 20px;
	--dn-chamfer: 19px;
	--dn-plate: 0;      /* glass plate behind the face: var(--glass-plate) on HA OFFICE */
	position: relative;
	isolation: isolate;
	border-radius: var(--dn-radius);
}
.dn-rim:not([data-rimmed]) { box-shadow: 0 0 0 2.2px color-mix(in srgb, var(--dn-rim) 90%, transparent); }
.dn-rim > .dn-rim-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: -1; }
.dn-rim-tint { fill: var(--dn-state); fill-opacity: var(--dn-tint); }
.dn-rim-glow { fill: none; stroke: var(--dn-rim); stroke-width: 7px; stroke-opacity: calc(0.17 * var(--dn-k)); stroke-linejoin: round; }
.dn-rim-line { fill: none; stroke: var(--dn-rim); stroke-width: 2.2px; stroke-opacity: calc(0.9 * var(--dn-k)); stroke-linejoin: round; }
.dn-rim-tab { fill: var(--dn-rim); fill-opacity: var(--dn-tab); }
.dn-rim[data-tab="off"] .dn-rim-tab { display: none; }

.dn-claude { --dn-rim: var(--claude); }
.dn-codex { --dn-rim: var(--codex); }
/* HA OFFICE: the Lights purple rim, standard corners, and a dark glass plate so text reads over the skyline wallpaper */
.dn-ha { --dn-rim: var(--ha-office); --dn-plate: var(--glass-plate, 0.84); }
.dn-rim-plate { fill: var(--dn-plate-color, var(--ha-glass)); fill-opacity: var(--dn-plate, 0); }
/* Mikah ("Workbench"), only when Mikah asks for it by name: every surface is a little circuit board. Solder-mask green plate,
   cream silkscreen rim, brass mounting holes and edge-finger pads, brass for accents. Dark in both themes. */
.dn-mikah { --dn-rim: var(--mikah); --dn-accent: var(--mikah-brass); --dn-plate-color: var(--mikah-mask); }
.dn-rim.dn-mikah { --dn-radius: var(--radius-board); --dn-plate: var(--board-plate, 0.9); }
.dn-rim.dn-mikah.dn-btn:not(.dn-btn-lg), .dn-rim.dn-mikah.dn-toast, .dn-rim.dn-mikah.dn-input-wrap, .dn-rim.dn-mikah.dn-seg, .dn-rim.dn-mikah.dn-toggle-track { --dn-radius: var(--radius-board-control); }
.dn-rim.dn-mikah.is-dim { --dn-plate: calc(var(--board-plate, 0.9) * 0.5); }
.dn-mikah > .dn-rim-svg .dn-rim-tab { display: none; }
.dn-rim-holes { fill: var(--ground); stroke: var(--mikah-brass); stroke-width: 1.8px; stroke-opacity: var(--dn-tab); }
.dn-rim-pads { fill: var(--mikah-brass); fill-opacity: var(--dn-tab); }
.dn-rim[data-tab="off"] .dn-rim-pads { display: none; }
/* on the green plate, secondary text uses the lighter silkscreen grey (7:1) instead of muted (4.5:1) */
.dn-rim.dn-mikah .dn-note, .dn-rim.dn-mikah .dn-row-note, .dn-rim.dn-mikah .dn-field-help, .dn-rim.dn-mikah .dn-input-wrap input::placeholder { color: var(--mikah-silk-muted); }
/* reference designators, the board's own labels: U4, J2 */
.dn-ref { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.04em; color: color-mix(in srgb, var(--dn-rim, var(--text)) 62%, transparent); }
/* DNP ("do not populate"): an empty Mikah slot is an unpopulated footprint, a dashed outline with no plate */
.dn-rim.dn-dnp { --dn-plate: 0; }
.dn-dnp > .dn-rim-svg .dn-rim-line { stroke-dasharray: 6 5; }
.dn-dnp > .dn-rim-svg .dn-rim-glow, .dn-dnp > .dn-rim-svg .dn-rim-holes, .dn-dnp > .dn-rim-svg .dn-rim-pads { display: none; }
.dn-page.dn-skyline { background-image: var(--dn-skyline, none); background-size: cover; background-position: center; }
.dn-rim.is-active { --dn-tint: var(--active-tint); }
.dn-rim.is-dim { --dn-k: var(--dim); --dn-tab: var(--tab-dim); --dn-state: var(--gray); }
.dn-rim.is-careful { --dn-rim: var(--red); }
/* only "can't act" turns a careful surface grey, as on the keys */
.dn-rim.is-careful.is-dim { --dn-rim: var(--gray); }

/* state color lives inside the component */
[data-state="ready"], [data-state="green"] { --dn-state: var(--green); }
[data-state="working"], [data-state="blue"] { --dn-state: var(--blue); }
[data-state="needs"], [data-state="amber"] { --dn-state: var(--amber); }
[data-state="unread"], [data-state="purple"] { --dn-state: var(--purple); }
[data-state="trouble"], [data-state="red"] { --dn-state: var(--red); }
[data-state="unavailable"], [data-state="gray"] { --dn-state: var(--gray); }
[data-state="text"] { --dn-state: var(--text); }

/* lit from within: a soft radial glow in the state color behind the content */
.dn-glow { background: radial-gradient(52px 52px at 50% 46%, color-mix(in srgb, var(--dn-state) 30%, transparent), transparent); }
.dn-glow.is-dim { background: radial-gradient(52px 52px at 50% 46%, color-mix(in srgb, var(--gray) 12%, transparent), transparent); }

/* hazard stripe along the bottom edge of careful surfaces */
.dn-hazard::after {
	content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 8.5px; pointer-events: none;
	background: repeating-linear-gradient(135deg, var(--red) 0 4.95px, transparent 4.95px 9.9px);
	opacity: var(--hazard, 0.95);
}
.dn-hazard.is-dim::after { opacity: 0.4; background: repeating-linear-gradient(135deg, var(--gray) 0 4.95px, transparent 4.95px 9.9px); }
/* on cut-corner (codex) surfaces the stripe's ends follow the 45-degree chamfers, so it never crosses the rim */
.dn-codex.dn-hazard::after { clip-path: polygon(0 0, 100% 0, calc(100% - 8.5px) 100%, 8.5px 100%); }
/* on a Mikah board the stripe stops short of the brass mounting holes */
.dn-mikah.dn-hazard::after { left: 20px; right: 20px; }

/* ---- deck mockup ---- */
.dn-deck { background: linear-gradient(180deg, #15161c, #07080b); border-radius: 28px; padding: 22px; border: 1px solid #23252f; box-shadow: var(--shadow-deck); }
.dn-grid { display: grid; grid-template-columns: repeat(var(--dn-cols, 8), var(--dn-key, 96px)); gap: var(--key-gap); background: var(--chassis); padding: 14px; border-radius: var(--radius-chassis); width: max-content; }
.dn-grid.on-page { background: transparent; padding: 0; }
.dn-key { width: var(--dn-key, 144px); height: var(--dn-key, 144px); display: block; position: relative; background: var(--dn-key-bg, transparent); border-radius: 17%; }
.dn-key > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dn-key-row { display: flex; flex-wrap: wrap; gap: var(--key-gap); }

/* ---- button ---- */
.dn-btn {
	--dn-radius: var(--radius-control); --dn-chamfer: var(--chamfer-control); --dn-tab-w: 24px;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-height: 48px; padding: 9px 20px 8px; background: transparent; border: 0; cursor: pointer; color: var(--text);
	font: 800 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.3px;
}
.dn-btn .dn-eyebrow { font-size: 11px; }
.dn-btn.is-dim { color: var(--muted); cursor: not-allowed; }
.dn-btn.dn-btn-lg { --dn-radius: var(--radius-key); --dn-chamfer: var(--chamfer-key); --dn-tab-w: 36px; min-height: 72px; padding: 14px 28px 12px; font-size: 26px; }
.dn-btn.dn-hazard { padding-bottom: 16px; }
.dn-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
.dn-btn:not(.is-dim):hover { --dn-tint: 0.08; }
.dn-btn:not(.is-dim):active { --dn-tint: var(--active-tint); }

/* ---- toggle ---- */
.dn-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.dn-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dn-toggle-track { --dn-radius: 10px; --dn-chamfer: 8px; --dn-tab-w: 14px; width: 60px; height: 32px; display: inline-block; }
.dn-toggle-knob { position: absolute; top: 7px; left: 7px; width: 18px; height: 18px; border-radius: 5px; background: var(--gray); transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.dn-codex .dn-toggle-knob, .dn-toggle-track.dn-codex .dn-toggle-knob { border-radius: 0; clip-path: polygon(5px 0, 13px 0, 18px 5px, 18px 13px, 13px 18px, 5px 18px, 0 13px, 0 5px); }
.dn-toggle input:checked + .dn-toggle-track { --dn-tint: var(--active-tint); }
.dn-toggle input:checked + .dn-toggle-track .dn-toggle-knob { transform: translateX(28px); background: var(--dn-state); box-shadow: 0 0 10px color-mix(in srgb, var(--dn-state) 55%, transparent); }
.dn-toggle input:focus-visible + .dn-toggle-track { outline: 2px solid var(--text); outline-offset: 6px; }
.dn-toggle-text { display: grid; gap: 1px; }
.dn-toggle-text .dn-eyebrow { font-size: 11px; }
.dn-toggle input:not(:checked) ~ .dn-toggle-text .dn-eyebrow { color: var(--muted); }
.dn-toggle.is-dim { cursor: not-allowed; }
.dn-toggle.is-dim .dn-label { color: var(--muted); }

/* ---- segmented control ---- */
.dn-seg { --dn-radius: var(--radius-control); --dn-chamfer: var(--chamfer-control); --dn-tab-w: 24px; display: inline-flex; padding: 5px; gap: 4px; }
.dn-seg button {
	--dn-radius: 6px; --dn-chamfer: 6px;
	appearance: none; background: transparent; border: 0; cursor: pointer; padding: 8px 16px 7px; border-radius: 6px;
	font: 800 17px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.3px; color: var(--muted); position: relative;
}
.dn-seg button[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--dn-state) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dn-state) 70%, transparent); }
.dn-codex.dn-seg button { border-radius: 0; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.dn-seg button:hover:not([aria-pressed="true"]) { color: var(--text); }
.dn-seg button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---- text field ---- */
.dn-field { display: grid; gap: 8px; width: 100%; max-width: 360px; }
.dn-field .dn-eyebrow { font-size: 12px; }
.dn-input-wrap { --dn-radius: var(--radius-control); --dn-chamfer: var(--chamfer-control); --dn-tab-w: 24px; --dn-k: 0.6; --dn-tab: 0.6; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; }
.dn-input-wrap input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 500 15px/1 var(--font-body); }
.dn-input-wrap input::placeholder { color: var(--muted); }
.dn-input-wrap:focus-within { --dn-k: 1; --dn-tab: 1; --dn-tint: 0.06; }
.dn-input-wrap.is-dim input { color: var(--muted); }
.dn-field-help { font: 400 13.5px/1.35 var(--font-body); color: var(--muted); }
.dn-field.is-error .dn-field-help { color: var(--red); }
.dn-field.is-error .dn-input-wrap { --dn-rim: var(--red); --dn-k: 1; }

/* ---- panel / card ---- */
.dn-panel { --dn-radius: var(--radius-key); --dn-chamfer: var(--chamfer-key); padding: 22px 22px 20px; display: grid; gap: 12px; align-content: start; }
.dn-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dn-panel-title { font: 800 26px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.4px; margin: 2px 0 0; }
.dn-panel.is-dim .dn-panel-title { color: var(--muted); }

/* ---- dialog ---- */
.dn-scrim { position: relative; display: grid; place-items: center; padding: 28px; background: color-mix(in srgb, var(--ground) 72%, transparent); }
.dn-dialog { --dn-radius: var(--radius-key); --dn-chamfer: var(--chamfer-key); width: min(440px, 100%); padding: 26px 26px 22px; display: grid; gap: 14px; background: color-mix(in srgb, var(--ground) 86%, transparent); }
.dn-dialog-actions { display: flex; justify-content: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* ---- toast ---- */
.dn-toast { --dn-radius: var(--radius-control); --dn-chamfer: var(--chamfer-control); --dn-tab-w: 24px; display: flex; align-items: center; gap: 14px; padding: 14px 18px 13px 16px; max-width: 420px; background: color-mix(in srgb, var(--ground) 88%, transparent); }
.dn-toast-body { display: grid; gap: 2px; min-width: 0; }
.dn-toast-msg { font: 500 15px/1.35 var(--font-body); color: var(--text); }

/* ---- status pill ---- */
.dn-pill { --dn-tab-w: 0px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 11px; border-radius: 999px; }
.dn-pill[data-tab="off"] .dn-rim-tab { display: none; }
.dn-pill .dn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dn-state); box-shadow: 0 0 8px color-mix(in srgb, var(--dn-state) calc(100% * var(--dn-glow-k, 1)), transparent); }
.dn-pill.is-dim .dn-dot { box-shadow: none; }
.dn-pill .dn-eyebrow { font-size: 12.5px; }

/* ---- list row ---- */
.dn-list { display: grid; }
.dn-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 14px; padding: 11px 12px; border-top: 1px solid var(--track); position: relative; border-radius: 8px; }
.dn-row:first-child { border-top-color: transparent; }
.dn-row.is-active { background: color-mix(in srgb, var(--dn-state) 13%, transparent); }
.dn-row-icon { display: grid; place-items: center; width: 28px; height: 28px; }
.dn-row-main { display: grid; gap: 1px; min-width: 0; }
.dn-row-title { font: 800 18px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-row-note { font: 400 13.5px/1.35 var(--font-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-row-end { text-align: right; display: grid; gap: 2px; justify-items: end; }
.dn-row-end .dn-eyebrow { font-size: 11.5px; }
.dn-row.is-dim .dn-row-title { color: var(--muted); }

/* ---- terminal / code block ---- */
.dn-code { --dn-radius: var(--radius-surface); --dn-chamfer: 14px; --dn-tab-w: 44px; background: var(--ground); padding: 18px 22px; font: 500 13px/1.6 var(--font-mono); color: var(--text); overflow-x: auto; }
.dn-code pre { margin: 0; font: inherit; white-space: pre; }
.dn-code.is-dim { --dn-k: var(--dim); --dn-tab: var(--tab-dim); }
.dn-code ::selection { background: var(--term-selection); color: var(--text); }
.a-black { color: var(--ansi-black); } .a-red { color: var(--ansi-red); } .a-green { color: var(--ansi-green); } .a-yellow { color: var(--ansi-yellow); }
.a-blue { color: var(--ansi-blue); } .a-magenta { color: var(--ansi-magenta); } .a-cyan { color: var(--ansi-cyan); } .a-white { color: var(--ansi-white); }
.a-bblack { color: var(--ansi-bright-black); } .a-bred { color: var(--ansi-bright-red); } .a-bgreen { color: var(--ansi-bright-green); } .a-byellow { color: var(--ansi-bright-yellow); }
.a-bblue { color: var(--ansi-bright-blue); } .a-bmagenta { color: var(--ansi-bright-magenta); } .a-bcyan { color: var(--ansi-bright-cyan); } .a-bwhite { color: var(--ansi-bright-white); }
.a-bold { font-weight: 700; }
.dn-cursor { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: -0.2em; background: var(--claude); }

@media (prefers-reduced-motion: reduce) { .dn-toggle-knob { transition: none; } }

/* dimmed components: the reason must stay readable, so their eyebrows use muted (6.9:1), not gray */
.is-dim .dn-eyebrow, [data-state="unavailable"] .dn-eyebrow, .dn-eyebrow.is-dim { color: var(--muted); }

/* panels light from the top edge rather than the middle (they have no icon to glow behind) */
.dn-panel.dn-glow { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--dn-state) 16%, transparent), transparent 70%); }
.dn-seg.is-dim button, .dn-seg.is-dim button[aria-pressed="true"] { color: var(--muted); cursor: not-allowed; }

/* ---- Mikah's board details ---- */
.dn-mikah .dn-cursor, .dn-code.dn-mikah .dn-cursor { background: var(--mikah-brass); }
.dn-mark { display: block; flex: none; }

/* ---- nav bar (apps and sites) ---- */
/* The brand's mark and name, the sections, and room for an action. The current link wears the brand's tab. */
.dn-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--track); background: color-mix(in srgb, var(--ground) 72%, transparent); }
.dn-nav-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.dn-nav-name { font: 800 22px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.4px; }
/* the padding keeps the current link's tab inside the scroll box, which would otherwise clip it */
.dn-nav-links { display: flex; gap: 22px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 10px 2px; margin: -10px 0; }
.dn-nav-links a { position: relative; padding: 6px 0; font: 600 14px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; }
.dn-nav-links a:hover { color: var(--text); }
.dn-nav-links a[aria-current] { color: var(--text); }
.dn-nav-links a[aria-current]::before { content: ""; position: absolute; left: 50%; top: -8px; width: 26px; height: 5px; translate: -50% 0; border-radius: 2.5px; background: var(--dn-rim, var(--claude)); box-shadow: 0 0 10px color-mix(in srgb, var(--dn-rim, var(--claude)) 55%, transparent); }
/* on Mikah's nav, the current section wears the board's tab: three brass edge-finger pads */
.dn-mikah .dn-nav-links a[aria-current]::before { width: 27px; height: 6px; border-radius: 1px; background: repeating-linear-gradient(90deg, var(--mikah-brass) 0 7px, transparent 7px 10px); box-shadow: none; }
.dn-nav-links a:focus-visible, .dn-nav-brand:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.dn-nav-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
@media (max-width: 720px) { .dn-nav { gap: 14px 20px; padding: 14px 16px; } .dn-nav-links { order: 3; flex-basis: 100%; } }

/* ---- page head and prose (apps and sites) ---- */
.dn-page-head { display: grid; gap: 10px; max-width: 760px; }
.dn-page-head .dn-eyebrow { color: var(--dn-accent, var(--dn-rim, var(--muted))); font-size: 13px; }
.dn-page-head h1 { margin: 0; font: 800 clamp(44px, 7vw, 84px)/0.9 var(--font-display); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text); }
.dn-page-head p { margin: 0; font: 400 17px/1.55 var(--font-body); color: var(--muted); max-width: 60ch; }
/* Long-form reading: articles, guides, notes. Headings are display caps; body stays sentence case in Barlow. */
.dn-prose { font: 400 16px/1.6 var(--font-body); color: var(--text); max-width: 68ch; }
.dn-prose > * + * { margin-top: 1em; }
.dn-prose > :first-child { margin-top: 0; }
.dn-prose h2 { margin: 1.8em 0 0; font: 800 30px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: 0.4px; }
.dn-prose h3 { margin: 1.5em 0 0; font: 800 20px/1.15 var(--font-display); text-transform: uppercase; letter-spacing: 0.4px; }
.dn-prose p, .dn-prose li { color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.dn-prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--dn-accent, var(--dn-rim, var(--claude))); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.dn-prose a:hover { color: var(--dn-accent, var(--dn-rim, var(--claude))); }
.dn-prose ul, .dn-prose ol { padding-left: 1.3em; }
.dn-prose li::marker { color: var(--dn-accent, var(--dn-rim, var(--muted))); }
.dn-prose code { font: 500 0.88em/1 var(--font-mono); padding: 0.15em 0.35em; background: var(--track); border-radius: 4px; }
.dn-mikah .dn-prose code, .dn-prose.dn-mikah code { background: var(--mikah-mask); color: var(--mikah); }
.dn-prose blockquote { margin-left: 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--dn-accent, var(--dn-rim, var(--track))); color: var(--muted); }
.dn-prose hr { border: 0; height: 1px; background: var(--track); margin: 2em 0; }
.dn-prose ::selection { background: color-mix(in srgb, var(--dn-accent, var(--dn-rim, var(--claude))) 32%, var(--ground)); }

/* ---- Lens: the default brand ----
   Smoked glass in dark, frosted glass in light. Each surface is a translucent pane over a 16px backdrop blur, brighter at the top,
   with a hairline edge (lens-edge), a sheen inside its top edge (lens-sheen), and a soft lift (shadow-lens). In place of the tab,
   a light leak: a bright sliver where light enters the glass, with a hairline prism fringe at its ends. The edge has no hue, so
   state color is the only color on a Lens page. Lens draws its rim in CSS; DeckNeon.rims() adds only the state wash. */
.dn-lens { --dn-rim: var(--lens); --dn-accent: var(--lens); }
.dn-rim.dn-lens {
	--dn-radius: var(--radius-lens, 14px);
	--dn-glass-top: var(--lens-glass-top);
	--dn-glass: var(--lens-glass);
	--dn-light: linear-gradient(transparent, transparent);
	--dn-leak: var(--lens);
	background:
		radial-gradient(64px 18px at 50% 0, color-mix(in srgb, var(--dn-leak) calc(12% * var(--dn-glow-k, 1)), transparent), transparent),
		var(--dn-light),
		linear-gradient(180deg, var(--dn-glass-top), var(--dn-glass));
	border: 1px solid var(--lens-edge);
	box-shadow: inset 0 1px 0 var(--lens-sheen), var(--shadow-lens);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
}
.dn-rim.dn-lens:not([data-rimmed]) { box-shadow: inset 0 1px 0 var(--lens-sheen), var(--shadow-lens); }
.dn-lens > .dn-rim-svg .dn-rim-glow, .dn-lens > .dn-rim-svg .dn-rim-line, .dn-lens > .dn-rim-svg .dn-rim-tab { display: none; }
/* the light leak, in place of the tab */
.dn-rim.dn-lens::before {
	content: ""; position: absolute; z-index: 1; pointer-events: none;
	top: -1px; left: 50%; width: calc(var(--dn-tab-w, 36px) * 1.15); height: 2px; translate: -50% 0; border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--dn-leak-warm, var(--lens-fringe-warm)) 14%, var(--dn-leak) 32%, var(--dn-leak) 68%, var(--dn-leak-cool, var(--lens-fringe-cool)) 86%, transparent);
	box-shadow: 0 0 10px color-mix(in srgb, var(--dn-leak) calc(55% * var(--dn-glow-k, 1)), transparent);
	opacity: var(--dn-tab);
}
.dn-rim.dn-lens[data-tab="off"]::before, .dn-pill.dn-lens::before { display: none; }
.dn-rim.dn-lens.dn-btn:not(.dn-btn-lg), .dn-rim.dn-lens.dn-toast, .dn-rim.dn-lens.dn-input-wrap, .dn-rim.dn-lens.dn-seg { --dn-radius: var(--radius-lens-control, 9px); }
/* an active Lens surface lets its light in in the state color */
.dn-rim.dn-lens.is-active { --dn-leak: var(--dn-state); --dn-leak-warm: var(--dn-state); --dn-leak-cool: var(--dn-state); }
/* lit from within: Lens panels take the state light from the top edge, over the glass */
.dn-rim.dn-lens.dn-glow { --dn-light: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--dn-state) 14%, transparent), transparent 70%); }
/* can't act: no light gets in. Flatter glass, no lift, a grey sliver, and marks in muted (gray drops to 2.6:1 on dark glass) */
.dn-rim.dn-lens.is-dim { --dn-glass-top: var(--lens-glass); --dn-leak: var(--gray); --dn-leak-warm: var(--gray); --dn-leak-cool: var(--gray); --dn-tab: 0.5; --dn-state: var(--muted); border-color: color-mix(in srgb, var(--lens-edge) 60%, transparent); box-shadow: none; }
.dn-rim.dn-lens.is-careful { --dn-leak: var(--red); --dn-leak-warm: var(--red); --dn-leak-cool: var(--red); border-color: color-mix(in srgb, var(--red) 70%, transparent); }
.dn-rim.dn-lens.is-careful.is-dim { --dn-leak: var(--gray); border-color: color-mix(in srgb, var(--gray) 60%, transparent); }
/* surfaces that float over content get thicker glass */
.dn-dialog.dn-lens, .dn-toast.dn-lens, .dn-code.dn-lens { --dn-glass-top: var(--lens-glass-strong); --dn-glass: var(--lens-glass-strong); }
.dn-scrim:has(.dn-lens) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* primary action: solid ink, the one filled control on a Lens page */
.dn-btn.dn-lens.is-primary { --dn-glass-top: var(--text); --dn-glass: color-mix(in srgb, var(--text) 88%, var(--ground)); color: var(--ground); border-color: transparent; }
.dn-btn.dn-lens.is-primary .dn-eyebrow { color: color-mix(in srgb, var(--ground) 72%, var(--text)); }
/* switches and pills round fully */
.dn-toggle-track.dn-lens { --dn-radius: 16px; }
.dn-toggle-track.dn-lens .dn-toggle-knob { border-radius: 50%; }
.dn-toggle-track.dn-lens::before { display: none; }
/* segmented control: the chosen option is a raised chip of glass */
.dn-seg.dn-lens button { border-radius: 6px; }
.dn-seg.dn-lens button[aria-pressed="true"] { background: var(--lens-glass-top); box-shadow: inset 0 1px 0 var(--lens-sheen), 0 0 0 1px var(--lens-edge), 0 1px 3px rgba(0, 0, 0, 0.18); color: var(--text); }
/* text field: focus brightens the edge */
.dn-input-wrap.dn-lens:focus-within { border-color: color-mix(in srgb, var(--text) 42%, transparent); }
.dn-field.is-error .dn-input-wrap.dn-lens { border-color: color-mix(in srgb, var(--red) 75%, transparent); }
/* the page: two faint washes for the glass to catch, over the dot grid */
.dn-page.dn-lens {
	background-image:
		radial-gradient(60% 50% at 10% 6%, var(--lens-wash-a), transparent 70%),
		radial-gradient(55% 50% at 94% 92%, var(--lens-wash-b), transparent 70%),
		radial-gradient(circle at 50% 50%, var(--dot) 0 1.6px, transparent 2.2px),
		linear-gradient(180deg, var(--page-top), var(--ground));
	background-size: 100% 100%, 100% 100%, var(--dot-pitch) var(--dot-pitch), 100% 100%;
}
.dn-nav.dn-lens { background: var(--lens-glass-strong); border-bottom-color: var(--lens-edge); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
/* on Lens's nav, the current section wears the light leak */
.dn-lens .dn-nav-links a[aria-current]::before { width: 30px; height: 2px; top: -6px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--lens-fringe-warm) 14%, var(--lens) 32%, var(--lens) 68%, var(--lens-fringe-cool) 86%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--lens) calc(55% * var(--dn-glow-k, 1)), transparent); }
/* Lens prose: links are underlined with a hairline of the light leak */
.dn-lens .dn-prose a, .dn-prose.dn-lens a { text-decoration: none; background: linear-gradient(90deg, var(--lens-fringe-warm), var(--lens) 22%, var(--lens) 78%, var(--lens-fringe-cool)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 1px; }
.dn-lens .dn-prose a:hover, .dn-prose.dn-lens a:hover { color: var(--text); background-size: 100% 2.5px; }
.dn-lens .dn-prose li::marker, .dn-prose.dn-lens li::marker { color: var(--muted); }
.dn-lens .dn-prose blockquote, .dn-prose.dn-lens blockquote { border-left: 2px solid transparent; border-image: linear-gradient(180deg, var(--lens-fringe-warm), var(--lens) 30%, var(--lens) 70%, var(--lens-fringe-cool)) 1; }
.dn-lens .dn-prose ::selection, .dn-prose.dn-lens ::selection { background: color-mix(in srgb, var(--blue) 24%, var(--ground)); }
.dn-lens .dn-cursor, .dn-code.dn-lens .dn-cursor { background: var(--lens); }
.dn-lens .dn-page-head .dn-eyebrow, .dn-page-head.dn-lens .dn-eyebrow { color: var(--muted); }

/* ---- metric: one number that matters, at a glance ----
   A compact rimmed tile: eyebrow, the value (with an optional unit in <small>), and a note. Put state on the note, or on the
   whole tile when the number needs attention. Any brand; Lens by default. */
.dn-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dn-metric { --dn-radius: var(--radius-lens, 14px); --dn-chamfer: 12px; --dn-tab-w: 30px; display: grid; gap: 4px; padding: 14px 16px 13px; min-width: 0; align-content: start; }
.dn-metric .dn-eyebrow { font-size: 12px; color: var(--muted); }
.dn-metric[data-state] .dn-eyebrow { color: var(--dn-state); }
.dn-metric-value { font: 800 34px/1 var(--font-display); letter-spacing: 0.3px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.dn-metric-value small { font-size: 0.5em; color: var(--muted); margin-left: 2px; letter-spacing: 0.4px; }
.dn-metric-note { font: 500 13px/1.3 var(--font-body); color: var(--muted); }
.dn-metric-note[data-state] { color: var(--dn-state); }
.dn-metric.is-dim .dn-metric-value { color: var(--muted); }

/* ---- status: a dot and a word, inline (table cells, rows, headings) ---- */
.dn-status { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dn-state, var(--muted)); white-space: nowrap; }
.dn-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px color-mix(in srgb, currentColor calc(80% * var(--dn-glow-k, 1)), transparent); }
.dn-status[data-state="unavailable"], .dn-status[data-state="gray"] { color: var(--muted); }
.dn-status[data-state="unavailable"]::before, .dn-status[data-state="gray"]::before { background: var(--gray); box-shadow: none; }

/* ---- data table: dense rows for real data ----
   Tracked caps headers, hairline rows, tabular figures. Numbers right-align in mono (.dn-num); IDs and hashes are mono and
   muted (.dn-id); state is a .dn-status. Put it in a Panel, or straight on the page. */
.dn-table-wrap { overflow-x: auto; }
.dn-table { width: 100%; border-collapse: collapse; font: 400 14px/1.3 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; }
.dn-table th { text-align: left; font: 600 11.5px/1.2 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0 12px 9px; border-bottom: 1px solid var(--track); white-space: nowrap; }
.dn-table td { padding: 9px 12px; border-top: 1px solid var(--track); white-space: nowrap; }
.dn-table tbody tr:first-child td { border-top: 0; }
.dn-table td:first-child { font-weight: 600; }
.dn-table th:first-child, .dn-table td:first-child { padding-left: 4px; }
.dn-table th:last-child, .dn-table td:last-child { padding-right: 4px; }
.dn-table .dn-num { text-align: right; }
.dn-table td.dn-num { font: 500 13px/1.3 var(--font-mono); }
.dn-table .dn-id { font: 500 12.5px/1.3 var(--font-mono); color: var(--muted); }
.dn-table .dn-muted { color: var(--muted); }
.dn-table tbody tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
.dn-table tr.is-active td { background: color-mix(in srgb, var(--dn-state) 12%, transparent); }
.dn-table tr.is-dim td { color: var(--muted); }
.dn-table.is-compact td { padding-top: 6px; padding-bottom: 6px; }

/* Added by scripts/sync-deck-neon.mjs */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --dn-glow-k: 0; --dn-key-bg: #0b0c13; }
  :root:not([data-theme="dark"]) .dn-page { color-scheme: light; }
}