tui-cap 0.1.0

package/dist/web/styles.css

@@ -0,0 +1,925 @@
+/* GitHub's Primer Brand typeface, bundled locally (see fonts/README.md) so the
+   GUI matches primer.style/brand offline without a runtime package dependency.
+   It upgrades the system font stack progressively — fallbacks render until the
+   variable font loads. */
+@font-face {
+  font-family: "Mona Sans";
+  src: url("fonts/MonaSansVF-wdth-wght-opsz.woff2") format("woff2 supports variations"),
+    url("fonts/MonaSansVF-wdth-wght-opsz.woff2") format("woff2-variations");
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+  font-display: swap;
+  font-synthesis: none;
+  font-feature-settings: "liga" 0;
+}
+@font-face {
+  font-family: "Mona Sans Mono";
+  src: url("fonts/MonaSansMonoVF-wght.woff2") format("woff2 supports variations"),
+    url("fonts/MonaSansMonoVF-wght.woff2") format("woff2-variations");
+  font-weight: 200 900;
+  font-display: swap;
+  font-synthesis: none;
+}
+
+/* ============================================================================
+   Primer Brand design tokens (dark) — inlined from @primer/primitives and
+   @primer/react-brand so the GUI follows primer.style/brand without adding any
+   runtime package dependency. These mirror the look of the sibling
+   asset-generator and OctoCap projects.
+   ========================================================================== */
+:root {
+  /* Spacing scale — Primer base-size primitives (1rem = 16px) */
+  --space-1: 0.125rem;  /*  2px */
+  --space-2: 0.25rem;   /*  4px */
+  --space-3: 0.375rem;  /*  6px */
+  --space-4: 0.5rem;    /*  8px */
+  --space-5: 0.75rem;   /* 12px */
+  --space-6: 1rem;      /* 16px */
+  --space-7: 1.25rem;   /* 20px */
+  --space-8: 1.5rem;    /* 24px */
+
+  /* Neutral scale (dark) — Primer product functional greys (cool, no tint).
+     Brand green is reserved as an accent so chrome reads neutral, not washed. */
+  --scale-gray-2: #9198a1;  /* fgColor-muted */
+  --scale-gray-5: #3d444d;  /* borderColor-default */
+  --scale-gray-6: #262c36;  /* control-bgColor-hover */
+  --scale-gray-7: #212830;  /* control-bgColor-rest */
+  --scale-gray-8: #151b23;  /* bgColor-muted (raised) */
+  --scale-gray-9: #0d1117;  /* bgColor-default */
+
+  /* Surfaces — pure-black brand canvas; raised surfaces are neutral grey */
+  --bg: #000000;          /* brand color-canvas-default */
+  --panel: #000000;       /* chrome panels */
+  --panel-2: #212830;     /* raised surface: default buttons / cards */
+  --input-bg: #0d1117;    /* text fields / selects (neutral well) */
+  --elevated: #151b23;    /* menus / floating popovers */
+  --inset: #010409;       /* deep wells: previews, tracks */
+  --hover: #262c36;       /* hover background (control hover) */
+  --active: #2a313c;      /* pressed / active background (control active) */
+  --border: #3d444d;      /* borderColor-default */
+  --border-muted: #2a313c;/* subtle divider */
+
+  /* Text */
+  --text: #f0f6fc;        /* fgColor-default */
+  --muted: #9198a1;       /* fgColor-muted */
+
+  /* Brand green accent — the signature Primer Brand color, used sparingly for
+     primary actions, the live "now" frame, progress and success. */
+  --accent: #2ea043;             /* vibrant green: current / progress / spinner */
+  --accent-emphasis: #238636;    /* primary action rest */
+  --accent-emphasis-hover: #2ea043;
+  --accent-fg: #ffffff;
+  --accent-bright: #5fed83;      /* brand color-accent-primary highlight */
+
+  /* Blue — Primer interactive: toggles, sliders, active/selected, focus.
+     This is the product-Primer accent (matches the sibling asset-generator). */
+  --accent-blue: #1f6feb;        /* control-checked / filled active */
+  --accent-blue-fg: #4493f8;     /* fgColor-accent */
+  --knob: #262c36;               /* toggle knob (off) */
+  --focus: #4493f8;              /* focus ring */
+  --select: #4493f8;             /* content-selection overlays */
+
+  /* Semantic */
+  --green: #3fb950;
+  --red: #fa383d;         /* brand danger */
+  --gold: #db9d00;        /* brand color-accent-secondary */
+
+  /* Radius / border width — brand primitives */
+  --radius: 0.5rem;       /* brand borderRadius-medium (8px) */
+  --radius-sm: 0.25rem;   /* brand borderRadius-small (4px) */
+  --radius-lg: 1rem;      /* brand borderRadius-large (16px) */
+  --border-thin: max(1px, 0.0625rem);
+
+  /* Typography — Mona Sans with graceful system fallbacks */
+  --sans: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  --mono: "Mona Sans Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* Render native UI (scrollbars, form controls) in dark mode so every
+     scrollbar — including the timeline's horizontal one — matches the theme. */
+  color-scheme: dark;
+}
+
+/* Consistent brand focus ring (blue) for keyboard navigation across controls. */
+:where(button, input, select, textarea, a, [tabindex]):focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 1px;
+  border-radius: var(--radius-sm);
+}
+
+* { box-sizing: border-box; }
+
+/* Range sliders use the Primer blue interactive accent. */
+input[type="range"] { accent-color: var(--accent-blue); }
+
+/* Checkboxes are restyled as Primer ToggleSwitch-style toggles (blue when on).
+   Pure CSS over the native <input type="checkbox"> — no markup or JS changes. */
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: none;
+  position: relative;
+  width: 28px;
+  height: 16px;
+  margin: 0;
+  border-radius: 999px;
+  background: var(--scale-gray-7);
+  border: var(--border-thin) solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+input[type="checkbox"]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--knob);
+  transform: translateY(-50%);
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+input[type="checkbox"]:hover { border-color: color-mix(in srgb, #ffffff 22%, var(--border)); }
+input[type="checkbox"]:checked {
+  background: var(--accent-blue);
+  border-color: var(--accent-blue);
+}
+input[type="checkbox"]:checked::before {
+  background: #ffffff;
+  transform: translate(12px, -50%);
+}
+
+/* The app is a fixed shell: the page itself never scrolls. Panels and the
+   canvas own their overflow so content stays anchored around them. */
+html, body { height: 100%; overflow: hidden; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  display: flex;
+  flex-direction: column;
+}
+
+h1, h2 { margin: 0; font-weight: 600; }
+h1 { font-size: 15px; letter-spacing: -0.01em; }
+h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+
+.muted { color: var(--muted); }
+.small { font-size: 12px; }
+.hidden { display: none !important; }
+
+/* Top bar */
+.topbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--space-5);
+  padding: var(--space-5) var(--space-6);
+  border-bottom: var(--border-thin) solid var(--border);
+  background: var(--panel);
+}
+.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.brand h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.brand .logo { width: 28px; height: 28px; display: block; flex: none; }
+
+/* Canvas scale controls — stay centered in the header across viewport sizes. */
+.view-scale { justify-self: center; display: flex; align-items: center; gap: 8px; }
+.view-scale .zoom-range { width: 120px; }
+.view-scale .zoom-pct {
+  min-width: 40px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.view-scale .zoom-range:disabled { opacity: 0.45; }
+.view-scale:has(.zoom-range:disabled) .zoom-pct { opacity: 0.45; }
+.topbar > .btn-primary { justify-self: end; }
+
+/* Update notice — a slim accent bar under the header when a newer release ships */
+.update-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  padding: var(--space-4) var(--space-6);
+  border-bottom: var(--border-thin) solid var(--border);
+  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
+  font-size: 13px;
+}
+.update-banner .ub-icon {
+  color: var(--accent-bright);
+  font-weight: 700;
+  flex: none;
+}
+.update-banner .ub-msg { flex: 1; min-width: 0; }
+.update-banner .ub-actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }
+
+/* Layout */
+.layout {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr) 290px;
+  /* Bound the single row to the viewport so the row can't grow with its
+     content (a CSS-grid auto row would, forcing the whole page to scroll).
+     With the row clamped, each region scrolls within itself instead. */
+  grid-template-rows: minmax(0, 1fr);
+  min-height: 0;
+}
+.panel { border-right: var(--border-thin) solid var(--border); overflow-y: auto; min-height: 0; padding: var(--space-6); }
+.settings { border-right: none; border-left: var(--border-thin) solid var(--border); }
+.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--space-5); }
+.panel-head-actions { display: flex; align-items: center; gap: 6px; flex: none; }
+.lib-folder { color: var(--muted); }
+.lib-folder:hover { background: var(--bg); color: var(--text); }
+
+/* Library list */
+.rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.rec-item {
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rec-item:hover { background: var(--panel-2); }
+.rec-item.active { background: color-mix(in srgb, var(--accent-blue) 14%, var(--panel-2)); border-color: var(--accent-blue); }
+.rec-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.rec-item .name { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
+.rec-item .meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 8px; }
+
+.rec-actions {
+  display: flex;
+  gap: 2px;
+  flex: none;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+.rec-item:hover .rec-actions,
+.rec-item.active .rec-actions,
+.rec-actions:focus-within { opacity: 1; pointer-events: auto; }
+.rec-act {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  border-radius: 5px;
+  padding: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.rec-act svg { width: 15px; height: 15px; display: block; }
+.rec-act:hover { background: var(--bg); color: var(--text); }
+.rec-act.danger:hover { background: color-mix(in srgb, var(--red) 22%, var(--bg)); color: var(--red); }
+.empty { padding: 8px 2px; font-size: 12.5px; }
+
+/* First-load library spinner so a slow scan of many captures doesn't look frozen. */
+.lib-loading { display: flex; align-items: center; gap: 8px; padding: 10px 2px; font-size: 12.5px; }
+.spinner {
+  flex: none;
+  width: 13px; height: 13px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
+
+/* Stage */
+.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px; gap: 12px; }
+.preview-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-thin) solid var(--border);
+  border-radius: var(--radius);
+  background-color: var(--inset);
+  background-image:
+    linear-gradient(45deg, var(--scale-gray-9) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--scale-gray-9) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--scale-gray-9) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--scale-gray-9) 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+  overflow: auto;
+  padding: 24px;
+}
+.preview { max-width: 100%; max-height: 100%; object-fit: contain; }
+.preview-wrap .empty { margin: auto; }
+
+/* Scaled view (100% or any slider zoom): render the canvas at an explicit size
+   and let the wrap pan via scroll. margin:auto keeps it centered when it fits and
+   scroll-from-origin when it overflows. */
+.preview-wrap.scaled { align-items: flex-start; justify-content: flex-start; }
+.preview-wrap.scaled .preview { max-width: none; max-height: none; margin: auto; }
+
+.frame-label { font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* Timeline — pinned to the bottom of the stage; the preview above it flexes and
+   scrolls, so the timeline stays anchored to the bottom of the viewport. */
+.timeline { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
+.timeline-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.tl-group { display: flex; align-items: center; gap: 4px; }
+.tl-spacer { flex: 1 1 auto; min-width: 8px; }
+.tl-group.zoom { gap: 6px; }
+.tl-group.zoom input[type="range"] { width: 120px; }
+.tl-len { display: flex; align-items: center; gap: 4px; }
+.tl-len input[type="number"] {
+  width: 68px;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 5px;
+  padding: 4px 6px;
+  font: inherit;
+  font-size: 12px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  -moz-appearance: textfield;
+}
+.tl-len input::-webkit-outer-spin-button,
+.tl-len input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.tl-group.selection { gap: 6px; }
+.btn.small.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
+.btn.small.danger:hover { background: color-mix(in srgb, var(--red) 18%, var(--bg)); border-color: var(--red); }
+
+.timeline-scroll {
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  user-select: none;
+}
+.timeline-scroll.dragging { cursor: ew-resize; }
+/* Shift-held / active brush selection: edges stop reading as resize handles. */
+.timeline-scroll.selecting .timeline-track,
+.timeline-scroll.selecting .tl-frame,
+.timeline-scroll.selecting .tl-handle,
+.timeline-scroll.shift-select .timeline-track,
+.timeline-scroll.shift-select .tl-frame,
+.timeline-scroll.shift-select .tl-handle { cursor: crosshair; }
+.timeline-empty { position: absolute; inset: 0; margin: auto; height: max-content; text-align: center; }
+
+/* Ruler — doubles as the scrubber: click or drag anywhere to seek. */
+.timeline-ruler { position: relative; height: 18px; border-bottom: 1px solid var(--border); background: var(--panel-2); cursor: pointer; }
+.timeline-ruler:hover { background: var(--hover); }
+.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); pointer-events: none; }
+.tl-tick > span { position: absolute; top: 1px; left: 3px; font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; }
+
+/* Track + frame blocks */
+.timeline-track { position: relative; height: 76px; }
+.tl-frame {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  cursor: pointer;
+}
+.tl-frame:hover { background: var(--panel-2); }
+/* Frames containing user typing are tinted green so typing is easy to scan.
+   When zoomed out each frame is only a pixel or two wide, so the 1px right-edge
+   divider dominates what's visible — tint that green (not just the background)
+   so typing sections read as solid green bands at any zoom. */
+.tl-frame.is-typing {
+  background-color: color-mix(in srgb, var(--green) 30%, var(--panel));
+  border-right-color: var(--green);
+}
+.tl-frame.is-typing .tl-head {
+  background-color: color-mix(in srgb, var(--green) 28%, var(--panel-2));
+  color: color-mix(in srgb, var(--green) 45%, var(--text));
+}
+.tl-frame .tl-head {
+  height: 15px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+  font-size: 10px;
+  color: var(--muted);
+  background: var(--panel-2);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.tl-frame .tl-prev {
+  display: block;
+  width: 100%;
+  height: calc(100% - 15px);
+  object-fit: contain;
+  object-position: top left;
+  background: var(--bg);
+}
+.tl-frame.current { z-index: 3; }
+.tl-frame.selected { background: color-mix(in srgb, var(--select) 18%, var(--panel)); }
+.tl-frame.selected .tl-head { color: var(--text); }
+/* Selection / current outline is an overlay drawn above the preview image so the
+   accent border stays visible on wide frames that show a thumbnail (an inset
+   box-shadow on the frame itself paints below the opaque .tl-prev child). */
+.tl-frame.selected::after,
+.tl-frame.current::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.tl-frame.selected::after { box-shadow: inset 0 0 0 1px var(--select); }
+.tl-frame.current::after,
+.tl-frame.current.selected::after { box-shadow: inset 0 0 0 2px var(--accent); }
+.tl-frame.overridden .tl-head { color: var(--accent); }
+.tl-frame.overridden .tl-head::after { content: "•"; color: var(--accent); }
+.tl-frame.excluded { opacity: 0.4; }
+.tl-frame.excluded .tl-prev { filter: grayscale(0.6); }
+.tl-frame.skipped {
+  opacity: 0.5;
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0 5px,
+    color-mix(in srgb, var(--red) 30%, transparent) 5px 6px
+  );
+}
+.tl-frame.skipped .tl-head { color: var(--red); text-decoration: line-through; }
+
+/* Resize handle sits on each block's right edge (the boundary you drag). */
+.tl-handle { position: absolute; top: 0; bottom: 0; right: 0; width: 8px; cursor: ew-resize; z-index: 4; }
+.tl-handle::after {
+  content: "";
+  position: absolute;
+  top: 0; bottom: 0; right: 0;
+  width: 1px;
+  background: transparent;
+}
+.tl-handle:hover::after { background: var(--accent); right: 0; width: 2px; }
+
+/* Playhead */
+.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); pointer-events: none; z-index: 5; }
+.tl-playhead::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -3px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--text);
+}
+
+/* Fields */
+.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12.5px; }
+.field > span { color: var(--muted); }
+.field input[type="text"], .field input[type="number"], .field select {
+  background: var(--input-bg);
+  border: var(--border-thin) solid var(--border);
+  color: var(--text);
+  border-radius: 6px;
+  padding: var(--space-3) var(--space-4);
+  font: inherit;
+  transition: border-color 0.15s ease;
+}
+.field input[type="text"]:hover, .field input[type="number"]:hover, .field select:hover {
+  border-color: color-mix(in srgb, #ffffff 18%, var(--border));
+}
+.field input[type="text"]:focus, .field input[type="number"]:focus, .field select:focus {
+  border-color: var(--focus);
+}
+.field input[type="range"] { width: 100%; }
+.field.checkbox { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
+.field.checkbox > span { color: var(--text); }
+.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.reset-row { margin: -2px 0 14px; }
+.recorded-size {
+  align-self: flex-start;
+  color: var(--text);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  padding: 2px 0;
+}
+
+/* Buttons */
+.btn {
+  appearance: none;
+  border: var(--border-thin) solid var(--border);
+  background: var(--panel-2);
+  color: var(--text);
+  border-radius: 6px;
+  padding: var(--space-3) var(--space-5);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.btn:hover { background: var(--hover); border-color: color-mix(in srgb, #ffffff 22%, var(--border)); }
+.btn.small { padding: var(--space-2) var(--space-4); font-size: 12px; }
+.btn.icon { padding: var(--space-3) var(--space-4); }
+.btn.icon svg { width: 15px; height: 15px; display: block; }
+.btn.block { width: 100%; }
+.btn-primary { background: var(--accent-emphasis); border-color: var(--accent-emphasis); color: var(--accent-fg); }
+.btn-primary:hover { background: var(--accent-emphasis-hover); border-color: var(--accent-emphasis-hover); }
+.btn.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #ffffff; }
+.btn.active:hover { background: color-mix(in srgb, #ffffff 10%, var(--accent-blue)); border-color: var(--accent-blue); }
+.btn:disabled, .btn.disabled { opacity: 0.45; pointer-events: none; }
+
+.export { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
+.export-png { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
+.export-png .btn { width: 100%; }
+.png-scale {
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 6px;
+  padding: 0 8px;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.png-scale:disabled { opacity: 0.45; pointer-events: none; }
+
+/* Dialog */
+.dialog {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel);
+  color: var(--text);
+  width: min(520px, 92vw);
+  padding: 20px;
+}
+.dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
+.dialog h2 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 16px; margin-bottom: 6px; }
+.cmd-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  margin: 12px 0;
+}
+.cmd-box code { font-family: var(--mono); font-size: 12.5px; flex: 1; word-break: break-all; color: var(--green); }
+.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
+
+/* Animation panel */
+.anim-head { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
+.anim-note { margin: -2px 0 10px; }
+.anim-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 4px; min-height: 24px; }
+#animLen { font-variant-numeric: tabular-nums; }
+
+/* Play button toggles to a "stop/pause" look while running. */
+.btn.icon.playing { background: var(--green); border-color: var(--green); color: #04150a; }
+
+/* Export progress */
+.progress { display: flex; align-items: center; gap: 8px; }
+.progress-track { flex: 1; height: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
+.progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.1s linear; }
+.progress-pct { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-size: 13px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  z-index: 10;
+}
+
+/* ------------------------------------------------------------ content edits */
+
+.edit-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 28px;
+  flex-wrap: wrap;
+}
+.btn[aria-pressed="true"] {
+  background: var(--accent-blue);
+  border-color: var(--accent-blue);
+  color: #ffffff;
+}
+.edit-hint { flex: 1; min-width: 120px; }
+.edit-tools { display: flex; align-items: center; gap: 8px; }
+.btn.danger-text { color: var(--red); }
+.btn.danger-text:hover { border-color: var(--red); }
+
+/* Selection overlay sits exactly over the rendered <img>. */
+.preview-wrap { position: relative; }
+.sel-overlay {
+  position: absolute;
+  z-index: 4;
+  cursor: crosshair;
+  touch-action: none;
+}
+.sel-overlay.hidden { display: none; }
+/* Eyedropper mode: let canvas clicks fall through the inline editor so any cell
+   is sampleable, and signal the picking cursor. */
+.sel-overlay.eyedrop { cursor: crosshair; }
+.sel-overlay.eyedrop .sel-editor { pointer-events: none; }
+.sel-cell { position: absolute; pointer-events: none; border-radius: 2px; }
+.sel-hover { background: color-mix(in srgb, var(--select) 22%, transparent); }
+.sel-rect {
+  background: color-mix(in srgb, var(--select) 30%, transparent);
+  outline: 1px solid var(--select);
+}
+
+/* Live in-canvas text editor (sits over the selected block) */
+.sel-editor {
+  position: absolute;
+  overflow: hidden;
+  z-index: 5;
+  outline: 1px solid var(--select);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--select) 35%, transparent);
+}
+.sel-editor.hidden { display: none; }
+.sel-edit-ghost {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.3;
+  font-family: 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  white-space: pre;
+}
+.sel-edit-text {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  font-family: 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  white-space: pre;
+}
+.sel-edit-char {
+  position: absolute;
+  top: 0;
+  text-align: left;
+  overflow: hidden;
+  line-height: 1;
+}
+.sel-caret {
+  position: absolute;
+  top: 0;
+  width: 2px;
+  pointer-events: none;
+  background: currentColor;
+  animation: sel-caret-blink 1.06s steps(1, end) infinite;
+}
+.sel-caret.solid { animation: none; }
+@keyframes sel-caret-blink {
+  0%, 50% { opacity: 1; }
+  50.01%, 100% { opacity: 0; }
+}
+.sel-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: transparent;
+  caret-color: transparent;
+  outline: none;
+  font-family: 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  white-space: pre;
+}
+.sel-input::selection { background: transparent; }
+.ep-hint { margin: 0; line-height: 1.4; }
+.ep-hint em { font-style: normal; color: var(--accent); }
+
+/* Edits manager (right settings panel) */
+.edits-section { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
+.edits-head { margin-top: 2px; }
+.edits-empty { margin: 0 0 8px; }
+.edits-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.edit-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--panel-2);
+  padding: 6px 8px;
+  font-size: 12px;
+}
+.edit-item .ei-main { flex: 1; min-width: 0; cursor: pointer; }
+.edit-item .ei-kind {
+  display: inline-block;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  margin-right: 6px;
+}
+.edit-item .ei-text {
+  font-family: var(--mono);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+.edit-item .ei-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 4px;
+}
+.edit-item .ei-remove {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  padding: 2px 4px;
+}
+.edit-item .ei-remove:hover { color: var(--red); }
+
+/* Edit popover */
+.edit-popover {
+  position: fixed;
+  z-index: 30;
+  width: 280px;
+  max-width: calc(100vw - 24px);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 12.5px;
+}
+.edit-popover.hidden { display: none; }
+.ep-row { display: flex; align-items: center; gap: 8px; }
+.ep-selected {
+  font-family: var(--mono);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+.ep-field { display: flex; flex-direction: column; gap: 5px; }
+.ep-field > span em { font-style: normal; }
+.swatches { display: flex; flex-wrap: wrap; gap: 5px; }
+.swatch {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+}
+.swatch:hover { transform: scale(1.12); }
+.swatch.selected { outline: 2px solid var(--select); outline-offset: 1px; }
+.swatch.clear {
+  background:
+    linear-gradient(45deg, transparent 45%, var(--red) 45%, var(--red) 55%, transparent 55%),
+    var(--panel-2);
+}
+.ep-swatch-row { display: flex; align-items: center; gap: 7px; }
+.ep-swatch-row .swatches { flex: 1; }
+.btn-eyedrop {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 5px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text);
+  cursor: pointer;
+}
+.btn-eyedrop:hover { border-color: var(--select); }
+.btn-eyedrop[aria-pressed='true'] {
+  background: color-mix(in srgb, var(--select) 30%, transparent);
+  border-color: var(--select);
+  color: var(--text);
+}
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.ep-check { display: flex; align-items: center; gap: 7px; }
+.ep-spacing-row { display: flex; align-items: center; gap: 10px; }
+.ep-spacing-row .btn { min-width: 56px; }
+.ep-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
+.ep-actions .ep-spacer { flex: 1; }
+
+/* Timing debug HUD */
+.hud {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 30;
+  min-width: 168px;
+  max-width: 280px;
+  padding: 8px 10px;
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text);
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(6px);
+  pointer-events: none;
+  user-select: none;
+}
+.hud.hidden { display: none; }
+.hud-row { display: flex; justify-content: space-between; gap: 12px; }
+.hud-title { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
+.hud-state { color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
+.hud-state.live { color: var(--green); }
+.hud-tag { color: var(--muted); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.08em; }
+.hud-k { color: var(--muted); }
+.hud-v { color: var(--text); font-variant-numeric: tabular-nums; }
+.hud-v.warn { color: var(--red); }
+.hud-foot { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
+.hud-foot .hud-v { color: var(--muted); font-size: 10px; }
+/* The HUD is a click-through overlay; re-enable pointer events on its controls. */
+.hud-close {
+  pointer-events: auto;
+  appearance: none;
+  background: none;
+  border: none;
+  margin: -2px -2px 0 auto;
+  padding: 0 2px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.hud-close:hover { color: var(--text); }
+.hud-actions { margin-top: 8px; pointer-events: auto; }
+.hud-actions .btn { width: 100%; }
+.hud .timing-result { pointer-events: auto; margin-top: 6px; font-size: 10.5px; }
+
+/* Timing debug controls */
+.timing-debug-link {
+  display: inline-block;
+  margin: 20px 0 4px;
+  padding: 4px 0;
+  appearance: none;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 11px;
+  color: var(--muted);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.timing-debug-link:hover { color: var(--text); }
+.timing-result { margin: 0; font-family: var(--mono); white-space: pre-wrap; }
+.timing-result.hidden { display: none; }
+.timing-result.ok { color: var(--green); }
+.timing-result.warn { color: var(--red); }