@jossuealcala/madre 0.3.2 → 0.4.0

package/public/styles.css

@@ -17,7 +17,7 @@
   --text-3: #626a5f;
 
   --phosphor: #9bff66;           /* MOTHER */
-  --brew: #28fe14;               /* ORDER 937: Terminal.app 'Homebrew' green */
+  --brew: #28fe14;               /* Terminal.app 'Homebrew' green */
   --brew-ink: #041004;
   --phosphor-ink: #0a1405;
   --accent: var(--phosphor);
@@ -39,6 +39,7 @@
   --mode-1: var(--phosphor); --mode-1-ink: var(--phosphor-ink);   /* EXCHANGE · phosphor */
   --mode-2: #ffb000; --mode-2-ink: #1a1000;        /* CREATE · amber phosphor */
   --mode-3: var(--terror); --mode-3-ink: #fff3f1;  /* CONTROL · the red screen */
+  --mode-4: #8fd3ff; --mode-4-ink: #04131c;        /* AIRLOCK · the cold outside */
 }
 @media (prefers-color-scheme: light) {
   :root:not([data-theme="dark"]) {
@@ -65,6 +66,7 @@
     --mode-0: #6f786e; --mode-0-ink: #ffffff;
     --mode-2: #a06e00; --mode-2-ink: #ffffff;
     --mode-3: #d81b12; --mode-3-ink: #ffffff;
+    --mode-4: #0b6fa8; --mode-4-ink: #ffffff;
   }
 }
 :root[data-theme="light"] {
@@ -115,7 +117,7 @@ body {
 /* The bar is the ship's console: wider than the thread so the project root, the crew and the alerts share one line. */
 .shell > .bar { width: min(1280px, 100% - 40px); }
 .shell > .bar { grid-row: 1; } .shell > .onboarding { grid-row: 2; } .shell > .thread { grid-row: 3; } .shell > .composer { grid-row: 4; } .shell > .safety { grid-row: 5; }
-.shell > .bar, .shell > .onboarding, .shell > .thread, .shell > .composer, .shell > .safety, .shell > .tree { grid-column: 1; }
+.shell > .bar, .shell > .onboarding, .shell > .thread, .shell > .composer, .shell > .safety, .shell > .tree, .shell > .chats-button { grid-column: 1; }
 .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 
 /* ================= bar ================= */
@@ -127,6 +129,7 @@ body {
   color: var(--text-2);
 }
 .bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
+.bar-left .project + .project { margin-left: -6px; }
 .brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; letter-spacing: .22em; font-size: 11px; text-decoration: none; cursor: pointer; }
 .brand:hover .brand-mark { filter: drop-shadow(0 0 10px var(--phosphor)); } .brand:hover .brand-word { color: var(--phosphor); }
 .brand-mark { width: 64px; height: 18px; color: var(--phosphor); overflow: visible; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--phosphor) 55%, transparent)); }
@@ -142,7 +145,7 @@ body {
   .brand-mark .beat-dot { animation: none; opacity: 1; }
   .brand-word { animation: none; opacity: 1; transform: none; }
 }
-.project { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
+.project { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
 .update-command { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); }
 .update-command code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--text); }
 .update-command button { font: inherit; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); background: transparent; color: var(--text-2); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
@@ -213,7 +216,9 @@ code { font-family: var(--mono); font-size: .9em; color: var(--phosphor); backgr
 .row.compact .avatar { visibility: hidden; }
 .row.user { grid-template-columns: 1fr; align-self: flex-end; justify-items: end; }
 .row .col { display: grid; gap: 6px; min-width: 0; }
-.who { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--agent, var(--text-2)); margin: 0 0 2px 12px; display: flex; gap: 10px; align-items: baseline; }
+.who { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--agent, var(--text-2)); margin: 0 0 2px 12px; display: flex; gap: 10px; align-items: baseline; min-width: 0; }
+/* The quoted line gives way first: the cost and who spoke are short and must not be pushed out. */
+.who .reply { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .user .who { color: var(--text-3); margin: 0 12px 2px 0; justify-content: flex-end; }
 .user .who b { color: var(--phosphor); font-weight: 600; }
 .user.expendable .who b { color: var(--crit); }
@@ -267,6 +272,10 @@ code { font-family: var(--mono); font-size: .9em; color: var(--phosphor); backgr
 @keyframes status-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
 @keyframes cursor-blink { 50% { opacity: 0; } }
 .row.thinking .elapsed { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text-3); margin-left: 8px; }
+/* What a turn is reading, while it reads it, and what it was charged once it is done. */
+.row.thinking .tokens { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text-3); margin-left: 8px; opacity: .75; }
+/* What a reply cost, on the same line as everything else above the bubble: no pill, no wrap. */
+.who .spent { flex: none; margin-left: auto; padding: 0; border: 0; background: none; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--text-3); white-space: nowrap; }
 .row.thinking .elapsed.late { color: var(--warn); }
 .row.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--agent, var(--text-2)); animation: bounce 1.2s infinite; opacity: .5; }
 .row.thinking i:nth-child(2) { animation-delay: .18s; } .row.thinking i:nth-child(3) { animation-delay: .36s; }
@@ -287,18 +296,20 @@ code { font-family: var(--mono); font-size: .9em; color: var(--phosphor); backgr
 .system.memory .brief { text-transform: none; letter-spacing: 0; color: var(--text-2); }
 
 /* NOSTROMO: the archive as a small solar system. One colour per kind of memory. */
-:root { --mem-decision: #ffb000; --mem-fact: #9bff66; --mem-preference: #d78cff; --mem-question: #5fd6ff; --nostromo-sun: #ff2a1f; }
+:root { --mem-decision: #ffdc3c; --mem-fact: #dfeeff; --mem-preference: #5cf07a; --mem-question: #3dc6ff; --mem-aberration: #b14cff; --nostromo-sun: #ff2a1f; }
 .nostromo-button { color: var(--terror); border-color: color-mix(in srgb, var(--terror) 55%, transparent); }
 .nostromo-button:hover { background: color-mix(in srgb, var(--terror) 14%, transparent); }
 dialog.nostromo { color: #eef1ea; }
 dialog.nostromo::backdrop { background: #000; }
 .nostromo-frame { --ph: #ffb4ad; --ph-dim: rgba(255, 42, 31, .55); --ph-faint: rgba(255, 42, 31, .16); position: relative; height: 100%; background: #030203; font-family: var(--mono); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
-.nostromo-head { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 18px; align-items: center; padding: 18px 26px 14px; border-bottom: 1px solid var(--ph-faint); color: var(--ph); position: relative; z-index: 2; }
+.nostromo-head { display: grid; grid-template-columns: auto 1fr; grid-auto-flow: column; grid-auto-columns: max-content; gap: 18px; align-items: center; padding: 18px 26px 14px; border-bottom: 1px solid var(--ph-faint); color: var(--ph); position: relative; z-index: 2; }
 .nostromo-head .mother-title { color: var(--nostromo-sun); text-shadow: 0 0 18px color-mix(in srgb, var(--nostromo-sun) 60%, transparent); }
-.nostromo-head .mother-sub { color: var(--ph-dim); }
-.nostromo-legend { display: flex; gap: 8px; }
-.nostromo-legend .k { font-size: 9px; letter-spacing: .16em; padding: 3px 8px; border: 1px solid; border-radius: 999px; }
-.nostromo-legend .k.decision { color: var(--mem-decision); } .nostromo-legend .k.fact { color: var(--mem-fact); } .nostromo-legend .k.preference { color: var(--mem-preference); } .nostromo-legend .k.question { color: var(--mem-question); }
+.nostromo-head .mother-sub { color: var(--ph-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nostromo-legend { display: flex; gap: 16px; align-items: center; }
+.nostromo-legend .k { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .16em; }
+.nostromo-legend .k canvas { display: block; }
+.nostromo-legend .k i { font-style: normal; }
+.nostromo-legend .k.decision { color: var(--mem-decision); } .nostromo-legend .k.fact { color: var(--mem-fact); } .nostromo-legend .k.preference { color: var(--mem-preference); } .nostromo-legend .k.question { color: var(--mem-question); } .nostromo-legend .k.aberration { color: var(--mem-aberration); }
 .nostromo-frame .mother-close { color: var(--ph); border-color: var(--ph-dim); }
 .nostromo-frame .mother-close:hover { background: var(--ph-faint); }
 .nostromo-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
@@ -323,16 +334,192 @@ dialog.nostromo::backdrop { background: #000; }
 .nostromo-card .text { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; font-size: 14px; line-height: 1.5; color: #eef1ea; }
 .nostromo-card .meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 10px; letter-spacing: .1em; }
 .nostromo-card .meta dt { color: var(--ph-dim); } .nostromo-card .meta dd { margin: 0; color: #c9c2bf; }
+/* What this memory is wired to, and what has actually passed between it and the room. The list
+   is the same set of wires the map draws: hovering a row lights its filament out there. */
+.nostromo-card .wire { display: grid; gap: 7px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 11px; }
+.nostromo-card .wire h6 { margin: 0; font-size: 9px; font-weight: 400; letter-spacing: .22em; color: var(--ph-dim); display: flex; align-items: center; gap: 8px; }
+.nostromo-card .wire h6 .n { color: #c9c2bf; }
+.nostromo-card .wire h6 .live { color: var(--kind, var(--ph)); font-size: 7px; animation: blink 2.4s steps(1) infinite; margin-left: auto; }
+.nostromo-card .exchange { margin: 0; white-space: pre-line; font-size: 10.5px; line-height: 1.6; letter-spacing: .06em; color: #c9c2bf; }
+.nostromo-card .wires { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 148px; overflow-y: auto; }
+.nostromo-card .wires .none { font-size: 10px; letter-spacing: .08em; color: var(--ph-dim); padding: 2px 0; }
+.nostromo-card .wire-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px 4px 2px; cursor: pointer; border: 1px solid transparent; }
+.nostromo-card .wire-row:hover { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); }
+.nostromo-card .wire-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--kind, var(--ph)); box-shadow: 0 0 8px var(--kind, var(--ph)); }
+.nostromo-card .wire-row .what { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; font-size: 11.5px; line-height: 1.4; color: #d7d2cf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nostromo-card .wire-row b { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; color: var(--ph-dim); }
+.nostromo-card .wire-row.refuted b { color: var(--nostromo-sun); }
+/* Company strong enough that recalling one now brings the other: the association is live. */
+/* What to ask next: a panel on the other side of the map from the memory card, so the two can
+   be open one after the other and never fight for the same corner. */
+.nostromo-card.asks { right: auto; left: 26px; width: min(420px, calc(100vw - 52px)); border-color: rgba(255, 255, 255, .14); }
+.nostromo-card.asks .kind { color: #d7d2cf; text-shadow: none; }
+.nostromo-card.asks .foot { margin: 0; }
+.asks-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-height: min(58vh, 520px); overflow-y: auto; }
+.asks-list .none { font-size: 11px; letter-spacing: .06em; color: var(--ph-dim); }
+.asks-list .ask { display: grid; gap: 6px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .1); border-left: 2px solid var(--well, rgba(255, 255, 255, .3)); background: rgba(255, 255, 255, .03); }
+.asks-list .ask-open { --well: #3dc6ff; }
+.asks-list .ask-cold { --well: #96b0c6; }
+.asks-list .ask-thin { --well: #ffdc3c; }
+.asks-list .ask .q { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; font-size: 13px; line-height: 1.5; color: #eef1ea; }
+.asks-list .ask .why { margin: 0; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; line-height: 1.5; color: var(--ph-dim); }
+.asks-list .ask .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
+.asks-list .ask button { border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #d7d2cf; font: inherit; font-size: 9px; letter-spacing: .16em; padding: 6px 10px; cursor: pointer; }
+.asks-list .ask button.primary { border-color: var(--well); color: var(--well); }
+.asks-list .ask button:hover { background: rgba(255, 255, 255, .06); }
+.asks-list .ask button:disabled { opacity: .45; cursor: default; }
+.nostromo-head .mother-close.ask { color: #d7d2cf; border-color: rgba(255, 255, 255, .28); }
+.nostromo-head .mother-close.ask[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: #fff; }
+
+/* ================= the core =================
+   Inside the star, not looking at it: the field burns from the edges inward and breathes, and
+   the console sits on top of it in the panel's own phosphor. Nothing here is a new language —
+   the frame, the folds, the bars and the type are the ones MADRE already speaks. */
+/* The core opens from inside NOSTROMO, on top of the star itself: the field behind this frame is
+   the real one, still turning and still breathing. A second sun drawn here would be two. */
+.core::backdrop { background: radial-gradient(circle at 50% 50%, rgba(30, 2, 0, .58), rgba(0, 0, 0, .86) 72%); }
+.core .mother-frame { position: relative; z-index: 1; border-color: color-mix(in srgb, var(--nostromo-sun) 45%, var(--ph-dim)); box-shadow: 0 0 60px rgba(226, 40, 22, .22), 0 0 0 1px rgba(0, 0, 0, .6); }
+.core .mother-title { color: var(--nostromo-sun); text-shadow: 0 0 20px color-mix(in srgb, var(--nostromo-sun) 55%, transparent); }
+.core .mother-foot a { color: var(--ph-dim); text-decoration: none; }
+.core .mother-foot a:hover { color: var(--ph); }
+.core .mother-frame { display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; padding-bottom: 18px; }
+.core .mother-boot { margin: 12px 0 6px; min-height: 2.4em; font-size: 11px; }
+.core-body { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
+
+/* The strip: who it goes to, at what mode, and around what. One line each, never a paragraph. */
+.core-strip { display: grid; gap: 6px; border-bottom: 1px solid var(--ph-faint); padding-bottom: 10px; }
+.core-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.core-pick .k, .core-asking .k { font-size: 8.5px; letter-spacing: .22em; color: var(--ph-dim); }
+.core-agents { display: flex; flex-wrap: wrap; gap: 4px; }
+.core-agent { border: 1px solid var(--ph-faint); background: transparent; color: var(--ph-dim); font: inherit; font-size: 10px; letter-spacing: .12em; padding: 3px 8px; cursor: pointer; }
+.core-agent:hover { border-color: var(--ph-dim); color: var(--ph); }
+.core-agent.on { border-color: var(--ph); color: var(--ph); background: var(--ph-faint); }
+.core-agent.cold { opacity: .55; }
+.core-pick select { border: 1px solid var(--ph-faint); background: #000; color: var(--ph); font: inherit; font-size: 10px; letter-spacing: .12em; padding: 3px 6px; }
+.core-ceiling { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: var(--warn); }
+.core-asking { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
+.core-asking textarea { width: 100%; resize: none; border: 0; border-bottom: 1px solid var(--ph-faint); background: transparent; color: var(--ph); font: inherit; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; padding: 3px 0; }
+.core-asking textarea::placeholder { color: var(--ph-dim); opacity: .7; }
+.core-asking textarea:focus { outline: 0; border-bottom-color: var(--ph); }
+.core-asking .note { font-size: 8px; letter-spacing: .14em; color: var(--ph-dim); white-space: nowrap; }
+
+/* Four panes, one at a time, each tab carrying what is behind it. */
+.core-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
+.core-tab { display: grid; gap: 1px; text-align: left; border: 1px solid transparent; border-bottom: 1px solid var(--ph-faint); background: transparent; color: var(--ph-dim); font: inherit; padding: 6px 12px; cursor: pointer; }
+.core-tab b { font-size: 10px; font-weight: 600; letter-spacing: .18em; }
+.core-tab .meta { font-size: 8.5px; letter-spacing: .1em; opacity: .8; }
+.core-tab:hover { color: var(--ph); }
+.core-tab.on { color: var(--ph); border-color: var(--ph-faint); border-bottom-color: transparent; background: rgba(0, 0, 0, .45); }
+.core-panes { overflow: auto; min-height: 0; padding: 4px 2px 8px; transition: opacity .18s ease; }
+.core-panes.reading { opacity: .45; }
+.core-pane { display: grid; gap: 10px; align-content: start; min-width: 0; }
+.core-pane > *, .core-blocks, .core-block { min-width: 0; }
+
+/* `==> TITLE   meta`, and facts in two columns: how the terminal this frame is dressed as prints. */
+.brew-head { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
+.brew-head b { color: var(--nostromo-sun); text-shadow: none; letter-spacing: 0; }
+.brew-head .title { color: var(--ph); font-size: 10px; letter-spacing: .2em; }
+.brew-head .meta { color: var(--ph-dim); }
+.brew-rows { display: grid; gap: 4px; }
+.brew-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: baseline; }
+.brew-row .k { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--ph-dim); text-transform: uppercase; }
+.brew-row .v { font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: rgba(210, 255, 190, .88); text-shadow: none; }
+.brew-row .v .where { color: var(--ph-dim); }
+
+.core-doc, .core-launch, .core-outbound { display: grid; gap: 10px; }
+.core-blocks { display: grid; gap: 1px; }
+.core-block { border: 1px solid transparent; }
+.core-block > summary { display: grid; grid-template-columns: 14px 148px 72px minmax(140px, 1.1fr) minmax(0, 1.4fr); gap: 14px; align-items: center; padding: 5px 6px; cursor: pointer; list-style: none; }
+.core-block > summary::-webkit-details-marker { display: none; }
+.core-block:hover { border-color: var(--ph-faint); }
+.core-block[open] { border-color: var(--ph-faint); background: rgba(0, 0, 0, .35); }
+.core-block > summary .sign { font-style: normal; font-size: 11px; color: var(--nostromo-sun); text-shadow: none; }
+.core-block > summary b { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; color: var(--ph); text-shadow: none; }
+.core-block > summary .n { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--ph-dim); text-align: right; }
+.core-block > summary .weigh { height: 6px; background: var(--ph-faint); position: relative; }
+.core-block > summary .weigh::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: color-mix(in srgb, var(--nostromo-sun) 55%, var(--ph)); }
+.core-block > summary .when { font-size: 8.5px; letter-spacing: .1em; color: var(--ph-dim); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.core-text { position: relative; padding: 4px 8px 12px; }
+.core-from { margin: 0 0 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; line-height: 1.7; color: var(--ph-dim); text-transform: uppercase; }
+.core-from b { color: var(--ph); letter-spacing: .2em; margin-right: 8px; }
+.core-from .where { color: rgba(210, 255, 190, .72); }
+.core-text pre { margin: 0; max-height: 40vh; overflow: auto; padding: 12px 14px; border: 1px solid var(--ph-faint); background: #000; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: rgba(210, 255, 190, .92); text-shadow: none; }
+.core-copy-one { position: absolute; top: 12px; right: 18px; border: 1px solid var(--ph-faint); background: #000; color: var(--ph-dim); font: inherit; font-size: 8.5px; letter-spacing: .16em; padding: 4px 8px; cursor: pointer; }
+.core-copy-one:hover { color: var(--ph); border-color: var(--ph-dim); }
+.core-fixed { margin: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; line-height: 1.7; color: var(--ph-dim); border-left: 2px solid color-mix(in srgb, var(--nostromo-sun) 60%, transparent); padding-left: 12px; }
+.core-pane .note { margin: 0; font-size: 8.5px; letter-spacing: .12em; line-height: 1.7; color: var(--ph-dim); }
+
+/* THE LAUNCH: the command under the document, printed as it would be run. */
+.core-launch .mother-cmd { margin: 0; }
+.core-launch .mother-cmd pre { max-height: 32vh; overflow: auto; font-size: 11px; color: rgba(210, 255, 190, .92); text-shadow: none; }
+.core-server .tools { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
+.core-server .tools i { font-style: normal; font-size: 8.5px; letter-spacing: .1em; color: var(--ph-dim); border: 1px solid var(--ph-faint); padding: 1px 5px; }
+
+/* WHAT LEFT THIS MACHINE: the declaration, and the log that checks it. */
+.core-egress { display: grid; gap: 2px; }
+.egress { display: grid; grid-template-columns: 52px minmax(120px, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 8px; border: 1px solid transparent; }
+.egress:hover { border-color: var(--ph-faint); background: rgba(0, 0, 0, .3); }
+.egress .state { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--nostromo-sun); text-shadow: none; }
+.egress.off .state { color: var(--ph-dim); }
+.egress.local .state { color: #96b0c6; }
+.egress > b { font-size: 10px; letter-spacing: .1em; color: var(--ph); text-shadow: none; }
+.egress .n { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--ph-dim); text-align: right; white-space: nowrap; }
+.egress .what, .egress .when { grid-column: 2 / -1; margin: 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: rgba(210, 255, 190, .86); text-shadow: none; }
+.egress .when { font-size: 9px; letter-spacing: .1em; color: var(--ph-dim); text-transform: uppercase; }
+.egress .when i { font-style: normal; }
+.egress .when .where { color: rgba(210, 255, 190, .72); }
+.egress.off { opacity: .55; }
+.egress.off:hover { opacity: 1; }
+pre.core-egress-log { margin: 0; max-height: 34vh; overflow: auto; padding: 10px 12px; border: 1px solid var(--ph-faint); background: #000; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; white-space: pre; color: rgba(210, 255, 190, .92); text-shadow: none; }
+
+/* The prompt: always at the bottom, the way through all four panes. */
+.console-log { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: rgba(210, 255, 190, .92); text-shadow: none; }
+.console-log .said { color: var(--ph-dim); }
+.console-log .refused { color: var(--warn); }
+.console-line { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--ph-dim); padding-top: 10px; }
+.console-line .prompt { font-family: var(--mono); font-size: 13px; color: var(--nostromo-sun); text-shadow: none; }
+.console-line input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ph); font: inherit; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 0; }
+.console-line input:focus { outline: 0; }
+.console-line input::placeholder { color: var(--ph-dim); opacity: .7; letter-spacing: .14em; }
+.console-line input:disabled { opacity: .4; }
+.console-strikes { display: inline-flex; gap: 3px; }
+.console-strikes i { font-style: normal; font-size: 9px; color: var(--ph-faint); }
+.console-strikes i.on { color: var(--warn); }
+.console-help { border: 1px solid var(--ph-faint); background: transparent; color: var(--ph-dim); font: inherit; font-size: 8.5px; letter-spacing: .16em; padding: 3px 8px; cursor: pointer; }
+.console-help:hover { color: var(--ph); border-color: var(--ph-dim); }
+
+@media (max-width: 720px) {
+  .core-block > summary { grid-template-columns: 14px 1fr auto; }
+  .core-block > summary .weigh, .core-block > summary .when { display: none; }
+  .brew-row { grid-template-columns: 1fr; gap: 2px; }
+  .egress { grid-template-columns: 52px 1fr; }
+  .egress .n { grid-column: 1 / -1; text-align: left; }
+  .core-asking { grid-template-columns: 1fr; }
+  .core-asking .note { display: none; }
+}
+
+/* The cold zone: a colour that is not a memory kind and not the sun, so it never reads as life. */
+.nostromo-head .mother-close.cold { color: #96b0c6; border-color: color-mix(in srgb, #96b0c6 45%, transparent); }
+.nostromo-head .mother-close.cold[aria-pressed="true"] { background: color-mix(in srgb, #96b0c6 16%, transparent); color: #cfe0ec; }
+.nostromo-card .wire-row.carries b { color: var(--kind, var(--ph)); }
+.nostromo-card .wire-row.carries b::after { content: ' ⇢'; }
 .nostromo-card .forget { border: 1px solid var(--nostromo-sun); background: transparent; color: var(--nostromo-sun); font: inherit; font-size: 10px; letter-spacing: .18em; padding: 9px 12px; cursor: pointer; transition: background .2s; }
 .nostromo-card .forget:hover { background: color-mix(in srgb, var(--nostromo-sun) 14%, transparent); }
 .nostromo-card .forget.confirm { background: var(--nostromo-sun); color: #fff3f1; animation: blink 1s steps(1) infinite; }
 .nostromo-card .forget:disabled { opacity: .5; cursor: default; animation: none; }
 .nostromo-card .foot { margin: 0; font-size: 9px; letter-spacing: .1em; color: var(--ph-dim); line-height: 1.5; }
 .nostromo-empty { position: absolute; inset: 50% 0 auto 0; margin: 0; text-align: center; font-size: 11px; letter-spacing: .22em; color: var(--ph-dim); }
-@media (max-width: 720px) { .nostromo-head { grid-template-columns: auto 1fr auto; } .nostromo-legend { display: none; } .nostromo-card { right: 16px; left: 16px; width: auto; } }
+@media (max-width: 720px) { .nostromo-head { grid-template-columns: auto 1fr; gap: 10px; } .nostromo-legend { display: none; } .nostromo-card { right: 16px; left: 16px; width: auto; } }
 .system.memory.forgotten { color: var(--terror); }
 .system.memory.privacy { color: var(--warn); }
-.privacy-form textarea { min-height: 64px; resize: vertical; }
+/* The list of terms is the subject of this form, so it gets the whole width instead of a cell
+   beside the marker, where it was three lines wide and unreadable. */
+.privacy-form { grid-template-columns: 1fr minmax(160px, 260px); }
+.privacy-form > label:first-child { grid-column: 1 / -1; }
+.privacy-form textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
+.privacy-form .toggle { align-items: flex-start; line-height: 1.5; text-transform: none; letter-spacing: .1em; }
+.privacy-form .toggle input { margin: 2px 0 0; flex: none; }
+@media (max-width: 720px) { .privacy-form { grid-template-columns: 1fr; } }
 .system.mother-alert { display: grid; gap: 6px; justify-items: center; max-width: min(720px, 92%); padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--terror) 60%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--terror) 7%, transparent); color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 45%, transparent); }
 .system.mother-alert .head b { color: var(--terror); font-weight: 700; }
 .system.mother-alert .clear { color: var(--text); text-shadow: none; text-transform: none; letter-spacing: 0; font-size: 12px; }
@@ -344,6 +531,13 @@ dialog.nostromo::backdrop { background: #000; }
 .memory-hint .pill b { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--kind); }
 .memory-hint .pill:hover { background: color-mix(in srgb, var(--kind) 18%, transparent); color: var(--text); }
 .memory-hint .more { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); }
+/* Memory used is not memory saved: saving is an event, using happens on most turns. Same shape so
+   there is one thing to learn, quieter so it never competes with the answer it helped write. */
+.memory-hint.used { margin-top: 4px; opacity: .78; animation: none; }
+.memory-hint.used:hover { opacity: 1; }
+.memory-hint.used .lead { color: var(--text-3); }
+.memory-hint.used .pill { animation: none; box-shadow: none; font-size: 10.5px; padding: 2px 9px; }
+.memory-hint.used .pill.carried b::after { content: ' ⇢'; }
 @keyframes hint-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
 @keyframes hint-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kind) 55%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--kind) 0%, transparent), 0 0 18px color-mix(in srgb, var(--kind) 45%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
 @media (prefers-reduced-motion: reduce) { .memory-hint, .memory-hint .pill { animation: none; } }
@@ -367,11 +561,6 @@ dialog.nostromo::backdrop { background: #000; }
 .onboarding-eyebrow { margin: 0 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--phosphor); }
 .onboarding h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; font-weight: 600; }
 .onboarding p { margin: 0 0 14px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
-.onboarding-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
-.onboarding-list li { display: grid; grid-template-columns: 28px 100px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
-.onboarding-list .name { font-weight: 600; color: var(--text); }
-.onboarding-list .state { color: var(--text-2); font-size: 12.5px; }
-.onboarding-list .state b { color: var(--text); font-weight: 600; }
 .onboarding .hint { margin: 0; font-size: 12px; color: var(--text-3); }
 
 /* ================= composer ================= */
@@ -395,6 +584,7 @@ textarea::placeholder { color: var(--text-3); }
 .composer.m0 { --mode: var(--mode-0); --mode-ink: var(--mode-0-ink); }
 .composer.m2 { --mode: var(--mode-2); --mode-ink: var(--mode-2-ink); }
 .composer.m3 { --mode: var(--mode-3); --mode-ink: var(--mode-3-ink); }
+.composer.m4 { --mode: var(--mode-4); --mode-ink: var(--mode-4-ink); }
 .field button[type="submit"] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--mode, var(--phosphor)); color: var(--mode-ink, var(--phosphor-ink)); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 18px color-mix(in srgb, var(--mode, var(--phosphor)) 45%, transparent); transition: background .25s, box-shadow .25s; }
 .field button[type="submit"] svg { width: 18px; height: 18px; }
 .field button[type="submit"]:hover { filter: brightness(1.06); }
@@ -413,8 +603,6 @@ textarea::placeholder { color: var(--text-3); }
   .row { max-width: 92%; }
   .who .reply { max-width: 150px; }
   .system .gauge { width: 160px; }
-  .onboarding-list li { grid-template-columns: 28px 1fr; }
-  .onboarding-list .state { grid-column: 2; }
 }
 
 /* ================= MU/TH/UR: troubleshooting ================= */
@@ -425,13 +613,32 @@ textarea::placeholder { color: var(--text-3); }
   font-family: var(--mono); font-size: 10px; letter-spacing: .18em; cursor: pointer;
 }
 .mother-button:hover { color: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 14px color-mix(in srgb, var(--phosphor) 30%, transparent); }
+/* Light mode: a halo that reads as light on a dark ground reads as a smudge on a pale one. The
+   border and the colour already say the button is live, so the light around it stays slight. */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) .mother-button:hover,
+  :root:not([data-theme="dark"]) .tree-button:hover,
+  :root:not([data-theme="dark"]) .tree-button[aria-pressed="true"],
+  :root:not([data-theme="dark"]) .stop-all:hover,
+  :root:not([data-theme="dark"]) .chats-button:hover,
+  :root:not([data-theme="dark"]) .chats-button[aria-pressed="true"] { box-shadow: 0 0 5px color-mix(in srgb, var(--phosphor) 12%, transparent); }
+}
+:root[data-theme="light"] .mother-button:hover,
+:root[data-theme="light"] .tree-button:hover,
+:root[data-theme="light"] .tree-button[aria-pressed="true"],
+:root[data-theme="light"] .stop-all:hover,
+:root[data-theme="light"] .chats-button:hover,
+:root[data-theme="light"] .chats-button[aria-pressed="true"] { box-shadow: 0 0 5px color-mix(in srgb, var(--phosphor) 12%, transparent); }
+
+.lang-button { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; padding: 0 9px; }
 .mother-glyph { width: 8px; height: 8px; border: 1px solid currentColor; }
 .mother-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--danger); color: #fff; font-size: 9px; letter-spacing: 0; }
 
-dialog.mother { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: transparent; color: #9bff66; }
+dialog.mother { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: transparent; color: var(--brew); }
 dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }
 .mother-frame {
-  --ph: #9bff66; --ph-dim: rgba(155, 255, 102, .45); --ph-faint: rgba(155, 255, 102, .14);
+  /* Terminal.app's Homebrew profile, which is what a room like this should read as. */
+  --ph: #28fe14; --ph-dim: rgba(40, 254, 20, .52); --ph-faint: rgba(40, 254, 20, .13);
   position: relative; height: 100%; overflow-y: auto;
   padding: 26px clamp(16px, 5vw, 64px) 40px;
   background:
@@ -464,6 +671,39 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .mother-section h3.toggle:not(:first-child) { margin-top: 40px; }
 .settings .room-form, .settings .conn-grid, .settings .mother-grid { margin-bottom: 8px; }
 .mother-section h3::before { content: "▌ "; color: var(--ph); }
+
+/* A section that folds. The summary carries the same header it always had, plus a mark on the
+   right when there is something behind it worth opening. */
+.mother-section .fold { margin: 0; }
+.mother-section .fold + .fold { margin-top: 26px; }
+.mother-section .fold > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
+.mother-section .fold > summary::-webkit-details-marker { display: none; }
+/* The button is a word, not a glyph: the panel already said EXPAND and COLLAPSE elsewhere. */
+.mother-section .fold > summary .caret { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--ph); white-space: nowrap; }
+.mother-section .fold > summary:hover h3 { color: var(--ph); }
+.mother-section .fold > summary h3 { margin: 0 0 12px; }
+.mother-section .fold > summary h3:not(:first-child) { margin-top: 0; padding-top: 0; border-top: 0; }
+.fold-badge { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--ph-dim); color: var(--ph-dim); white-space: nowrap; }
+/* Red, and only red, when there is something new: that is the whole message. */
+.fold-badge.urgent { border-color: var(--danger); background: var(--danger); color: #fff; }
+.fold-body { padding-top: 2px; }
+.mother-section .note.lead { color: rgba(210, 255, 190, .9); letter-spacing: .12em; line-height: 1.7; }
+
+/* Inside MU/TH/UR everything is phosphor. A command in the panel was drawn in the page's own
+   text colour, which on this ground is all but invisible. */
+.mother-section .update-command { border-color: var(--ph-dim); border-radius: 0; background: var(--ph-faint); }
+.mother-section .update-command code { color: var(--ph); }
+.mother-section .update-command button { border-color: var(--ph-dim); color: var(--ph-dim); }
+.mother-section .update-command button:hover { color: var(--ph); border-color: var(--ph); }
+
+/* The steps were numbered by the browser, at the panel's own size, which made them shout. They
+   are a quiet index in the margin now, like everything else here. */
+.mother-section .train-steps { list-style: none; padding-left: 26px; counter-reset: step; }
+.mother-section .train-steps > li { counter-increment: step; position: relative; margin: 14px 0; }
+.mother-section .train-steps > li::before { content: counter(step); position: absolute; left: -26px; top: 1px; width: 18px; text-align: right; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--ph-dim); opacity: .8; }
+.mother-section .train-steps > li.note { counter-increment: none; margin-left: 0; }
+.mother-section .train-steps > li.note::before { content: none; }
+.mother-section .train-step-label { color: var(--ph-dim); }
 .mother-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
 .mother-card { border: 1px solid var(--ph-dim); padding: 14px 16px; background: rgba(2, 6, 2, .6); display: grid; gap: 8px; align-content: start; }
 .mother-card.hit { border-color: var(--ph); box-shadow: inset 0 0 0 1px var(--ph-faint), 0 0 22px rgba(155, 255, 102, .12); }
@@ -524,15 +764,32 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 /* ================= MODULES ================= */
 .modules-glyph { border-radius: 50%; }
 .modules-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--phosphor); color: var(--phosphor-ink); font-size: 9px; letter-spacing: 0; }
-.module-card { border: 1px solid var(--ph-dim); padding: 18px 20px; background: rgba(2, 6, 2, .6); display: grid; gap: 12px; max-width: 760px; min-width: 0; overflow-wrap: anywhere; }
+/* A module card is floors, not a stack of paragraphs: who it is, what it does, what it touches,
+   what it lets you set, and the switch. Each floor owns its own padding and is separated by a
+   hairline, so nothing can crowd anything else. The floors stack from the top and the switch is
+   pushed to the bottom — as a stretched grid the card used to spread the spare height of the
+   tallest card in the row between its own rows, which is why the text drifted apart on some
+   cards and not on others. */
+.module-card { border: 1px solid var(--ph-dim); background: rgba(2, 6, 2, .6); display: flex; flex-direction: column; padding: 0; max-width: 760px; min-width: 0; overflow-wrap: anywhere; }
+/* The switch sits on the floor of the card, not wherever the text happens to end: cards in a row
+   are the same height, so their buttons line up along the bottom edge. */
+.module-card > .actions { margin-top: auto; }
+.module-card:not(.dev-card) > * { padding: 16px 20px; }
+.module-card:not(.dev-card) > * + * { border-top: 1px solid var(--ph-faint); }
 .mother-grid > * { min-width: 0; }
-.module-card .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
+.module-card .head { display: grid; gap: 7px; }
+.module-card .head .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
 .module-card h4 { margin: 0; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
-.module-card .vendor { font-size: 10px; letter-spacing: .18em; color: var(--ph-dim); }
-.module-card .state { font-size: 10px; letter-spacing: .18em; padding: 4px 8px; border: 1px solid var(--ph-dim); color: var(--ph-dim); white-space: nowrap; }
-.module-card .detail { font-size: 10px; letter-spacing: .12em; color: var(--ph-dim); }
-.module-card .state.installed { color: var(--ph); border-color: var(--ph); }
-.module-card .state.running { color: #ffd166; border-color: #ffd166; animation: blink 1s infinite; }
+/* The state is a state, not a button: a word and a dot, never a box you want to press. */
+.module-card .state { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--ph-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
+.module-card .state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
+.module-card .state.on { color: var(--ph); }
+.module-card .state.on::before { opacity: 1; box-shadow: 0 0 8px var(--ph); }
+.module-card .state.running { color: #ffd166; animation: blink 1s infinite; }
+/* Switched off, the whole card steps back — except the switch that turns it on again. */
+.module-card.off { border-color: var(--ph-faint); }
+.module-card.off > *:not(.actions) { opacity: .52; }
+.module-card .detail { font-size: 10px; letter-spacing: .12em; color: var(--ph-dim); line-height: 1.5; }
 .module-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(210, 255, 190, .85); text-shadow: none; }
 .module-card ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: rgba(210, 255, 190, .8); text-shadow: none; }
 .module-card .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@@ -566,11 +823,15 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .stop-all.armed { opacity: 1; cursor: pointer; border-color: var(--terror); background: color-mix(in srgb, var(--terror) 12%, transparent); color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 60%, transparent); animation: blink 1.4s infinite; }
 .stop-all.armed:hover { background: var(--terror); color: #fff; text-shadow: none; animation: none; }
 .stop-all-glyph { width: 8px; height: 8px; background: currentColor; }
-.update-pill { opacity: 1; cursor: pointer; border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); text-shadow: 0 0 8px color-mix(in srgb, var(--warn) 60%, transparent); animation: update-breathe 2.8s ease-in-out infinite; }
-.update-pill:hover { background: var(--warn); color: #050605; text-shadow: none; animation: none; }
-.update-pill .update-glyph { border-radius: 50%; }
-@keyframes update-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 0%, transparent); } 50% { box-shadow: 0 0 14px 0 color-mix(in srgb, var(--warn) 45%, transparent); } }
-@media (prefers-reduced-motion: reduce) { .update-pill { animation: none; } }
+/* The version alert: an amber hairline, a soft fill, no glow. It should read as information, not alarm. */
+.update-pill { opacity: 1; cursor: pointer; border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); color: var(--warn); text-shadow: none; transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .16s ease; }
+.update-pill:hover { background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: color-mix(in srgb, var(--warn) 70%, transparent); }
+.update-pill:active { transform: scale(.98); }
+.update-pill:focus-visible { outline: 2px solid color-mix(in srgb, var(--warn) 60%, transparent); outline-offset: 2px; }
+.update-pill .update-glyph { border-radius: 50%; opacity: .9; }
+.update-restart { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; margin: 4px 0 10px; border: 1px solid var(--ph); background: color-mix(in srgb, var(--ph) 12%, transparent); color: var(--ph); font: inherit; font-size: 10px; letter-spacing: .18em; cursor: pointer; transition: background-color .22s ease, color .22s ease, opacity .22s ease; }
+.update-restart:hover { background: color-mix(in srgb, var(--ph) 22%, transparent); }
+.update-restart:disabled { opacity: .55; cursor: default; }
 .system.alert { color: var(--terror); text-shadow: 0 0 10px color-mix(in srgb, var(--terror) 70%, transparent); letter-spacing: .14em; animation: terror-in 1.4s steps(3, end) 1; }
 .system.alert b { color: var(--terror); }
 .system.alert .cmd { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--terror); letter-spacing: .2em; }
@@ -602,14 +863,17 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .conn-card button.primary, .settings .room-form button.primary { background: var(--ph); color: #041004; text-shadow: none; border-color: var(--ph); }
 .conn-card button:disabled, .settings .room-form button:disabled { opacity: .4; cursor: default; }
 .conn-card label, .settings .room-form label { display: grid; gap: 4px; font-size: 9.5px; letter-spacing: .16em; color: var(--ph-dim); }
-.conn-card input, .settings .room-form input, .settings .room-form select { border: 1px solid var(--ph-dim); background: #000; color: var(--ph); font: inherit; font-size: 12px; padding: 6px 8px; letter-spacing: .04em; min-width: 0; }
-.conn-card input:focus, .settings .room-form input:focus { outline: 1px solid var(--ph); }
+/* A textarea is a field like any other here. It was left out of this rule, so what you typed
+   into it was drawn in the page's own colour: invisible on this ground. */
+.conn-card input, .conn-card select, .settings .room-form input, .settings .room-form select, .settings .room-form textarea { border: 1px solid var(--ph-dim); background: #000; color: var(--ph); font: inherit; font-size: 12px; padding: 6px 8px; letter-spacing: .04em; min-width: 0; }
+.settings .room-form textarea::placeholder { color: var(--ph-dim); }
+.conn-card input:focus, .settings .room-form input:focus, .settings .room-form textarea:focus { outline: 1px solid var(--ph); }
 .conn-card .login-log { max-height: 140px; overflow-y: auto; border: 1px solid var(--ph-faint); background: #000; padding: 8px 10px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
 .conn-card .login-log a { color: var(--ph); }
 .settings .room-form { border: 1px solid var(--ph-dim); padding: 14px 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; }
 .settings .room-form .full { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
 .settings .room-form .toggle { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .16em; color: var(--ph); cursor: pointer; }
-.settings .room-form .toggle input { width: auto; accent-color: #9bff66; }
+.settings .room-form .toggle input { width: auto; accent-color: var(--brew); }
 .settings .note { font-size: 10px; letter-spacing: .1em; color: var(--ph-dim); }
 .system.login { color: var(--phosphor); }
 .system.login.failed { color: var(--danger); }
@@ -643,6 +907,7 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .picker .mode-chip.m1 { --mode: var(--mode-1); }
 .picker .mode-chip.m2 { --mode: var(--mode-2); }
 .picker .mode-chip.m3 { --mode: var(--mode-3); }
+.picker .mode-chip.m4 { --mode: var(--mode-4); }
 .mode-menu { width: min(380px, calc(100vw - 24px)); padding: 12px; }
 .mode-menu .model-menu-title { margin: 4px 10px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .mode-menu .mode-ladder { display: grid; gap: 2px; }
@@ -653,6 +918,7 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .mode-menu .mode-option.o1.current { --mode: var(--mode-1); }
 .mode-menu .mode-option.o2.current { --mode: var(--mode-2); }
 .mode-menu .mode-option.o3 { --mode: var(--mode-3); }
+.mode-menu .mode-option.o4 { --mode: var(--mode-4); }
 .mode-menu .mode-option.locked { opacity: .45; }
 .mode-menu .mode-option.locked:hover { opacity: 1; }
 .mode-menu .mode-option:disabled { opacity: .3; cursor: default; }
@@ -661,11 +927,11 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .mode-menu .mode-option .body { display: grid; gap: 3px; min-width: 0; }
 .mode-menu .mode-option .name { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--mode); }
 .mode-menu .mode-option.current .name, .mode-menu .mode-option:hover .name { color: var(--mode); }
-.mode-menu .mode-option:not(.current):not(.o3) .name { color: var(--text); }
+.mode-menu .mode-option:not(.current):not(.o3):not(.o4) .name { color: var(--text); }
 .mode-menu .mode-option .body { gap: 5px; }
 .mode-menu .mode-option .hint { display: block; font-size: 10.5px; line-height: 1.5; letter-spacing: 0; color: var(--text-2); text-transform: none; font-family: var(--sans, inherit); }
 .mode-menu .mode-option .tag { display: inline-flex; align-items: center; gap: 7px; font-size: 8.5px; font-weight: 700; letter-spacing: .16em; color: var(--mode); white-space: nowrap; align-self: center; margin-left: 4px; }
-.mode-menu .mode-option .tag.raise { border: 1px solid var(--mode-3); border-radius: 999px; padding: 3px 9px; }
+.mode-menu .mode-option .tag.raise { border: 1px solid var(--mode); border-radius: 999px; padding: 3px 9px; }
 .mode-menu .mode-option .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mode); box-shadow: 0 0 8px var(--mode); animation: mode-dot 1.4s ease-in-out infinite; }
 @keyframes mode-dot { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
 @media (prefers-reduced-motion: reduce) { .mode-menu .mode-option .tag .dot { animation: none; } }
@@ -677,10 +943,13 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .composer.control { width: min(1180px, 100% - 40px); }
 .composer.control .field { border-color: var(--terror); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terror) 18%, transparent), 0 0 30px color-mix(in srgb, var(--terror) 20%, transparent); }
 .composer.control .crew-label { color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 60%, transparent); }
+/* AIRLOCK: the same width as CONTROL, a cold ring instead of the red one. */
+.composer.airlock .field { border-color: var(--mode-4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-4) 18%, transparent), 0 0 30px color-mix(in srgb, var(--mode-4) 16%, transparent); }
+.composer.airlock .crew-label { color: var(--mode-4); text-shadow: 0 0 8px color-mix(in srgb, var(--mode-4) 55%, transparent); }
 .composer.intruder .crew-label { color: var(--terror); text-shadow: 0 0 8px color-mix(in srgb, var(--terror) 60%, transparent); animation: blink 1.6s steps(1) infinite; }
 /* Mode badges on bubbles and plan steps */
 .who .badge.mode { font-weight: 700; letter-spacing: .1em; }
-.who .badge.mode.m0 { color: var(--mode-0); border-color: color-mix(in srgb, var(--mode-0) 50%, transparent); } .who .badge.mode.m1 { color: var(--mode-1); border-color: color-mix(in srgb, var(--mode-1) 45%, transparent); } .who .badge.mode.m2 { color: var(--mode-2); border-color: color-mix(in srgb, var(--mode-2) 50%, transparent); } .who .badge.mode.m3 { color: var(--mode-3); border-color: var(--mode-3); }
+.who .badge.mode.m0 { color: var(--mode-0); border-color: color-mix(in srgb, var(--mode-0) 50%, transparent); } .who .badge.mode.m1 { color: var(--mode-1); border-color: color-mix(in srgb, var(--mode-1) 45%, transparent); } .who .badge.mode.m2 { color: var(--mode-2); border-color: color-mix(in srgb, var(--mode-2) 50%, transparent); } .who .badge.mode.m3 { color: var(--mode-3); border-color: var(--mode-3); } .who .badge.mode.m4 { color: var(--mode-4); border-color: var(--mode-4); }
 .row.ghost .bubble { border: 1px dashed var(--line-2); background: transparent; opacity: .85; }
 .row.ghost.user .bubble { background: transparent; color: var(--text); border-color: var(--text-3); }
 .row.ghost .stamp::after { content: ' · not recorded'; color: var(--text-3); }
@@ -696,6 +965,9 @@ dialog.override[open] { display: grid; place-items: center; }
 .override-reply { min-height: 22px; letter-spacing: .14em; }
 .override-reply.denied { color: #ff7b72; text-shadow: 0 0 10px rgba(255, 123, 114, .6); animation: terror-in .8s steps(3, end) 1; }
 .override-reply.granted { color: var(--ph); text-shadow: 0 0 10px rgba(155, 255, 102, .6); }
+/* MOTHER answering a name that is not this project's: her lines, and the count. */
+.override-reply .line { display: block; line-height: 1.6; }
+.override-reply .strike { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .18em; color: var(--warn); text-shadow: none; }
 .override-frame.shake { animation: override-shake .35s ease; }
 @keyframes override-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
 .model-menu { position: fixed; z-index: 40; width: min(320px, calc(100vw - 24px)); padding: 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text); }
@@ -801,35 +1073,45 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .system.lease.missing button:hover { background: color-mix(in srgb, var(--warn) 20%, transparent); }
 .system.lease.missing button:disabled { opacity: .6; cursor: default; }
 .conn-card .scope.sub { margin-left: 22px; font-size: 9px; margin-top: -2px; }
-.conn-card .ceiling { display: grid; grid-template-columns: auto auto; gap: 8px 12px; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ph-faint); }
+/* One column for the label, the same width on every row and in every card, so MAX MODE and
+   DEFAULT MODE start at the same place instead of each beginning where its own words end. */
+.conn-card .ceiling { display: grid; grid-template-columns: 104px 1fr; gap: 8px 12px; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ph-faint); }
+.conn-card .ceiling .seg { justify-self: start; }
 .conn-card .ceiling .k { font-size: 9.5px; letter-spacing: .16em; color: var(--ph-dim); }
 .conn-card .ceiling .why { grid-column: 1 / -1; font-size: 9px; letter-spacing: .08em; color: var(--ph-dim); text-transform: none; line-height: 1.5; }
 .conn-card .seg { display: inline-flex; border: 1px solid var(--ph-dim); }
 .conn-card .seg-option { border: 0; border-right: 1px solid var(--ph-faint); background: transparent; color: var(--ph-dim); font: inherit; font-size: 10px; letter-spacing: .1em; padding: 4px 9px; cursor: pointer; }
 .conn-card .seg-option:last-child { border-right: 0; }
 .conn-card .seg-option:hover { background: var(--ph-faint); color: var(--ph); }
-.conn-card .seg-option.current { background: var(--ph); color: #041004; font-weight: 700; }
-.conn-card .seg-option.o3.current { background: #ff7b72; }
+/* A chosen mode wears its own colour, the same one the composer uses for it. It used to be
+   phosphor for every mode but #3, which made one card look like a warning and the rest like
+   settings, when all five are the same kind of choice. */
+.conn-card .seg-option.current { background: var(--mode, var(--ph)); color: var(--mode-ink, #041004); font-weight: 700; }
+.conn-card .seg-option.o0 { --mode: var(--mode-0); --mode-ink: var(--mode-0-ink); }
+.conn-card .seg-option.o1 { --mode: var(--mode-1); --mode-ink: var(--mode-1-ink); }
+.conn-card .seg-option.o2 { --mode: var(--mode-2); --mode-ink: var(--mode-2-ink); }
+.conn-card .seg-option.o3 { --mode: var(--mode-3); --mode-ink: var(--mode-3-ink); }
+.conn-card .seg-option.o4 { --mode: var(--mode-4); --mode-ink: var(--mode-4-ink); }
 .conn-card .seg-option:disabled { opacity: .35; cursor: default; }
 .create-toggle[aria-pressed="true"] .lock.closed { display: none; }
 .create-toggle[aria-pressed="true"] .lock.open { display: block; }
-/* ORDER 937: a bash prompt on a black terminal, Homebrew green. */
+/* Ash: a bash prompt on a black terminal, Homebrew green. */
 /* Off: a dormant prompt, grey like the other idle controls. On: the terminal lights up. */
-.ashcode-toggle { height: 30px; padding: 0 10px 0 9px; border-radius: 7px; border: 1px dashed var(--line-2); background: transparent; color: var(--text-3); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: none; cursor: pointer; align-self: center; display: inline-flex; align-items: center; gap: 6px; opacity: .8; transition: color .2s, border-color .2s, box-shadow .2s, background .2s, opacity .2s; }
-.ashcode-toggle::before { content: '$'; color: var(--text-3); font-weight: 700; }
-.ashcode-toggle::after { content: ''; width: 7px; height: 12px; background: currentColor; opacity: .25; margin-left: 1px; }
-.ashcode-toggle:hover { opacity: 1; color: var(--text-2); border-color: var(--text-3); }
-.ashcode-toggle[aria-pressed="true"] { opacity: 1; border-style: solid; background: #070907; color: var(--brew); border-color: var(--brew); font-weight: 700; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brew) 25%, transparent), 0 0 18px color-mix(in srgb, var(--brew) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--brew) 14%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--brew) 70%, transparent); }
-.ashcode-toggle[aria-pressed="true"]::before { color: color-mix(in srgb, var(--brew) 75%, transparent); }
-.ashcode-toggle[aria-pressed="true"]::after { animation: cursor-blink 1s steps(1) infinite; opacity: 1; }
-.ashcode-toggle[aria-pressed="true"]:hover { color: var(--brew); border-color: var(--brew); }
-:root[data-theme="light"] .ashcode-toggle, .ashcode-toggle { /* stays a black terminal in every theme */ }
-
-/* With ORDER 937 lit, the field widens like CREATE and glows Homebrew green. */
-.composer.ordering { width: min(1180px, 100% - 40px); }
-.composer.ordering .field { position: relative; border-color: color-mix(in srgb, var(--brew) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brew) 14%, transparent); }
-.composer.ordering .crew-label { color: var(--brew); text-shadow: 0 0 8px color-mix(in srgb, var(--brew) 55%, transparent); }
-.composer.ordering .editor textarea::placeholder { color: color-mix(in srgb, var(--brew) 60%, transparent); }
+.ash-toggle { height: 30px; padding: 0 10px 0 9px; border-radius: 7px; border: 1px dashed var(--line-2); background: transparent; color: var(--text-3); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: none; cursor: pointer; align-self: center; display: inline-flex; align-items: center; gap: 6px; opacity: .8; transition: color .2s, border-color .2s, box-shadow .2s, background .2s, opacity .2s; }
+.ash-toggle::before { content: '$'; color: var(--text-3); font-weight: 700; }
+.ash-toggle::after { content: ''; width: 7px; height: 12px; background: currentColor; opacity: .25; margin-left: 1px; }
+.ash-toggle:hover { opacity: 1; color: var(--text-2); border-color: var(--text-3); }
+.ash-toggle[aria-pressed="true"] { opacity: 1; border-style: solid; background: #070907; color: var(--brew); border-color: var(--brew); font-weight: 700; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brew) 25%, transparent), 0 0 18px color-mix(in srgb, var(--brew) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--brew) 14%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--brew) 70%, transparent); }
+.ash-toggle[aria-pressed="true"]::before { color: color-mix(in srgb, var(--brew) 75%, transparent); }
+.ash-toggle[aria-pressed="true"]::after { animation: cursor-blink 1s steps(1) infinite; opacity: 1; }
+.ash-toggle[aria-pressed="true"]:hover { color: var(--brew); border-color: var(--brew); }
+:root[data-theme="light"] .ash-toggle, .ash-toggle { /* stays a black terminal in every theme */ }
+
+/* With Ash lit, the field widens like CREATE and glows Homebrew green. */
+.composer.ash-on { width: min(1180px, 100% - 40px); }
+.composer.ash-on .field { position: relative; border-color: color-mix(in srgb, var(--brew) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brew) 14%, transparent); }
+.composer.ash-on .crew-label { color: var(--brew); text-shadow: 0 0 8px color-mix(in srgb, var(--brew) 55%, transparent); }
+.composer.ash-on .editor textarea::placeholder { color: color-mix(in srgb, var(--brew) 60%, transparent); }
 .composer.creating.ordering .field { border-color: var(--mode-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-2) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--brew) 45%, transparent); }
 
 /* The wink to MOTHER when the order is given: a CRT sweep and scanlines that fade. */
@@ -870,10 +1152,9 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 
 .who .badge.ash { color: var(--phosphor); border-color: color-mix(in srgb, var(--phosphor) 50%, transparent); }
 .who .badge.ash.skipped { color: var(--text-3); border-color: var(--line-2); }
-.ash-original { margin-top: 10px; border-top: 1px dashed var(--line-2); padding-top: 8px; }
-.ash-original summary { color: var(--text-3); font-family: var(--mono); font-size: 10px; cursor: pointer; }
-.ash-original pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font: inherit; color: var(--text-2); }
-.ash-beta { color: var(--warn); font-size: 12px; }
+.ash-was { margin-top: 10px; border-top: 1px dashed var(--line-2); padding-top: 8px; }
+.ash-was summary { color: var(--text-3); font-family: var(--mono); font-size: 10px; cursor: pointer; }
+.ash-was pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font: inherit; color: var(--text-2); }
 .create-scopes { display: inline-flex; gap: 4px; margin-left: 4px; }
 .create-scopes .cap { font-size: 8.5px; padding: 1px 5px; }
 .create-scopes .cap.on { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
@@ -944,7 +1225,7 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .conn-card .scope .assist { margin-left: 6px; border: 1px solid var(--ph-dim); background: transparent; color: var(--ph); font: inherit; font-size: 8.5px; letter-spacing: .14em; padding: 1px 6px; cursor: pointer; text-transform: uppercase; }
 .conn-card .scope .assist:hover { background: var(--ph-faint); }
 .conn-card .scope { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .12em; color: var(--ph); cursor: pointer; }
-.conn-card .scope input { accent-color: #9bff66; width: auto; }
+.conn-card .scope input { accent-color: var(--brew); width: auto; }
 .conn-card .scope.unavailable { color: var(--ph-dim); cursor: not-allowed; }
 .conn-card .scope .why { margin-left: auto; font-size: 9px; letter-spacing: .08em; color: var(--ph-dim); text-transform: none; }
 
@@ -968,6 +1249,25 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .editor .highlight .chip.cmd { --agent: var(--phosphor); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
 .editor .highlight .chip.file { --agent: var(--text-2); font-family: var(--mono); font-size: 13px; letter-spacing: 0; font-weight: 500; }
 .editor .highlight .chip.unknown { --agent: var(--text-3); text-decoration: underline dotted; font-weight: 500; }
+/* A mention is a word in the sentence you are writing, so it is only ever coloured. A pill drawn
+   round it turns the line into a form to fill in and breaks the rhythm of reading it back. */
+.editor .highlight .chip.agent { background: transparent; box-shadow: none; }
+/* What you are answering, inside the field and above the line you write on. It takes a row of
+   its own, so the box grows by exactly its height and the writing space is never eaten. Two
+   points smaller than what you type, in a badge faint enough not to compete with it. */
+.reply-quote {
+  grid-column: 1 / -1;
+  display: flex; align-items: baseline; gap: 7px;
+  margin: 2px 0 0 -6px; padding: 6px 8px 6px 12px; border-radius: 12px;
+  background: color-mix(in srgb, var(--text-3) 9%, transparent);
+  font-size: 13px; line-height: 1.4; color: var(--text-3);
+}
+/* With something quoted the field gives you room to answer in rather than one cramped line. */
+.field.quoting textarea, .field.quoting .highlight { min-height: 42px; }
+.reply-quote b { flex: none; color: var(--text-2); font-weight: 600; }
+.reply-quote .said { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.reply-quote .drop { flex: none; margin-left: auto; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); font-size: 14px; line-height: 1; cursor: pointer; }
+.reply-quote .drop:hover { background: color-mix(in srgb, var(--text-3) 14%, transparent); color: var(--text); }
 .slash-menu { position: absolute; left: -12px; bottom: calc(100% + 14px); z-index: 30; min-width: 280px; max-width: min(460px, 90vw); border: 1px solid var(--line-2); background: var(--panel); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); padding: 6px; display: grid; gap: 2px; }
 .slash-menu .item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 9px; cursor: pointer; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
 .slash-menu .item .key { font-family: var(--mono); font-size: 12.5px; color: var(--agent, var(--phosphor)); font-weight: 600; white-space: nowrap; }
@@ -981,6 +1281,33 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .theme-button svg { display: none; }
 .theme-button[data-theme="auto"] .t-auto, .theme-button[data-theme="light"] .t-light, .theme-button[data-theme="dark"] .t-dark { display: block; }
 .tree-button:hover, .tree-button[aria-pressed="true"] { color: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 14px color-mix(in srgb, var(--phosphor) 30%, transparent); }
+/* The conversations of this project, on the other side of the canvas from the files: the same
+   panel, so there is one shape to learn, and never both edges at once on a narrow screen. */
+.tree.chats { justify-self: start; margin: 18px 0 10px 20px; grid-template-rows: auto minmax(0, 1fr) auto auto; }
+.chats-new { padding: 10px 12px; border-top: 1px solid var(--line); }
+.chats-new-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 1px dashed var(--line-2); border-radius: 10px; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 10px; letter-spacing: .16em; padding: 9px 10px; cursor: pointer; }
+.chats-new-button svg { width: 14px; height: 14px; }
+.chats-new-button:hover { color: var(--phosphor); border-color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 8%, transparent); }
+.chats-body { padding: 10px 8px; display: grid; gap: 6px; align-content: start; }
+.chats-body .chat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; border: 0; background: transparent; color: var(--text-2); font: inherit; text-align: left; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
+.chats-body .chat:hover { background: color-mix(in srgb, var(--phosphor) 10%, transparent); color: var(--text); }
+.chats-body .chat.on { background: color-mix(in srgb, var(--phosphor) 14%, transparent); color: var(--text); }
+.chats-body .chat .name { font-family: var(--sans, inherit); font-size: 12.5px; line-height: 1.4; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chats-body .chat .when { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--text-3); white-space: nowrap; }
+.chats-body .chat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
+.chats-body .chat-drop { border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; line-height: 1; padding: 4px 7px; border-radius: 7px; cursor: pointer; opacity: 0; }
+.chats-body .chat-row:hover .chat-drop, .chats-body .chat-drop:focus-visible { opacity: 1; }
+.chats-body .chat-drop:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
+.chats-body .chat-drop.sure { opacity: 1; color: #fff; background: var(--danger); }
+.project.chat-here { flex: 0 1 auto; max-width: 340px; color: var(--text-2); }
+.chats-foot { padding: 10px 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--text-3); }
+/* Its handle sits in the canvas, under the bar, where the conversation it opens begins. */
+.chats-button { grid-row: 3; justify-self: start; align-self: start; z-index: 6; margin: 18px 0 0 20px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); cursor: pointer; padding: 0; }
+.chats-button svg { width: 21px; height: 21px; }
+.chats-button:hover, .chats-button[aria-pressed="true"] { color: var(--phosphor); border-color: var(--phosphor); box-shadow: 0 0 14px color-mix(in srgb, var(--phosphor) 30%, transparent); }
+.chats-button:active { transform: translateY(1px); }
+@media (max-width: 1100px) { .chats-button { display: none; } }
+
 .tree { grid-row: 3; justify-self: end; align-self: stretch; z-index: 5; width: clamp(240px, calc((100% - var(--column)) / 2 - 36px), 420px); margin: 18px 20px 10px 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); overflow: hidden; animation: tree-in .22s ease; }
 @keyframes tree-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
 .tree-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--text-2); }
@@ -1007,6 +1334,23 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 
 .command-card { margin: 10px 0 6px; max-width: min(860px, 100%); border: 1px solid var(--line-2); border-radius: 12px; background: color-mix(in srgb, var(--panel) 80%, transparent); overflow: hidden; }
 .command-card.failed { border-color: color-mix(in srgb, var(--crit) 60%, transparent); }
+
+/* EYECAT: a question the room is asking the human, so it reads as one thing until it is answered. */
+.command-card.eyecat { border-color: color-mix(in srgb, var(--mem-aberration) 55%, transparent); }
+.command-card.eyecat .head b { color: var(--mem-aberration); }
+.command-card.eyecat > div:not(.head):not(.eyecat-actions):not(.eyecat-settled) { padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
+.command-card.eyecat b { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--text-2); margin-bottom: 4px; }
+.command-card.eyecat p { margin: 0; font-size: 13.5px; line-height: 1.5; }
+.command-card.eyecat .eyecat-claim p { color: var(--mem-aberration); }
+.command-card.eyecat .eyecat-correction p { color: var(--ok, #9bff66); }
+.eyecat-actions { display: flex; gap: 8px; padding: 10px 12px; }
+.eyecat-actions button { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); cursor: pointer; }
+.eyecat-actions button.primary { border-color: color-mix(in srgb, var(--mem-aberration) 70%, transparent); color: var(--mem-aberration); }
+.eyecat-actions button:hover:not(:disabled) { background: var(--ph-faint); }
+.eyecat-actions button:disabled { opacity: .45; cursor: default; }
+.eyecat-settled { padding: 9px 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--text-2); }
+.command-card.eyecat.filed { border-color: color-mix(in srgb, var(--mem-aberration) 75%, transparent); }
+.command-card.eyecat.stands { border-color: var(--line-2); opacity: .7; }
 .command-card .head { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--text-2); border-bottom: 1px solid var(--line-2); }
 .command-card .head b { color: var(--phosphor); font-weight: 600; }
 .command-card .head .args { color: var(--text-3); letter-spacing: .04em; }
@@ -1040,8 +1384,9 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 :root[data-scheme="light"] .field button[type="submit"] { box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
 :root[data-scheme="light"] .user .bubble { box-shadow: 0 3px 12px rgba(0, 0, 0, .08); }
 :root[data-scheme="light"] .composer.control .field { box-shadow: 0 0 0 2px color-mix(in srgb, var(--terror) 30%, transparent); }
+:root[data-scheme="light"] .composer.airlock .field { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mode-4) 35%, transparent); }
 :root[data-scheme="light"] .composer.creating .field, :root[data-scheme="light"] .composer.creating.ordering .field { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mode-2) 30%, transparent); }
-:root[data-scheme="light"] .composer.ordering .field { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brew) 22%, transparent); }
+:root[data-scheme="light"] .composer.ash-on .field { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brew) 22%, transparent); }
 :root[data-scheme="light"] .composer.dropping .field { box-shadow: 0 0 0 2px color-mix(in srgb, var(--phosphor) 35%, transparent); }
 :root[data-scheme="light"] .memory-hint .pill { animation: none; box-shadow: none; }
 :root[data-scheme="light"] .mode-menu .mode-option .tag .dot { box-shadow: none; }
@@ -1054,17 +1399,230 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 /* MU/TH/UR: the sentinel section. */
 .mother-section.sentinel .sentinel-controls, .mother-section.update .sentinel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 12px; }
 .mother-section.sentinel .toggle, .mother-section.update .toggle { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .16em; color: var(--ph-dim); cursor: pointer; }
-.mother-section.sentinel .toggle input, .mother-section.update .toggle input { accent-color: #9bff66; }
+.mother-section.sentinel .toggle input, .mother-section.update .toggle input { accent-color: var(--brew); margin: 0; flex: none; }
+/* The row starts where the text above it starts, so the column reads straight down. */
+.mother-section.sentinel .sentinel-controls, .mother-section.update .sentinel-controls { margin-left: 0; padding-left: 0; }
 .mother-section.sentinel .toggle input:disabled + * , .mother-section.sentinel .toggle:has(input:disabled) { opacity: .6; cursor: default; }
 .mother-section.sentinel button, .mother-section.update button { border: 1px solid var(--ph-dim); background: transparent; color: var(--ph); font: inherit; font-size: 9.5px; letter-spacing: .16em; padding: 6px 10px; cursor: pointer; }
 .mother-section.sentinel button:hover, .mother-section.update button:hover { background: var(--ph-faint); }
 .mother-section.sentinel .sentinel-report.sent { opacity: .65; }
 .settings .memory-form .toggle { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-size: 9.5px; letter-spacing: .14em; color: var(--ph-dim); cursor: pointer; text-transform: uppercase; }
-.settings .memory-form .toggle input { accent-color: #9bff66; width: auto; }
+.settings .memory-form .toggle input { accent-color: var(--brew); width: auto; }
 .settings .memory-form .full .note { margin-right: 12px; }
 .settings .memory-form .dataset-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--ph-faint); }
-.module-card .ollama-status { margin: 0 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 10px; letter-spacing: .1em; }
+.module-card .ollama-status { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 10px; letter-spacing: .1em; }
 .module-card .ollama-status dt { color: var(--ph-dim); } .module-card .ollama-status dd { margin: 0; color: rgba(210, 255, 190, .85); overflow-wrap: anywhere; }
 .module-card .actions .toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .14em; color: var(--ph-dim); cursor: pointer; }
-.module-card .actions .toggle input { accent-color: #9bff66; }
+.module-card .actions .toggle input { accent-color: var(--brew); }
 .mother-section.sentinel .note, .mother-section.update .note { margin: 0 0 10px; font-size: 10px; letter-spacing: .12em; line-height: 1.7; color: var(--ph-dim); }
+
+/* Motion of controls: every colour change eases over 220 ms. Nothing snaps. */
+.mother-button, .tree-button, .chats-button, .stop-all, .mother-close, .mother-section button, .seg-option, .mode-chip, .model-chip, .bubble-actions .act, .update-command button, .codeblock .copy { transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease, transform .16s ease; }
+.mother-button:active, .tree-button:active, .mother-close:active, .mother-section button:active, .update-command button:active { transform: scale(.98); }
+@media (prefers-reduced-motion: reduce) { .mother-button, .tree-button, .chats-button, .stop-all, .mother-close, .mother-section button, .seg-option, .mode-chip, .model-chip, .bubble-actions .act, .update-command button, .update-pill, .update-restart { transition: none; } }
+
+/* Developer card in MODULES and the four-step tour */
+.dev-card { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; padding: 18px 20px; }
+.dev-glyph { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: .08em; color: var(--ph); text-shadow: 0 0 10px rgba(155, 255, 102, .45); line-height: 1; padding-top: 4px; }
+.dev-body h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .18em; color: var(--ph); }
+.dev-body p { margin: 0 0 10px; font-size: 11.5px; line-height: 1.65; letter-spacing: .04em; color: var(--ph-dim); text-transform: none; }
+.dev-where { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .04em; color: var(--ph-dim); }
+.dev-where code { color: var(--ph); background: var(--ph-faint); padding: 2px 6px; }
+.dev-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
+.dev-row a.mother-close { text-decoration: none; display: inline-flex; align-items: center; }
+.dev-fail { color: var(--warn); } .dev-fail code { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); padding: 1px 5px; }
+.tour-button { min-width: 30px; padding: 6px 0; text-align: center; font-weight: 700; }
+.tour-frame { width: min(620px, 92vw); padding: 26px 30px 22px; }
+.tour-body { min-height: 190px; padding: 12px 0 6px; }
+.tour-step h3 { margin: 6px 0 14px; font-size: 11px; letter-spacing: .28em; color: var(--ph); font-weight: 700; }
+.tour-step p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; letter-spacing: .03em; color: var(--ph); text-transform: none; }
+.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--ph-dim); }
+.tour-dots { display: inline-flex; gap: 8px; }
+.tour-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ph-faint); border: 1px solid var(--ph-dim); transition: background-color .22s ease; }
+.tour-dots .dot.on { background: var(--ph); box-shadow: 0 0 8px rgba(155, 255, 102, .5); }
+.tour-nav { display: inline-flex; gap: 8px; }
+.tour .mother-close.primary { background: var(--ph-faint); }
+
+/* DEV modules and proposals */
+.module-card .dev-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); padding: 2px 7px; margin-left: 8px; align-self: center; }
+.module-card .note { font-size: 9.5px; letter-spacing: .1em; color: var(--ph-dim); text-transform: none; }
+.dev-yours { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
+.dev-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ph-dim); padding: 4px 8px; font-size: 10px; letter-spacing: .08em; color: var(--ph); text-transform: none; }
+.dev-chip .act-link, .module-proposed .act-link { border: 0; background: transparent; color: var(--phosphor); font: inherit; font-size: inherit; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
+.dev-chip .act-link { color: var(--warn); }
+.system.module-proposed { color: var(--text-3); } .system.module-proposed .who { color: var(--agent, var(--text-2)); }
+
+/* The local model saying whether it has been measured against this project, and the one button
+   that measures it. Same system line as the rest, with room for an answer and an action. */
+.system.local-model { color: var(--text-3); display: grid; gap: 8px; justify-items: center; }
+.system.local-model .who { color: var(--agent, var(--text-2)); }
+.system.local-model .says { margin: 0; max-width: 52ch; font-size: 11px; letter-spacing: .04em; text-transform: none; line-height: 1.65; color: var(--text-2); }
+.system.local-model .acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
+.system.local-model button { border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; cursor: pointer; }
+.system.local-model button:hover:not(:disabled) { border-color: var(--phosphor); color: var(--phosphor); }
+.system.local-model button:disabled { opacity: .5; cursor: default; }
+.system.local-model button.primary { border-color: var(--phosphor); color: var(--phosphor); }
+.system.local-model .note { font-size: 8.5px; letter-spacing: .14em; color: var(--text-3); }
+
+/* THE BRIDGE: first contact, one card per agent with the one action it needs now. */
+.bridge { max-width: 640px; }
+.bridge h2 { margin: 0 0 8px; }
+.bridge-crew { display: grid; gap: 10px; width: 100%; margin: 18px 0 6px; text-align: left; }
+.bridge-card { border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px; background: var(--panel); display: grid; gap: 10px; }
+.bridge-card .head { display: flex; align-items: center; gap: 10px; }
+.bridge-card .title { display: grid; gap: 2px; min-width: 0; flex: 1; }
+.bridge-card .title b { font-size: 13px; letter-spacing: .02em; color: var(--text); }
+.bridge-card .vendor { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
+.bridge-card .state { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
+.bridge-card .state.ready { color: var(--phosphor); border-color: color-mix(in srgb, var(--phosphor) 55%, transparent); }
+.bridge-card .state.signed-out { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
+.bridge-card .detail { font-size: 11.5px; line-height: 1.5; color: var(--text-2); }
+.bridge-card .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.bridge-card .actions button { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); border-radius: 8px; padding: 7px 12px; cursor: pointer; transition: background-color .22s ease, color .22s ease, border-color .22s ease; }
+.bridge-card .actions button:hover { color: var(--text); border-color: var(--text-3); }
+.bridge-card .actions button.primary { border-color: var(--phosphor); color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); }
+.bridge-card .actions button.primary:hover { background: color-mix(in srgb, var(--phosphor) 20%, transparent); }
+.bridge-card .actions button:disabled { opacity: .5; cursor: default; }
+.bridge-card .actions .note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
+.bridge-log { margin: 0; max-height: 140px; overflow-y: auto; font-family: var(--mono); font-size: 10.5px; line-height: 1.55; color: var(--text-2); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; }
+.bridge-log a { color: var(--phosphor); }
+
+.bridge-card .account { font-size: 11px; line-height: 1.5; color: var(--text-3); }
+.bridge-card .account .free { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--phosphor); border: 1px solid color-mix(in srgb, var(--phosphor) 45%, transparent); border-radius: 999px; padding: 2px 7px; margin-right: 8px; }
+.conn-card .meta .account { margin-top: 4px; color: var(--ph-dim); }
+#bridge-close { margin-top: 4px; }
+.empty-starts { display: grid; gap: 6px; width: 100%; margin-top: 4px; }
+.empty-start { font: inherit; font-size: 12.5px; line-height: 1.45; text-align: left; color: var(--text-2); background: transparent; border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 12px; cursor: pointer; transition: background-color .22s ease, color .22s ease, border-color .22s ease; }
+.empty-start:hover { color: var(--text); border-color: var(--text-3); background: color-mix(in srgb, var(--text) 4%, transparent); }
+.bridge-close { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
+.bridge-close:hover { color: var(--text); border-color: var(--text-3); }
+
+/* Pasting a provider key: a plain form, the value never comes back. */
+.key-slot { display: grid; gap: 8px; }
+.key-form { display: grid; gap: 8px; }
+.key-form label { display: grid; gap: 4px; }
+.key-form .k { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
+.key-form input, .key-form select { font: inherit; font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; width: 100%; }
+.key-form input:focus, .key-form select:focus { outline: none; border-color: var(--phosphor); }
+.key-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.key-row button { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--phosphor); color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
+.key-row button:disabled { opacity: .5; cursor: default; }
+.key-link { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--text-3); text-decoration: none; }
+.key-link:hover { color: var(--phosphor); }
+.key-note { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--text-3); }
+.key-said { margin: 0; min-height: 1em; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-3); }
+.key-said.bad { color: var(--danger); text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 11.5px; line-height: 1.5; }
+/* The key form is shared: it is the bridge's own, on the page's light ground, and it is also
+   inside a connection card, where the ground is black and everything is phosphor. It carried the
+   page's palette into both, so a key field sat there white and rounded among terminal fields.
+   Inside the panel it wears the panel's clothes. */
+.conn-card .key-form { margin-bottom: 10px; }
+.conn-card .key-form .k, .conn-card .key-link, .conn-card .key-note, .conn-card .key-said { color: var(--ph-dim); }
+.conn-card .key-form input, .conn-card .key-form select { color: var(--ph); background: #000; border: 1px solid var(--ph-dim); border-radius: 0; font-size: 12px; padding: 6px 8px; }
+.conn-card .key-form input::placeholder { color: var(--ph-dim); opacity: .7; }
+.conn-card .key-form input:focus, .conn-card .key-form select:focus { outline: 1px solid var(--ph); border-color: var(--ph); }
+.conn-card .key-row button { border: 1px solid var(--ph); color: #041004; background: var(--ph); border-radius: 0; }
+.conn-card .key-row button:hover:not(:disabled) { background: var(--ph-dim); color: #041004; }
+.conn-card .key-link:hover { color: var(--ph); }
+.conn-card .key-said.bad { color: var(--terror); }
+.bridge-card.bridge-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 6%, transparent); }
+.bridge-card.bridge-warn b { color: var(--warn); }
+
+/* A module card, floor by floor: what it is, what it does, what it touches, how it is doing, and
+   then the switch. Everything inside a card wears the panel's phosphor, never the page's palette,
+   and every number is given room so it can never land on its own label. */
+/* The version line: who made it, what version is running, the button that goes and looks for a
+   newer one, and what the last look found. */
+.module-card .vendor { font-size: 9.5px; letter-spacing: .2em; color: var(--ph-dim); line-height: 1.4; }
+/* The version, the button that goes and looks, and what the last look found. */
+.module-card .version { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.module-card .version b { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ph); text-shadow: none; }
+.module-card .version .check { border: 1px solid var(--ph-faint); background: transparent; color: var(--ph-dim); font: inherit; font-size: 11px; line-height: 1; letter-spacing: 0; padding: 3px 7px; cursor: pointer; }
+.module-card .version .check:hover { border-color: var(--ph); color: var(--ph); }
+.module-card .version .check:disabled { opacity: .4; cursor: default; }
+.mother-head .mother-close.add { color: var(--ph); border-color: var(--ph-dim); }
+.mother-head .mother-close.add:hover { background: color-mix(in srgb, var(--ph) 14%, transparent); }
+.module-card .version .get { border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); font: inherit; font-size: 8.5px; letter-spacing: .16em; padding: 3px 8px; cursor: pointer; }
+.module-card .version .get:hover { background: color-mix(in srgb, var(--warn) 22%, transparent); }
+.module-card .version .get:disabled { opacity: .45; cursor: default; }
+.module-card .version .update { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: var(--ph-dim); text-shadow: none; }
+.module-card .version .update:empty { display: none; }
+.module-card .version .update.new { color: var(--warn); }
+.module-card .card-panel { display: grid; gap: 14px; }
+.module-card .card-panel:empty, .module-card .actions:empty { display: none; }
+.module-card .card-block { display: grid; gap: 8px; }
+.module-card .card-block h5 { margin: 0; font-size: 9px; font-weight: 400; letter-spacing: .22em; color: var(--ph-dim); border: 0; padding: 0; }
+.module-card .card-toggles { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
+.module-card .card-toggles .control { display: inline-flex; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: .14em; color: var(--ph-dim); }
+.module-card .card-toggles .control input[type="text"] { border: 1px solid var(--ph-dim); background: #000; color: var(--ph); font: inherit; font-size: 10.5px; letter-spacing: .04em; padding: 5px 8px; }
+.module-card .card-toggles .toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .14em; color: var(--ph-dim); cursor: pointer; }
+.module-card .card-toggles .toggle input { accent-color: var(--brew); }
+
+/* A fold inside a card: the section name, how many lines are behind it, and its own button. */
+.card-fold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
+.card-fold > summary::-webkit-details-marker { display: none; }
+.card-fold > summary b { font-size: 9px; font-weight: 400; letter-spacing: .22em; color: var(--ph-dim); }
+.card-fold > summary:hover b { color: var(--ph); }
+.card-fold > summary .caret { margin-left: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--ph); white-space: nowrap; }
+.card-fold > summary .count { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--ph-dim); }
+.card-fold-body { padding-top: 10px; }
+.module-card .card-fold ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
+.module-card .card-fold li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 11.5px; line-height: 1.55; color: rgba(210, 255, 190, .82); text-shadow: none; }
+.module-card .card-fold li i { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--ph-dim); }
+.module-card .card-fold ul.card-commands { gap: 4px; }
+.module-card .card-fold ul.card-commands li { grid-template-columns: 1fr; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ph); }
+
+/* Numbers read at a glance: the figure, then its name under it, each in its own cell. */
+.module-card .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px 14px; }
+.module-card .metric { display: grid; gap: 3px; align-content: start; min-width: 0; }
+.module-card .metric b { font-family: var(--mono); font-size: 15px; font-weight: 600; line-height: 1.15; letter-spacing: .01em; color: var(--ph); text-shadow: none; overflow-wrap: anywhere; }
+.module-card .metric span { font-family: var(--mono); font-size: 8.5px; line-height: 1.4; letter-spacing: .14em; color: var(--ph-dim); text-shadow: none; }
+
+/* ASH · what each block of the briefing weighs against the heaviest one. */
+.ash-blocks { display: grid; gap: 5px; }
+.ash-block { display: grid; grid-template-columns: 96px minmax(50px, 1fr) auto; gap: 10px; align-items: center; }
+.ash-block b { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: var(--ph-dim); font-weight: 600; text-shadow: none; overflow: hidden; text-overflow: ellipsis; }
+.ash-block i { height: 5px; background: var(--ph-faint); position: relative; }
+.ash-block i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: color-mix(in srgb, var(--ph) 65%, transparent); }
+.ash-block span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--ph-dim); white-space: nowrap; text-shadow: none; }
+@media (max-width: 720px) { .ash-block { grid-template-columns: 1fr; } .ash-block i { display: none; } }
+
+/* How grown the archive is. Six readings, the weakest marked, and what would raise it. */
+/* The three tests. A verdict that can say NOT YET is worth more than a bar that only fills. */
+.exams { display: grid; gap: 10px; margin: 18px 0 4px; }
+.exams h4 { margin: 0; font-size: 10px; font-weight: 400; letter-spacing: .22em; color: var(--ph); }
+.exams .exam { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--ph-faint); border-left: 2px solid var(--ph-dim); }
+.exams .exam.passed { border-left-color: var(--ph); }
+.exams .exam.failed { border-left-color: var(--warn); }
+.exams .exam-head { display: flex; align-items: baseline; gap: 12px; }
+.exams .exam-head b { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; color: rgba(210, 255, 190, .9); }
+.exams .verdict { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--ph-dim); white-space: nowrap; }
+.exams .exam.passed .verdict { color: var(--ph); }
+.exams .exam.failed .verdict { color: var(--warn); }
+.exams .about { text-transform: none; letter-spacing: .02em; line-height: 1.6; }
+.exams .said { margin: 0; font-size: 12px; line-height: 1.55; color: #eaffdf; text-shadow: none; }
+.exams .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 2px; }
+.exams button { border: 1px solid var(--ph); background: transparent; color: var(--ph); font: inherit; font-size: 10px; letter-spacing: .18em; padding: 7px 12px; cursor: pointer; }
+.exams button.primary { background: var(--ph); color: #041004; text-shadow: none; }
+.exams button:disabled { opacity: .4; cursor: default; }
+
+.maturity { display: grid; gap: 10px; margin: 12px 0 4px; }
+.maturity > .card-fold { border-top: 1px solid var(--ph-faint); padding-top: 10px; }
+.maturity .maturity-next { margin: 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.8; letter-spacing: .1em; text-transform: uppercase; color: #eaffdf; text-shadow: 0 0 6px rgba(155, 255, 102, .18); padding: 11px 13px; border: 1px solid var(--ph); border-left-width: 4px; background: var(--ph-faint); }
+.maturity .maturity-next b { font-size: 9px; letter-spacing: .22em; color: var(--ph); margin-right: 10px; }
+.maturity .maturity-next .where { font-size: 9px; letter-spacing: .16em; color: var(--ph); white-space: nowrap; }
+.maturity-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+.maturity-head b { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; }
+.maturity-head span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; line-height: 1.7; text-transform: uppercase; color: var(--ph-dim); }
+.maturity-head b.stage.empty, .maturity-head b.stage.sparse { color: var(--ph-dim); }
+.maturity-head b.stage.forming { color: var(--ph-dim); }
+.maturity-head b.stage.working, .maturity-head b.stage.mature { color: var(--ph); }
+.maturity-row { display: grid; grid-template-columns: 210px 90px 1fr; gap: 12px; align-items: center; }
+.maturity-row b { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--ph-dim); font-weight: 400; }
+.maturity-row i { height: 5px; background: var(--ph-faint); position: relative; }
+.maturity-row i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: var(--ph-dim); }
+.maturity-row.weakest i::after { background: var(--ph); }
+.maturity-row.weakest b { color: var(--ph); }
+.maturity-row span { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--ph-dim); opacity: .8; }
+.maturity-next { color: var(--ph); }
+@media (max-width: 860px) { .maturity-row { grid-template-columns: 1fr; gap: 2px; } .maturity-row i { display: none; } }