@telepath-computer/television 0.1.216 → 1.3.2

package/dist/skills/tv-calendar/SKILL.md

@@ -20,11 +20,13 @@ instead of referencing `/skills/tv-calendar/...` URLs.
 For a Television HTML directory artifact, copy both files into the registered directory next to `index.html` and reference them relatively:
 
 ```html
-<link rel="stylesheet" href="/canonical/v1/styles.css" />
+<link rel="stylesheet" href="/canonical/v2/styles.css?authoredForAppVersion=<version>" />
 <link rel="stylesheet" href="./calendar.css" />
 <script type="module" src="./calendar.js"></script>
 ```
 
+For a running server, read the exact release `version` from `tv status`; when working in a Television checkout, read the exact version from the checkout root `package.json`. Copy that exact release version unchanged into `authoredForAppVersion`. A missing version or the `0.0.0` development sentinel does not identify a release, so omit the metadata.
+
 For a standalone single-file HTML artifact, inline the contents of
 `calendar.css` and `calendar.js` directly into `<style>` and
 `<script type="module">` tags so the output stays self-contained.

package/dist/skills/tv-calendar/calendar.css

@@ -1 +1 @@
-calendar-event{display:contents}calendar-event .event-block{pointer-events:none;z-index:2}calendar-event .event-block-inner{background:var(--event-bg-timed, var(--neutral-100));border-left:3px solid var(--event-border-color, var(--neutral-300));border-radius:4px;box-shadow:inset 0 0 0 .5px var(--neutral-200)}calendar-grid calendar-event .event-block{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;position:relative;z-index:0}calendar-grid calendar-event .event-block-inner{position:absolute;top:calc(var(--y-start) * 100%);height:calc((var(--y-end) - var(--y-start)) * 100%);left:calc(2px + var(--cascade-depth, 0) * 6px);right:2px;padding:var(--space-4) var(--space-8);overflow:hidden;pointer-events:auto;z-index:calc(1 + var(--cascade-depth, 0))}calendar-allday calendar-event .event-block{grid-column:calc(var(--day-start) + 1) / span var(--day-span);grid-row:var(--lane-index);padding:2px}calendar-allday calendar-event .event-block-inner{background:var(--event-bg-all-day, var(--event-bg-timed, var(--neutral-100)));border-left:var( --event-all-day-border, 3px solid var(--event-border-color, var(--neutral-300)) );padding:1px var(--space-8);display:flex;align-items:center;pointer-events:auto}calendar-event[color=red]{--event-bg-timed: var(--red-100);--event-bg-all-day: var(--red-200);--event-border-color: var(--red-500);--event-all-day-border: none}calendar-event[color=orange]{--event-bg-timed: var(--orange-100);--event-bg-all-day: var(--orange-200);--event-border-color: var(--orange-500);--event-all-day-border: none}calendar-event[color=yellow]{--event-bg-timed: var(--yellow-100);--event-bg-all-day: var(--yellow-200);--event-border-color: var(--yellow-500);--event-all-day-border: none}calendar-event[color=green]{--event-bg-timed: var(--green-100);--event-bg-all-day: var(--green-200);--event-border-color: var(--green-500);--event-all-day-border: none}calendar-event[color=blue]{--event-bg-timed: var(--blue-100);--event-bg-all-day: var(--blue-200);--event-border-color: var(--blue-500);--event-all-day-border: none}calendar-event[color=purple]{--event-bg-timed: var(--purple-100);--event-bg-all-day: var(--purple-200);--event-border-color: var(--purple-500);--event-all-day-border: none}calendar-event h3{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}calendar-time-axis{display:contents}calendar-time-axis .hour-label{grid-column:time-left / days-start;grid-row-start:calc(var(--hour-index) + 1);align-self:start;padding:var(--space-2) var(--space-8);font-size:round(calc(var(--text-sm) / var(--text-scale)),1px);color:var(--color-text-muted);text-align:right;white-space:nowrap;transform:translateY(-50%)}calendar-time-axis .hour-label[data-hour="0"]{visibility:hidden;width:0;height:0;padding:0;overflow:hidden}calendar-week{display:grid;grid-template-columns:[time-left] auto [days-start] repeat(var(--day-count, 0),minmax(0,1fr)) [days-end];grid-template-rows:[headers] auto [allday] auto [hours-start] repeat(var(--hour-count, 0),minmax(var(--hour-min-height, 4rem),1fr)) [hours-end];width:100%;height:100%;overflow:auto;background:var(--color-surface);font-family:inherit;color:var(--color-text)}calendar-week>calendar-headers,calendar-week>calendar-allday,calendar-week>calendar-grid{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;min-width:0}calendar-week>calendar-headers{grid-row:headers / allday;position:sticky;top:0;z-index:3;background:var(--color-surface);border-top:.5px solid var(--color-border);border-bottom:1px solid var(--color-border)}calendar-headers>calendar-day{grid-column:calc(var(--day-index) + 1);display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-12);font-size:var(--text-sm);border-left:.5px solid var(--color-border-muted)}calendar-headers>calendar-day:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-headers>calendar-day .weekday{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}calendar-headers>calendar-day .date-num{color:var(--color-text)}calendar-week>calendar-allday{grid-row:allday / hours-start;grid-template-rows:repeat(var(--allday-lane-count, 1),auto);position:sticky;top:var(--headers-height, 0px);z-index:2;border-bottom:1px solid var(--color-border);background:var(--color-surface)}calendar-allday>calendar-cell{grid-column:calc(var(--day-index) + 1);grid-row:1;border-left:.5px solid var(--color-border-muted)}calendar-allday>calendar-cell:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-week>calendar-grid{grid-row:hours-start / hours-end;grid-template-rows:subgrid;position:relative}calendar-grid>calendar-column{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;border-left:.5px solid var(--color-border-muted);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(100% / var(--hour-count) - .5px),var(--color-border-muted) calc(100% / var(--hour-count) - .5px),var(--color-border-muted) calc(100% / var(--hour-count)))}calendar-grid>calendar-column:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-grid>.start-hour-marker{grid-column:2;grid-row-start:calc(var(--start-hour) + 1);width:0;height:0}calendar-grid>.now-line-faint,calendar-grid>.now-line{grid-row:1 / -1;position:relative;pointer-events:none;z-index:1}calendar-grid>.now-line-faint{grid-column:2 / -1}calendar-grid>.now-line{grid-column:calc(var(--day-index) + 1)}calendar-grid>.now-line-faint:before,calendar-grid>.now-line:before{content:"";position:absolute;left:0;right:0;top:calc(var(--y-fraction) * 100%);height:1px;transform:translateY(-.5px)}calendar-grid>.now-line-faint:before{background:#e7202240}calendar-grid>.now-line:before{background:#e72022}calendar-grid>.now-line:after{content:"";position:absolute;left:0;top:calc(var(--y-fraction) * 100%);width:.5rem;height:.5rem;border-radius:50%;background:#e72022;transform:translate(-50%,-50%)}
+calendar-event{display:contents}calendar-event .event-block{pointer-events:none;z-index:2}calendar-event .event-block-inner{background:var(--event-bg-timed, var(--neutral-100));border-left:3px solid var(--event-border-color, var(--neutral-300));border-radius:4px;box-shadow:inset 0 0 0 .5px var(--neutral-200)}calendar-grid calendar-event .event-block{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;position:relative;z-index:0}calendar-grid calendar-event .event-block-inner{position:absolute;top:calc(var(--y-start) * 100%);height:calc((var(--y-end) - var(--y-start)) * 100%);left:calc(2px + var(--cascade-depth, 0) * 6px);right:2px;padding:var(--space-4) var(--space-8);overflow:hidden;pointer-events:auto;z-index:calc(1 + var(--cascade-depth, 0))}calendar-allday calendar-event .event-block{grid-column:calc(var(--day-start) + 1) / span var(--day-span);grid-row:var(--lane-index);padding:2px}calendar-allday calendar-event .event-block-inner{background:var(--event-bg-all-day, var(--event-bg-timed, var(--neutral-100)));border-left:var( --event-all-day-border, 3px solid var(--event-border-color, var(--neutral-300)) );padding:1px var(--space-8);display:flex;align-items:center;pointer-events:auto}calendar-event[color=red]{--event-bg-timed: var(--red-100);--event-bg-all-day: var(--red-200);--event-border-color: var(--red-500);--event-all-day-border: none}calendar-event[color=orange]{--event-bg-timed: var(--orange-100);--event-bg-all-day: var(--orange-200);--event-border-color: var(--orange-500);--event-all-day-border: none}calendar-event[color=yellow]{--event-bg-timed: var(--yellow-100);--event-bg-all-day: var(--yellow-200);--event-border-color: var(--yellow-500);--event-all-day-border: none}calendar-event[color=green]{--event-bg-timed: var(--green-100);--event-bg-all-day: var(--green-200);--event-border-color: var(--green-500);--event-all-day-border: none}calendar-event[color=blue]{--event-bg-timed: var(--blue-100);--event-bg-all-day: var(--blue-200);--event-border-color: var(--blue-500);--event-all-day-border: none}calendar-event[color=purple]{--event-bg-timed: var(--purple-100);--event-bg-all-day: var(--purple-200);--event-border-color: var(--purple-500);--event-all-day-border: none}calendar-event h3{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--neutral-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}calendar-time-axis{display:contents}calendar-time-axis .hour-label{grid-column:time-left / days-start;grid-row-start:calc(var(--hour-index) + 1);align-self:start;padding:var(--space-2) var(--space-8);font-size:round(calc(var(--text-base) * 10 / 14),1px);color:var(--color-text-muted);text-align:right;white-space:nowrap;transform:translateY(-50%)}calendar-time-axis .hour-label[data-hour="0"]{visibility:hidden;width:0;height:0;padding:0;overflow:hidden}calendar-week{display:grid;grid-template-columns:[time-left] auto [days-start] repeat(var(--day-count, 0),minmax(0,1fr)) [days-end];grid-template-rows:[headers] auto [allday] auto [hours-start] repeat(var(--hour-count, 0),minmax(var(--hour-min-height, 4rem),1fr)) [hours-end];width:100%;height:100%;overflow:auto;background:var(--color-surface);font-family:inherit;color:var(--color-text)}calendar-week>calendar-headers,calendar-week>calendar-allday,calendar-week>calendar-grid{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;min-width:0}calendar-week>calendar-headers{grid-row:headers / allday;position:sticky;top:0;z-index:3;background:var(--color-surface);border-top:.5px solid var(--color-border);border-bottom:1px solid var(--color-border)}calendar-headers>calendar-day{grid-column:calc(var(--day-index) + 1);display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-12);font-size:var(--text-sm);border-left:.5px solid var(--color-border)}calendar-headers>calendar-day:last-of-type{border-right:.5px solid var(--color-border)}calendar-headers>calendar-day .weekday{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}calendar-headers>calendar-day .date-num{color:var(--color-text)}calendar-week>calendar-allday{grid-row:allday / hours-start;grid-template-rows:repeat(var(--allday-lane-count, 1),auto);position:sticky;top:var(--headers-height, 0px);z-index:2;border-bottom:1px solid var(--color-border);background:var(--color-surface)}calendar-allday>calendar-cell{grid-column:calc(var(--day-index) + 1);grid-row:1;border-left:.5px solid var(--color-border)}calendar-allday>calendar-cell:last-of-type{border-right:.5px solid var(--color-border)}calendar-week>calendar-grid{grid-row:hours-start / hours-end;grid-template-rows:subgrid;position:relative}calendar-grid>calendar-column{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;border-left:.5px solid var(--color-border);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(100% / var(--hour-count) - .5px),var(--color-border) calc(100% / var(--hour-count) - .5px),var(--color-border) calc(100% / var(--hour-count)))}calendar-grid>calendar-column:last-of-type{border-right:.5px solid var(--color-border)}calendar-grid>.start-hour-marker{grid-column:2;grid-row-start:calc(var(--start-hour) + 1);width:0;height:0}calendar-grid>.now-line-faint,calendar-grid>.now-line{grid-row:1 / -1;position:relative;pointer-events:none;z-index:1}calendar-grid>.now-line-faint{grid-column:2 / -1}calendar-grid>.now-line{grid-column:calc(var(--day-index) + 1)}calendar-grid>.now-line-faint:before,calendar-grid>.now-line:before{content:"";position:absolute;left:0;right:0;top:calc(var(--y-fraction) * 100%);height:1px;transform:translateY(-.5px)}calendar-grid>.now-line-faint:before{background:#e7202240}calendar-grid>.now-line:before{background:#e72022}calendar-grid>.now-line:after{content:"";position:absolute;left:0;top:calc(var(--y-fraction) * 100%);width:.5rem;height:.5rem;border-radius:50%;background:#e72022;transform:translate(-50%,-50%)}

package/dist/skills/tv-table/SKILL.md

@@ -5,7 +5,9 @@ description: Author dense Airtable-style HTML record tables using the shared Tel
 
 # Authoring a record table
 
-Know the main `television` skill first. Re-read it only if it is not already in your context or you know it changed. It defines the general Television workflow and the canonical HTML house style. This skill only adds table-specific guidance.
+Know the main `television` skill first. Re-read it only if it is not already in your context or you know it changed. It defines the general Television workflow and the canonical HTML house style (`<link rel="stylesheet" href="/canonical/v2/styles.css?authoredForAppVersion=<version>" />`). This skill only adds table-specific guidance.
+
+For a running server, read the exact release `version` from `tv status`; when working in a Television checkout, read the exact version from the checkout root `package.json`. Copy that exact release version unchanged into `authoredForAppVersion`. A missing version or the `0.0.0` development sentinel does not identify a release, so omit the metadata.
 
 A dense, Airtable-style table of records. Lots of cells, mixed cell types,
 structured rows. It should look crisp at a glance and read like real software,
@@ -48,7 +50,8 @@ Use this page structure:
 </body>
 ```
 
-The page is white throughout. Hairline borders around the thead and between rows do the visual work.
+Use `--color-surface` for the page background and `--color-text` for its text.
+Hairline borders using `--color-border` around the thead and between rows do the visual work.
 
 ## Styling guidance
 

package/dist/skills/tv-tasks/SKILL.md

@@ -22,12 +22,14 @@ For a directory artifact, copy both next to `index.html` and load them with the
 canonical boilerplate:
 
 ```html
-<link rel="stylesheet" href="/canonical/v1/styles.css" />
-<script type="module" src="/canonical/v1/components.js"></script>
+<link rel="stylesheet" href="/canonical/v2/styles.css?authoredForAppVersion=<version>" />
+<script type="module" src="/canonical/v2/components.js"></script>
 <link rel="stylesheet" href="./task.css" />
 <script type="module" src="./task.js"></script>
 ```
 
+For a running server, read the exact release `version` from `tv status`; when working in a Television checkout, read the exact version from the checkout root `package.json`. Copy that exact release version unchanged into `authoredForAppVersion`. A missing version or the `0.0.0` development sentinel does not identify a release, so omit the metadata.
+
 For a single-file artifact, inline `task.css`/`task.js` into `<style>` and
 `<script type="module">` tags instead. `components.js` gives you `<tv-icon>`;
 `task.js` registers `<tv-task-checkbox>` and `<tv-task-meta-due>`.
@@ -36,6 +38,13 @@ A task list is not a prose document: don't add `body` padding (the house
 style doc suggests it for prose) — `tv-task-list` and the page header supply
 their own gutters. Leave the body at zero.
 
+Television manages light and dark appearance. Live canonical v2 supplies the
+selected theme and shared defaults; the task kit inherits its surface, text,
+muted-text, and border roles. Author no `data-theme` marker or separate dark
+palette. Task colors use existing semantics: primary for checked checkboxes,
+`--color-primary-text` for their marks, `--color-alert` for due today and the
+default highlight, and `--color-danger` for overdue.
+
 ## Markup
 
 Author this shape — a page header, then a list of sections and rows:
@@ -103,8 +112,8 @@ actually in the section, and skip it when it adds nothing.
 One task row — a `<tv-task-checkbox>` followed by a `<tv-task-body>`. Give it a
 plain `id` if you'll wire interactivity. One per task.
 
-Add `highlighted` to emphasize a row: a soft wash, amber by default. The hue
-is one knob — `--task-highlight` — settable inline for a single row (`<tv-task highlighted style="--task-highlight: #7C5CFF">`)
+Add `highlighted` to emphasize a row: a soft wash of the shared alert color by default. The hue
+is one knob — `--task-highlight` — settable inline for a single row (`<tv-task highlighted style="--task-highlight: var(--color-primary)">`)
 or on an ancestor to retint every highlight in the list. Highlight only with
 a good reason: the user asked for it, or the emphasis clearly benefits them
 (the one row they should see first). At more than one or two per list the
@@ -137,7 +146,7 @@ it.
 
 ### `<tv-task-meta-due>`
 A due date: `<tv-task-meta-due date="YYYY-MM-DD">`. Give it only the machine
-date — it computes urgency (today → amber, overdue → red, upcoming → muted),
+date — it computes urgency (today → alert, overdue → danger, upcoming → muted),
 writes the human label ("Today", "Tomorrow", "Jun 20"), and draws the calendar
 glyph. Never hand-format the date or set a color. At most one per task.
 
@@ -212,21 +221,16 @@ An overdue date and multiple tags — same markup, the component colors it:
 A highlighted row, retinted to match the artifact's accent:
 
 ```html
-<tv-task highlighted style="--task-highlight: #7C5CFF">
+<tv-task highlighted style="--task-highlight: var(--color-primary)">
   <tv-task-checkbox></tv-task-checkbox>
   <tv-task-body><tv-task-title>Sign the lease by Friday</tv-task-title></tv-task-body>
 </tv-task>
 ```
 
-Dark mode — set `data-theme="dark"` on `<html>` (the page header and body
-background live outside the list, so scoping dark to the list would leave
-them light):
-
-```html
-<html data-theme="dark">
-  …
-</html>
-```
+The kit retains `--task-due-today`, `--task-highlight`, and `--task-meta-text`
+for deliberate artifact customization. Prefer shared semantic tokens for their
+values. Their defaults follow alert, the due-today color, and shared muted text
+at 85% opacity, respectively; the kit does not redefine canonical color tokens.
 
 ## Guidelines
 

package/dist/skills/tv-tasks/task.css

@@ -9,18 +9,11 @@
  */
 
 :root {
-  /* The amber for a task due today. Not a canonical token, so it gets one
-     named source here rather than being sprinkled as a literal. */
-  --task-due-today: #EA880B;
+  /* Task accents follow the active canonical/theme semantic roles. */
+  --task-due-today: var(--color-alert);
   /* Highlight hue — the highlighted row's wash derives from this one knob.
      Set it on any ancestor (or the row itself) to retint. */
   --task-highlight: var(--task-due-today);
-  /* Skill-local muted: a shade darker than the canonical --color-text-muted
-     (neutral-500, L 0.553) so notes hold their own against the darker meta
-     treatment below. Declared at :root, so it recolors ALL muted text on the
-     page (canonical components included) — deliberate for a single-skill
-     artifact; revisit if skills ever share a page. */
-  --color-text-muted: oklch(0.52 0 0);
   /* The meta line recedes a step behind the note: 85% of muted. */
   --task-meta-text: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
 }
@@ -40,7 +33,7 @@ tv-task-body {
 
 tv-task-title {
   display: block;
-  font-weight: var(--font-weight-body);
+  font-weight: var(--font-weight-normal);
   line-height: 1.35;
 }
 /* Completed — tracks the checkbox's reflected host attribute live, not a
@@ -168,7 +161,7 @@ tv-task-section > header h2 {
 tv-task-count {
   color: var(--task-meta-text);
   font-size: var(--text-sm);
-  font-weight: var(--font-weight-body);
+  font-weight: var(--font-weight-normal);
 }
 
 /* Empty state — shown when a section or list has no tasks. */
@@ -186,18 +179,3 @@ tv-task-placeholder {
 tv-task[highlighted] {
   background: color-mix(in srgb, var(--task-highlight) 10%, transparent);
 }
-
-/* ---- Dark mode ----
-   The canonical theme is light-only, so the skill carries its own dark token
-   set, applied when the document has data-theme="dark". */
-[data-theme="dark"] {
-  --color-surface: var(--neutral-800);
-  --color-surface-muted: var(--neutral-900);
-  --color-text: var(--neutral-50);
-  --color-text-muted: var(--neutral-400);
-  /* Re-derive: custom properties resolve where declared, so without this the
-     meta tone would keep the light-mode muted it was mixed from. */
-  --task-meta-text: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
-  --color-border: rgba(255, 255, 255, 0.14);
-  color-scheme: dark;
-}

package/dist/skills/tv-tasks/task.js

@@ -157,7 +157,7 @@ const CHECKBOX_STYLES = `
     content: "";
     width: 4px;
     height: 7px;
-    border: solid white;
+    border: solid var(--color-primary-text);
     border-width: 0 1.5px 1.5px 0;
     opacity: 0;
     transform: translateY(-0.5px) rotate(45deg) scale(0.75);

package/dist/themes/README.md

@@ -0,0 +1,5 @@
+# Bundled themes
+
+Each immediate child directory is an installed-theme package with `manifest.json`, `theme.css`, and any relative assets it needs. The server build validates this tree and copies it into the server and CLI distributions.
+
+A serving boot copies each package into the user themes directory once. The installed folder then belongs to the user. The null theme is labelled `None` and has no package in this tree. Clouds is the default theme selected on a new installation.

package/dist/themes/aquarium/README.md

@@ -0,0 +1,48 @@
+# Aquarium
+
+Authored by an agent (Claude) on 2026-09-17 as part of a batch of "fun themes" testing the theme system. Covers "background iframe" and "light and dark modes".
+
+## Intent
+
+A fish tank behind the interface. Light appearance: sunlit lagoon, colourful fish, sun shafts. Dark appearance: deep sea, bioluminescent fish outlines, drifting jellyfish and plankton. Interface controls are frosted glass so the tank shows through without hurting legibility.
+
+## Why a script
+
+Fish that flee the pointer and bubbles that burst where the user presses cannot be done in CSS. No application DOM access is needed, so the effect lives in the sandboxed background frame (`iframe-background.js`), not `main.js`.
+
+## How it works
+
+- `manifest.json` declares `enableIframeBackgroundJS: true`.
+- The wallpaper paints on `.app-main`, which is in front of the background frame. `theme.css` therefore sets `--app-wallpaper: transparent` — but only under `:root:has(#theme-iframe-background)`. Without the frame (script gate closed, loading) the CSS water gradient is the fallback.
+- The script draws the water itself on a full-viewport canvas.
+- Appearance: read once from the frame root's `data-theme` (see "Frame appearance and transparency" below).
+- Pointer: accepts only `event.source === parent` and the five documented `television-theme-pointer-*` types. Move → fish within 150px steer away. Down → bubble burst + nearby fish startle. Cancel → stop fleeing.
+
+## Resource cost
+
+One 2D canvas, capped at 30fps and devicePixelRatio 1.5; 22 fish, ≤90 bubbles, 5 jellyfish, 70 plankton points. Skips frames while `document.hidden`. Under `prefers-reduced-motion: reduce` it draws a single still frame and redraws only on resize. `shadowBlur` (dark mode glow) is the most expensive part; reduce fish count first if it ever matters.
+
+## Selector rules
+
+- `:root:has(#theme-iframe-background)` — wallpaper fallback switch described above.
+- `.sidebar { backdrop-filter }` with an 82%-opaque `--sidebar-background` lets water colour tint the sidebar.
+
+## Files
+
+`theme.css`, `manifest.json`, `iframe-background.js`. No assets.
+
+## Maintenance
+
+Every save in this folder destroys and recreates the frame, so fish positions reset — expected. Manifest changes need a registry refresh (`tv set-theme aquarium` does one).
+
+## Frame appearance and transparency
+
+Television generates the frame document. It stamps `data-theme="light"` or `"dark"` on the document's root, supplies full size, zero margin, hidden overflow and a transparent ground, and keeps the document's `color-scheme` matched to the frame element. That match is what keeps the frame transparent. Television recreates the frame and reruns the script when appearance changes.
+
+So the scripts here read `data-theme` from the root once at startup when they need it, install no appearance listener, and do not style the root element at all. Never set `color-scheme` on the frame document's root: a mismatch with the frame element makes the frame opaque, and an opaque overlay frame hides the whole application.
+
+History: 1.0.0 predated this contract and, in dark appearance, rendered the frame as a solid white sheet. 1.0.1 worked around it from inside the script. 1.0.2 removes the workaround and follows the contract above.
+
+## Manifest colour scheme
+
+`"colorScheme": "light dark"`: the theme adapts and follows the Light / Dark / System preference through its `[data-theme]` blocks. The theme sets no CSS `color-scheme`; the manifest is the only place the scheme is stated.

package/dist/themes/aquarium/iframe-background.js

@@ -0,0 +1,137 @@
+/* Aquarium background. Runs in Television's sandboxed background frame: no app DOM access, input arrives only as pointer messages. */
+(() => {
+  "use strict";
+
+  const POINTER = {
+    move: "television-theme-pointer-move",
+    down: "television-theme-pointer-down",
+    up: "television-theme-pointer-up",
+    cancel: "television-theme-pointer-cancel",
+    click: "television-theme-pointer-click",
+  };
+  const FRAME_MS = 1000 / 30; // 30fps is plenty for drifting fish
+  const rand = (a, b) => a + Math.random() * (b - a);
+
+  function start() {
+    // Television's frame document already supplies full size, zero margin, hidden overflow, a transparent ground and the
+    // matching color-scheme. Leave the root element's styles alone: changing color-scheme there turns the frame opaque.
+    const canvas = document.createElement("canvas");
+    canvas.style.cssText = "display:block;width:100vw;height:100vh";
+    document.body.appendChild(canvas);
+    const ctx = canvas.getContext("2d");
+
+    // Television stamps the effective appearance on this document's root and recreates the frame when it changes,
+    // so one read at startup is enough and no listener is needed.
+    const dark = document.documentElement.getAttribute("data-theme") === "dark";
+    const still = matchMedia("(prefers-reduced-motion: reduce)");
+    let W = 0, H = 0, dpr = 1;
+    const pointer = { x: -9999, y: -9999, active: false };
+
+    function resize() {
+      dpr = Math.min(devicePixelRatio || 1, 1.5);
+      W = innerWidth; H = innerHeight;
+      canvas.width = Math.max(1, Math.round(W * dpr));
+      canvas.height = Math.max(1, Math.round(H * dpr));
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+    addEventListener("resize", resize);
+    resize();
+
+    const DAY_FISH = ["#ff7a59", "#ffc145", "#ff5d8f", "#f4f1de", "#7bdff2", "#b388eb"];
+    const fish = Array.from({ length: 22 }, (_, i) => ({
+      x: rand(0, 1600), y: rand(60, 800), vx: rand(-1, 1) || 0.5, vy: 0,
+      size: rand(9, 22), hue: i % DAY_FISH.length, phase: rand(0, 6.28), speed: rand(0.5, 1.3), depth: rand(0.55, 1),
+    }));
+    const bubbles = Array.from({ length: 34 }, () => newBubble(true));
+    const jellies = Array.from({ length: 5 }, () => ({ x: rand(0, 1600), y: rand(0, 900), r: rand(16, 34), phase: rand(0, 6.28), hue: rand(170, 320) }));
+    const plankton = Array.from({ length: 70 }, () => ({ x: rand(0, 1600), y: rand(0, 900), p: rand(0, 6.28) }));
+
+    function newBubble(anywhere, x, y) {
+      return { x: x ?? rand(0, Math.max(W, 800)), y: y ?? (anywhere ? rand(0, Math.max(H, 600)) : Math.max(H, 600) + 10), r: rand(1.5, 5.5), vy: rand(0.4, 1.4), wob: rand(0, 6.28) };
+    }
+
+    addEventListener("message", (event) => {
+      if (event.source !== parent) return;
+      const d = event.data;
+      if (!d || typeof d.type !== "string") return;
+      if (d.type === POINTER.move) { pointer.x = d.clientX; pointer.y = d.clientY; pointer.active = true; }
+      else if (d.type === POINTER.down) {
+        pointer.x = d.clientX; pointer.y = d.clientY;
+        for (let i = 0; i < 9 && bubbles.length < 90; i++) bubbles.push(newBubble(false, d.clientX + rand(-10, 10), d.clientY + rand(-6, 6)));
+        for (const f of fish) { // a tap on the glass startles nearby fish
+          const dx = f.x - d.clientX, dy = f.y - d.clientY, dist = Math.hypot(dx, dy) || 1;
+          if (dist < 260) { f.vx += (dx / dist) * 5; f.vy += (dy / dist) * 3; }
+        }
+      } else if (d.type === POINTER.cancel) pointer.active = false;
+    });
+
+    function drawWater(dark, t) {
+      const g = ctx.createLinearGradient(0, 0, 0, H);
+      if (dark) { g.addColorStop(0, "#0b2545"); g.addColorStop(0.6, "#06142e"); g.addColorStop(1, "#02060f"); }
+      else { g.addColorStop(0, "#9be7f0"); g.addColorStop(0.55, "#3aa7d6"); g.addColorStop(1, "#1b5fa8"); }
+      ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      if (!dark) { // sun shafts
+        ctx.save(); ctx.globalCompositeOperation = "lighter";
+        for (let i = 0; i < 5; i++) {
+          const x = (W * (i + 0.5)) / 5 + Math.sin(t / 4000 + i) * 60, w = 50 + 25 * Math.sin(t / 3000 + i * 2);
+          const rg = ctx.createLinearGradient(0, 0, 0, H * 0.85);
+          rg.addColorStop(0, "rgba(255,255,230,0.16)"); rg.addColorStop(1, "rgba(255,255,230,0)");
+          ctx.fillStyle = rg; ctx.beginPath(); ctx.moveTo(x - w / 2, 0); ctx.lineTo(x + w / 2, 0); ctx.lineTo(x + w * 1.6 - 120, H * 0.85); ctx.lineTo(x - w * 1.6 - 120, H * 0.85); ctx.closePath(); ctx.fill();
+        }
+        ctx.restore();
+      }
+    }
+
+    function drawFish(f, dark, t) {
+      const dir = f.vx >= 0 ? 1 : -1, s = f.size * f.depth, wag = Math.sin(t / 110 * f.speed + f.phase) * 0.45;
+      ctx.save(); ctx.translate(f.x, f.y); ctx.scale(dir, 1); ctx.rotate(Math.max(-0.4, Math.min(0.4, f.vy * 0.25)));
+      ctx.globalAlpha = 0.45 + 0.55 * f.depth;
+      if (dark) { ctx.fillStyle = "rgba(10,25,50,0.9)"; ctx.strokeStyle = `hsla(${170 + f.hue * 25},90%,65%,0.85)`; ctx.lineWidth = 1.2; ctx.shadowColor = ctx.strokeStyle; ctx.shadowBlur = 8; }
+      else { ctx.fillStyle = DAY_FISH[f.hue]; }
+      ctx.beginPath(); ctx.ellipse(0, 0, s, s * 0.48, 0, 0, 6.2832); ctx.fill(); if (dark) ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(-s * 0.85, 0); ctx.lineTo(-s * 1.7, -s * 0.55 + wag * s); ctx.lineTo(-s * 1.7, s * 0.55 + wag * s); ctx.closePath(); ctx.fill(); if (dark) ctx.stroke();
+      ctx.shadowBlur = 0; ctx.fillStyle = dark ? "rgba(200,255,250,0.9)" : "rgba(20,30,50,0.85)";
+      ctx.beginPath(); ctx.arc(s * 0.55, -s * 0.1, Math.max(1, s * 0.09), 0, 6.2832); ctx.fill();
+      ctx.restore();
+    }
+
+    function drawJelly(j, t) {
+      const pulse = 1 + 0.12 * Math.sin(t / 700 + j.phase);
+      ctx.save(); ctx.translate(j.x, j.y); ctx.globalAlpha = 0.55;
+      ctx.shadowColor = `hsla(${j.hue},90%,70%,0.9)`; ctx.shadowBlur = 22; ctx.fillStyle = `hsla(${j.hue},85%,72%,0.5)`;
+      ctx.beginPath(); ctx.ellipse(0, 0, j.r * pulse, j.r * 0.75 / pulse, 0, Math.PI, 0); ctx.closePath(); ctx.fill();
+      ctx.shadowBlur = 0; ctx.strokeStyle = `hsla(${j.hue},85%,78%,0.45)`; ctx.lineWidth = 1.2;
+      for (let k = -2; k <= 2; k++) { ctx.beginPath(); ctx.moveTo(k * j.r * 0.35, 0); for (let y = 4; y < j.r * 2.2; y += 4) ctx.lineTo(k * j.r * 0.35 + Math.sin(t / 400 + y / 9 + k + j.phase) * 4, y); ctx.stroke(); }
+      ctx.restore();
+    }
+
+    function step(t) {
+      for (const f of fish) {
+        f.vx += Math.cos(t / 2300 * f.speed + f.phase) * 0.01; f.vy += Math.sin(t / 1700 + f.phase) * 0.012;
+        if (pointer.active) { const dx = f.x - pointer.x, dy = f.y - pointer.y, dist = Math.hypot(dx, dy) || 1; if (dist < 150) { const k = (150 - dist) / 150; f.vx += (dx / dist) * k * 0.9; f.vy += (dy / dist) * k * 0.6; } }
+        const cruise = f.speed * (f.vx >= 0 ? 1 : -1); f.vx += (cruise - f.vx) * 0.02; f.vy *= 0.95;
+        f.x += f.vx * f.depth; f.y += f.vy * f.depth;
+        if (f.x < -50) f.x = W + 40; else if (f.x > W + 50) f.x = -40;
+        if (f.y < 40) f.vy += 0.05; else if (f.y > H - 40) f.vy -= 0.05;
+      }
+      for (let i = bubbles.length - 1; i >= 0; i--) { const b = bubbles[i]; b.y -= b.vy; b.wob += 0.04; b.x += Math.sin(b.wob) * 0.35; if (b.y < -10) { if (bubbles.length > 34) bubbles.splice(i, 1); else bubbles[i] = newBubble(false); } }
+      for (const j of jellies) { j.y -= 0.18 + 0.12 * Math.sin(t / 700 + j.phase); j.x += Math.sin(t / 2600 + j.phase) * 0.2; if (j.y < -80) { j.y = H + 80; j.x = rand(0, W); } }
+
+      drawWater(dark, t);
+      if (dark) { ctx.fillStyle = "rgba(160,255,240,0.55)"; for (const p of plankton) { const a = 0.5 + 0.5 * Math.sin(t / 900 + p.p); ctx.globalAlpha = a * 0.6; ctx.fillRect(p.x % Math.max(W, 1), (p.y + t / 140) % Math.max(H, 1), 1.5, 1.5); } ctx.globalAlpha = 1; for (const j of jellies) drawJelly(j, t); }
+      fish.sort((a, b) => a.depth - b.depth); for (const f of fish) drawFish(f, dark, t);
+      ctx.lineWidth = 1; for (const b of bubbles) { ctx.strokeStyle = dark ? "rgba(170,230,255,0.35)" : "rgba(255,255,255,0.7)"; ctx.fillStyle = dark ? "rgba(170,230,255,0.06)" : "rgba(255,255,255,0.18)"; ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, 6.2832); ctx.fill(); ctx.stroke(); }
+    }
+
+    let last = 0;
+    function loop(t) {
+      requestAnimationFrame(loop);
+      if (document.hidden || t - last < FRAME_MS) return;
+      last = t; step(t);
+    }
+    if (still.matches) { step(0); addEventListener("resize", () => step(0)); }
+    else requestAnimationFrame(loop);
+  }
+
+  if (document.body) start(); else addEventListener("DOMContentLoaded", start, { once: true });
+})();

package/dist/themes/aquarium/manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "Aquarium",
+  "version": "1.0.2",
+  "colorScheme": "light dark",
+  "authoredForAppVersion": "1.3.1",
+  "enableIframeBackgroundJS": true
+}

package/dist/themes/aquarium/theme.css

@@ -0,0 +1,46 @@
+/* Aquarium — a living tank behind the interface (iframe-background.js). Lagoon by day, deep sea by night. */
+:root {
+  --accent: oklch(0.72 0.15 200);
+  --neutral: oklch(0.556 0.03 225);
+  --control-radius: 10px;
+  --panel-radius: 14px;
+  --color-link: var(--accent-600);
+}
+
+[data-theme="dark"] {
+  --accent: oklch(0.8 0.14 190);
+  --color-surface: oklch(0.22 0.04 235);
+  --color-surface-muted: oklch(0.18 0.04 238);
+  --color-link: var(--accent-300);
+}
+
+:root[data-television-document="app"] {
+  --frame-radius: 16px;
+  --tab-radius: var(--radius-pill);
+  --channel-radius: 10px;
+  /* Tank glass: frosted controls so the fish stay visible but labels stay readable. */
+  --wallpaper-overlay-background: var(--tint-surface);
+  --wallpaper-overlay-blur: 12px;
+  --wallpaper-overlay-border: 1px solid oklch(1 0 0 / 25%);
+  --page-inactive-opacity: 0.7;
+  /* The wallpaper is a water gradient that also serves when the script is off or still loading… */
+  --app-wallpaper: linear-gradient(to bottom, oklch(0.86 0.09 200), oklch(0.62 0.13 225) 60%, oklch(0.45 0.12 245));
+  --wallpaper-overlay-text-color: oklch(0.25 0.06 240);
+  --sidebar-background: oklch(from var(--color-surface-muted) l c h / 82%);
+}
+
+:root[data-television-document="app"][data-theme="dark"] {
+  --app-wallpaper: linear-gradient(to bottom, oklch(0.26 0.08 245), oklch(0.15 0.06 255) 60%, oklch(0.08 0.03 260));
+  --wallpaper-overlay-text-color: oklch(0.93 0.03 200);
+  --wallpaper-overlay-border: 1px solid oklch(1 0 0 / 12%);
+}
+
+/* …and becomes transparent once the background frame exists, because the wallpaper paints on .app-main in front of the frame and would hide it. */
+:root[data-television-document="app"]:has(#theme-iframe-background) {
+  --app-wallpaper: transparent;
+}
+
+/* Let the water show faintly through the sidebar. */
+:root[data-television-document="app"] .sidebar {
+  backdrop-filter: blur(14px);
+}

package/dist/themes/blueprint/README.md

@@ -0,0 +1,31 @@
+# Blueprint
+
+Authored by an agent (Claude) on 2026-09-17 as part of a batch of "fun themes" testing the theme system. Covers the brief's "single-mode theme" and "creative CSS" cases.
+
+## Intent
+
+A cyanotype engineering drawing. One fixed look with no `data-theme` blocks. The manifest declares `"colorScheme": "dark"`, so Television applies the dark appearance wherever this theme is active, whatever the appearance preference says. The theme sets no CSS `color-scheme` anywhere; Television supplies it. White-line edges, square corners, monospace lettering, a drafting grid.
+
+## Choices
+
+- Role tokens (`--color-surface`, `--color-text`, …) are stated at `:root` so they beat both foundation mode tables.
+- `--alpha-active: 12%` is restated in `theme.css`. It dates from when a fixed look could run under light appearance; with `colorScheme: "dark"` the foundation's dark table always applies, so the restatement is now redundant but harmless. Hue slots (`--red`, …) are *not* restated: in light appearance they keep the slightly more saturated light-table values. Acceptable.
+- Shadows are replaced: a blueprint has no depth. Panels get a 4px surface-coloured halo (`--shadow-md`) so popovers separate from the grid.
+- `--font-sans` is monospace and unprefixed, so live-canonical artifacts are lettered the same way. Intentional cross-document reach.
+
+## Selector rules (all app-scoped)
+
+- **Grid wallpaper** — four `linear-gradient` layers in `--app-wallpaper`; no image asset.
+- **Part numbers** — `counter-reset` on `.sidebar-body`, `counter-increment` on `.channel-row`, shown in `.channel::before`. Numbering runs continuously through Pinned and Recent. Pure decoration; the DOM is untouched.
+- **Selection callout** — selected channel is a dashed cyan outline with cyan text (`--channel-background-selected: transparent`), not a fill. Outline is on `.channel`, separate from the keyboard focus ring.
+- **Uppercase lettering** — `.tab-label`, `.channel-group-label`, `.artifact-title`.
+- **Dimension line** — `.page[selected]::before`, positioned in the gap above the frame. Relies on `.page` being a positioned, unclipped box; if a release changes that, the mark simply disappears or misplaces — delete the rule.
+- **Title block** — `#foreground-overlay::after`, bottom-left, width derived from `--sidebar-width`. It sits above the interface without taking input. With a very long channel list it overlaps the last rows (85% opaque); accepted.
+
+## Files
+
+`theme.css`, `manifest.json`. No assets, no JavaScript.
+
+## Maintenance
+
+`.channel::before`, `.page[selected]::before` and `#foreground-overlay::after` were confirmed unused by Television 1.3.1 (computed `content: none`) before being claimed. Re-check on upgrade.

package/dist/themes/blueprint/manifest.json

@@ -0,0 +1,6 @@
+{
+  "name": "Blueprint",
+  "version": "1.0.0",
+  "colorScheme": "dark",
+  "authoredForAppVersion": "1.3.1"
+}

package/dist/themes/blueprint/theme.css

@@ -0,0 +1,115 @@
+/* Blueprint — a fixed cyanotype look: one appearance, stated at :root. */
+:root {
+  --neutral: oklch(0.556 0.09 255);
+  --accent: oklch(0.86 0.12 205); /* pale cyan pencil */
+  --color-surface: oklch(0.3 0.11 258);
+  --color-surface-muted: oklch(0.26 0.1 258);
+  --color-text: oklch(0.95 0.025 225);
+  --color-text-muted: oklch(0.78 0.06 235);
+  --color-text-reversed: oklch(0.22 0.09 258);
+  --color-border: oklch(from var(--color-text) l c h / 35%);
+  --color-link: var(--accent);
+  /* The foundation's dark table only applies in dark appearance; restate its press strength for the fixed look. */
+  --alpha-active: 12%;
+
+  /* Technical lettering everywhere, artifacts included. */
+  --font-sans: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
+
+  /* Drafted with a ruler: no curves, white-line edges. */
+  --control-radius: 0px;
+  --panel-radius: 0px;
+  --surface-border-color: oklch(from var(--color-text) l c h / 55%);
+  --surface-outline-color: transparent;
+  --panel-border: 1px dashed var(--panel-border-color);
+  --shadow-sm: none;
+  --shadow-md: 0 0 0 4px oklch(from var(--color-surface) l c h / 60%);
+  --shadow-lg: var(--shadow-md);
+  --shadow-xl: none;
+}
+
+:root[data-television-document="app"] {
+  --frame-radius: 0px;
+  --tab-radius: 0px;
+  --channel-radius: 0px;
+  --page-snap-preview-radius: 0px;
+  --frame-border: 1px solid var(--frame-border-color);
+  --frame-titlebar-border-color: var(--frame-border-color);
+  --sidebar-background: oklch(0.27 0.105 258);
+  --sidebar-heading-font-size: var(--text-sm);
+  --channel-background-selected: transparent;
+  --channel-text-color-selected: var(--accent);
+  --tab-background-selected: var(--color-surface);
+  --tab-border-selected: 1px dashed var(--surface-border-color);
+  --wallpaper-overlay-text-color: var(--color-text);
+  --page-inactive-opacity: 0.4;
+
+  /* Drafting grid: 100px majors, 20px minors, drawn entirely with gradients. */
+  --app-wallpaper:
+    linear-gradient(oklch(1 0 0 / 16%) 1px, transparent 1px) 0 0 / 100px 100px,
+    linear-gradient(90deg, oklch(1 0 0 / 16%) 1px, transparent 1px) 0 0 / 100px 100px,
+    linear-gradient(oklch(1 0 0 / 6%) 1px, transparent 1px) 0 0 / 20px 20px,
+    linear-gradient(90deg, oklch(1 0 0 / 6%) 1px, transparent 1px) 0 0 / 20px 20px,
+    oklch(0.34 0.125 258);
+}
+
+/* Part numbers: a CSS counter labels every channel like a bill of materials. */
+:root[data-television-document="app"] .sidebar-body {
+  counter-reset: part;
+}
+:root[data-television-document="app"] .channel-row {
+  counter-increment: part;
+}
+:root[data-television-document="app"] .channel::before {
+  content: counter(part, decimal-leading-zero) " ";
+  color: var(--color-text-muted);
+  margin-right: var(--space-6);
+}
+/* Selection is a drafted callout — dashed box and cyan ink — instead of a fill. */
+:root[data-television-document="app"] .channel[aria-selected="true"] {
+  outline: 1px dashed var(--accent);
+  outline-offset: -1px;
+}
+:root[data-television-document="app"] .channel[aria-selected="true"]::before {
+  color: var(--accent);
+}
+
+/* Drawing-label lettering for tabs and group headings. */
+:root[data-television-document="app"] :is(.tab-label, .channel-group-label, .artifact-title) {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+/* Dimension line: a measured arrow across the top edge of the selected page. The page is not clipped, so the mark sits in the gap above the frame. */
+:root[data-television-document="app"] .page[selected]::before {
+  content: "◂──────── SELECTED ────────▸";
+  position: absolute;
+  top: -18px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font: 10px/1 var(--font-mono);
+  letter-spacing: 0.1em;
+  white-space: nowrap;
+  overflow: hidden;
+  color: oklch(from var(--color-text) l c h / 70%);
+  pointer-events: none;
+}
+
+/* Title block, as on every engineering drawing, in the usually empty bottom of the sidebar. Lives on the input-free foreground overlay. */
+:root[data-television-document="app"] #foreground-overlay::after {
+  content: "TELEVISION / CHANNEL LAYOUT\A DWG NO. TV-001   SHEET 1 OF 1\A SCALE 1:1   DO NOT SCALE DRAWING";
+  white-space: pre;
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  width: calc(var(--sidebar-width) - 24px);
+  box-sizing: border-box;
+  padding: 8px 10px;
+  font: 9px/1.7 var(--font-mono);
+  letter-spacing: 0.06em;
+  color: oklch(from var(--color-text) l c h / 75%);
+  border: 1px solid oklch(from var(--color-text) l c h / 50%);
+  box-shadow: inset 0 0 0 3px oklch(0.27 0.105 258), inset 0 0 0 4px oklch(from var(--color-text) l c h / 30%);
+  background: oklch(0.27 0.105 258 / 85%);
+  overflow: hidden;
+}

package/dist/themes/clouds/README.md

@@ -0,0 +1,15 @@
+# Clouds
+
+Clouds gives Television a cool, airy appearance with sky photographs and restrained interface colors. Light appearance pairs white clouds and blue sky with pale gray surfaces; dark appearance uses deep blue clouds and stars. Translucent controls and soft shadows keep the interface readable while leaving the sky visible around the content.
+
+The blue accent echoes the daylight photograph. Interface colors adapt the Gray, Neutral and Slate palettes from [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss/blob/41d9cae8e53378d16087fcf359eb785c2fd42ce4/packages/tailwindcss/theme.css), under the [MIT License](https://github.com/tailwindlabs/tailwindcss/blob/41d9cae8e53378d16087fcf359eb785c2fd42ce4/LICENSE). Copyright (c) Tailwind Labs, Inc. Complete terms are included in `THIRD-PARTY-NOTICES.txt`.
+
+## Wallpapers and credits
+
+The day photograph is `wallpaper.webp`; the night photograph is `wallpaper-dark.webp`.
+
+Day: Photo by <a href="https://unsplash.com/@ljubazarkovic?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ljubomir Žarković</a> on <a href="https://unsplash.com/photos/white-clouds-and-blue-sky-during-daytime-bt_ZtkCxLs4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.
+
+Night: Photo by <a href="https://unsplash.com/@shotbycerqueira?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Shot by Cerqueira</a> on <a href="https://unsplash.com/photos/blue-and-white-starry-night-sky-NpF9JLGYfeQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.
+
+Both photographs are used under the [Unsplash License](https://unsplash.com/license), retrieved 2026-09-17. Complete license terms and photo attributions are included in `THIRD-PARTY-NOTICES.txt`.