@terminus-ai/cli 0.0.1

package/bin/dev-ui/style.css

@@ -0,0 +1,3640 @@
+/**
+ * terminus dev — the product's own materials, in a browser tab.
+ *
+ * Round five, second pass. The first pass floated everything — three wells
+ * on the water, a lifted composer, glass capsules in the top bar — and a page
+ * of objects hovering over a page was too much. So the panes are CONNECTED:
+ * one chrome surface (the top bar and both sidebars, a light veil over the
+ * landing's water, held still) frames the paper the work happens on, and a
+ * hairline — never a gap, a shadow or a rounded panel — tells them apart.
+ * What still comes from the product is everything you touch and read:
+ *
+ * - The CONTROLS: gel candy for what you press (`.aqua-gel`), the Aqua
+ *   segmented switch, the Switch's double bounce, status orbs.
+ * - The TYPE: EB Garamond where something is NAMED (the agent, the sections,
+ *   a reply's headings), Inter at working size, IoskeleyMono for code and ids.
+ * - The settings ROW GRAMMAR: one line per setting, hairlines, nothing under.
+ *
+ * Only what genuinely sits above the page floats: menus, the toast, and the
+ * chip that jumps to the latest message. There is no window chrome either —
+ * the page owns its tab, and a titlebar would draw a window inside a real one.
+ *
+ * COLOUR IS STILL ONE INK. Text, fills and lines are `color-mix` of `--ink` at
+ * fixed alphas, and the materials are tokens beside them, so dark mode swaps
+ * tokens and the water and touches nothing else.
+ */
+
+@font-face {
+  font-family: "IoskeleyMono";
+  src: url("/assets/IoskeleyMono-400.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: "IoskeleyMono";
+  src: url("/assets/IoskeleyMono-600.woff2") format("woff2");
+  font-weight: 600;
+  font-display: swap;
+}
+
+/* ------------------------------------------------------------------------- */
+/* Tokens                                                                    */
+/* ------------------------------------------------------------------------- */
+
+:root {
+  color-scheme: light;
+
+  /* The one ink, the house accent, and the glass tint (--glass-tint's raw
+     channels, so alpha can vary per state). */
+  --ink: #15171c;
+  --accent: #2d68d8;
+  --glass-tint: 29 78 168;
+  --danger: #cf3626;
+  --success: #2f9e3c;
+  --warn: #c4700f;
+
+  --text-1: color-mix(in srgb, var(--ink) 100%, transparent);
+  --text-2: color-mix(in srgb, var(--ink) 74%, transparent);
+  /* Values and annotations sit on glass as well as paper, so the quiet tiers
+     are held where 13px still clears 4.5:1 (text-3) and 3:1 (text-4). */
+  --text-3: color-mix(in srgb, var(--ink) 61%, transparent);
+  --text-4: color-mix(in srgb, var(--ink) 45%, transparent);
+
+  --bg-1: color-mix(in srgb, var(--ink) 12%, transparent);
+  --bg-2: color-mix(in srgb, var(--ink) 8%, transparent);
+  --bg-3: color-mix(in srgb, var(--ink) 5%, transparent);
+  --bg-4: color-mix(in srgb, var(--ink) 3%, transparent);
+
+  --line-1: color-mix(in srgb, var(--ink) 14%, transparent);
+  --line-2: color-mix(in srgb, var(--ink) 9%, transparent);
+  --line-3: color-mix(in srgb, var(--ink) 6%, transparent);
+
+  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
+  --accent-text: color-mix(in srgb, var(--accent) 86%, var(--ink));
+  --on-accent: #ffffff;
+  /* The spinner glyph (ActivityTrace.tsx geometry) strokes with the
+     product's own token names. */
+  --brand: var(--accent);
+  --border-edge: var(--line-1);
+  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
+
+  /* The selection: menus, the Finder's places, the admin sidebar. */
+  --select: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--accent) 72%, #ffffff) 0%,
+    var(--accent) 100%
+  );
+
+  /* Materials: two surfaces and a line. CHROME is the top bar and both
+     sidebars — one light veil over the water, so the product's ground still
+     tints the frame; PAPER is opaque, where the conversation and files are
+     read; the RULE between them is a hairline. Objects on paper (cards,
+     chips) are drawn by an edge, not lifted by a shadow. */
+  --chrome: rgb(255 255 255 / 0.74);
+  --chrome-cover: #f4f8fb;
+  --paper: #ffffff;
+  --rule: var(--line-2);
+  --card-fill: #ffffff;
+  --card-edge: inset 0 0 0 1px var(--line-2);
+  --pop-fill: rgb(252 253 255 / 0.97);
+  --pop-throw: 0 0 0 0.5px rgb(8 28 74 / 0.16), 0 12px 32px -14px rgb(8 28 74 / 0.32);
+  --field-fill: rgb(8 28 74 / 0.05);
+  --field-fill-focus: #ffffff;
+  --well-fill: rgb(255 255 255 / 0.6);
+  --well-rim: rgb(0 0 0 / 0.18);
+  --well-shade: inset 0 1.5px 3px rgb(0 10 40 / 0.14);
+  --dock-line: rgb(0 10 40 / 0.1);
+  --dock-shine: rgb(255 255 255 / 0.5);
+  --you-fill: color-mix(in srgb, var(--accent) 34%, rgb(255 255 255 / 0.5));
+  --you-rim: color-mix(in srgb, var(--accent) 45%, rgb(0 10 40 / 0.1));
+  --you-shine: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 1px 2px rgb(0 10 40 / 0.1);
+  --code-well: rgb(12 30 66 / 0.06);
+  --code-well-rim: rgb(0 10 40 / 0.09);
+  --glass-card: rgb(255 255 255 / 0.32);
+  --glass-card-rim: rgb(0 10 40 / 0.12);
+  --row-hover: rgb(0 0 0 / 0.045);
+  --chip-fill: color-mix(in srgb, var(--accent) 18%, #ffffff);
+  --chip-ink: color-mix(in srgb, var(--accent) 55%, #0a1c40);
+  --window-glass: color-mix(in srgb, var(--accent) 8%, rgb(243 246 251 / 0.86));
+  --window-rim: rgb(0 0 0 / 0.22);
+  --rail-fill: color-mix(in srgb, var(--accent) 9%, rgb(8 20 48 / 0.055));
+  /* A window's body is two WELLS recessed into its glass with a seam of pane
+     between them (globals.css `.settings-well` / `.settings-sheet`): a
+     hairline rim, inset shading, and a light specular under-edge. The rail is
+     barer glass — it is chrome; the sheet is near-white, because content
+     wants paper under it, not sky. */
+  --well-recess: rgb(255 255 255 / 0.4);
+  --well-recess-rim: rgb(0 0 0 / 0.25);
+  --well-recess-shade: inset 0 1px 2px rgb(0 0 0 / 0.08), 0 1px 0 rgb(255 255 255 / 0.25);
+  --sheet-fill: rgb(244 246 249 / 0.85);
+  --sheet-rule: rgb(0 0 0 / 0.08);
+  --etch: 0 1px 0 rgb(255 255 255 / 0.6);
+  --track: linear-gradient(180deg, rgb(8 18 42 / 0.16), rgb(8 18 42 / 0.08));
+  --track-shade: inset 0 1px 2px rgb(0 10 40 / 0.2), inset 0 0 0 0.5px rgb(0 0 0 / 0.12),
+    0 1px 0 rgb(255 255 255 / 0.55);
+
+  /* The gel: `.aqua-gel`'s candy, poured in the accent. The @supports block
+     below replaces the fallback stops with the product's own transform. */
+  --gel-crown: var(--accent);
+  --gel-foot: color-mix(in srgb, var(--accent) 18%, #ffffff);
+  --gel-rim-crown: color-mix(in srgb, var(--accent) 62%, #06122c);
+  --gel-rim-foot: hsl(0 0% 38%);
+  --gel-label: color-mix(in srgb, var(--accent) 34%, #050b18);
+
+  /* Code is dark on every surface (MarkdownPreview's rule). */
+  --code-ground: #0c0e13;
+  --code-rim: #1d2129;
+  --code-ink: #e4e7ee;
+
+  /* The register: 14 is read, 13 is worked in, 12 navigates, 11 annotates. */
+  --text-read: 14px;
+  --text-base: 13px;
+  --text-sm: 12px;
+  --text-xs: 11px;
+
+  --radius-well: 16px;
+  --radius-card: 12px;
+  --radius-row: 8px;
+  --radius-small: 6px;
+
+  --h-xs: 22px;
+  --h-sm: 26px;
+  --h-base: 30px;
+  --h-lg: 34px;
+
+  --fast: 120ms;
+  --normal: 200ms;
+  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+
+  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
+  /* The OS layer's face. Aqua ran on Lucida Grande; the product ships Noto
+     Sans as the licence-clean stand-in (lib/fonts.ts measured it against the
+     real thing), and every piece of OS chrome over there wears it. The
+     workbench keeps Inter — the difference is letterform SHAPE, open humanist
+     forms against Inter's mechanical rhythm, and it is most of why a window
+     in Inter does not read as an OS window. */
+  --font-os: "Noto Sans", Inter, system-ui, sans-serif;
+  --font-brand: "EB Garamond", Georgia, "Times New Roman", serif;
+  --font-code: "IoskeleyMono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
+
+  --topbar-h: 52px;
+  /* A file list is names, not paragraphs: the column opens narrow, and both
+     seams can be dragged (the widths are remembered in this browser). */
+  --sidebar-w: 220px;
+  --inspector-w: clamp(328px, 25vw, 372px);
+  --measure: 720px;
+  /* The conversation's column: Norbert's window is 560px of glass, and its
+     line length is what this page's chat should read at too. */
+  --chat-measure: 600px;
+  --gutter: max(18px, min(32px, 3vw));
+}
+
+@supports (color: hsl(from white h s l)) {
+  :root {
+    --gel-foot: hsl(from var(--gel-crown) calc(h - 32) 95% 92%);
+    --gel-rim-crown: hsl(from var(--gel-crown) calc(h + 27) 74% 30%);
+    --gel-label: hsl(from var(--gel-crown) h 85% 14%);
+  }
+}
+
+/* Dark is a CHOICE (the moon in the top bar), never the OS's call: the page
+   opens light, and the choice is remembered in this browser. Night water under
+   a smoked frame, dark paper, the same ink ladders lifted — light ink reads
+   heavier than dark ink at the same alpha, so fills and lines climb. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --ink: #e7e9ef;
+  --accent: #3b76e2;
+  --danger: #f0697a;
+  --success: #4cc27a;
+  --warn: #e9a247;
+
+  --bg-1: color-mix(in srgb, var(--ink) 16%, transparent);
+  --bg-2: color-mix(in srgb, var(--ink) 10%, transparent);
+  --bg-3: color-mix(in srgb, var(--ink) 7%, transparent);
+  --bg-4: color-mix(in srgb, var(--ink) 4%, transparent);
+  --line-1: color-mix(in srgb, var(--ink) 18%, transparent);
+  --line-2: color-mix(in srgb, var(--ink) 11%, transparent);
+  --line-3: color-mix(in srgb, var(--ink) 7%, transparent);
+
+  --accent-line: color-mix(in srgb, #7aa9ff 55%, transparent);
+  --accent-text: #8cb4ff;
+  --ring: 0 0 0 3px color-mix(in srgb, #7aa9ff 30%, transparent);
+
+  --chrome: rgb(14 18 26 / 0.74);
+  --chrome-cover: #141922;
+  --paper: #111419;
+  --card-fill: rgb(255 255 255 / 0.03);
+  --pop-fill: rgb(26 30 39 / 0.98);
+  --pop-throw: 0 0 0 0.5px rgb(255 255 255 / 0.12), 0 12px 32px -14px rgb(0 0 0 / 0.75);
+  --field-fill: rgb(255 255 255 / 0.06);
+  --field-fill-focus: rgb(255 255 255 / 0.1);
+  --well-fill: rgb(255 255 255 / 0.06);
+  --well-rim: rgb(255 255 255 / 0.12);
+  --well-shade: inset 0 1.5px 3px rgb(0 0 0 / 0.35);
+  --dock-line: rgb(255 255 255 / 0.08);
+  --dock-shine: rgb(255 255 255 / 0.04);
+  --you-fill: color-mix(in srgb, var(--accent) 42%, rgb(255 255 255 / 0.04));
+  --you-rim: color-mix(in srgb, var(--accent) 60%, rgb(255 255 255 / 0.08));
+  --you-shine: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 1px 2px rgb(0 0 0 / 0.35);
+  --code-well: rgb(255 255 255 / 0.05);
+  --code-well-rim: rgb(255 255 255 / 0.08);
+  --glass-card: rgb(255 255 255 / 0.05);
+  --glass-card-rim: rgb(255 255 255 / 0.1);
+  --row-hover: rgb(255 255 255 / 0.06);
+  --chip-fill: color-mix(in srgb, var(--accent) 30%, rgb(255 255 255 / 0.06));
+  --chip-ink: color-mix(in srgb, var(--accent) 25%, #ffffff);
+  --window-glass: color-mix(in srgb, var(--accent) 10%, rgb(18 22 30 / 0.9));
+  --window-rim: rgb(255 255 255 / 0.14);
+  --rail-fill: color-mix(in srgb, var(--accent) 12%, rgb(255 255 255 / 0.04));
+  --well-recess: rgb(255 255 255 / 0.05);
+  --well-recess-rim: rgb(0 0 0 / 0.4);
+  --well-recess-shade: inset 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 0 rgb(255 255 255 / 0.05);
+  --sheet-fill: rgb(20 24 32 / 0.8);
+  --sheet-rule: rgb(255 255 255 / 0.07);
+  --etch: none;
+  --track: linear-gradient(180deg, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.28));
+  --track-shade: inset 0 1px 2px rgb(0 0 0 / 0.45), inset 0 0 0 0.5px rgb(255 255 255 / 0.08),
+    0 1px 0 rgb(255 255 255 / 0.05);
+
+  --code-ground: #090b0f;
+  --code-rim: #232833;
+}
+
+/* ------------------------------------------------------------------------- */
+/* Reset                                                                     */
+/* ------------------------------------------------------------------------- */
+
+* { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  background: #edf6fc;
+  color: var(--text-1);
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+:root[data-theme="dark"] body { background: #0b111c; }
+
+button, input, textarea, select { font: inherit; color: inherit; }
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+}
+
+button:disabled { cursor: default; }
+
+a { color: var(--accent-text); }
+
+:focus-visible {
+  outline: 2px solid var(--accent-line);
+  outline-offset: 2px;
+}
+
+::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
+
+.mono {
+  font-family: var(--font-code);
+  font-variant-numeric: tabular-nums;
+}
+
+.spacer { flex: 1; }
+
+/* One scrollbar everywhere: thin, ink-alpha, invisible until the surface is
+   hovered. */
+.studio-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
+.studio-scroll:hover { scrollbar-color: var(--bg-1) transparent; }
+.studio-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
+.studio-scroll::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background-clip: content-box;
+}
+.studio-scroll:hover::-webkit-scrollbar-thumb { background: var(--bg-1); background-clip: content-box; }
+.studio-scroll::-webkit-scrollbar-corner { background: transparent; }
+
+/* ------------------------------------------------------------------------- */
+/* The ground: the landing's water, held still                              */
+/* ------------------------------------------------------------------------- */
+
+/* Layer for layer WaterBackground.tsx — basin, glow, two currents, two
+   ribbons, grain — with the drift removed: the currents sit where the
+   landing's phone breakpoint parks them. */
+.water {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.water > div { position: absolute; }
+
+.water-basin {
+  inset: 0;
+  background: linear-gradient(180deg, #fbfdff 0%, #edf8ff 38%, #e8f4fb 66%, #fbfdff 100%);
+}
+
+.water-glow {
+  left: 50%;
+  top: 52%;
+  width: 84rem;
+  height: 46rem;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: radial-gradient(
+    closest-side,
+    rgb(147 210 248 / 0.5),
+    rgb(186 230 253 / 0.3) 52%,
+    transparent 76%
+  );
+  filter: blur(40px);
+}
+
+.water-current {
+  top: -24%;
+  bottom: -24%;
+  left: -50%;
+  width: 300%;
+  background-repeat: repeat-x;
+  background-size: 25% 100%;
+  filter: blur(44px);
+  -webkit-mask-image: linear-gradient(180deg, transparent 3%, black 24%, black 78%, transparent 97%);
+  mask-image: linear-gradient(180deg, transparent 3%, black 24%, black 78%, transparent 97%);
+}
+
+.water-current-a {
+  background-image:
+    radial-gradient(ellipse 38% 8% at 8% 35%, rgb(224 242 254 / 0.82), transparent 74%),
+    radial-gradient(ellipse 44% 10% at 43% 54%, rgb(125 211 252 / 0.52), transparent 76%),
+    radial-gradient(ellipse 31% 7% at 72% 31%, rgb(255 255 255 / 0.68), transparent 74%),
+    radial-gradient(ellipse 48% 11% at 96% 68%, rgb(96 165 250 / 0.3), transparent 78%);
+  transform: translate3d(-8%, 1.5%, 0) rotate(-2deg);
+}
+
+.water-current-b {
+  background-image:
+    radial-gradient(ellipse 42% 9% at 16% 70%, rgb(186 230 253 / 0.7), transparent 76%),
+    radial-gradient(ellipse 29% 7% at 45% 38%, rgb(147 197 253 / 0.42), transparent 74%),
+    radial-gradient(ellipse 46% 9% at 77% 61%, rgb(224 242 254 / 0.84), transparent 78%),
+    radial-gradient(ellipse 33% 8% at 98% 43%, rgb(125 211 252 / 0.34), transparent 75%);
+  transform: translate3d(-16%, -1.5%, 0) rotate(2deg);
+}
+
+.water-ribbon {
+  left: -50%;
+  width: 300%;
+  background-repeat: repeat-x;
+  background-size: 25% 100%;
+  border-radius: 50%;
+  filter: blur(20px);
+  opacity: 0.5;
+}
+
+.water-ribbon-a {
+  top: 25%;
+  height: 10rem;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(255 255 255 / 0.04) 8%,
+    rgb(255 255 255 / 0.68) 27%,
+    rgb(125 211 252 / 0.12) 49%,
+    rgb(255 255 255 / 0.56) 73%,
+    transparent 100%
+  );
+  transform: rotate(-4deg) translate3d(-6%, 1rem, 0);
+}
+
+.water-ribbon-b {
+  top: 64%;
+  height: 8rem;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(125 211 252 / 0.06) 12%,
+    rgb(255 255 255 / 0.58) 35%,
+    rgb(96 165 250 / 0.11) 58%,
+    rgb(255 255 255 / 0.5) 79%,
+    transparent 100%
+  );
+  transform: rotate(3deg) translate3d(-12%, -0.75rem, 0);
+}
+
+.water-grain {
+  inset: 0;
+  opacity: 0.1;
+  mix-blend-mode: soft-light;
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23n)'%20opacity='0.55'/%3E%3C/svg%3E");
+}
+
+/* Night water: the same basin and glow in deep blues; the white currents
+   would read as fog on a dark ground, so they dim to a trace. */
+:root[data-theme="dark"] .water-basin {
+  background: linear-gradient(180deg, #0a0f18 0%, #0c1524 40%, #0b1320 68%, #090d15 100%);
+}
+:root[data-theme="dark"] .water-glow {
+  background: radial-gradient(
+    closest-side,
+    rgb(38 92 168 / 0.34),
+    rgb(28 64 124 / 0.18) 52%,
+    transparent 76%
+  );
+}
+:root[data-theme="dark"] .water-current { opacity: 0.1; }
+:root[data-theme="dark"] .water-ribbon { opacity: 0.06; }
+:root[data-theme="dark"] .water-grain { opacity: 0.05; }
+
+/* ------------------------------------------------------------------------- */
+/* Shared materials                                                          */
+/* ------------------------------------------------------------------------- */
+
+/* The gel — `.aqua-gel`'s six-layer candy (Kevin Powell's reconstruction, as
+   the product ports it): a specular cap, a translucent band with two rounded
+   ends, the crown falling to a near-white foot, and a rim that fades dark to
+   grey. Worn by everything you PRESS to act: send, stop, the switch's thumb,
+   Save, a decision. */
+.gel,
+.send-btn,
+.seg-switch .seg-thumb {
+  border: 1px solid transparent;
+  background-image:
+    linear-gradient(rgb(255 255 255 / 0.85), transparent 10px),
+    linear-gradient(rgb(255 255 255 / 0.25) 10px, transparent 10px),
+    radial-gradient(circle at 10px 5px, rgb(255 255 255 / 0.25) 5px, transparent 5px),
+    radial-gradient(circle at 0px 5px, rgb(255 255 255 / 0.25) 5px, transparent 5px),
+    linear-gradient(var(--gel-crown), var(--gel-foot)),
+    linear-gradient(var(--gel-rim-crown), var(--gel-rim-foot));
+  background-size: 100%, calc(100% - 20px), 10px 10px, 10px 10px, 100%, 100%;
+  background-position: top, top center, top left, top right, center, center;
+  background-repeat: no-repeat;
+  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
+  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
+  color: var(--gel-label);
+}
+
+.gel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--h-sm);
+  padding: 0 13px;
+  border-radius: 999px;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  white-space: nowrap;
+  box-shadow: 0 1px 2px rgb(10 35 90 / 0.28);
+  transition: filter 220ms var(--ease), transform 220ms var(--ease);
+}
+.gel:hover:not(:disabled) { filter: brightness(1.05); }
+.gel:active:not(:disabled) { filter: brightness(0.95); transform: scale(0.97); }
+.gel:disabled { filter: saturate(0.25) brightness(1.03); box-shadow: none; opacity: 0.6; }
+.gel:focus-visible { outline: none; box-shadow: 0 1px 2px rgb(10 35 90 / 0.28), var(--ring); }
+
+/* A status orb — the house way of saying a state beside the thing it belongs
+   to (StatusOrb.tsx). The state's name rides as the label, never as a pill. */
+.orb {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  flex: none;
+  border-radius: 999px;
+  background:
+    radial-gradient(circle at 35% 28%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 45%),
+    linear-gradient(180deg, var(--orb-crown), var(--orb-foot));
+  box-shadow: inset 0 0 0 1px var(--orb-rim), inset 0 -2px 3px rgb(255 255 255 / 0.35),
+    0 1px 1px rgb(0 0 0 / 0.2);
+  --orb-crown: #e2e2e2;
+  --orb-foot: #9c9ca1;
+  --orb-rim: rgb(0 0 0 / 0.35);
+}
+.orb.ok { --orb-crown: #8ddc78; --orb-foot: #2f9e3c; --orb-rim: rgb(20 90 30 / 0.55); }
+.orb.warn { --orb-crown: #ffd479; --orb-foot: #e08e18; --orb-rim: rgb(130 80 0 / 0.5); }
+.orb.danger { --orb-crown: #ff9d94; --orb-foot: #d3352b; --orb-rim: rgb(120 15 10 / 0.55); }
+
+/* ------------------------------------------------------------------------- */
+/* Shell — one chrome frame around the paper                                 */
+/* ------------------------------------------------------------------------- */
+
+.app {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
+  /* One column that cannot be widened by what is inside it: without this the
+     implicit track takes the min-content of a long code line and the page
+     scrolls sideways on a narrow window. */
+  grid-template-columns: minmax(0, 1fr);
+  /* Two declarations, deliberately: an unsupported unit invalidates the whole
+     declaration, so a lone 100dvh would leave height:auto in an engine
+     without dvh. The percentage is the floor; dvh refines it. */
+  height: 100%;
+  height: 100dvh;
+  overflow: hidden;
+  /* The top bar and both sidebars are ONE surface: the veil is painted once,
+     here, so they cannot disagree about the water behind them. */
+  background: var(--chrome);
+}
+
+.workbench {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* A sidebar is the frame itself, attached to the paper by a hairline. It
+   collapses by animating WIDTH on this outer box while the body inside stays
+   absolutely sized, so contents never reflow on the way out. */
+.lane-col {
+  position: relative;
+  flex: none;
+  overflow: hidden;
+  transition: width var(--normal) var(--ease-out-strong), border-color var(--normal) var(--ease);
+}
+.lane-col.left { width: var(--sidebar-w); border-right: 1px solid var(--rule); }
+.lane-col.right { width: var(--inspector-w); border-left: 1px solid var(--rule); }
+.lane-col.left[data-open="false"],
+.lane-col.right[data-open="false"] { width: 0; border-color: transparent; }
+
+.lane-body {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+/* The seam between a sidebar and the paper can be dragged. The handle is a
+   hit strip centred on the hairline; under the cursor, and while it is held,
+   the hairline becomes a 2px accent line. */
+.lane-resize {
+  position: relative;
+  flex: none;
+  width: 0;
+  z-index: 25;
+  outline: none;
+}
+.lane-resize[hidden] { display: none; }
+.lane-resize::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  width: 8px;
+  cursor: col-resize;
+}
+.lane-resize::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -1px;
+  width: 2px;
+  background: var(--accent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms var(--ease);
+}
+.lane-resize:hover::after { opacity: 0.55; transition-delay: 150ms; }
+.lane-resize[data-dragging]::after,
+.lane-resize:focus-visible::after { opacity: 1; transition-delay: 0ms; }
+/* While a seam is held the whole page resizes with it: no easing on the
+   columns, no text selection, and a page preview cannot swallow the pointer. */
+body[data-resizing] { cursor: col-resize; user-select: none; }
+body[data-resizing] .lane-col { transition: none; }
+body[data-resizing] iframe { pointer-events: none; }
+
+/* One pixel narrower than the column: the hairline is part of its width. */
+.lane-col.left .lane-body { width: calc(var(--sidebar-w) - 1px); }
+.lane-col.right .lane-body { width: calc(var(--inspector-w) - 1px); right: 0; left: auto; }
+
+.lane-main {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* The composer's model popover hangs off this, not off the scrolling plane. */
+.pop-anchor { position: relative; }
+
+/* ------------------------------------------------------------------------- */
+/* Top bar                                                                   */
+/* ------------------------------------------------------------------------- */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 0 12px;
+}
+
+.topbar-lead {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+/* The agent's mark: artwork, a free-standing object with its own shadow, so
+   the button sizes off the robot's body rather than its alpha box. */
+.agent-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex: none;
+  border-radius: 10px;
+  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
+}
+.agent-mark:hover { background: var(--bg-3); }
+.agent-mark:active { transform: scale(0.96); }
+.agent-mark img {
+  display: block;
+  width: 30px;
+  height: 30px;
+  object-fit: contain;
+}
+
+/* The name is signed the way the product signs names: EB Garamond, semibold. */
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  padding-right: 4px;
+}
+.brand .name {
+  font-family: var(--font-brand);
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.012em;
+  color: var(--text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-bottom: 1px;
+}
+/* The version is a small tag beside the name, set into the frame. */
+.brand .version {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  flex: none;
+  border-radius: 999px;
+  background: var(--bg-3);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.brand .version:empty { display: none; }
+
+/* This session's spend: a fact about the work, read in passing. */
+.spend-readout {
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  color: var(--text-3);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.spend-readout[hidden] { display: none; }
+
+/* The view controls: two glyphs side by side, at the edge they act on. */
+.toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+}
+
+/* A glyph button: round, quiet, and it only takes a body under the cursor. */
+.chrome-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex: none;
+  border-radius: 999px;
+  color: var(--text-2);
+  text-decoration: none;
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
+    box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
+}
+.chrome-btn:hover:not(:disabled) { background: var(--bg-3); color: var(--text-1); }
+.chrome-btn:active:not(:disabled) { transform: scale(0.94); }
+.chrome-btn:disabled { opacity: 0.45; }
+.chrome-btn svg { width: 17px; height: 17px; }
+
+.chrome-btn.sm { width: 28px; height: 28px; color: var(--text-3); }
+.chrome-btn.sm svg { width: 15px; height: 15px; }
+
+.chrome-btn.danger:hover:not(:disabled) {
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 9%, transparent);
+}
+
+/* Pressed is a quiet fill and the accent on the glyph — the panel it opens
+   is the rest of the answer. */
+.toolbar-group .chrome-btn[aria-pressed="true"] {
+  background: var(--bg-2);
+  color: var(--accent-text);
+}
+
+/* ------------------------------------------------------------------------- */
+/* Left well: the explorer                                                   */
+/* ------------------------------------------------------------------------- */
+
+.lane-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 10px 6px;
+  flex: none;
+}
+
+/* Source | Workspace, Default | Observed, All | Selected: the product's Aqua
+   switch — a recessed track holding a gel thumb that SLIDES between the words
+   (the OS ⇄ Chat switch's anatomy). */
+.seg-switch {
+  position: relative;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  min-width: 0;
+  height: 30px;
+  padding: 2px;
+  border-radius: 999px;
+  background: var(--track);
+  box-shadow: var(--track-shade);
+}
+.seg-switch .seg-thumb {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 2px;
+  width: calc((100% - 4px) / var(--n, 2));
+  border-radius: 999px;
+  translate: calc(var(--i, 0) * 100%) 0;
+  box-shadow: 0 1px 2px rgb(10 35 90 / 0.4);
+  transition: translate 0.22s var(--ease-out-strong);
+  pointer-events: none;
+}
+.seg-switch button {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: color-mix(in srgb, var(--ink) 66%, transparent);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color var(--fast) var(--ease);
+}
+.seg-switch button:hover { color: var(--text-1); }
+.seg-switch button[aria-pressed="true"] { color: var(--gel-label); }
+/* Compact, on a section's title line beside the word it sets: the xs control
+   height, halves as wide as the longer word needs — and one shared floor, so
+   switches stacked on neighbouring title lines keep the same left edge
+   (Default | Observed, the widest pair, needs 147px). */
+.seg-switch.compact { flex: none; min-width: 148px; height: var(--h-xs); }
+.seg-switch.compact button { padding: 0 10px; font-size: var(--text-xs); }
+.lane-switch { flex: 1; }
+
+.field-wrap { padding: 2px 10px 6px; flex: none; }
+
+/* The filter: a recessed capsule, found by its hollow rather than a border. */
+.search-pill {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 30px;
+  padding: 0 11px;
+  border-radius: 999px;
+  background: var(--field-fill);
+  color: var(--text-4);
+  cursor: text;
+  transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
+    color var(--fast) var(--ease);
+}
+.search-pill:focus-within {
+  background: var(--field-fill-focus);
+  box-shadow: inset 0 0 0 0.5px var(--accent-line), var(--ring);
+  color: var(--text-2);
+}
+.search-pill svg { width: 14px; height: 14px; flex: none; }
+.search-pill input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  outline: none;
+  font-size: var(--text-base);
+  color: var(--text-1);
+}
+.search-pill input::placeholder { color: var(--text-4); }
+.search-pill input::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+/* The general field: the same hollow, squared to a row. */
+.sw-field {
+  width: 100%;
+  height: var(--h-base);
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--radius-row);
+  background: var(--field-fill);
+  color: var(--text-1);
+  font-size: var(--text-sm);
+  transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
+}
+.sw-field::placeholder { color: var(--text-4); }
+.sw-field:focus {
+  outline: none;
+  background: var(--field-fill-focus);
+  box-shadow: inset 0 0 0 0.5px var(--accent-line), var(--ring);
+}
+.sw-field::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+.pane-scroll { flex: 1; min-height: 0; padding: 2px 8px 12px; }
+
+.tree { display: flex; flex-direction: column; gap: 1px; }
+
+.tree-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  height: 28px;
+  padding-right: 9px;
+  border-radius: var(--radius-row);
+  text-align: left;
+  color: var(--text-2);
+  font-size: var(--text-base);
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
+}
+.tree-row:hover { background: var(--bg-3); color: var(--text-1); }
+.tree-row .name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The size is a fact for the row you are pointing at or have open. At rest
+   it takes no room at all — an invisible readout still reserving its width
+   would cut every longer name short in a narrow column. */
+.tree-row .size {
+  display: none;
+  flex: none;
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  color: var(--text-4);
+  font-variant-numeric: tabular-nums;
+}
+.tree-row:hover .size,
+.tree-row.selected .size { display: inline; }
+/* The selection is the Finder's: the accent gradient, the label white. */
+.tree-row.selected {
+  background: var(--select);
+  color: #ffffff;
+  font-weight: 500;
+}
+.tree-row.selected .size { color: rgb(255 255 255 / 0.78); }
+.tree-row.selected .chev { color: rgb(255 255 255 / 0.8); }
+
+/* Every row shares one leading ladder — indent, twisty, glyph, name — so a
+   child's icon sits exactly one step right of its parent's. Files carry an
+   EMPTY twisty so they line up with folders at the same depth. */
+.tree-row .chev,
+.tree-row .chev-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  flex: none;
+  color: var(--text-4);
+}
+.tree-row .chev { transition: transform var(--fast) var(--ease); }
+.tree-row[aria-expanded="true"] .chev { transform: rotate(90deg); }
+
+.glyph-pad { display: inline-flex; align-items: center; justify-content: center; }
+.file-glyph { display: block; width: 16px; height: 16px; flex: none; }
+.folder-glyph { color: color-mix(in srgb, var(--accent) 88%, #ffffff); }
+.tree-row.selected .folder-glyph { color: #ffffff; }
+/* The language tints are drawn for paper; on the night ground they lift. */
+:root[data-theme="dark"] .file-glyph { filter: brightness(1.45) saturate(1.1); }
+
+.tree-guide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--line-2);
+  pointer-events: none;
+}
+
+.tree-empty {
+  margin: 8px 10px;
+  font-size: var(--text-base);
+  color: var(--text-3);
+  line-height: 1.55;
+}
+
+/* ------------------------------------------------------------------------- */
+/* The sheet: conversation, files, history                                   */
+/* ------------------------------------------------------------------------- */
+
+.content {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  /* The frame's hairline stays; the fill does not. A conversation stands on
+     the window's own glass (Winston, 2026-09-15: no white page), so only a
+     FILE — a document — lays paper down inside the frame. */
+  border-top: 1px solid var(--rule);
+}
+
+/* A file opened from the explorer becomes a TAB here: the content plane is
+   where content belongs, and the only place a file gets real width. */
+.tabstrip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line-3);
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex: none;
+}
+.tabstrip::-webkit-scrollbar { display: none; }
+.tabstrip[hidden] { display: none; }
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 30px;
+  padding: 0 11px;
+  flex: none;
+  border-radius: 999px;
+  color: var(--text-3);
+  font-size: 12.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
+    box-shadow var(--fast) var(--ease);
+}
+.tab:hover { background: var(--bg-3); color: var(--text-1); }
+.tab[aria-selected="true"] {
+  background: var(--bg-3);
+  color: var(--text-1);
+}
+.tab > svg { width: 14px; height: 14px; flex: none; }
+.tab .glyph-pad { width: 14px; }
+.tab .file-glyph { width: 14px; height: 14px; }
+.tab .close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: -5px;
+  border-radius: 999px;
+  color: var(--text-4);
+  opacity: 0;
+  transition: opacity var(--fast) var(--ease), background-color var(--fast) var(--ease);
+}
+.tab:hover .close,
+.tab[aria-selected="true"] .close { opacity: 1; }
+.tab .close:hover { background: var(--bg-2); color: var(--text-1); }
+.tab .close svg { width: 10px; height: 10px; }
+
+.plane { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
+#plane-file { background: var(--paper); }
+.plane[hidden] { display: none; }
+
+/* Transcript */
+
+.transcript {
+  flex: 1;
+  min-height: 0;
+  padding-inline: var(--gutter);
+  /* Reserve the scrollbar on BOTH edges, or a centred column drifts half a
+     scrollbar off the composer below it. */
+  scrollbar-gutter: stable both-edges;
+}
+
+/* The gutter lives on the scroller, so this box is EXACTLY the measure — and
+   so is the composer's. */
+.transcript-inner {
+  max-width: var(--chat-measure);
+  margin: 0 auto;
+  padding: 24px 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* Nothing said yet: the agent's lockup and the composer, together in the
+   middle of the sheet — the poster, then the one thing to do. The composer
+   docks to the foot the moment a conversation exists. */
+.plane[data-empty="true"] { justify-content: center; }
+.plane[data-empty="true"] .transcript { flex: 0 0 auto; overflow: visible; }
+.plane[data-empty="true"] .transcript-inner { padding: 0 0 8px; }
+.plane[data-empty="true"] .composer-dock {
+  padding-bottom: min(14vh, 120px);
+  border-top-color: transparent;
+  box-shadow: none;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 0 0 18px;
+  text-align: center;
+}
+.empty-state .mark {
+  display: block;
+  width: 92px;
+  height: 92px;
+  margin-bottom: 6px;
+  object-fit: contain;
+}
+.empty-state .big {
+  font-family: var(--font-brand);
+  font-size: clamp(34px, 3.6vw, 46px);
+  font-weight: 600;
+  line-height: 1.04;
+  letter-spacing: -0.022em;
+  color: var(--text-1);
+}
+.empty-state .hint {
+  max-width: 34ch;
+  margin: 2px auto 0;
+  font-family: var(--font-brand);
+  font-size: 19px;
+  line-height: 1.42;
+  color: var(--text-2);
+}
+
+/* The reader's turn: the product's bubble — the accent held legible top to
+   bottom by its gradient, 16px with an 8px tail, white ink. */
+.msg-user {
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: fit-content;
+  max-width: 85%;
+  padding: 8px 14px;
+  border: 0.5px solid var(--you-rim);
+  border-radius: 16px 16px 6px 16px;
+  background: var(--you-fill);
+  box-shadow: var(--you-shine);
+  color: var(--text-1);
+  font-size: 13.5px;
+  line-height: 20px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* A turn's parts stand apart; an outline and the thing it explains stay
+   together (`.aqua-content > div > .aqua-turn-trace + *`). */
+.msg-assistant {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.msg-assistant > * + * { margin-top: 20px; }
+.msg-assistant > .disclosure + * { margin-top: 8px; }
+.msg-assistant > .md + .file-cards { margin-top: 14px; }
+
+.msg-text {
+  margin: 0;
+  font-size: inherit;
+  color: inherit;
+  overflow-wrap: anywhere;
+}
+
+.msg-media { display: flex; flex-wrap: wrap; gap: 6px; }
+
+/* A billed tool waiting on the reader's answer. The approval is a decision,
+   so it wears the gel. */
+.spend-card {
+  align-self: center;
+  width: fit-content;
+  max-width: min(100%, 448px);
+  padding: 2px 0;
+  text-align: center;
+}
+.spend-card .title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  color: var(--text-1);
+}
+.spend-card .body { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--text-2); }
+.spend-card .body code {
+  padding: 0.1em 0.38em;
+  border-radius: 5px;
+  background: var(--bg-3);
+  font-family: var(--font-code);
+  font-size: 0.92em;
+}
+.spend-card .actions { display: flex; justify-content: center; margin-top: 8px; }
+
+/* Delivered files: send_file's handover, an object you can open. */
+.file-cards { display: flex; flex-direction: column; gap: 8px; }
+.file-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 420px;
+  padding: 9px 14px 9px 9px;
+  border: 0.5px solid var(--glass-card-rim);
+  border-radius: 12px;
+  background: var(--glass-card);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 1px 2px rgb(0 10 40 / 0.06);
+  text-decoration: none;
+  color: var(--text-1);
+  transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
+}
+.file-card:hover { background: color-mix(in srgb, var(--glass-card) 60%, rgb(255 255 255 / 0.3)); }
+.file-card .glyph-pad {
+  width: 36px;
+  height: 36px;
+  flex: none;
+  border-radius: 10px;
+  background: var(--bg-3);
+}
+.file-card .glyph-pad .file-glyph { width: 20px; height: 20px; }
+.file-card .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.file-card .name {
+  font-size: var(--text-base);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-card .sub {
+  font-size: var(--text-xs);
+  color: var(--text-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-card > svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
+
+/* The frame hugs the picture; fitShot() sets the exact box once the image
+   reports its natural size, and these caps are the pre-load floor. */
+.msg-media .shot {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  line-height: 0;
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.3);
+  text-decoration: none;
+}
+.msg-media img {
+  display: block;
+  max-width: 260px;
+  max-height: 260px;
+  width: auto;
+  height: auto;
+}
+
+.attach-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--text-2);
+  text-decoration: none;
+}
+.attach-line svg { width: 14px; height: 14px; flex: none; }
+.attach-line .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* A notice is housekeeping, told once, in the middle of the flow. */
+.msg-notice {
+  align-self: center;
+  max-width: 88%;
+  padding: 0 8px;
+  color: var(--text-3);
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+/* What went wrong is a line with the orb that says so — the system's own
+   voice in the conversation, not a red panel. */
+.msg-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: fit-content;
+  max-width: 92%;
+  margin: 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--text-1);
+  overflow-wrap: anywhere;
+}
+.msg-error .orb { margin-top: 3.5px; }
+
+/* Markdown inside a reply — the reading scale. Headings take the serif, as
+   every heading in the product does. */
+
+.md {
+  font-size: var(--text-read);
+  line-height: 22px;
+  color: var(--text-1);
+  overflow-wrap: anywhere;
+}
+.md > :first-child { margin-top: 0; }
+.md > :last-child { margin-bottom: 0; }
+.md p { margin: 0 0 12px; }
+.md h1, .md h2, .md h3 {
+  margin: 22px 0 8px;
+  font-family: var(--font-brand);
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+.md h1 { font-size: 25px; }
+.md h2 { font-size: 21px; }
+.md h3 { font-size: 18px; }
+.md h4, .md h5, .md h6 { margin: 16px 0 6px; font-size: var(--text-read); font-weight: 600; }
+.md ul, .md ol { margin: 0 0 12px; padding-left: 1.3em; }
+.md li + li { margin-top: 4px; }
+.md li::marker { color: var(--text-4); }
+.md li > p { margin: 0 0 6px; }
+.md li > ul, .md li > ol { margin: 4px 0 0; }
+.md li > .code-block { margin: 8px 0; }
+.md li > :last-child { margin-bottom: 0; }
+.md a {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-decoration-color: var(--accent-line);
+  text-underline-offset: 2px;
+}
+.md blockquote {
+  margin: 0 0 12px;
+  padding: 2px 0 2px 14px;
+  border-left: 2px solid var(--accent-line);
+  color: var(--text-2);
+}
+.md hr { margin: 20px 0; border: 0; border-top: 1px solid var(--line-2); }
+.md code {
+  padding: 0.12em 0.38em;
+  border-radius: 5px;
+  background: var(--bg-3);
+  font-family: var(--font-code);
+  font-size: 0.88em;
+}
+.md strong { font-weight: 600; }
+.md-img {
+  display: block;
+  max-width: 100%;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px var(--line-2);
+}
+
+/* A reply in the conversation. */
+.md.reply {
+  max-width: 92%;
+  font-size: 13.5px;
+  line-height: 20px;
+}
+.md.reply :is(p, ul, ol, blockquote, .code-block, .table-wrap) { margin: 0 0 12px; }
+.md.reply > :last-child { margin-bottom: 0; }
+.md.reply li + li { margin-top: 4px; }
+.md.reply :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 6px;
+  font-family: var(--font-ui);
+  font-weight: 600;
+  letter-spacing: normal;
+}
+.md.reply h1 { font-size: 17px; line-height: 24px; }
+.md.reply h2 { font-size: 15px; line-height: 22px; }
+.md.reply :is(h3, h4, h5, h6) { font-size: 13.5px; line-height: 20px; }
+.md.reply * + :is(h1, h2, h3, h4, h5, h6) { margin-top: 18px; }
+.md.reply blockquote { padding: 0 0 0 12px; border-left: 2px solid rgb(0 10 40 / 0.18); }
+.md.reply code { font-size: 12px; }
+.md.reply hr { margin: 14px 0; }
+
+/* Code in a reply is a WELL in the glass, the way the window sets it — the
+   dark block is the document viewer's. The copy door waits for the cursor. */
+.md.reply .code-block {
+  margin: 0 0 12px;
+  border-radius: 8px;
+  background: var(--code-well);
+  box-shadow: inset 0 0 0 1px var(--code-well-rim), inset 0 1px 2px rgb(0 10 40 / 0.06);
+  color: var(--text-1);
+}
+.md.reply .code-block > header {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  height: auto;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  transition: opacity var(--fast) var(--ease);
+}
+.md.reply .code-block:hover > header,
+.md.reply .code-block:focus-within > header { opacity: 1; }
+.md.reply .code-block .lang { display: none; }
+.md.reply .code-block pre {
+  padding: 10px 40px 10px 12px;
+  font-size: 12px;
+  line-height: 18px;
+}
+.md.reply .copy-btn {
+  height: 22px;
+  background: var(--well-fill);
+  box-shadow: inset 0 0 0 0.5px var(--glass-card-rim);
+  color: var(--text-3);
+}
+.md.reply .copy-btn:hover { background: var(--paper); color: var(--text-1); }
+
+.code-block {
+  position: relative;
+  margin: 4px 0 14px;
+  border-radius: var(--radius-card);
+  background: var(--code-ground);
+  box-shadow: 0 0 0 1px var(--code-rim);
+  color: var(--code-ink);
+  overflow: hidden;
+}
+.code-block > header,
+.code-block .head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 34px;
+  padding: 0 6px 0 14px;
+  border-bottom: 1px solid rgb(255 255 255 / 0.06);
+}
+.code-block .lang { font-family: var(--font-code); font-size: var(--text-xs); color: #8a93a4; }
+.code-block pre {
+  margin: 0;
+  padding: 12px 16px 14px;
+  overflow-x: auto;
+  font-family: var(--font-code);
+  font-size: 12.5px;
+  line-height: 1.65;
+}
+.code-block code { padding: 0; background: none; color: inherit; font-size: inherit; }
+
+.copy-btn {
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  color: #a3abb9;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
+}
+.copy-btn:hover { background: rgb(255 255 255 / 0.08); color: #ffffff; }
+
+.table-wrap {
+  margin: 4px 0 14px;
+  overflow-x: auto;
+  border-radius: 10px;
+  box-shadow: inset 0 0 0 1px var(--line-2);
+}
+.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
+.table-wrap th, .table-wrap td {
+  padding: 7px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--line-3);
+}
+.table-wrap th + th, .table-wrap td + td { border-left: 1px solid var(--line-3); }
+.table-wrap tr:last-child td { border-bottom: 0; }
+.table-wrap th { background: var(--bg-4); font-weight: 600; color: var(--text-2); }
+
+/* The activity outline.
+ *
+ * Norbert's window draws a turn's work as an OUTLINE, not a table: one
+ * disclosure line saying what happened, open while the turn runs, and a row
+ * per call under it — orbs in one column down the left edge, the way a
+ * Settings list lines its states up. A row that has something to show (a
+ * result, an error) opens onto it in a well. */
+
+.disclosure { min-width: 0; font-size: 12px; line-height: 18px; }
+
+.disclose-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  max-width: calc(100% + 12px);
+  margin-left: -6px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  text-align: left;
+  color: var(--text-2);
+  transition: background-color var(--fast) var(--ease);
+}
+.disclose-head:hover { background: var(--row-hover); }
+.disclose-head .tri {
+  width: 10px;
+  height: 10px;
+  flex: none;
+  color: var(--text-3);
+  transition: rotate 200ms var(--ease);
+}
+.disclose-head[aria-expanded="true"] .tri { rotate: 90deg; }
+.disclose-head .label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.disclose-head .clock {
+  flex: none;
+  color: var(--text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.trace-rows, .plan-rows {
+  margin: 0;
+  padding: 2px 0 2px 16px;
+  list-style: none;
+}
+.trace-row { min-width: 0; }
+
+.row-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: calc(100% + 12px);
+  min-width: 0;
+  height: 24px;
+  margin-left: -6px;
+  padding: 0 6px;
+  border-radius: 5px;
+  text-align: left;
+  font-size: 12px;
+  color: var(--text-1);
+  cursor: default;
+}
+.row-head[data-disclose] { cursor: pointer; transition: background-color var(--fast) var(--ease); }
+.row-head[data-disclose]:hover { background: var(--row-hover); }
+.row-head:disabled { opacity: 1; }
+.row-head .verb { flex: none; }
+.row-head .arg {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-3);
+}
+.row-head .arg.mono { font-family: var(--font-code); font-size: 11.5px; }
+.row-head .ms {
+  flex: none;
+  margin-left: auto;
+  color: var(--text-4);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* One column of state: the orb, or the spinner while the call is out. */
+.state {
+  display: grid;
+  place-items: center;
+  width: 11px;
+  height: 11px;
+  flex: none;
+  color: var(--text-3);
+}
+.bars { display: inline-block; flex: none; color: inherit; }
+
+/* What a row opens onto: the head of the result, set into the glass. */
+.well-detail {
+  width: fit-content;
+  max-width: calc(100% - 19px);
+  max-height: 112px;
+  margin: 4px 0 4px 19px;
+  padding: 6px 10px;
+  overflow-y: auto;
+  border-radius: 8px;
+  background: var(--code-well);
+  box-shadow: inset 0 0 0 1px var(--code-well-rim), inset 0 1px 2px rgb(0 10 40 / 0.06);
+  color: var(--text-2);
+  font-family: var(--font-code);
+  font-size: 11.5px;
+  line-height: 16px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* The plan is the same outline: the sentence and its count, the steps under
+   it. While the turn runs the sentence is ink; afterwards it recedes. */
+.plan:not(.settled) .disclose-head .label { font-weight: 600; color: var(--text-1); }
+.plan-rows li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+.plan-rows .step {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-1);
+}
+.plan-rows li.completed .step { color: var(--text-3); }
+.plan-rows li.in_progress .step { font-weight: 500; }
+
+/* Working */
+
+.working {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--text-2);
+}
+.working .label { font-weight: 500; }
+.working .clock {
+  color: var(--text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The system's spinner: twelve bars fading round, the one every Aqua row
+   waits with (Spinner.tsx). Sized by its box, so it reads at 11px in a trace
+   row and 12px on the Thinking line. */
+.t-spinner {
+  /* Block, or the inline box takes no width and the bars — sized in
+     percentages of it — come out 0×0 and invisible. */
+  display: block;
+  position: relative;
+  top: 50%;
+  left: 50%;
+}
+.t-spinner__bar {
+  position: absolute;
+  height: 9%;
+  width: 26%;
+  left: -10%;
+  top: -4.5%;
+  border-radius: 6px;
+  background-color: currentColor;
+  animation: t-spinner-fade 1.2s linear infinite;
+}
+@keyframes t-spinner-fade {
+  0% { opacity: 1; }
+  100% { opacity: 0.15; }
+}
+
+.shimmer, .t-shimmer {
+  background: linear-gradient(90deg, var(--text-4) 0%, var(--text-1) 45%, var(--text-4) 90%);
+  background-size: 220% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: shimmer 1.9s linear infinite;
+}
+@keyframes shimmer {
+  from { background-position: 120% 0; }
+  to { background-position: -120% 0; }
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.stream-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1.05em;
+  margin-left: 1px;
+  vertical-align: text-bottom;
+  border-radius: 1px;
+  background: var(--accent);
+  animation: caret 1.1s steps(2, start) infinite;
+}
+@keyframes caret { 50% { opacity: 0; } }
+
+/* File view ------------------------------------------------------------------
+   A file is a DOCUMENT on the paper: one quiet bar that says where it lives
+   and how it stands, then the text in a centred column, soft-wrapped, with
+   its line numbers in the margin. There is no status strip under it — the
+   bar carries the caret, the save state and the doors. */
+
+.fileview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+
+.fileview-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 44px;
+  padding: 0 10px 0 16px;
+  border-bottom: 1px solid var(--line-3);
+  flex: none;
+}
+
+/* Where it lives, in words: lane › folders › file. */
+.crumbs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: var(--text-base);
+  white-space: nowrap;
+}
+.crumbs .glyph-pad { width: 16px; flex: none; margin-right: 2px; }
+.crumbs .crumb { flex: none; color: var(--text-3); }
+.crumbs .crumb.here {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-1);
+  font-weight: 500;
+}
+.crumb-sep { display: inline-flex; flex: none; color: var(--text-4); }
+.crumb-sep svg { width: 12px; height: 12px; }
+
+.file-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+  flex: none;
+  font-size: var(--text-sm);
+  color: var(--text-4);
+}
+.caret-readout { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.readonly-mark { display: inline-flex; color: var(--text-4); }
+.readonly-mark svg { width: 13px; height: 13px; }
+.file-actions { display: flex; align-items: center; gap: 2px; }
+
+/* The save state: words that change in place, with a mark before them. */
+.save-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 9px 0 7px;
+  border-radius: 999px;
+  color: var(--text-4);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
+}
+.save-state:disabled { cursor: default; }
+.save-mark { display: inline-flex; align-items: center; justify-content: center; width: 12px; }
+.save-mark svg { width: 12px; height: 12px; }
+.save-state[data-state="dirty"] { color: var(--text-2); }
+.save-state[data-state="dirty"] .save-mark::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--accent);
+}
+.save-state[data-state="dirty"]:hover { background: var(--bg-3); color: var(--text-1); }
+.save-state[data-state="saving"] .save-mark svg { animation: spin 0.9s linear infinite; }
+.save-state[data-state="error"] { color: color-mix(in srgb, var(--danger) 85%, var(--ink)); }
+.save-state[data-state="error"]:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); }
+
+.fileview-body { flex: 1; min-height: 0; padding: 0; }
+
+/* Rendered HTML: the page is the content, on the white ground pages assume. */
+.fileview-body.html-frame { display: flex; }
+.html-preview { flex: 1; width: 100%; border: 0; background: #ffffff; }
+
+/* Two views of one file, in words: Write | Preview, Preview | Code — the Aqua
+   switch at its small size. */
+.view-toggle {
+  display: inline-flex;
+  gap: 2px;
+  height: 28px;
+  padding: 2px;
+  border-radius: 999px;
+  background: var(--track);
+  box-shadow: var(--track-shade);
+}
+.view-toggle button {
+  padding: 0 11px;
+  border-radius: 999px;
+  color: var(--text-2);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  transition: color var(--fast) var(--ease);
+}
+.view-toggle button:hover { color: var(--text-1); }
+.view-toggle button[aria-pressed="true"] {
+  --gel-crown: var(--accent);
+  border: 1px solid transparent;
+  background-image:
+    linear-gradient(rgb(255 255 255 / 0.85), transparent 10px),
+    linear-gradient(rgb(255 255 255 / 0.25) 10px, transparent 10px),
+    linear-gradient(var(--gel-crown), var(--gel-foot)),
+    linear-gradient(var(--gel-rim-crown), var(--gel-rim-foot));
+  background-size: 100%, calc(100% - 20px), 100%, 100%;
+  background-position: top, top center, center, center;
+  background-repeat: no-repeat;
+  background-origin: padding-box, padding-box, padding-box, border-box;
+  background-clip: padding-box, padding-box, padding-box, border-box;
+  box-shadow: 0 1px 2px rgb(10 35 90 / 0.4);
+  color: var(--gel-label);
+}
+
+/* A preview reads at the document's measure, headings in the serif. (Named
+   `doc-page`: `.doc` is already the attachment chip in the transcript.) */
+.doc-scroll { overflow-y: auto; }
+.doc-page {
+  box-sizing: content-box;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 40px max(28px, 5%) 120px;
+}
+.doc-page.md { font-size: 15px; line-height: 26px; }
+.doc-page.md h1 { font-size: 31px; margin-top: 8px; }
+.doc-page.md h2 { font-size: 24px; margin-top: 30px; }
+.doc-page.md h3 { font-size: 19px; margin-top: 24px; }
+.doc-page.md > :is(p, ul, ol, blockquote) { margin-bottom: 14px; }
+
+.fileview-body .shot {
+  display: block;
+  max-width: min(calc(100% - 48px), 960px);
+  margin: 32px auto;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px var(--line-2);
+}
+.fileview-body .empty {
+  margin: 0;
+  padding: 28px 20px;
+  font-size: var(--text-base);
+  color: var(--text-3);
+}
+
+/* ------------------------------------------------------------------------- */
+/* Editor                                                                    */
+/* ------------------------------------------------------------------------- */
+
+/* Two layers, one string: a transparent textarea over a painted copy of the
+   same text. Every property that decides where a glyph lands is declared ONCE
+   for both below — family, size, line-height, padding, wrapping, the
+   scrollbar's gutter — or the colour slides off the characters under it. The
+   column is centred by padding computed from the pane's width, so both layers
+   wrap at exactly the same measure. */
+.editor {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  --doc-measure: 720px;
+  --editor-font: var(--font-ui);
+  --editor-size: 15px;
+  --editor-line: 26px;
+}
+.editor[data-kind="code"] {
+  --doc-measure: 880px;
+  --editor-font: var(--font-code);
+  --editor-size: 13px;
+  --editor-line: 22px;
+}
+
+.editor-hl,
+.editor-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  border: 0;
+  /* Room above the first line, the margin the numbers stand in, and half a
+     screen under the last line — the end of a document is written in the
+     middle of the window, not against its bottom edge. */
+  padding: 34px max(76px, calc((100% - var(--doc-measure)) / 2)) 45vh;
+  font-family: var(--editor-font);
+  font-size: var(--editor-size);
+  font-weight: 400;
+  font-style: normal;
+  line-height: var(--editor-line);
+  letter-spacing: 0;
+  word-spacing: 0;
+  font-kerning: normal;
+  font-variant-ligatures: none;
+  text-rendering: auto;
+  tab-size: 2;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: normal;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-1) transparent;
+}
+
+/* The painted copy never scrolls on its own (the textarea's scroll drives it)
+   and draws no scrollbar — but it keeps the same gutter, so it wraps where
+   the textarea wraps. */
+.editor-hl {
+  z-index: 0;
+  overflow-y: hidden;
+  pointer-events: none;
+  color: var(--text-1);
+}
+/* A read-only file is the painted copy alone, scrolling itself. */
+.editor-hl.static {
+  overflow-y: auto;
+  pointer-events: auto;
+  user-select: text;
+  cursor: text;
+}
+
+/* The text itself is invisible; only the caret and the selection show, so what
+   you read is always the painted copy. */
+.editor-input {
+  z-index: 1;
+  background: none;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  caret-color: var(--accent);
+  resize: none;
+  outline: none;
+}
+.editor-input::placeholder { color: var(--text-4); -webkit-text-fill-color: var(--text-4); }
+.editor-input::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
+
+/* Each line carries its number in the margin. The caret's line gets the accent
+   number and — while you are writing — a soft band. */
+.hl-line {
+  position: relative;
+  z-index: 0;
+  display: block;
+  min-height: var(--editor-line);
+}
+.hl-line::before {
+  content: attr(data-n);
+  position: absolute;
+  top: 0;
+  right: calc(100% + 24px);
+  min-width: 32px;
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  font-weight: 400;
+  line-height: var(--editor-line);
+  text-align: right;
+  color: var(--text-4);
+  opacity: 0.55;
+  font-variant-numeric: tabular-nums;
+  -webkit-text-stroke: 0;
+  pointer-events: none;
+}
+.hl-line.is-active::before { color: var(--accent-text); opacity: 1; }
+.editor:focus-within .hl-line.is-active::after {
+  content: "";
+  position: absolute;
+  inset: 0 -14px;
+  z-index: -1;
+  border-radius: 6px;
+  background: var(--bg-4);
+}
+
+/* Markdown, painted without moving a glyph: colour, a tint, or a stroke. The
+   markup characters step back so the words lead. */
+.md-mark { color: var(--text-4); -webkit-text-stroke: 0; }
+.md-bullet { color: color-mix(in srgb, var(--accent) 65%, var(--text-3)); }
+.md-h { color: var(--text-1); -webkit-text-stroke: 0.5px currentColor; }
+.md-strong { color: var(--text-1); -webkit-text-stroke: 0.4px currentColor; }
+.md-em { color: var(--text-2); }
+.md-code {
+  border-radius: 4px;
+  background: var(--bg-3);
+  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
+  -webkit-text-stroke: 0;
+}
+.md-code .md-mark { color: color-mix(in srgb, var(--accent) 40%, var(--text-4)); }
+.md-link {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-decoration-color: var(--accent-line);
+  text-underline-offset: 3px;
+}
+.md-quote { color: var(--text-3); }
+.hl-line.md-fence {
+  background: var(--bg-4);
+  box-shadow: -14px 0 0 var(--bg-4), 14px 0 0 var(--bg-4);
+}
+.md-fenced { color: var(--text-2); }
+
+/* Syntax tokens for code, the studio editor's vocabulary. Weight and slant are
+   safe here only because the mono face keeps every advance the same. */
+.cs-k { color: #0f766e; font-weight: 550; }
+.cs-s { color: #a16207; }
+.cs-c { color: #94918c; font-style: italic; }
+.cs-n { color: #9d174d; }
+.cs-f { color: #1d4ed8; }
+.cs-t { color: #0369a1; }
+.cs-p { color: #6d28d9; }
+.cs-v { color: var(--text-3); }
+
+:root[data-theme="dark"] .cs-k { color: #5eead4; }
+:root[data-theme="dark"] .cs-s { color: #fcd34d; }
+:root[data-theme="dark"] .cs-c { color: #7c8594; }
+:root[data-theme="dark"] .cs-n { color: #f9a8d4; }
+:root[data-theme="dark"] .cs-f { color: #93c5fd; }
+:root[data-theme="dark"] .cs-t { color: #7dd3fc; }
+:root[data-theme="dark"] .cs-p { color: #c4b5fd; }
+
+/* ------------------------------------------------------------------------- */
+/* Composer                                                                  */
+/* ------------------------------------------------------------------------- */
+
+/* The dock is the jump chip's anchor too, so the chip always floats just
+   above the composer, whatever height the composer has grown to. */
+.composer-dock {
+  position: relative;
+  flex: none;
+  padding: 6px var(--gutter);
+  border-top: 1px solid var(--dock-line);
+  box-shadow: inset 0 1px 0 var(--dock-shine);
+}
+
+.composer-inner { max-width: var(--chat-measure); margin: 0 auto; }
+
+/* The form is inert layout: a row of chips, then the well and the controls
+   beside it. The RECESS is the affordance — the words are typed into a hollow
+   in the glass, and the accent only shows while you are in it. */
+.composer-form { display: flex; flex-direction: column; gap: 6px; }
+
+.composer-row { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
+
+.composer-well {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  padding: 4px 12px 4px 6px;
+  border: 1px solid var(--well-rim);
+  border-radius: 16px;
+  background: var(--well-fill);
+  box-shadow: var(--well-shade);
+  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
+}
+.composer-well:focus-within {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--well-rim));
+  box-shadow: inset 0 1.5px 3px rgb(0 10 40 / 0.1),
+    0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+}
+
+.composer-textarea {
+  flex: 1;
+  min-width: 0;
+  min-height: 20px;
+  max-height: 160px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--text-1);
+  font-size: 13.5px;
+  line-height: 20px;
+  resize: none;
+  overflow-y: auto;
+}
+.composer-textarea:focus { outline: none; }
+.composer-textarea::placeholder { color: var(--text-3); }
+
+.composer-cluster { display: flex; align-items: center; gap: 2px; height: 30px; flex: none; }
+
+/* The well's own door sits on the text line, so it is exactly one line
+   tall — a taller one would grow the bar past the window's 43px. */
+.well-btn {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  flex: none;
+  border-radius: 999px;
+  color: var(--text-3);
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
+}
+.well-btn:hover { background: var(--row-hover); color: var(--text-1); }
+.well-btn svg { width: 14px; height: 14px; }
+
+.model-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  height: 24px;
+  padding: 0 8px;
+  flex: none;
+  border-radius: 999px;
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 500;
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
+}
+.model-trigger:hover:not(:disabled) { background: var(--row-hover); color: var(--text-1); }
+.model-trigger:disabled { color: var(--text-3); }
+.model-trigger .label { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-trigger .lock, .model-trigger .chev { display: inline-flex; color: var(--text-4); }
+.model-trigger .lock svg { width: 11px; height: 11px; }
+.model-trigger .chev svg { width: 12px; height: 12px; }
+
+.provider-mark { display: inline-flex; width: 14px; height: 14px; flex: none; color: var(--text-2); }
+.provider-mark svg { width: 14px; height: 14px; }
+:root[data-theme="dark"] .provider-mark svg[fill="#111827"] { fill: #e7e9ef; }
+.provider-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 5px;
+  background: var(--bg-2);
+  color: var(--text-2);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  flex: none;
+}
+
+/* Send: the gel, the one press this page exists for. With nothing to send it
+   is not a button at all — a grey arrow, the way the window's is. */
+.send-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  border-radius: 999px;
+  box-shadow: 0 1px 2px rgb(10 35 90 / 0.28);
+  transition: filter 220ms var(--ease), transform 220ms var(--ease), opacity 220ms var(--ease);
+}
+.send-btn:hover:not(:disabled) { filter: brightness(1.05); }
+.send-btn:active:not(:disabled) { filter: brightness(0.95); transform: scale(0.94); }
+.send-btn:disabled {
+  background-image: none;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--text-4);
+}
+.send-btn:focus-visible { outline: none; box-shadow: 0 1px 2px rgb(10 35 90 / 0.28), var(--ring); }
+.send-btn svg { width: 14px; height: 14px; }
+
+.stop-square {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  background: currentColor;
+}
+
+.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
+.attach-chips[hidden] { display: none; }
+
+.attach-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 3px 0 8px;
+  border-radius: 999px;
+  background: var(--chip-fill);
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--chip-ink);
+}
+.attach-chip img { width: 20px; height: 20px; border-radius: 999px; object-fit: cover; }
+.attach-chip svg { width: 13px; height: 13px; color: var(--text-3); }
+.attach-chip .name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.attach-chip .remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  color: var(--text-4);
+}
+.attach-chip .remove:hover { background: var(--bg-2); color: var(--text-1); }
+.attach-chip .remove svg { width: 10px; height: 10px; }
+
+.jump-chip {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 4px);
+  translate: -50% 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  background: var(--paper);
+  box-shadow: 0 0 0 1px var(--line-2), 0 4px 12px -6px rgb(8 28 74 / 0.25);
+  color: var(--text-2);
+  z-index: 3;
+}
+.jump-chip[hidden] { display: none; }
+.jump-chip:hover { color: var(--text-1); }
+.jump-chip svg { width: 16px; height: 16px; }
+
+/* ------------------------------------------------------------------------- */
+/* Right well: settings                                                      */
+/* ------------------------------------------------------------------------- */
+
+.lane-col.right .lane-head { justify-content: space-between; min-height: 50px; padding: 12px 18px 0; }
+/* Light | dark is a preference of this page, so it sits on the Settings
+   title line, in the same column as the section doors below it. */
+.theme-btn { margin-top: 2px; }
+
+.well-title {
+  margin: 0;
+  font-family: var(--font-brand);
+  font-size: 25px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.012em;
+  color: var(--text-1);
+}
+
+.inspector-body { flex: 1; min-height: 0; padding: 0 18px 24px; }
+
+.inspector-section { padding: 16px 0 2px; }
+
+/* A section is titled the way the admin console titles one: the serif at
+   17px, with its actions on the title line. */
+.sw-heading {
+  font-family: var(--font-brand);
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.005em;
+  color: var(--text-1);
+}
+.inspector-section > .sw-heading { display: block; margin-bottom: 6px; }
+
+.sw-heading-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 28px;
+  margin-bottom: 6px;
+}
+.sw-heading-row .sw-heading { display: inline; margin: 0; }
+
+/* A title with an ⓘ: the glyph sits right against the word it explains,
+   quieter than the title, and wears the accent while its window is up. */
+.sw-title { position: relative; display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
+.info-wrap { display: inline-flex; }
+.info-door {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex: none;
+  border-radius: 999px;
+  color: var(--text-3);
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
+}
+.info-door svg { width: 14px; height: 14px; }
+.info-wrap:hover .info-door,
+.info-door:focus-visible { background: var(--bg-2); color: var(--accent-text); }
+
+/* What an ⓘ means, in a small window that floats under the title while the
+   ⓘ is hovered or has keyboard focus — over the settings below, never pushing
+   them down. The model picker's popover material, over a blur: it lands on
+   the settings' own words, which must not read through its sentences. It
+   waits a beat before it shows, so a pointer passing by does not flash it,
+   and lingers a moment when left, so the pointer can travel onto it. */
+.info-tip {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 20;
+  width: min(272px, calc(var(--inspector-w) - 37px));
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: var(--pop-fill);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  backdrop-filter: blur(24px) saturate(180%);
+  box-shadow: var(--pop-throw);
+  text-align: left;
+  opacity: 0;
+  visibility: hidden;
+  translate: 0 -3px;
+  transition: opacity 120ms var(--ease), translate 160ms var(--ease-out-strong), visibility 0s linear;
+  transition-delay: 80ms, 80ms, 240ms;
+}
+/* The gap under the ⓘ belongs to the window, so crossing it keeps it up. */
+.info-tip::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: 10px;
+}
+.info-wrap:hover .info-tip,
+.info-door:focus-visible + .info-tip {
+  opacity: 1;
+  visibility: visible;
+  translate: 0 0;
+  transition-delay: 150ms;
+}
+/* Escape closes it until the pointer or focus comes back. */
+.info-wrap[data-dismissed] .info-tip {
+  opacity: 0;
+  visibility: hidden;
+  transition-delay: 0s;
+}
+.info-tip p {
+  margin: 0;
+  font-size: var(--text-sm);
+  line-height: 1.45;
+  color: var(--text-2);
+}
+.info-tip p + p { margin-top: 6px; }
+.info-tip b { font-weight: 600; color: var(--text-1); }
+
+/* Rows: one setting per line — its name on the left, where it stands on the
+   right, a hairline between neighbours, and nothing under it. */
+.rows {
+  border-top: 1px solid var(--line-2);
+  border-bottom: 1px solid var(--line-2);
+}
+.rows > * + * { border-top: 1px solid var(--line-2); }
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  padding: 4px 0;
+}
+.setting-row .meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
+.setting-row .label {
+  min-width: 0;
+  font-size: var(--text-base);
+  font-weight: 500;
+  color: var(--text-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.setting-row .label.mono { font-family: var(--font-code); font-size: 12.5px; font-weight: 400; }
+.setting-row.off .label { color: var(--text-3); }
+
+/* A row that opens a picker states its setting on the right, with the door
+   that changes it — the whole line is the button. */
+.setting-row.pick {
+  width: 100%;
+  text-align: left;
+  color: inherit;
+}
+.setting-row.pick:hover .value-chip { color: var(--text-1); }
+.setting-row.pick:hover .value-chip svg { color: var(--text-2); }
+
+.value-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 66%;
+  flex: none;
+  color: var(--text-3);
+  font-size: var(--text-base);
+  transition: color var(--fast) var(--ease);
+}
+.value-chip .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.value-chip > svg { width: 12px; height: 12px; color: var(--text-4); flex: none; transition: color var(--fast) var(--ease); }
+
+/* Which models the agent runs on: the switch on the title line, then what it
+   implies. The rows settle in when the switch has finished moving. */
+.rows[data-settle] { animation: settle 220ms var(--ease-out-strong) both; }
+@keyframes settle {
+  from { opacity: 0; translate: 0 -4px; }
+  to { opacity: 1; translate: 0 0; }
+}
+
+/* A model line puts its maker's mark in one column, whether that mark is a
+   logo or the two-letter stand-in, so the names start on one edge. */
+.model-row .meta > .provider-mark,
+.model-row .meta > .provider-fallback,
+.add-row > .provider-mark,
+.add-row > .provider-fallback {
+  width: 18px;
+  height: 18px;
+  justify-content: center;
+  flex: none;
+}
+
+/* Which models the agent offers is a list you TICK: one line per model, the
+   whole line is the control, and the box stands in the same column as the
+   switches below. */
+.model-row { width: 100%; min-height: 36px; text-align: left; color: inherit; }
+.model-row.off .label { color: var(--text-2); }
+.model-row[aria-disabled="true"] { cursor: default; }
+.check-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 19px;
+  height: 19px;
+  flex: none;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1.5px var(--line-1);
+  color: transparent;
+  transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
+    color var(--fast) var(--ease);
+}
+.check-box svg { width: 12px; height: 12px; }
+.model-row:hover:not([aria-disabled="true"]) .check-box { box-shadow: inset 0 0 0 1.5px var(--text-4); }
+.model-row[aria-checked="true"] .check-box,
+.model-row[aria-checked="true"]:hover .check-box {
+  background: var(--accent);
+  box-shadow: none;
+  color: #ffffff;
+}
+.model-row[aria-disabled="true"][aria-checked="true"] .check-box { background: var(--text-4); }
+.model-row:focus-visible { outline: none; }
+.model-row:focus-visible .check-box {
+  box-shadow: inset 0 0 0 1.5px var(--accent-line), 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
+}
+
+/* The filter over a long catalog sits between the switch and the rows. */
+.search-pill.model-filter { margin: 0 0 8px; }
+
+/* What the agent already has, as a GRID of tiles — tools, skills, services
+   and agents are many, and one row each would bury every section below.
+   Tiles are glass things on the column's glass: a hairline rim, one line of
+   name, the maker's glyph, and a door that takes the thing away. The grid
+   fills the column, two across at its default width, more when dragged. */
+.cap-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  gap: 1px 6px;
+  margin: 0 -4px;
+}
+/* Not cards: a card each would make the column a wall of boxes. A line with
+   its glyph, and the ground under it only when the cursor is there. */
+.cap-tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  height: 28px;
+  padding: 0 4px 0 4px;
+  border-radius: 6px;
+  color: var(--text-1);
+  font-size: 12px;
+  transition: background-color var(--fast) var(--ease);
+}
+.cap-tile:hover, .cap-tile:focus-within { background: var(--row-hover); }
+.cap-glyph {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  flex: none;
+  color: var(--text-3);
+}
+.cap-glyph svg { width: 14px; height: 14px; }
+.cap-glyph .orb { width: 9px; height: 9px; }
+/* The same mark the window's gallery paints, at a row's size: no plate of
+   its own here, because a column of plates is a wall of boxes. */
+.cap-glyph .thing-mark {
+  width: 17px;
+  height: 17px;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+}
+.cap-glyph .thing-mark img { width: 100%; height: 100%; }
+.cap-glyph .thing-mark.plate img { width: 14px; height: 14px; }
+.cap-glyph .thing-mark svg { width: 14px; height: 14px; }
+.cap-glyph .thing-mark .mark-letters { font-size: 8px; }
+.cap-glyph .thing-mark.bare { background: var(--bg-3); box-shadow: none; }
+/* The tile's own door, under its name and glyph — it opens the thing's page
+   in the window, where the grant is narrowed. The drop door rides above it. */
+.cap-open {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.cap-open:focus-visible { outline: none; box-shadow: var(--ring); }
+.cap-tile > .cap-name,
+.cap-tile > .cap-count,
+.cap-tile > .orb { pointer-events: none; }
+.cap-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cap-name.mono { font-family: var(--font-code); font-size: 11.5px; }
+.cap-count {
+  flex: none;
+  color: var(--text-3);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.cap-door {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  flex: none;
+  border-radius: 999px;
+  color: var(--text-4);
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), opacity var(--fast) var(--ease);
+}
+.cap-door svg { width: 11px; height: 11px; }
+.cap-door:hover { background: var(--row-hover); color: var(--text-1); }
+.cap-door.drop:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
+/* The drop door is there for the cursor; at rest the tile is just the thing,
+   and its name has the whole width. The door floats over the tile's end on a
+   wash of the tile, so it never takes room a name could use. Without a cursor
+   it always stands. */
+@media (hover: hover) {
+  .cap-tile .cap-door.drop {
+    position: absolute;
+    top: 50%;
+    right: 2px;
+    translate: 0 -50%;
+    opacity: 0;
+  }
+  .cap-tile:hover .cap-door.drop,
+  .cap-tile:focus-within .cap-door.drop { opacity: 1; }
+}
+/* A section's grid can hold two kinds — the system's lanes and the
+   connectors — told apart by a quiet word above each. */
+.cap-group, .add-group {
+  margin: 10px 0 5px;
+  color: var(--text-3);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+.cap-group:first-of-type { margin-top: 2px; }
+.add-group { margin: 6px 8px 2px; }
+.add-group:first-child { margin-top: 2px; }
+.cap-tile.leaving { opacity: 0.4; transition: opacity var(--fast) var(--ease); }
+/* The section's one switch, in the row grammar: whether the agent may go
+   looking in the Store beyond what it is given. */
+.store-row {
+  margin-bottom: 2px;
+  border-top: 1px solid var(--line-2);
+  border-bottom: 1px solid var(--line-2);
+}
+.cap-empty {
+  padding: 4px 0;
+  color: var(--text-3);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* The Switch (components/Switch.tsx, sm): a 32×18 track, a 14px thumb, and
+   Transitions.dev's double bounce armed by `is-init` on the thumb. */
+.t-toggle {
+  --toggle-dur: 350ms;
+  --toggle-ov1: 1px;
+  --toggle-ov2: 0px;
+  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
+  --toggle-travel: 14px; /* 32 − 4 − 14 */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  width: 32px;
+  height: 18px;
+  padding: 0 2px;
+  border-radius: 999px;
+  background: var(--bg-1);
+}
+.t-toggle:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 18%, transparent); }
+.t-toggle[data-on="true"],
+.t-toggle[data-on="true"]:hover:not(:disabled) { background: var(--accent); }
+.t-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
+.t-toggle-thumb {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgb(9 9 11 / 0.25);
+  translate: 0 0;
+  will-change: translate;
+  pointer-events: none;
+}
+.t-toggle[data-on="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }
+.t-toggle[data-on="true"] .t-toggle-thumb.is-init {
+  animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both;
+}
+.t-toggle[data-on="false"] .t-toggle-thumb.is-init {
+  animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both;
+}
+@keyframes t-toggle-on {
+  0% { translate: 0 0; }
+  55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
+  80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
+  100% { translate: var(--toggle-travel) 0; }
+}
+@keyframes t-toggle-off {
+  0% { translate: var(--toggle-travel) 0; }
+  55% { translate: calc(0px - var(--toggle-ov1)) 0; }
+  80% { translate: var(--toggle-ov2) 0; }
+  100% { translate: 0 0; }
+}
+
+/* Schedules: the same rows. A schedule says its cadence; the facts behind it
+   (name, zone, the wake's words) ride in the hover title and in the rows the
+   disclosure opens, never as a caption under it. */
+.sched-item.open { padding-bottom: 8px; }
+.sched-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 4px 0;
+  border-radius: var(--radius-row);
+}
+.sched-row.editable { cursor: pointer; }
+.sched-row .meta {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.sched-row .cadence {
+  font-size: var(--text-base);
+  font-weight: 500;
+  color: var(--text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sched-item.disabled .cadence { color: var(--text-3); }
+/* A webhook's local ingress is data you copy, so it keeps its line. */
+.sched-row .sub.mono {
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  color: var(--text-3);
+  user-select: all;
+  overflow-wrap: anywhere;
+}
+.sched-row .glyph { display: inline-flex; color: var(--text-3); flex: none; }
+/* The door to a schedule's own settings: a gear, the grammar's door for "a
+   small editor for this value", sitting BEFORE the switch so every switch in
+   the well stands in one column at the right edge. */
+.sched-row .glyph.door {
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  color: var(--text-4);
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
+    rotate var(--normal) var(--ease-out-strong);
+}
+.sched-row .glyph.door svg { width: 15px; height: 15px; }
+.sched-row.editable:hover .glyph.door { background: var(--bg-3); color: var(--text-1); }
+.sched-row .glyph.door.open { background: var(--bg-2); color: var(--accent-text); }
+/* Run now earns its place quietly: on hover, on focus, and while open. */
+.sched-row [data-fire-trigger] { opacity: 0; }
+.sched-row:hover [data-fire-trigger],
+.sched-row [data-fire-trigger]:focus-visible,
+.sched-item.open [data-fire-trigger] { opacity: 1; }
+.sched-row .badge.off {
+  flex: none;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--bg-3);
+  font-size: var(--text-xs);
+  color: var(--text-3);
+}
+
+/* An open schedule: its own rows on a faint recess, so the group reads as one
+   thing without a border around it. */
+/* The open editor: one decision per row, each row carrying the control
+   itself — nothing here opens a further thing to set. */
+.sched-editor {
+  display: flex;
+  flex-direction: column;
+  padding: 2px 12px 10px;
+  border-radius: 12px;
+  background: var(--bg-4);
+  box-shadow: inset 0 0 0 1px var(--line-3);
+}
+.sched-editor > * + * { border-top: 1px solid var(--line-3); }
+.sched-field { min-height: 38px; padding-block: 3px; }
+.sched-field .label { font-weight: 400; color: var(--text-2); }
+.sched-field .value-chip {
+  gap: 6px;
+  max-width: 68%;
+  flex: 1;
+  justify-content: flex-end;
+  color: var(--text-1);
+}
+.sched-field .sw-field { width: auto; height: 30px; }
+.sched-field .sw-field.grow { flex: 1; min-width: 0; }
+/* A field that holds a url or an expression gets the room a value does not. */
+.sched-field:has(.grow) .value-chip { max-width: 78%; }
+.sched-field .sw-field.mono { font-family: var(--font-code); font-size: 12.5px; }
+.sched-field .sw-field.num { width: 62px; text-align: center; }
+.sched-field .sw-field.time { font-variant-numeric: tabular-nums; }
+.sched-field .unit { font-size: var(--text-sm); color: var(--text-3); flex: none; }
+
+/* A menu of plain words, wearing the value chip's clothes: the OS draws the
+   list, the row only says what is chosen. */
+.sw-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+  height: 30px;
+  padding: 0 8px 0 10px;
+  border-radius: var(--radius-row);
+  background: var(--field-fill);
+  color: var(--text-1);
+  font-size: var(--text-sm);
+  transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
+}
+.sw-select select {
+  appearance: none;
+  min-width: 0;
+  max-width: 100%;
+  background: none;
+  border: 0;
+  color: inherit;
+  font-size: inherit;
+  text-overflow: ellipsis;
+}
+.sw-select svg { width: 12px; height: 12px; color: var(--text-4); flex: none; }
+.sw-select:hover { background: var(--field-fill-focus); }
+.sw-select:focus-within {
+  background: var(--field-fill-focus);
+  box-shadow: inset 0 0 0 0.5px var(--accent-line), var(--ring);
+}
+.sw-select select:focus { outline: none; }
+
+/* What the wake says, in its own field — the width of the editor, because it
+   is sentences and not a value. */
+.sched-prompt { padding: 8px 0 2px; }
+.sched-prompt-input {
+  width: 100%;
+  height: auto;
+  min-height: 66px;
+  padding: 8px 10px;
+  resize: vertical;
+  font-family: inherit;
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+/* Removal is the last line of the editor, in words — never a glyph sitting
+   beside the switch, where it could be hit for one. */
+.sched-delete {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  min-height: 36px;
+  padding: 0;
+  color: var(--text-3);
+  font-size: var(--text-sm);
+  transition: color var(--fast) var(--ease);
+}
+.sched-delete svg { width: 14px; height: 14px; }
+.sched-delete:hover { color: var(--danger); }
+
+.pill-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--h-sm);
+  padding: 0 13px;
+  flex: none;
+  border-radius: 999px;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* Adding, in place ----------------------------------------------------------
+   The + on a section's title line is the door. Opened, it turns into the x
+   that closes what it opened, and the panel grows out from under the title —
+   pushing the rows down, never landing on top of them — so what the agent
+   already has stays in sight while you add to it. */
+.add-door svg { transition: rotate var(--normal) var(--ease-out-strong); }
+.add-door[aria-expanded="true"],
+.add-door[data-open="true"] { background: var(--bg-2); color: var(--accent-text); }
+.add-door[aria-expanded="true"] svg { rotate: 45deg; }
+
+/* The reveal is the grid track growing from 0fr, so the rows below slide
+   rather than jump; the panel's contents rise a few pixels into place. */
+.add-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 240ms var(--ease-out-strong);
+}
+.add-panel[data-open="true"] { grid-template-rows: 1fr; }
+.add-clip { min-height: 0; overflow: hidden; }
+/* A faint recess, the same one an open schedule's rows sit in: an open thing
+   in this column is set INTO it, not raised off it. */
+.add-inner {
+  margin: 0 0 10px;
+  padding: 6px;
+  border-radius: 12px;
+  background: var(--bg-4);
+  box-shadow: inset 0 0 0 1px var(--line-3);
+  opacity: 0;
+  translate: 0 -6px;
+  transition: opacity 140ms var(--ease), translate 240ms var(--ease-out-strong);
+}
+.add-panel[data-open="true"] .add-inner {
+  opacity: 1;
+  translate: 0 0;
+  transition-delay: 40ms;
+}
+
+/* In the recess the field is paper with a hairline — a hollow inside a hollow
+   would disappear. */
+.search-pill.add-search {
+  background: var(--paper);
+  box-shadow: inset 0 0 0 1px var(--line-2);
+}
+.search-pill.add-search:focus-within {
+  background: var(--paper);
+  box-shadow: inset 0 0 0 1px var(--accent-line),
+    0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
+}
+.add-busy { display: inline-flex; width: 14px; height: 14px; flex: none; }
+.add-busy[hidden] { display: none; }
+.add-busy svg { width: 14px; height: 14px; animation: spin 0.9s linear infinite; }
+
+.add-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  max-height: 248px;
+  overflow-y: auto;
+}
+.add-search + .add-list:not(:empty) { margin-top: 6px; }
+
+/* One line per candidate: its name, where it comes from, and a round door. */
+.add-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 34px;
+  padding: 0 5px 0 8px;
+  flex: none;
+  border-radius: var(--radius-row);
+  text-align: left;
+  color: var(--text-1);
+  transition: background-color var(--fast) var(--ease);
+}
+.add-row:hover { background: var(--bg-3); }
+.add-row:focus-visible {
+  outline: none;
+  background: var(--bg-3);
+  box-shadow: inset 0 0 0 1px var(--accent-line);
+}
+.add-row .glyph {
+  display: inline-flex;
+  justify-content: center;
+  width: 16px;
+  flex: none;
+  color: var(--text-3);
+}
+.add-row .glyph svg { width: 15px; height: 15px; }
+.add-row .name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-base);
+  font-weight: 500;
+}
+.add-row .name.mono { font-family: var(--font-code); font-size: 12.5px; font-weight: 400; }
+.add-row .value {
+  flex: 0 1 auto;
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-sm);
+  color: var(--text-3);
+}
+.add-row .value.mono { font-family: var(--font-code); font-size: var(--text-xs); }
+.add-row .door {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  border-radius: 999px;
+  color: var(--accent-text);
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
+}
+.add-row .door svg { width: 14px; height: 14px; }
+.add-row:hover .door { background: var(--accent-soft); }
+/* Already in: the row stays where it was — a list that reshuffles under the
+   cursor loses your place — and its door becomes a quiet check. */
+.add-row[aria-disabled="true"] { cursor: default; }
+.add-row[aria-disabled="true"]:hover { background: none; }
+.add-row[aria-disabled="true"] .name { color: var(--text-3); }
+.add-row[aria-disabled="true"] .door,
+.add-row[aria-disabled="true"]:hover .door { background: none; color: var(--text-3); }
+.add-row.empty { cursor: default; }
+.add-row.empty:hover { background: none; }
+.add-row.empty .name { font-weight: 400; color: var(--text-3); }
+
+/* A newcomer arrives with a wash of the accent that fades where it landed. */
+[data-arrive] { animation: arrive 1600ms var(--ease) both; }
+@keyframes arrive {
+  0%, 30% { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
+  100% { background-color: transparent; }
+}
+
+/* ---------------------------------------------------------------------------
+   The add window
+   ---------------------------------------------------------------------------
+   Searching a catalog is a place of its own, so it opens the way the OS view
+   opens one: a real window over the page — glass with a 26px bar, the three
+   lights at its left, dragged by that bar. The column behind it does not
+   move, and what you add appears there while it is still open. */
+.os-window {
+  position: fixed;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  /* A gallery needs a gallery's room: three tiles across at rest, more when
+     the page is wide. The Store window learned the same thing. */
+  width: min(720px, calc(100vw - 32px));
+  height: min(520px, calc(100vh - 110px));
+  overflow: hidden;
+  border: 1px solid var(--window-rim);
+  border-radius: 15.6px;
+  background-image: linear-gradient(to bottom,
+    color-mix(in srgb, var(--window-glass) 78%, transparent), var(--window-glass));
+  -webkit-backdrop-filter: blur(26px) saturate(185%);
+  backdrop-filter: blur(26px) saturate(185%);
+  box-shadow: 0 18px 50px rgb(0 0 0 / 0.28), 0 2px 10px rgb(0 0 0 / 0.12),
+    inset 0 1px 0 rgb(255 255 255 / 0.4);
+  animation: window-in 180ms var(--ease-out-strong) both;
+}
+.os-window[hidden] { display: none; }
+@keyframes window-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.985); }
+  to { opacity: 1; transform: none; }
+}
+
+.os-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 26px;
+  padding: 0 8px;
+  flex: none;
+  cursor: grab;
+  user-select: none;
+}
+.os-titlebar:active { cursor: grabbing; }
+.os-title {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text-1);
+  text-shadow: 0 1px 0 rgb(255 255 255 / 0.7);
+}
+:root[data-theme="dark"] .os-title { text-shadow: none; }
+
+/* The three lights: the product's tinted-glass orbs, the red one live. */
+.os-lights { display: flex; align-items: center; gap: 6px; width: 64px; flex: none; }
+.os-light-hit {
+  display: grid;
+  place-items: center;
+  width: 21px;
+  height: 21px;
+  margin: -3px;
+}
+.os-light {
+  display: grid;
+  place-items: center;
+  position: relative;
+  overflow: hidden;
+  width: 13px;
+  height: 13px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  color: transparent;
+  background: linear-gradient(color-mix(in srgb, var(--accent) 80%, transparent),
+    color-mix(in srgb, var(--accent) 58%, transparent));
+  box-shadow: 0 2px 3px rgb(0 0 0 / 0.2), 0 1px 1px rgb(0 0 0 / 0.3),
+    inset 0 0 0 0.5px rgb(0 0 0 / 0.45), inset 0 1px 1px rgb(255 255 255 / 0.45),
+    inset 0 2px 3px 1px color-mix(in srgb, var(--accent) 60%, transparent);
+  transition: filter 150ms linear, color 150ms linear;
+}
+.os-light::before {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 3px;
+  right: 3px;
+  height: 28%;
+  border-radius: 6px 6px 0 0;
+  background: linear-gradient(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.3));
+}
+.os-light::after {
+  content: "";
+  position: absolute;
+  bottom: 1px;
+  left: 1.5px;
+  right: 1.5px;
+  height: 33%;
+  border-radius: 0 0 6px 6px;
+  background: linear-gradient(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.5));
+}
+.os-lights:hover .os-light:not(.idle) { color: rgb(0 0 0 / 0.55); }
+.os-light-hit:hover .os-light:not(.idle) { filter: brightness(1.1); }
+.os-light.idle {
+  background: linear-gradient(rgb(160 160 160 / 0.625), rgb(255 255 255 / 0.625));
+  box-shadow: 0 2px 3px rgb(0 0 0 / 0.2), 0 1px 1px rgb(0 0 0 / 0.3),
+    inset 0 0 0 0.5px rgb(0 0 0 / 0.3), inset 0 1px 2px rgb(0 0 0 / 0.4),
+    inset 0 2px 3px 1px #bbbbbb;
+}
+
+/* The body is the OS view's own frame (globals.css `.settings-frame`): two
+   wells recessed into the window's glass, a 5px seam of pane between them,
+   4px of pane all round — and the OS face on everything inside, because
+   that face IS half of what makes a window read as a window. */
+.os-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 5px;
+  padding: 4px;
+  font-family: var(--font-os);
+}
+
+.os-well {
+  border: 1px solid var(--well-recess-rim);
+  background: var(--well-recess);
+  box-shadow: var(--well-recess-shade);
+}
+
+/* The places, down the left. Bare glass: it is chrome, not content. */
+.os-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  width: 128px;
+  flex: none;
+  overflow-y: auto;
+  padding: 6px;
+}
+/* A place is its object and its name — the rail rows in the Store and
+   Creations carry the system's own artwork, and a rail of bare words is the
+   other half of why this window did not read as one of theirs. */
+.os-place {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 8px;
+  border-radius: 5px;
+  text-align: left;
+  font-size: 12.5px;
+  color: #1c1c1c;
+  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
+}
+:root[data-theme="dark"] .os-place { color: var(--text-1); }
+.os-place .place-mark { width: 24px; height: 24px; flex: none; object-fit: contain; }
+.os-place:hover { background: rgb(0 0 0 / 0.05); }
+:root[data-theme="dark"] .os-place:hover { background: var(--row-hover); }
+.os-place[aria-pressed="true"],
+.os-place[aria-pressed="true"]:hover {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #ffffff) 0%, var(--accent) 100%);
+  color: #ffffff;
+  font-weight: 500;
+}
+
+/* The sheet: the same recessed well, in paper. */
+.os-sheet {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  background: var(--sheet-fill);
+}
+/* Its title line names the place and carries the field at the far end —
+   the arrangement the Store window wears. */
+.os-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 36px;
+  flex: none;
+  padding: 2px 8px 0 12px;
+}
+.os-head[hidden] { display: none; }
+.os-place-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  color: #222222;
+  text-shadow: var(--etch);
+}
+:root[data-theme="dark"] .os-place-title { color: var(--text-1); }
+.search-pill.os-search {
+  flex: 0 1 auto;
+  width: 200px;
+  height: 28px;
+  padding: 0 6px 0 10px;
+  background: rgb(255 255 255 / 0.6);
+  box-shadow: inset 0 1.5px 3px rgb(0 10 40 / 0.14);
+  border: 1px solid rgb(0 0 0 / 0.18);
+  border-radius: 999px;
+}
+:root[data-theme="dark"] .search-pill.os-search {
+  background: var(--well-fill);
+  border-color: var(--well-rim);
+  box-shadow: var(--well-shade);
+}
+.search-pill.os-search input { font-size: 12.5px; }
+.search-pill.os-search:focus-within {
+  border-color: color-mix(in srgb, var(--accent) 55%, rgb(0 0 0 / 0.1));
+  box-shadow: inset 0 1.5px 3px rgb(0 10 40 / 0.1), 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+}
+/* The scroller under the title line, hairlined off it the way the Store's
+   list is. */
+.os-rows {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 2px 8px 10px;
+  border-top: 1px solid var(--sheet-rule);
+}
+.os-rows.on-page { border-top: 0; padding-top: 0; }
+
+/* ---------------------------------------------------------------------------
+   The gallery
+   ---------------------------------------------------------------------------
+   A catalog is looked OVER, not read line by line: one tile per thing, no
+   rules between them, and a band heading only where two kinds of thing share
+   a place. The grid asks for a tile floor rather than breakpoints — below it
+   a name truncates mid-word, above it the field simply fills. */
+.os-band {
+  margin: 12px 4px 4px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-4);
+}
+.os-band:first-child { margin-top: 2px; }
+.os-tiles {
+  display: grid;
+  /* A tile floor rather than breakpoints. The Store sits at 9rem in a
+     1040px window; this window is 720, so the floor comes down to keep the
+     same NUMBER of tiles across — four, where three left a field of air. */
+  grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr));
+  gap: 2px;
+}
+
+/* A tile is four things and no more: the mark, the name, one line of what it
+   is, and the way in. Its rhythm is fixed — 8px under the mark, 4px between
+   the name and the line about it, 10px before the verb — so a tile whose
+   name wraps is simply a line taller and its neighbours' slack falls below
+   their verbs, where it is just space. Never a backdrop filter: this is an
+   element that MULTIPLIES with the data, and a field of glass stops the
+   window compositing at all. */
+.os-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  padding: 8px 6px;
+  border-radius: 10px;
+  text-align: center;
+  transition: background-color var(--fast) var(--ease);
+}
+.os-tile:hover { background: var(--row-hover); }
+/* The tile's own door, under everything it holds — the way in to the page
+   where the grant is narrowed. */
+.tile-door {
+  position: absolute;
+  inset: 0;
+  /* Over everything the tile holds: the mark is positioned (its letters sit
+     under the artwork), so without this the door would paint beneath it and
+     a click on the logo would land on nothing. */
+  z-index: 1;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.tile-door:focus-visible { outline: none; box-shadow: var(--ring); }
+.tile-name {
+  margin-top: 6px;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--text-1);
+  overflow: hidden;
+}
+/* One line, always: a field of tiles that do not line up is worse to read
+   than a name that ends in an ellipsis, and the page carries the whole name
+   one click away. The ellipsis has to live on a CHILD — bare text in a flex
+   row is an anonymous item and truncates nowhere, which is how a long name
+   came to hang out of the window. The seal beside it is never squeezed. */
+.tile-name .name-text,
+.page-name .name-text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* ONE line, whatever it says — what a system tool does, or whether a
+   connection is linked. A second line of prose is the difference between six
+   tiles on screen and twelve, and the whole of it waits on the page. */
+.tile-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 3px;
+  width: 100%;
+  font-size: 10.5px;
+  line-height: 1.4;
+  color: var(--text-4);
+  overflow: hidden;
+}
+/* The ellipsis lives on the span, never on the row: bare text in a flex
+   container is an anonymous item, which truncates nowhere and bleeds out of
+   both ends of a centred tile. Same lesson as the name above. */
+.tile-line .line-text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* A connection's line is its state, in the tone of its orb. */
+.tile-line.link-state { color: var(--text-3); }
+.tile-line.link-state.ok { color: var(--success); }
+.tile-line.link-state.danger { color: var(--danger); }
+.tile-line .orb { width: 8px; height: 8px; }
+.tile-verb {
+  position: relative;
+  z-index: 2;
+  margin-top: 8px;
+  height: 21px;
+  padding: 0 11px;
+  font-size: 11px;
+  border-radius: 999px;
+}
+.tile-state {
+  /* A state, not a control: the click falls through to the tile's own door,
+     which is where the grant is narrowed. */
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  margin-top: 8px;
+  height: 21px;
+  padding: 0 9px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-3);
+  background: var(--bg-3);
+}
+.tile-state.whole { color: var(--success); }
+.tile-state svg { width: 12px; height: 12px; }
+.os-empty {
+  margin: 16px 8px;
+  font-size: 12px;
+  color: var(--text-4);
+  text-align: center;
+}
+
+/* The mark. An OBJECT stands free — the platform's own artwork is a lit
+   thing on transparency, and a plate behind it reads as a frame around a
+   cut-out (ArtifactIcon.tsx says the same). A connector's brand LOGO keeps
+   the white tile the product draws it on: a mark in flat black would
+   otherwise vanish into a dark theme. */
+.thing-mark {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  flex: none;
+  color: var(--text-2);
+}
+.thing-mark img {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.thing-mark.plate {
+  border-radius: 10px;
+  background: var(--card-fill);
+  box-shadow: inset 0 0 0 1px var(--line-2);
+  overflow: hidden;
+}
+.thing-mark.plate img { width: 22px; height: 22px; }
+.thing-mark svg { width: 19px; height: 19px; }
+.thing-mark .mark-letters {
+  position: absolute;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: capitalize;
+  color: var(--text-3);
+}
+.thing-mark.glyph .mark-letters { display: none; }
+/* White under a brand logo in both themes, the way ConnectorIcon paints it. */
+.thing-mark.plate:has(img) { background: #ffffff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); }
+/* Artwork that never arrived: the plate comes back, with the initials on it. */
+.thing-mark.bare { border-radius: 10px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-3); }
+
+/* Terminus's own seal, worn after an official name. */
+.seal { display: inline-block; flex: none; width: 12px; height: 12px; vertical-align: -1px; overflow: visible; }
+.page-name .seal { width: 15px; height: 15px; }
+
+/* ---------------------------------------------------------------------------
+   A thing's page
+   ---------------------------------------------------------------------------
+   Where the decision is made: what it is, and a line per thing it may do,
+   each a box you tick. Never an add-then-remove flow — the page shows every
+   candidate and the box says yes. */
+.os-page { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 10px; }
+.page-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 8px;
+  padding: 2px 6px 2px 2px;
+  border-radius: 6px;
+  font-size: 11.5px;
+  color: var(--text-3);
+}
+.page-back:hover { background: var(--row-hover); color: var(--text-1); }
+.page-back svg { width: 14px; height: 14px; rotate: 90deg; }
+.page-head { display: flex; align-items: center; gap: 10px; }
+.page-titles { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
+.page-name {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-brand);
+  font-size: 19px;
+  font-weight: 500;
+  color: var(--text-1);
+}
+.page-sub {
+  font-family: var(--font-code);
+  font-size: 11px;
+  color: var(--text-4);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.page-action { flex: none; height: 24px; padding: 0 13px; font-size: 11.5px; }
+.page-note { margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: var(--text-2); }
+.page-facts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 7px 2px 0;
+  font-size: 11px;
+  color: var(--text-3);
+}
+.page-facts .dot { color: var(--text-4); }
+.page-facts .orb { margin-right: 3px; vertical-align: -1px; }
+/* What the manifest says about WHEN to reach for this — the note compiled
+   into the agent's prompt, shown where the grant is. */
+.page-when {
+  display: flex;
+  gap: 6px;
+  margin: 7px 2px 0;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--text-3);
+}
+.page-when span {
+  flex: none;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  line-height: 1.7;
+  text-transform: uppercase;
+  color: var(--text-4);
+}
+.page-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin: 8px 2px 0;
+  font-size: 11.5px;
+  text-decoration: none;
+}
+.page-link:hover { text-decoration: underline; }
+.page-link svg { width: 13px; height: 13px; }
+.page-quiet { margin: 10px 2px 0; font-size: 11.5px; color: var(--text-4); }
+.os-page .cap-group { margin: 14px 2px 4px; }
+.os-page .rows { border-radius: 8px; }
+.os-page .model-row { min-height: 40px; align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }
+.part-note {
+  display: block;
+  margin-top: 2px;
+  font-size: 10.5px;
+  line-height: 1.35;
+  color: var(--text-4);
+}
+.os-page .model-row .meta { flex-direction: column; align-items: flex-start; gap: 0; }
+.os-page .model-row .label { font-size: 12px; font-weight: 500; }
+/* An operation is an id — the word that goes in terminus.json — so it is
+   set in the code face, the way every id on this page is. */
+.os-page .model-row .label.mono { font-family: var(--font-code); font-size: 11.5px; font-weight: 400; }
+
+/* Aqua's other push-button: the Cancel grey, for a verb that is not asking
+   for anything. Poured from the same gradients as the accent gel, so a
+   field of them costs the compositor nothing. */
+.gel-quiet,
+.tile-verb.gel {
+  --gel-crown: #e6e7ea;
+  --gel-foot: #fdfdfe;
+  --gel-rim-crown: #8e9096;
+  --gel-rim-foot: hsl(0 0% 62%);
+  --gel-label: #1b1d22;
+}
+:root[data-theme="dark"] .gel-quiet,
+:root[data-theme="dark"] .tile-verb.gel {
+  --gel-crown: #565a63;
+  --gel-foot: #8b9099;
+  --gel-rim-crown: #2b2e34;
+  --gel-rim-foot: hsl(0 0% 28%);
+  --gel-label: #f5f6f8;
+}
+
+/* ------------------------------------------------------------------------- */
+/* Popovers and toast                                                        */
+/* ------------------------------------------------------------------------- */
+
+.model-pop {
+  position: absolute;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 16px;
+  background: var(--pop-fill);
+  box-shadow: var(--pop-throw);
+}
+.model-pop .heading { padding: 12px 14px 6px; }
+.model-pop .heading .sw-heading { font-size: 16px; }
+.model-pop .columns { flex: 1; min-height: 0; display: flex; }
+.model-pop .models { flex: 1; min-height: 0; padding: 0 6px 6px; }
+.model-pop .empty { margin: 0; padding: 14px; font-size: var(--text-base); color: var(--text-3); }
+
+.model-pop .row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 9px;
+  border-radius: 10px;
+  text-align: left;
+  transition: background-color var(--fast) var(--ease);
+}
+.model-pop .row:hover { background: var(--bg-3); }
+.model-pop .row .name {
+  display: block;
+  font-size: var(--text-base);
+  color: var(--text-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-pop .row .name.selected { font-weight: 600; }
+.model-pop .row .meta {
+  display: block;
+  font-family: var(--font-code);
+  font-size: var(--text-xs);
+  color: var(--text-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-pop .row .check { display: inline-flex; color: var(--accent-text); flex: none; }
+.model-pop .row .check svg { width: 14px; height: 14px; }
+
+.t-pop { animation: pop-in var(--normal) var(--ease-out-strong) both; }
+.t-pop[data-state="closed"] { animation: pop-out var(--fast) var(--ease) both; }
+@keyframes pop-in {
+  from { opacity: 0; transform: translateY(4px) scale(0.985); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes pop-out {
+  from { opacity: 1; transform: none; }
+  to { opacity: 0; transform: translateY(2px) scale(0.99); }
+}
+.t-collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--normal) var(--ease);
+}
+.t-collapse[data-open="true"] { grid-template-rows: 1fr; }
+.t-collapse > * { min-height: 0; overflow: hidden; }
+
+/* The toast: a capsule under the conversation. */
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 28px;
+  translate: -50% 0;
+  z-index: 60;
+  max-width: min(78vw, 560px);
+  padding: 9px 16px;
+  border-radius: 999px;
+  background: var(--pop-fill);
+  box-shadow: var(--pop-throw);
+  color: var(--text-1);
+  font-size: var(--text-base);
+  font-weight: 500;
+  text-align: center;
+  animation: toast-in var(--normal) var(--ease-out-strong) both;
+}
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: none; }
+}
+
+.t-fade-up { animation: fade-up var(--normal) var(--ease-out-strong) both; }
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* ------------------------------------------------------------------------- */
+/* History: the record lives in dev.db; this plane reads it                  */
+/* ------------------------------------------------------------------------- */
+
+.history { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.history-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  max-width: calc(var(--measure) + 2 * var(--gutter));
+  margin: 0 auto;
+  padding: 22px var(--gutter) 10px;
+}
+.history-head .title {
+  min-width: 0;
+  font-family: var(--font-brand);
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.015em;
+  color: var(--text-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.history-head .meta { font-size: var(--text-sm); color: var(--text-3); white-space: nowrap; }
+.history-head [data-history-back] { margin-left: -8px; }
+.history-head [data-history-back] svg { transform: rotate(90deg); }
+.history-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--gutter) 24px; }
+.history-list > .rows { max-width: var(--measure); margin: 0 auto; }
+.history-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: "title when" "meta when";
+  align-items: center;
+  column-gap: 16px;
+  row-gap: 2px;
+  width: 100%;
+  padding: 11px 4px;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+.history-row .title {
+  grid-area: title;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-size: var(--text-read);
+  font-weight: 500;
+  color: var(--text-1);
+}
+.history-row .title .text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.history-row .meta { grid-area: meta; font-size: var(--text-sm); color: var(--text-3); }
+.history-row .when { grid-area: when; font-size: var(--text-sm); color: var(--text-3); }
+.history-row:hover .title { color: var(--accent-text); }
+.history .transcript { flex: 1; min-height: 0; overflow-y: auto; }
+.history .transcript-inner { padding-top: 12px; }
+
+/* ------------------------------------------------------------------------- */
+/* Narrow viewports                                                          */
+/* ------------------------------------------------------------------------- */
+
+@media (max-width: 860px) {
+  :root { --sidebar-w: 208px; --inspector-w: 300px; }
+  .brand .name { font-size: 20px; }
+}
+
+@media (max-width: 560px) {
+  .spend-readout { display: none; }
+  /* The provider's mark still says which model; the name gives the words
+     their room. */
+  .model-trigger .label { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+  }
+}