@jossuealcala/madre 1.0.1 → 1.0.3

package/public/styles.css

@@ -1,3 +1,5 @@
+/* SPDX-License-Identifier: AGPL-3.0-only
+   MADRE · © 2026 Jossue Alcalá · GNU AGPL v3 with additional terms (Section 7): ADDITIONAL-TERMS.md */
 /* MADRE — a conversation, not a log.
    iMessage for the dialogue, a terminal for the metadata, MOTHER for the mood. */
 
@@ -41,6 +43,9 @@
   --text-3: #626a5f;
 
   --phosphor: #9bff66;           /* MOTHER */
+  /* MADRE's own green, which an accent never repaints: the copilot wears it (2026-10-14). */
+  --madre-green: #9bff66;
+  --madre-green-ink: #0a1405;
   --brew: #28fe14;               /* Terminal.app 'Homebrew' green */
   --brew-ink: #041004;
   --phosphor-ink: #0a1405;
@@ -90,6 +95,14 @@
   --icon-stroke: 1.6;
   --icon-stroke-hover: 1.8;
   --icon-stroke-on: 2.05;
+  /* The icons' sizes (1.0.3): four, and which one a drawing takes is said by what holds it, never
+     by the drawing. A mark inside a pill, a tab or a badge (×, ⌄, ✓); a key of 22 to 30 px, or a
+     drawing beside a word; a square key of 34 px (the narrow bar, the house's keys, the box); a
+     round key that floats (40 to 44 px). */
+  --ico-xs: 12px;
+  --ico-sm: 15px;
+  --ico-md: 18px;
+  --ico-lg: 22px;
 }
 /* Reading code, in whichever ground the room is standing on. These were picked for phosphor on
    black; on white the same green and yellow disappear, so each one has a light value of its own. */
@@ -121,6 +134,8 @@
     --text-2: #5a615a;
     --text-3: #767d75;
     --phosphor: #2f8a1c;
+    --madre-green: #2f8a1c;
+    --madre-green-ink: #ffffff;
     --brew: #178f0c;
     --brew-ink: #ffffff;
     --phosphor-ink: #ffffff;
@@ -157,6 +172,8 @@
     --text-2: #5a615a;
     --text-3: #767d75;
     --phosphor: #2f8a1c;
+    --madre-green: #2f8a1c;
+    --madre-green-ink: #ffffff;
     --brew: #178f0c;
     --brew-ink: #ffffff;
     --phosphor-ink: #ffffff;
@@ -829,8 +846,11 @@ textarea::placeholder { color: var(--text-3); }
 .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); }
+/* Under the copilot #3 is MADRE's green, not EDIT's red: the chip, the send and the ring follow. */
+.composer.m3.copilot { --mode: var(--madre-green); --mode-ink: var(--madre-green-ink); }
+.composer.copilot .picker .mode-chip.m3 { --mode: var(--madre-green); }
 .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: var(--lift-1); transition: background calc(250ms * var(--motion-scale)), box-shadow calc(250ms * var(--motion-scale)); }
-.field button[type="submit"] svg { width: 18px; height: 18px; }
+.field button[type="submit"] svg { width: var(--ico-md); height: var(--ico-md); }
 .field button[type="submit"]:hover { filter: brightness(1.06); }
 .field button[type="submit"]:disabled { opacity: .4; cursor: default; box-shadow: none; }
 .pick-label .pick-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
@@ -886,6 +906,11 @@ textarea::placeholder { color: var(--text-3); }
   .who .reply { max-width: 150px; }
   .system .gauge { width: 160px; }
 }
+/* A conversation 680 px wide beside a docked panel reads as one in a 680 px window (app.js, roomWidth);
+   the bar has its own container and folds by itself. */
+:where(:root.room-680) .row { max-width: 96%; }
+:where(:root.room-680) .who .reply { max-width: 150px; }
+:where(:root.room-680) .system .gauge { width: 160px; }
 
 /* ================= MU/TH/UR: troubleshooting ================= */
 .mother-button {
@@ -1009,6 +1034,10 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .mother-cmd .copy:hover { color: var(--ph); border-color: var(--ph-dim); }
 .mother-cmd .copy.done { color: var(--ph); border-color: var(--ph); }
 .mother-cmd .copy:hover { color: var(--ph); border-color: var(--ph); }
+/* The copy key holds only its drawing: a button rule of a sheet or a card (13px each side) used to
+   reach it and leave the drawing no room, an empty square beside the command (2026-10-18). */
+.mother-cmd > .copy { padding: 0 !important; min-width: 26px; }
+.mother-cmd > .copy svg { flex: none; width: 13px; height: 13px; }
 .mother-record { display: grid; grid-template-columns: 64px 92px 1fr auto 20px; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ph-faint); font-size: 12px; }
 .mother-record .t { color: var(--ph-dim); }
 .mother-record .a { color: var(--agent, var(--ph)); text-transform: uppercase; letter-spacing: .1em; }
@@ -1081,8 +1110,11 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 .module-card .actions .note { font-size: 10px; letter-spacing: .12em; color: var(--ph-dim); }
 .module-card .confirm { border: 1px dashed var(--ph); padding: 12px 14px; display: grid; gap: 10px; }
 .module-card .confirm .warn { color: #ffd166; font-size: 11px; letter-spacing: .12em; }
-.module-log { max-height: 260px; overflow-y: auto; border: 1px solid var(--ph-faint); background: #000; padding: 10px 12px; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ph); }
-.module-log .err { color: #ff7b72; }
+/* What an install printed, in the same box as the commands beside it (2026-10-18): the page's own
+   ground and ink, in the code face. It was a black terminal painted with the theme's phosphor,
+   which on the light theme is a dark green: dark grey on black, unreadable. */
+.module-log { max-height: 260px; overflow-y: auto; margin: 0; padding: 10px 12px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .14); font-family: var(--mono); font-size: 11.5px; line-height: 1.6; letter-spacing: 0; text-transform: none; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
+.module-log .err { color: var(--crit, #d93a3a); }
 .system.module { color: var(--phosphor); }
 .system.module .cmd { text-transform: none; letter-spacing: 0; color: var(--text-2); display: block; margin-top: 4px; }
 .system.module.failed { color: var(--danger); }
@@ -1184,7 +1216,11 @@ dialog.mother::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(
 
 .model-menu.effort-menu { --tone: var(--agent, var(--phosphor)); width: min(400px, calc(100vw - 24px)); padding: 12px 14px 10px; }
 .effort-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 12px; }
-.effort-head .model-menu-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* The title on the left and AUTO in the right corner, on the same line (2026-10-14): the title
+   keeps its room and is cut before it is covered; a long AUTO reading is cut instead of the title. */
+.effort-head .model-menu-title { flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
+.effort-head .effort-auto { margin-left: auto; max-width: 52%; }
+.effort-head .effort-auto .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* Letting the CLI decide: a small switch beside the title, lit while it is the choice. */
 .effort-auto { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 26px; padding: 0 10px 0 9px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; transition: color var(--motion) var(--ease-out), border-color var(--motion) var(--ease-out), background-color var(--motion) var(--ease-out); }
 .effort-auto .auto-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color var(--motion) var(--ease-out); }
@@ -1327,7 +1363,7 @@ dialog.override[open] { display: grid; place-items: center; }
 .field { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; }
 .attach { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
 .attach:hover { color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); }
-.attach svg { width: 18px; height: 18px; }
+.attach svg { width: var(--ico-md); height: var(--ico-md); }
 .composer.dropping .field { border-color: var(--phosphor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--phosphor) 16%, transparent); }
 .attachments { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 6px; }
 .attachment-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); font-family: var(--mono); font-size: 10.5px; color: var(--text-2); max-width: 260px; }
@@ -1382,7 +1418,7 @@ dialog.viewer { border: 0; padding: 0; width: min(1100px, 96vw); max-width: 96vw
    The crew is the exception that needs markup: five spheres cannot be compacted by CSS into one
    button, so there are two elements and the container query picks which one is on screen. */
 .bar-icon { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; padding: 0 8px 0 6px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); cursor: pointer; }
-.bar-icon svg { width: 17px; height: 17px; }
+.bar-icon svg { width: var(--ico-sm); height: var(--ico-sm); }
 .bar-icon:hover { color: var(--phosphor); border-color: var(--phosphor); }
 .bar-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-family: var(--mono); font-size: 9px; letter-spacing: 0; }
 .bar-glyph { display: none; }
@@ -1412,7 +1448,7 @@ dialog.viewer { border: 0; padding: 0; width: min(1100px, 96vw); max-width: 96vw
      that was on screen. A count belongs inside the thing it counts. */
   .mother-button { width: auto; height: 28px; padding: 0 9px 0 7px; gap: 5px; font-size: 0; justify-content: center; }
   .mother-button .mother-glyph { display: none; }
-  .mother-button .bar-glyph { display: block; width: 17px; height: 17px; }
+  .mother-button .bar-glyph { display: block; width: var(--ico-md); height: var(--ico-md); }
   .mother-button .modules-count, .mother-button .mother-count { font-size: 9px; }
   .stop-all { width: 30px; height: 28px; padding: 0; gap: 0; font-size: 0; justify-content: center; }
   /* Squircles with their count on the corner, the way a phone shows it. The count used to be
@@ -1421,7 +1457,7 @@ dialog.viewer { border: 0; padding: 0; width: min(1100px, 96vw); max-width: 96vw
      and touches nothing else. A ring in the background colour cuts it out of the outline. */
   .bar { gap: 14px; }
   .bar-icon, .mother-button, .stop-all { position: relative; width: 34px; height: 34px; padding: 0; gap: 0; border-radius: 11px; justify-content: center; }
-  .bar-icon svg, .mother-button .bar-glyph { width: 18px; height: 18px; }
+  .bar-icon svg, .mother-button .bar-glyph { width: var(--ico-md); height: var(--ico-md); }
   .bar-icon .bar-count, .mother-button .modules-count, .mother-button .mother-count {
     position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
     font-family: var(--mono); font-size: 9.5px; font-weight: 700; line-height: 18px; box-shadow: 0 0 0 2px var(--bg);
@@ -1521,6 +1557,8 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .viewer-nav { display: inline-flex; gap: 4px; }
 .viewer-nav .nav { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); border-radius: 7px; cursor: pointer; font: inherit; font-size: 14px; line-height: 1; }
 .viewer-nav .nav:hover { color: var(--text); border-color: var(--text-3); }
+/* The browser's reload is the bar's reload mark (2026-10-14), the same drawing, still. */
+.viewer-nav .nav.reload svg { width: var(--ico-sm); height: var(--ico-sm); }
 .viewer-nav .nav:disabled { opacity: .35; cursor: default; }
 .viewer-errors { display: grid; gap: 6px; padding: 8px 16px; border-bottom: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); font-family: var(--mono); font-size: 11px; }
 .viewer-errors:not([hidden]) + .viewer-body { height: auto; max-height: calc(100% - 46px); }
@@ -1578,7 +1616,7 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 
 /* ================= creation lease ================= */
 .create-toggle { height: 30px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; align-self: center; transition: color calc(200ms * var(--motion-scale)), border-color calc(200ms * var(--motion-scale)), background calc(200ms * var(--motion-scale)); }
-.create-toggle svg { width: 15px; height: 15px; }
+.create-toggle svg { width: var(--ico-sm); height: var(--ico-sm); }
 .create-toggle:hover { color: var(--text); border-color: var(--text-3); }
 .create-toggle[aria-pressed="true"] { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); text-shadow: none; }
 .create-toggle .lock.open { display: none; }
@@ -1695,8 +1733,10 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .system.control.changed.quiet { border-style: dashed; color: var(--text-2); background: transparent; }
 /* The status and the path in two columns: the status never breaks inside a word (MODIFICADO used
    to split as MODIFICAD / O), and a long path breaks inside itself, left-aligned, not centred. */
-.system.control .files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-self: stretch; text-align: left; }
-.system.control .files li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px; align-items: baseline; }
+/* Centred like the head and the tally around them: the list is one block in the middle of the card,
+   its kinds and its files still each in their own column. */
+.system.control .files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, max-content); justify-content: center; gap: 6px 10px; align-items: baseline; justify-self: stretch; text-align: left; }
+.system.control .files li { display: contents; }
 .system.control .files .st { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); min-width: 64px; white-space: nowrap; }
 .system.control .files .st.A { color: var(--phosphor); } .system.control .files .st.M { color: var(--warn); } .system.control .files .st.D { color: var(--danger); }
 .system.control .files .file-ref { font-family: var(--mono); font-size: 12px; color: var(--text); background: transparent; border: 0; border-bottom: 1px dashed var(--line-2); padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; justify-self: start; }
@@ -1762,6 +1802,8 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .bubble .artifacts { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--line-2); }
 .bubble .artifacts .label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--warn); margin-bottom: 6px; }
 @media (max-width: 680px) { .create-toggle .create-word { display: none; } .create-toggle { padding: 0 8px; } }
+/* The same at 680 px of conversation beside a docked panel, where the window's width says nothing (app.js, roomWidth). */
+:where(:root.room-680) .create-toggle .create-word { display: none; } :where(:root.room-680) .create-toggle { padding: 0 8px; }
 
 /* no horizontal overflow inside bubbles: wrap everything */
 .bubble, .bubble * { min-width: 0; }
@@ -1910,6 +1952,13 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .mode-what { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
 .mode-what .who { display: inline; margin: 0; padding: 0; font: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--agent, var(--text)); }
 .mode-why { font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
+.mode-what .mode-time { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-2); }
+/* How long the permission holds: the time the agent asked for, preselected; the human may change it. */
+.mode-windows { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); justify-self: start; }
+.mode-window { border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 5px 10px; cursor: pointer; transition: background .18s ease, color .18s ease; }
+.mode-window:hover { color: var(--text); }
+.mode-window[aria-checked="true"] { background: var(--panel, #fff); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
+.mode-window:focus-visible { outline: 2px solid color-mix(in srgb, var(--warn, #e2a022) 60%, transparent); outline-offset: 1px; }
 .mode-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
 .mode-alt { border: 1px solid var(--line-2); border-radius: 7px; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 6px 11px; cursor: pointer; }
 .mode-alt:hover { color: var(--text); border-color: var(--text-3); }
@@ -1967,6 +2016,16 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .run-request .run-line.ran .choice-tag { border-color: var(--ok, var(--phosphor)); color: var(--ok, var(--phosphor)); }
 .run-request .run-line.failed .choice-tag { border-color: var(--crit); color: var(--crit); }
 .run-request .run-summary { margin: 10px 2px 0; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); }
+/* RUN ALL and the hand-back: quiet buttons in the agent's colour, under the summary. */
+.run-request .run-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 2px 0; }
+.run-request .run-actions:empty { display: none; }
+.run-request :is(.run-all, .run-back) { border: 1px solid color-mix(in srgb, var(--agent, var(--phosphor)) 55%, transparent); border-radius: 999px; background: transparent; color: var(--agent, var(--text)); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 6px 12px; cursor: pointer; transition: background .18s ease; }
+.run-request :is(.run-all, .run-back):hover:not(:disabled) { background: color-mix(in srgb, var(--agent, var(--phosphor)) 10%, transparent); }
+.run-request :is(.run-all, .run-back):disabled { opacity: .5; cursor: progress; }
+.run-request.returned .run-summary { color: var(--ok, var(--phosphor)); }
+.run-request.returned .run-all { display: none; }
+/* A message MADRE wrote for the human: the results of commands going back. Same bubble, quieter. */
+#messages .row.user.auto .bubble { opacity: .82; }
 .run-request .run-progress-track { position: relative; flex: 1 1 100%; height: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--agent, var(--phosphor)) 18%, transparent); }
 .run-request .run-progress-track::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 32%; border-radius: inherit; background: var(--agent, var(--phosphor)); animation: run-travel 1.6s ease-in-out infinite alternate; }
 @keyframes run-travel { from { transform: translateX(0); } to { transform: translateX(220%); } }
@@ -2038,6 +2097,7 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .free-offer .free-go { flex: none; border: 1px solid var(--brew); background: transparent; color: var(--brew); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
 .free-offer .free-go:hover { background: color-mix(in srgb, var(--brew) 16%, transparent); }
 @media (max-width: 720px) { .free-offer { flex-wrap: wrap; } }
+:where(:root.room-720) .free-offer { flex-wrap: wrap; }
 /* Intenciones: the same shelf as the @madre offer, in the room's accent when a cheaper rung was
    measured to be enough or is worth measuring, and in the warning ink when the rung chosen looks
    too light. The shelf itself is drawn with the box, below. */
@@ -2078,14 +2138,14 @@ dialog.intents-window { width: 760px; height: 640px; }
 .slash-menu .hint { padding: 4px 10px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--text-3); }
 /* ---------- project files panel: lives in the free space right of the thread ---------- */
 .tree-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); cursor: pointer; padding: 0; }
-.tree-button svg { width: 16px; height: 16px; }
+.tree-button svg { width: var(--ico-sm); height: var(--ico-sm); }
 .tree-button:hover { color: var(--phosphor); border-color: var(--phosphor); box-shadow: var(--ring-soft); }
 /* 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 svg { width: var(--ico-sm); height: var(--ico-sm); }
 .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; }
@@ -2111,7 +2171,7 @@ dialog.intents-window { width: 760px; height: 640px; }
 .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 svg { width: var(--ico-lg); height: var(--ico-lg); }
 .chats-button:hover { color: var(--phosphor); border-color: var(--phosphor); box-shadow: var(--ring-soft); }
 .chats-button:active { transform: translateY(1px); }
 
@@ -2228,6 +2288,31 @@ dialog.intents-window { width: 760px; height: 640px; }
 .command-card .undo { margin: 0 12px 10px; border: 1px solid var(--terror); background: color-mix(in srgb, var(--terror) 12%, transparent); color: var(--terror); font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
 .command-card .undo:hover { background: color-mix(in srgb, var(--terror) 22%, transparent); }
 .command-card .undo:disabled { opacity: .5; cursor: default; }
+/* What a terminal said, folded (2026-10-14): one line — the command, how it ended, how long, who
+   asked — and its last line beneath; the output opens on a click, without a jump. */
+.command-card.terminal .term-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; cursor: pointer; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); }
+.command-card.terminal .term-head:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 55%, transparent); outline-offset: -2px; border-radius: 12px; }
+.command-card.terminal .term-tag { flex: none; font-size: 9.5px; letter-spacing: .14em; font-weight: 600; color: var(--text-3); }
+.command-card.terminal code.term-line { padding: 0; border: 0; background: none; }
+.command-card.terminal .term-line { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--text); }
+.command-card.terminal .term-status { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 10px; letter-spacing: .03em; white-space: nowrap; color: var(--text-2); background: color-mix(in srgb, var(--text) 6%, transparent); }
+.command-card.terminal .term-status.ok { color: var(--ok, #2f9e44); background: color-mix(in srgb, var(--ok, #2f9e44) 12%, transparent); }
+.command-card.terminal .term-status.failed { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
+.command-card.terminal .term-who { flex: none; font-size: 10.5px; color: var(--agent, var(--text-3)); }
+.command-card.terminal .term-count { flex: none; font-size: 10px; color: var(--text-3); white-space: nowrap; }
+.command-card.terminal .term-head .chev-icon { flex: none; display: inline-flex; color: var(--text-3); transition: transform .22s ease; }
+.command-card.terminal.open .term-head .chev-icon { transform: rotate(180deg); }
+.command-card.terminal .term-peek { margin-top: -4px; padding: 0 12px 9px; font-family: var(--mono); font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.command-card.terminal.open .term-peek { display: none; }
+.command-card.terminal .term-out { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
+.command-card.terminal.open .term-out { grid-template-rows: 1fr; }
+.command-card.terminal .term-clip { min-height: 0; overflow: hidden; }
+.command-card.terminal pre { max-height: 420px; border-top: 1px solid var(--line-2); background: color-mix(in srgb, var(--text) 3%, transparent); }
+.command-card.terminal pre .l-bad { color: var(--crit); }
+.command-card.terminal pre .l-good { color: var(--ok, #2f9e44); }
+.command-card.terminal .undo { margin-top: 10px; }
+@media (max-width: 560px) { .command-card.terminal .term-count, .command-card.terminal .term-tag { display: none; } }
+@media (prefers-reduced-motion: reduce) { .command-card.terminal .term-out, .command-card.terminal .term-head .chev-icon { transition: none; } }
 .command-card .outcome { display: inline-block; margin: 0 12px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--phosphor); }
 
 .module-card select { border: 1px solid var(--ph-dim); background: #000; color: var(--ph); font: inherit; font-size: 10.5px; letter-spacing: .06em; padding: 6px 8px; }
@@ -2237,7 +2322,7 @@ dialog.intents-window { width: 760px; height: 640px; }
 .bubble:hover .bubble-actions, .bubble:focus-within .bubble-actions { opacity: 1; }
 @media (hover: none) { .bubble-actions { opacity: .55; } }
 .bubble-actions .act { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; padding: 0; transition: color calc(150ms * var(--motion-scale)), background calc(150ms * var(--motion-scale)); }
-.bubble-actions .act svg { width: 15px; height: 15px; }
+.bubble-actions .act svg { width: var(--ico-sm); height: var(--ico-sm); }
 .bubble-actions .act:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
 .bubble-actions .act.good.on { color: var(--phosphor); }
 .bubble-actions .act.bad.on { color: var(--terror); }
@@ -2294,12 +2379,12 @@ dialog.intents-window { width: 760px; height: 640px; }
    Every control in the bar carries a drawing in the same idiom — 20×20, round ends, one stroke —
    and its word, where it has one, beside it. What is open is drawn heavier and its word is set
    bolder; the pointer gets half of that on the way. Colour, weight and ground carry the state. */
-.bar .bar-glyph { display: block; flex: none; width: 15px; height: 15px; }
+.bar .bar-glyph { display: block; flex: none; width: var(--ico-sm); height: var(--ico-sm); }
 .bar > .mother-button .mother-glyph { display: none; }
 .bar > .mother-button, .bar > .stop-all { gap: 7px; }
 .update-glyph { display: inline-flex; }
 @container bar (max-width: 980px) {
-  .bar > :is(.mother-button, .stop-all) .bar-glyph { width: 18px; height: 18px; }
+  .bar > :is(.mother-button, .stop-all) .bar-glyph { width: var(--ico-md); height: var(--ico-md); }
   .bar > .mother-button, .bar > .stop-all { gap: 0; }
 }
 /* The live line: the dot keeps saying the state, the waves around it say what the dot is. */
@@ -2363,15 +2448,15 @@ dialog.intents-window { width: 760px; height: 640px; }
    replayed the moment .entering was taken off — the panel arrived twice. */
 .tree.chats { transform-origin: left top; }
 .chats .tree-close { display: inline-grid; place-items: center; padding: 4px; transition: color var(--motion) var(--ease-out), background-color var(--motion) var(--ease-out); }
-.chats .tree-close svg { display: block; width: 14px; height: 14px; }
+.chats .tree-close svg { display: block; width: var(--ico-sm); height: var(--ico-sm); }
 .chats .tree-close:hover svg { transform: rotate(90deg); }
 .chats-new-button { transition: color var(--motion) var(--ease-out), background-color var(--motion) var(--ease-out), border-color var(--motion) var(--ease-out); }
 .chats-new-button:hover { border-style: solid; }
-.chats-new-button svg { width: 15px; height: 15px; }
+.chats-new-button svg { width: var(--ico-sm); height: var(--ico-sm); }
 .chats-body .chat { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; transition: background-color var(--motion) var(--ease-out), color var(--motion) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
 .chats-body .chat:active { transform: scale(.985); }
 .chats-body .chat-glyph { display: grid; place-items: center; width: 16px; height: 16px; color: var(--text-3); transition: color var(--motion) var(--ease-out), transform var(--motion) var(--ease-out); }
-.chats-body .chat-glyph svg { display: block; width: 15px; height: 15px; }
+.chats-body .chat-glyph svg { display: block; width: var(--ico-sm); height: var(--ico-sm); }
 .chats-body .chat-glyph :is(.chat-spin, .chat-dot) { margin: 0; vertical-align: 0; }
 .chats-body .chat:hover .chat-glyph { color: var(--text-2); transform: translateX(1px); }
 .chats-body .chat.on .chat-glyph { color: var(--phosphor); transform: none; }
@@ -2428,6 +2513,14 @@ dialog.intents-window { width: 760px; height: 640px; }
 .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); }
+/* The other way in, folded under the buttons: the same install or sign-in typed in a terminal.
+   A quiet line until someone asks for it; the room's own buttons stay the way forward. */
+.terminal-way > summary { width: max-content; font-size: 11.5px; color: var(--text-3); cursor: pointer; list-style: none; }
+.terminal-way > summary::-webkit-details-marker { display: none; }
+.terminal-way > summary::after { content: ' ›'; }
+.terminal-way[open] > summary::after { content: ' ⌄'; }
+.terminal-way > summary:hover { color: var(--text-2); }
+.terminal-way .mother-cmd { margin: 8px 0 0; }
 
 .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; }
@@ -2473,6 +2566,8 @@ dialog.intents-window { width: 760px; height: 640px; }
    to be nowhere, so the only thing on screen was a heartbeat and the sign-in died of its clock. */
 .login-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .login-ask[hidden] { display: none; }
+.login-device { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.login-device code { font-family: var(--mono); font-size: 15px; letter-spacing: .12em; color: var(--text); user-select: all; }
 .login-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 260px; }
 .login-code input { flex: 1 1 180px; min-width: 150px; font: inherit; font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; }
 .login-code input:focus { outline: none; border-color: var(--phosphor); }
@@ -2594,6 +2689,12 @@ dialog.intents-window { width: 760px; height: 640px; }
 
 /* A file an agent wrote in this room, in that agent's own colour. */
 .tree .node .touched { width: 6px; height: 6px; border-radius: 50%; background: var(--agent, var(--ph)); box-shadow: none; flex: 0 0 auto; margin-left: 2px; }
+/* The way down to what changed: a folder carries the dot of the last touch beneath it, hollow, so
+   the filled one is always the file itself. */
+.tree .node .touched.trail { background: transparent; box-shadow: inset 0 0 0 1.5px var(--agent, var(--ph)); }
+.tree-head .tree-refresh.spin svg { animation: tree-spin .6s ease; }
+@keyframes tree-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .tree-head .tree-refresh.spin svg { animation: none; } }
 
 /* Read by what the file is. Six roles, the room's own phosphor: enough to find a string or a
    comment at a glance, and never so many colours that the code stops being the thing you see. */
@@ -2855,11 +2956,6 @@ dialog.whats-new::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: bl
   border-radius: 16px; background: var(--panel); color: var(--text); border: 1px solid var(--line-2);
   box-shadow: 0 18px 50px rgba(0, 0, 0, .4); animation: wn-in calc(300ms * var(--motion-scale)) cubic-bezier(.2, .8, .2, 1);
 }
-.hint-card.beside::before { content: none; }
-.hint-card::before {
-  content: ''; position: absolute; top: -7px; left: calc(var(--arrow, 24px) - 6px); width: 12px; height: 12px;
-  background: var(--panel); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg);
-}
 @media (prefers-reduced-motion: reduce) { .hint-card { animation: none; } }
 .hint-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
 .hint-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
@@ -2926,7 +3022,7 @@ dialog.whats-new::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: bl
 .split-dock.working .split-spin { display: inline-block; }
 @media (prefers-reduced-motion: reduce) { .split-spin { animation: none; border-color: var(--phosphor); } }
 .split-action { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-3); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
-.split-action svg { width: 15px; height: 15px; }
+.split-action svg { width: var(--ico-sm); height: var(--ico-sm); }
 .split-action:hover, .split-action:focus-visible { color: var(--text); border-color: var(--line-2); }
 .split-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: transparent; }
 .shell.dragging-split .split-frame, .shell.dragging-split .browser-dock iframe { pointer-events: none; }
@@ -2937,7 +3033,7 @@ dialog.whats-new::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: bl
    window, or a window of its own. One lit is how it is shown now; the other moves it. */
 .chats-body .chat-beside { display: inline-flex; align-items: center; gap: 2px; }
 .chats-body :is(.chat-split, .chat-window) { display: inline-grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--text-3); padding: 3px 5px; border-radius: 7px; cursor: pointer; opacity: 0; }
-.chats-body :is(.chat-split, .chat-window) svg { width: 14px; height: 14px; }
+.chats-body :is(.chat-split, .chat-window) svg { width: var(--ico-sm); height: var(--ico-sm); }
 .chats-body :is(.chat-split, .chat-window) { transition: opacity var(--motion) var(--ease-out), color var(--motion) var(--ease-out), border-color var(--motion) var(--ease-out); }
 .chats-body .chat-row:hover :is(.chat-split, .chat-window), .chats-body :is(.chat-split, .chat-window):focus-visible, .chats-body :is(.chat-split, .chat-window).on, .chats-body .chat-beside:has(.on) :is(.chat-split, .chat-window) { opacity: 1; }
 .chats-body :is(.chat-split, .chat-window):hover { color: var(--text); border-color: var(--line-2); }
@@ -3245,7 +3341,7 @@ dialog.whats-new::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: bl
 .ports-refresh { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; color: var(--text-2); background: var(--surface, var(--panel)); box-shadow: var(--key-rest); cursor: pointer; }
 .ports-refresh:hover { color: var(--text); box-shadow: var(--key-over, var(--key-rest)); }
 .ports-refresh:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
-.ports-refresh svg { width: 17px; height: 17px; }
+.ports-refresh svg { width: var(--ico-sm); height: var(--ico-sm); }
 .ports-refresh.checking svg { animation: ports-turn .8s linear infinite; }
 @keyframes ports-turn { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .ports-refresh.checking svg { animation: none; } }
@@ -3288,7 +3384,7 @@ dialog.whats-new::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: bl
 .surface-modes { display: inline-flex; align-items: center; flex: none; gap: 0; padding: 2px; border: 1px solid var(--line-2); border-radius: 9px; background: color-mix(in srgb, var(--text) 3%, transparent); }
 .surface-mode { display: inline-grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer; transition: color var(--motion) var(--ease-out), background-color var(--motion) var(--ease-out); }
 .surface-mode + .surface-mode { margin-left: 1px; }
-.surface-mode svg { width: 15px; height: 15px; }
+.surface-mode svg { width: var(--ico-sm); height: var(--ico-sm); }
 .surface-mode:hover, .surface-mode:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); outline: 0; }
 .surface-mode[aria-pressed="true"] { color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 14%, transparent); }
 .surface-mode[aria-pressed="true"] :is(.ic-h, .ic-f) { fill: currentColor; fill-opacity: .35; }
@@ -3417,7 +3513,7 @@ dialog.surface.no-intro .mother-frame { animation: none; }
 .slash-menu .group:first-child { padding-top: 6px; }
 .slash-menu .item.cmd { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border-radius: 11px; transition: background-color var(--motion-fast) var(--ease-out); }
 .slash-menu .item.cmd .glyph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text-2); transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
-.slash-menu .item.cmd .glyph svg { width: 16px; height: 16px; }
+.slash-menu .item.cmd .glyph svg { width: var(--ico-sm); height: var(--ico-sm); }
 .slash-menu .item.cmd .glyph.agent { border: 0; background: transparent; }
 .slash-menu .item.cmd .glyph.mode { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--mode); border-color: color-mix(in srgb, var(--mode) 40%, transparent); }
 .slash-menu .item.cmd .glyph.m0 { --mode: var(--mode-0); } .slash-menu .item.cmd .glyph.m1 { --mode: var(--mode-1); } .slash-menu .item.cmd .glyph.m2 { --mode: var(--mode-2); } .slash-menu .item.cmd .glyph.m3 { --mode: var(--mode-3); } .slash-menu .item.cmd .glyph.m4 { --mode: var(--mode-4); }
@@ -3565,6 +3661,8 @@ dialog.viewer .viewer-status { flex: none; display: flex; align-items: center; g
 dialog.viewer .viewer-status:not(:has(> :not([hidden]))) { display: none; }
 dialog.viewer.editing .viewer-status { display: none; }
 dialog.viewer .viewer-status .viewer-lang { border: 0; padding: 0; letter-spacing: .04em; font-size: 10px; text-transform: none; }
+/* A narrow viewer ends the hint with «…» instead of cutting it at the edge; the whole of it is its title. */
+dialog.viewer .viewer-status .viewer-lang { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 dialog.viewer .viewer-status .viewer-selection { color: var(--phosphor); letter-spacing: .06em; }
 dialog.viewer .viewer-status .viewer-review { margin-left: auto; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 9.5px; }
 dialog.viewer .viewer-menu { z-index: 70; }
@@ -3579,24 +3677,30 @@ dialog.viewer pre.code .ln { cursor: pointer; user-select: none; }
 .ed-btn { height: 26px; padding: 0 9px; gap: 6px; font-size: 9.5px; letter-spacing: .1em; border-radius: 7px; }
 .ed-tools .ed-btn { color: var(--text-2); }
 .ed-btn .ed-ico { display: inline-grid; place-items: center; width: 15px; height: 15px; color: var(--text-3); transition: color var(--motion) var(--ease-out); }
-.ed-btn .ed-ico svg { width: 15px; height: 15px; }
+.ed-btn .ed-ico svg { width: var(--ico-sm); height: var(--ico-sm); }
 .ed-btn:hover .ed-ico, .ed-btn[aria-pressed="true"] .ed-ico { color: currentColor; }
 .ed-save { padding: 0 12px; }
 .code-editor.dirty .ed-save { color: var(--text); background: color-mix(in srgb, var(--warn) 10%, transparent); }
 .ed-sep { display: none; }
 .ed-status .ed-keys { color: var(--text-2); }
 
-/* What is selected gets its tools right above it. */
-.ed-float { position: absolute; left: 12px; top: 0; z-index: 4; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .5); will-change: transform; animation: float-in calc(160ms * var(--motion-scale)) var(--ease-glide); }
+/* What is selected gets its tools right above it: the light sheet of the cards under the bar (solid,
+   no glow, no halo; over code a glass would let the letters through), as a capsule. Its words are
+   the room's, in a sentence; its drawings the size of a drawing beside a word; asking an agent, the
+   first of them, wears the accent's flat tone and opens its menu under the chevron. */
+.ed-float { position: absolute; left: 12px; top: 0; z-index: 4; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 0; border-radius: 999px; background: var(--surface, var(--panel)); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent), 0 1px 2px rgba(0, 0, 0, .18), 0 10px 26px -14px rgba(0, 0, 0, .5); will-change: transform; animation: float-in calc(160ms * var(--motion-scale)) var(--ease-glide); }
+:root[data-scheme="light"] .ed-float { box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 9%, transparent), 0 1px 2px rgba(20, 30, 25, .08), 0 10px 26px -16px rgba(20, 30, 25, .32); }
 .ed-float[hidden] { display: none; }
 @keyframes float-in { from { opacity: 0; } to { opacity: 1; } }
-.ed-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; cursor: pointer; transition: color var(--motion) var(--ease-out), background-color var(--motion) var(--ease-out); }
-.ed-chip .ed-ico { display: inline-grid; width: 14px; height: 14px; } .ed-chip .ed-ico svg { width: 14px; height: 14px; }
-.ed-chip:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
-.ed-chip.ask { color: var(--phosphor); }
-.ed-chip.ask:hover { background: color-mix(in srgb, var(--phosphor) 12%, transparent); }
-.ed-chip.ask b { font-weight: 400; font-size: 8.5px; }
+.ed-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-family: var(--read); font-size: 12.5px; font-weight: 500; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
+.ed-chip .ed-ico { display: inline-grid; place-items: center; width: var(--ico-sm); height: var(--ico-sm); } .ed-chip .ed-ico svg { width: var(--ico-sm); height: var(--ico-sm); }
+.ed-chip:is(:hover, :focus-visible) { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); outline: 0; }
+.ed-chip.ask { padding-right: 9px; color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 14%, transparent); }
+.ed-chip.ask:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--phosphor) 22%, transparent); }
+.ed-chip .ed-chev { display: inline-grid; place-items: center; margin-left: -1px; opacity: .8; }
+.ed-chip .ed-chev svg { width: var(--ico-xs); height: var(--ico-xs); }
 .ed-chip.done { color: var(--phosphor); }
+:root[data-scheme="light"] .ed-chip:is(.ask, .done) { color: color-mix(in srgb, var(--phosphor) 72%, #000000); }
 @media (prefers-reduced-motion: reduce) { .ed-float { animation: none; } }
 
 /* ================= the core: the board =================
@@ -3716,6 +3820,16 @@ dialog.surface.window.mother .mother-head :is(.mother-title, .mother-sub) { curs
 .agent-pop .crew-pct.hot { color: var(--crit); }
 .agent-pop .crew-go { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; cursor: pointer; transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
 .agent-pop .crew-go:hover { color: var(--phosphor); border-color: var(--phosphor); }
+/* 1.0.3 · The way to the agents' settings: Settings' own gear, at its size, and the room's letter. */
+.agent-pop .crew-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); font-family: var(--read); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
+.agent-pop .crew-go:is(:hover, :focus-visible) { color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 12%, transparent); border-color: transparent; outline: 0; }
+.agent-pop .crew-go-icon { display: inline-grid; color: var(--text-2); transition: color var(--motion-fast) var(--ease-out); }
+.agent-pop .crew-go-icon svg { display: block; width: var(--ico-sm); height: var(--ico-sm); transition: transform calc(520ms * var(--motion-scale, 1)) var(--ease-out, ease-out); }
+.agent-pop .crew-go:is(:hover, :focus-visible) .crew-go-icon { color: currentColor; }
+.agent-pop .crew-go:is(:hover, :focus-visible) .crew-go-icon svg { transform: rotate(90deg); }
+.ports-row b.ports-gear { display: inline-grid; align-self: center; }
+.ports-row b.ports-gear svg { display: block; width: var(--ico-sm); height: var(--ico-sm); }
+@media (prefers-reduced-motion: reduce) { .agent-pop .crew-go-icon svg { transition: none; } .agent-pop .crew-go:hover .crew-go-icon svg { transform: none; } }
 .agent-pop .crew-back { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: -2px; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer; }
 .agent-pop .crew-back:hover { color: var(--text); background: var(--line); }
 /* The live dot and the crew beside it read as one pair: what the room is connected to. */
@@ -3840,13 +3954,13 @@ dialog.room-ask.console .room-ask-choice.danger:hover { background: color-mix(in
    that pulses where it was pressed or an area drawn with a dashed edge, and beside the mark a card
    with who should look and what to ask. */
 .browser-head .nav.point { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px 0 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; }
-.browser-head .nav.point svg { width: 15px; height: 15px; }
+.browser-head .nav.point svg { width: var(--ico-sm); height: var(--ico-sm); }
 .browser-head .nav.point[aria-pressed="true"] { color: var(--phosphor); border-color: color-mix(in srgb, var(--phosphor) 45%, transparent); background: color-mix(in srgb, var(--phosphor) 12%, transparent); }
 @container dock (max-width: 620px) { .browser-head .nav.point > span { display: none; } .browser-head .nav.point { padding: 0 7px; } }
 .point-layer { position: absolute; z-index: 3; cursor: crosshair; background: color-mix(in srgb, var(--phosphor) 3%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--phosphor) 45%, transparent); }
 .point-tools { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5); cursor: default; animation: point-in calc(220ms * var(--motion-scale)) var(--ease-glide); }
 .point-tool { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; cursor: pointer; transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
-.point-tool svg { width: 15px; height: 15px; }
+.point-tool svg { width: var(--ico-sm); height: var(--ico-sm); }
 .point-tool:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
 .point-tool[aria-pressed="true"] { color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 14%, transparent); }
 .point-sep { width: 1px; height: 16px; margin: 0 3px; background: var(--line-2); }
@@ -3881,7 +3995,7 @@ dialog.room-ask.console .room-ask-choice.danger:hover { background: color-mix(in
 .ask-item:hover, .ask-item:focus-visible { background: color-mix(in srgb, var(--phosphor) 10%, transparent); outline: 0; }
 .ask-remembered:empty { display: none; }
 .ask-own { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; border-radius: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
-.ask-own svg { width: 15px; height: 15px; }
+.ask-own svg { width: var(--ico-sm); height: var(--ico-sm); }
 @media (prefers-reduced-motion: reduce) { .ask-card { animation: none; } }
 
 /* Taking the picture: only the page, without the toolbox, the layer's tint or the area's frame —
@@ -3903,7 +4017,7 @@ dialog.room-ask.console .room-ask-choice.danger:hover { background: color-mix(in
 .system.fail .partial { display: grid; gap: 8px; justify-items: center; margin-top: 10px; padding: 10px 14px; border: 1px dashed color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 12px; color: var(--text-2); }
 .system.fail .partial > .label { color: var(--text-2); opacity: 1; }
 .system.fail .partial .artifacts { justify-items: center; }
-.system.fail .partial .files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: var(--mono); font-size: 11px; text-align: left; }
+.system.fail .partial .files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: var(--mono); font-size: 11px; text-align: center; }
 .system.fail .partial .note { font-family: var(--mono); font-size: 10.5px; color: var(--warn); }
 .system.fail .partial .undo { border: 1px solid var(--terror); background: color-mix(in srgb, var(--terror) 12%, transparent); color: var(--terror); font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
 .system.fail .partial .undo:hover { background: color-mix(in srgb, var(--terror) 22%, transparent); }
@@ -4629,7 +4743,7 @@ dialog.custom-window::backdrop { display: none; }
 /* ---------- An open question's mark ----------
    The «?» is one of the room's own drawings now, in the accent. */
 .openq-ask::before { content: none; }
-.openq-ask .q-mark { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: block; color: var(--phosphor); }
+.openq-ask .q-mark { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: var(--ico-sm); height: var(--ico-sm); display: block; color: var(--phosphor); }
 .openq-ask .q-mark svg { width: 100%; height: 100%; display: block; }
 :root[data-scheme="light"] .openq-ask .q-mark { color: color-mix(in srgb, var(--phosphor) 62%, #000000); }
 
@@ -4977,10 +5091,10 @@ dialog.custom-window::backdrop { display: none; }
    steps now: 26px tall with a 15px drawing on a wide bar, the same 34px squircle and 18px drawing
    on a narrow one. */
 .bar > .tree-button { width: 28px; height: 26px; }
-.bar > .tree-button svg { width: 15px; height: 15px; }
+.bar > .tree-button svg { width: var(--ico-sm); height: var(--ico-sm); }
 @container bar (max-width: 980px) {
   .bar > .tree-button { width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; padding: 0; }
-  .bar > .tree-button svg { width: 18px; height: 18px; }
+  .bar > .tree-button svg { width: var(--ico-md); height: var(--ico-md); }
 }
 
 /* ==========================================================================================
@@ -5060,7 +5174,7 @@ dialog.custom-window::backdrop { display: none; }
     inset 1px 0 0 rgba(255, 92, 170, .08), inset -1px 0 0 rgba(90, 210, 255, .08),
     0 1px 1px rgba(0, 0, 0, .3), 0 6px 14px -6px rgba(0, 0, 0, .55), 0 18px 34px -16px rgba(0, 0, 0, .6);
 }
-:root .shell > .chats-button svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
+:root .shell > .chats-button svg { width: var(--ico-lg); height: var(--ico-lg); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
 :root[data-scheme="light"] .shell > .chats-button {
   background-image: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35) 60%), var(--sheen);
   box-shadow:
@@ -5209,6 +5323,37 @@ dialog.custom-window::backdrop { display: none; }
   height: 26px; padding: 0 10px 0 12px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
 }
 :root[data-scheme] .composer > .pick-options :is(.mode-chip, .model-chip, .effort-chip):is(:hover, :focus-visible, [aria-expanded="true"]) { background: color-mix(in srgb, currentColor 12%, transparent); }
+/* THE COPILOT (2026-10-14): a robot beside mode · model · effort, in the same glass; MADRE's green
+   when it is on, with the time it has left. Its menu says what it does, its switch and how long. */
+.picker .pick-label > .copilot-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; letter-spacing: .06em; cursor: pointer; transition: background .18s ease, color .18s ease; }
+.picker .pick-label > .copilot-chip:is(:hover, :focus-visible) { background: color-mix(in srgb, currentColor 12%, transparent); outline: none; }
+.copilot-icon { display: inline-flex; width: var(--ico-sm); height: var(--ico-sm); }
+.copilot-icon svg { width: 100%; height: 100%; }
+.picker .pick-label > .copilot-chip.on { color: var(--madre-green); background: color-mix(in srgb, var(--madre-green) 14%, transparent); }
+.picker .pick-label > .copilot-chip .left { font-size: 10px; }
+.copilot-menu { display: grid; gap: 8px; }
+.copilot-menu .copilot-title { display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; color: var(--text); }
+.copilot-menu .copilot-title b { flex: 1; color: var(--text); font-size: 11px; }
+.copilot-menu .copilot-title .copilot-icon { color: var(--madre-green); }
+.copilot-menu .copilot-body { display: grid; gap: 8px; padding: 0 2px 2px; font-family: var(--read, inherit); letter-spacing: 0; }
+/* Three weights (2026-10-14): what it does reads first; what it never does is the small print. */
+.copilot-menu .copilot-body p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
+.copilot-menu .copilot-body .copilot-lead { font-size: 14px; line-height: 1.45; color: var(--text); font-weight: 400; }
+.copilot-menu .copilot-body .copilot-never { padding-top: 8px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 46%, transparent); }
+.copilot-menu .copilot-body .copilot-state { color: var(--madre-green); font-weight: 600; }
+.copilot-menu .copilot-body .copilot-foot { font-size: 11px; color: var(--text-3); }
+.copilot-menu .copilot-how { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
+/* A message under the copilot: the box wears green, not EDIT's red. */
+.composer.copilot .field { border-color: var(--madre-green); --ring: 0 0 0 3px color-mix(in srgb, var(--madre-green) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--madre-green) 16%, transparent); }
+.composer.copilot .crew-label { color: var(--madre-green); }
+/* The reply written as the copilot: a green round robot on the agent's own circle, shown on every
+   reply of a run of them, so a glance down the thread says which ones the copilot wrote. */
+#messages .row.copilot > .avatar { position: relative; overflow: visible; }
+#messages .row.copilot.compact > .avatar { visibility: visible; }
+#messages .row.copilot.compact > .avatar > :not(.copilot-badge) { visibility: hidden; }
+#messages .row.copilot > .avatar .copilot-badge { position: absolute; right: -6px; bottom: -6px; z-index: 1; visibility: visible; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--madre-green); color: var(--madre-green-ink); box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgb(0 0 0 / .18); }
+#messages .row.copilot > .avatar .copilot-badge svg { width: 100%; height: 100%; }
+#messages .who .badge.copilot { color: var(--madre-green); background: color-mix(in srgb, var(--madre-green) 14%, transparent); }
 /* The lines of the room that carry a chip: the box's radius follows the chip it holds. */
 :is(:root[data-wallpaper] #messages, .look-preview[data-wallpaper]:not([data-wallpaper="default"])) .system:not(.mother-alert) { border-radius: 18px; padding: 8px 16px 9px; }
 
@@ -5267,7 +5412,11 @@ dialog.custom-window::backdrop { display: none; }
 /* SIGUE ABIERTO AQUÍ can be put away: a small × beside its heading, quiet until the pointer finds it. */
 .openq-head { display: inline-flex; align-items: center; gap: 6px; }
 .openq-close { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; opacity: .75; transition: opacity var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
-.openq-close svg { width: 12px; height: 12px; }
+.openq-close svg { width: var(--ico-xs); height: var(--ico-xs); }
+/* Centred is the label, not the label and its ×: the × hangs at the label's right, out of the
+   count, so «sigue abierto aquí» stands on the same axis as the questions under it and the card above. */
+.openq-head { position: relative; }
+.openq-head > .openq-close { position: absolute; top: 50%; left: calc(100% + 6px); translate: 0 -50%; }
 .openq-close:hover, .openq-close:focus-visible { opacity: 1; color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
 :root[data-wallpaper] .openq-close { color: var(--text-2); background: color-mix(in srgb, var(--bg) 62%, transparent); }
 
@@ -5600,7 +5749,9 @@ dialog.mother { --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospa
 /* Dark theme: the box is its own black, a neutral graphite rather than the room's green-black,
    and the row of mode, model and effort under it steps back so it never competes with it. */
 :root:not([data-scheme="light"]) .shell .composer .field { background-color: color-mix(in srgb, #1a1b1d 96%, transparent); }
-:root:not([data-scheme="light"]) .composer > .pick-options .pick-label { background: color-mix(in srgb, var(--bg) 45%, transparent); box-shadow: none; }
+/* Dark glass reads on a dark ground (2026-10-14): the ground at 45% over the ground was invisible,
+   so it takes a breath of the text colour, a half-pixel rim and the same blur as in light. */
+:root:not([data-scheme="light"]) .composer > .pick-options .pick-label { background: color-mix(in srgb, var(--text) 13%, color-mix(in srgb, var(--bg) 52%, transparent)); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 20%, transparent), inset 0 1px 0 rgb(255 255 255 / .09), 0 6px 18px rgb(0 0 0 / .28); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7); }
 :root:not([data-scheme="light"]) .composer > .pick-options :is(.mode-chip, .model-chip, .effort-chip) { opacity: .78; }
 :root:not([data-scheme="light"]) .composer > .pick-options :is(.mode-chip, .model-chip, .effort-chip):is(:hover, :focus-visible, [aria-expanded="true"]) { opacity: 1; }
 
@@ -5665,7 +5816,7 @@ dialog.mother { --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospa
 }
 
 /* A new conversation is a plus, a little larger than the icons beside it. */
-.chats-new-button svg { width: 17px; height: 17px; }
+.chats-new-button svg { width: var(--ico-sm); height: var(--ico-sm); }
 
 /* ==========================================================================================
    SURFACES THAT STAND OUT FROM THE GROUND, AND BUTTONS LIKE PEBBLES
@@ -5764,7 +5915,7 @@ dialog.settings-window.entering { animation: window-in calc(440ms * var(--motion
 dialog.settings-window::backdrop { display: none; }
 .settings-head { display: flex; align-items: center; gap: 14px; }
 .settings-search { flex: 1; min-width: 0; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-2); cursor: text; }
-.settings-search svg { width: 15px; height: 15px; flex: none; }
+.settings-search svg { width: var(--ico-sm); height: var(--ico-sm); flex: none; }
 .settings-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-family: var(--read); font-size: 13.5px; }
 .settings-search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--phosphor) 45%, transparent); }
 .settings-body { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; }
@@ -5783,7 +5934,7 @@ dialog.settings-window::backdrop { display: none; }
 .settings-card-head b { font-size: 14px; font-weight: 600; }
 .settings-card-head .settings-go { margin-left: auto; width: 14px; height: 14px; color: var(--text-2); transform: rotate(-90deg); }
 .settings-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--cat) 16%, transparent); color: var(--cat); }
-.settings-icon svg { width: 17px; height: 17px; }
+.settings-icon svg { width: var(--ico-sm); height: var(--ico-sm); }
 .settings-line { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
 .settings-warn { justify-self: start; margin: 2px 0 0; padding: 3px 8px; border-radius: 7px; font-size: 12px; background: color-mix(in srgb, #f2c94c 18%, transparent); color: #f2c94c; }
 :root[data-scheme="light"] .settings-warn { color: #7a5c00; }
@@ -5938,6 +6089,28 @@ select.sx-input { width: auto; max-width: 100%; padding-right: 8px; cursor: poin
 .sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
 .sx-field { display: flex; gap: 8px; }
 .sx-field .sx-input { flex: 1; }
+/* Settings › Connect MCP (2026-10-14): a row per server — what it is and where, how it stands,
+   the one thing to do, and from which mode its tools that act travel. */
+.mcp-row { gap: 10px; }
+.mcp-row .mcp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
+.mcp-row .mcp-top .sx-words { min-width: 0; display: grid; gap: 4px; }
+.mcp-row .mcp-where { display: block; font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
+.mcp-row.off .mcp-top .sx-words > b { color: var(--text-2); }
+.mcp-problem { margin: 0; font-size: 12px; line-height: 1.45; color: var(--danger); overflow-wrap: anywhere; }
+.mcp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.mcp-block > .mcp-actions { padding: 4px 16px 14px; }
+.mcp-from { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.mcp-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.mcp-tools li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 11.5px; }
+.mcp-tools li code { font-family: var(--mono); font-size: 11.5px; }
+.mcp-tools .mcp-tool-kind { font-size: 10px; letter-spacing: .04em; color: var(--text-3); }
+.mcp-tools li.acts .mcp-tool-kind { color: #d9a90f; }
+.mcp-vars { display: grid; gap: 6px; width: 100%; }
+.mcp-vars .sx-field { align-items: center; }
+.mcp-secret { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
+.mcp-pick { display: inline-flex; align-items: center; }
+.mcp-block .sx-row .sx-hint { overflow-wrap: anywhere; }
+.mcp-pick input, .mcp-secret input { width: 16px; height: 16px; accent-color: var(--phosphor); }
 .sx-command { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-radius: 9px; background: color-mix(in srgb, var(--text) 5%, transparent); }
 .sx-command code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--text); scrollbar-width: none; }
 .sx-more { border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
@@ -5948,7 +6121,15 @@ select.sx-input { width: auto; max-width: 100%; padding-right: 8px; cursor: poin
 .sx-more > :not(summary) { margin: 0 16px 14px; }
 .sx-steps { display: grid; gap: 12px; margin: 10px 16px 16px; padding-left: 18px; }
 .sx-steps li { display: grid; gap: 6px; font-size: 12.5px; }
-.sx-steps li b { font-weight: 500; }
+.sx-steps li b { font-weight: 600; color: var(--text); }
+/* The training recipe, numbered and explained (2026-10-14). */
+.sx-steps { counter-reset: step; list-style: none; padding-left: 0; gap: 14px; }
+.sx-steps li { position: relative; padding-left: 34px; counter-increment: step; }
+.sx-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); font: 600 11.5px/1 var(--read); }
+.sx-steps li .sx-hint { font-size: 12px; line-height: 1.45; color: var(--text-2); }
+.sx-train-what { margin: 0 16px 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
+.sx-train-platform { margin: 10px 16px 6px; }
+.sx-more > .sx-hint { margin: 0 16px; }
 
 /* An agent's card: its colour on the avatar and the name, where it lives in small print. */
 .sx-agent .sx-head { align-items: center; }
@@ -6040,6 +6221,8 @@ select.sx-input { width: auto; max-width: 100%; padding-right: 8px; cursor: poin
 .settings-detail .sx-analysis :is(.mem-strip-head b, .mem-strip-head span, .mem-axis span, summary b, summary .caret, th, td, .mem-signal .top b, .mem-bar .name, .exams > .note, .exam-head b, .exam-head .verdict, .exam-bullet span, .exam > .note:not(.about), .exam .actions button, .exam .actions .note)::first-letter { text-transform: uppercase; }
 .settings-detail .sx-analysis .mem-strip-head b, .settings-detail .sx-analysis .mem-bar .name { color: var(--text); }
 .settings-detail .sx-analysis .mem-signal .top b, .settings-detail .sx-analysis .exam-head b { font-size: 12.5px; font-weight: 500; }
+/* The review's questions are written in sentence case; lowering them would turn «IA» into «ia». */
+.settings-detail .sx-analysis .exam-head b { text-transform: none; }
 .settings-detail .sx-analysis .exams .said { font-family: var(--read); font-size: 12.5px; line-height: 1.5; }
 .settings-detail .sx-analysis .mem-cols i:not(.zero) { background: color-mix(in srgb, #3fb6d9 70%, transparent); }
 .settings-detail .sx-analysis .mem-cols i.now { background: #3fb6d9; }
@@ -6154,7 +6337,7 @@ select.sx-input { width: auto; max-width: 100%; padding-right: 8px; cursor: poin
 
 /* The gear in the Finder's and the servers' heads: their settings, one click away. */
 .surface-gear { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
-.surface-gear svg { width: 16px; height: 16px; }
+.surface-gear svg { width: var(--ico-sm); height: var(--ico-sm); }
 .surface-gear:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
 .surface-gear:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 70%, transparent); outline-offset: 1px; }
 
@@ -6219,6 +6402,7 @@ select.sx-input { width: auto; max-width: 100%; padding-right: 8px; cursor: poin
 .mods-detail .module-card :is(p, ul, li, .summary) { font-family: var(--read); font-size: 13px; font-weight: var(--read-weight, 300); line-height: 1.55; letter-spacing: 0; text-transform: none; color: var(--text); }
 .mods-detail .module-card :is(.state, .vendor, .detail, .note, .update, .card-block h5, .ollama-status, .actions .toggle, .confirm .warn, i) { font-family: var(--read); font-size: 12px; letter-spacing: 0; text-transform: lowercase; color: var(--text-2); font-style: normal; }
 .mods-detail .module-card :is(.state, .vendor, .detail, .note, .update, .card-block h5, .confirm .warn)::first-letter { text-transform: uppercase; }
+.mods-detail .module-card .confirm :is(.warn, .note).as-written { text-transform: none; }
 .mods-detail .module-card .state.on { color: var(--phosphor); }
 .mods-detail .module-card .card-block h5 { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--text); }
 .mods-detail .module-card .version b { font-family: var(--mono); font-size: 12px; color: var(--text); }
@@ -6337,9 +6521,13 @@ dialog.surface.window:is(.settings-window, .module-window).lifted { background-c
 .bar-left .connection { position: relative; align-self: flex-start; margin: 9px 0 0 -2px; padding: 4px; text-transform: none; cursor: default; }
 .bar-left .connection :is(.connection-icon .bar-glyph, .connection-label) { display: none; }
 .bar-left .connection .connection-dot { width: 7px; height: 7px; background: var(--text-3); box-shadow: none; }
-.bar-left .connection[data-state="live"] .connection-dot { background: #34d058; animation: live-glow 3.2s ease-in-out infinite; }
-.bar-left .connection[data-state="reconnecting"] .connection-dot { background: var(--warn); animation: live-glow 1.2s ease-in-out infinite; }
-@keyframes live-glow { 0%, 100% { opacity: .55; box-shadow: 0 0 0 0 rgba(52, 208, 88, 0); } 50% { opacity: 1; box-shadow: 0 0 6px 2px rgba(52, 208, 88, .55); } }
+.bar-left .connection[data-state="live"] .connection-dot { background: #34d058; animation: state-pulse 2.6s ease-in-out infinite; }
+.bar-left .connection[data-state="reconnecting"] .connection-dot { background: var(--warn); animation: state-pulse 1.1s ease-in-out infinite; }
+.bar-left .connection:is([data-state="offline"], [data-state="closed"], [data-state="disconnected"]) .connection-dot { background: var(--danger, #e5484d); animation: none; }
+/* The project's state is a dot that breathes, nothing more (2026-10-14): from its size to a little
+   larger and back, in the colour of the state. No glow around it. */
+@keyframes state-pulse { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
+:root.just-arrived .bar-left .connection[data-state="live"] .connection-dot { animation: state-pulse 2.6s ease-in-out infinite; }
 .bar-left .connection::after { content: attr(data-said); position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; padding: 4px 9px; border-radius: 8px; font-family: var(--read); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text); background: var(--surface, var(--panel)); box-shadow: var(--key-rest); opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-out); z-index: 60; }
 .bar-left .connection:hover::after { opacity: 1; }
 .bar-left .connection::first-letter { text-transform: none; }
@@ -6683,7 +6871,9 @@ dialog.mods-window { width: 1040px; height: 720px; container: modswin / inline-s
   display: inline-flex; align-items: center; gap: 9px;
   padding: 9px 16px 9px 13px; border: 0; border-radius: 20px;
   background: var(--surface, var(--panel)); color: var(--text);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 16px -8px rgba(0, 0, 0, .4);
+  /* It floats over the canvas (2026-10-14): a rim, a near shadow and a far one, so it reads lifted
+     off any wallpaper or thread under it. */
+  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 14%, transparent), inset 0 1px 0 rgb(255 255 255 / .06), 0 2px 4px rgba(0, 0, 0, .24), 0 12px 28px -6px rgba(0, 0, 0, .5), 0 28px 60px -18px rgba(0, 0, 0, .45);
   font-family: var(--read); font-size: 13px; font-weight: 450; line-height: 1.4; text-align: left;
   max-width: min(560px, calc(100% - 32px)); width: max-content;
 }
@@ -6692,6 +6882,10 @@ dialog.mods-window { width: 1040px; height: 720px; container: modswin / inline-s
 .toast .toast-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
 .toast[data-tone="done"] .toast-dot { background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .16); }
 .toast[data-tone="look"] .toast-dot { background: #e0a23c; box-shadow: 0 0 0 3px rgba(224, 162, 60, .18); }
+.toast[data-tone="news"] .toast-dot { background: var(--madre-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--madre-green) 22%, transparent); }
+/* The one key a notice may carry (the Market's news): small, the room's green, at its end. */
+.toast .toast-act { flex: none; margin-left: 4px; padding: 4px 11px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--madre-green) 16%, transparent); color: var(--madre-green); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
+.toast .toast-act:hover { background: color-mix(in srgb, var(--madre-green) 26%, transparent); }
 .toast[data-tone="wrong"] .toast-dot { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
 
 /* The model's mark in the conversation is flat: one solid tint of the agent's colour, no light and
@@ -6708,7 +6902,7 @@ dialog.mods-window { width: 1040px; height: 720px; container: modswin / inline-s
 #messages .row > .avatar.gradient { box-shadow: none !important; }
 #messages .row > .avatar svg { width: 64%; height: 64%; opacity: 1; }
 
-:root[data-scheme="light"] .toast:not([hidden]) { box-shadow: 0 1px 2px rgba(20, 30, 20, .1), 0 6px 16px -8px rgba(20, 30, 20, .28); }
+:root[data-scheme="light"] .toast:not([hidden]) { box-shadow: 0 0 0 .5px rgba(20, 30, 20, .08), 0 2px 4px rgba(20, 30, 20, .1), 0 12px 28px -6px rgba(20, 30, 20, .22), 0 28px 60px -18px rgba(20, 30, 20, .2); }
 
 /* ==========================================================================================
    MU/TH/UR · the remedies, as a window of the room
@@ -6851,7 +7045,7 @@ dialog.room-ask:not(.console) .room-ask-card { justify-items: center; gap: 10px;
 :root[data-scheme="light"] dialog.room-ask:not(.console) .room-ask-card { box-shadow: 0 1px 2px rgba(20, 30, 25, .08), 0 22px 48px -22px rgba(20, 30, 25, .35); }
 dialog.room-ask:not(.console) .room-ask-icon { --tone: var(--phosphor); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 2px; border-radius: 13px; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); }
 dialog.room-ask:not(.console) .room-ask-icon[hidden] { display: none; }
-dialog.room-ask:not(.console) .room-ask-icon svg { width: 22px; height: 22px; }
+dialog.room-ask:not(.console) .room-ask-icon svg { width: var(--ico-lg); height: var(--ico-lg); }
 dialog.room-ask[data-kind="danger"] .room-ask-icon { --tone: var(--danger); }
 dialog.room-ask[data-kind="key"] .room-ask-icon, dialog.key-ask .room-ask-icon { --tone: var(--mode-3); }
 dialog.key-ask.m4 .room-ask-icon { --tone: var(--mode-4); }
@@ -6878,6 +7072,9 @@ dialog.room-ask:not(.console) .room-ask-choice.danger:hover { background: var(--
 /* The key, quieter: one sentence of what it allows, a smaller one of what keeps it safe, the
    ceiling note when there is one, and a field whose label says what to type. */
 dialog.key-ask .room-ask-body { color: var(--text); font-size: 14px; }
+/* «Don't ask again…» under the memory gate: a quiet link to Settings › Permissions › Memory access. */
+.key-skip { display: block; margin: 4px auto 0; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: 500 12px/1.3 var(--sans); color: var(--text-2); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-2) 40%, transparent); text-underline-offset: 3px; }
+.key-skip:hover, .key-skip:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); outline: 0; }
 .key-safe { margin: -4px 0 0; font-family: var(--read); font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--text) 58%, transparent); }
 .key-raise { margin: 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mode-3) 14%, transparent); color: color-mix(in srgb, var(--mode-3) 70%, var(--text)); font-family: var(--read); font-size: 12px; font-weight: 550; }
 dialog.key-ask.m4 .key-raise { background: color-mix(in srgb, var(--mode-4) 14%, transparent); color: color-mix(in srgb, var(--mode-4) 70%, var(--text)); }
@@ -7063,7 +7260,7 @@ dialog.room-ask:not(.console) .room-ask-code { width: 100%; margin: 2px 0 0; pad
 :root[data-scheme="light"] .job-sheet { box-shadow: 0 1px 2px rgba(20, 30, 25, .08), 0 14px 34px -18px rgba(20, 30, 25, .32); }
 .job-sheet[hidden] { display: none; }
 .job-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); }
-.job-icon svg { width: 18px; height: 18px; }
+.job-icon svg { width: var(--ico-md); height: var(--ico-md); }
 .job-sheet.failed .job-icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
 .job-words { display: grid; gap: 2px; min-width: 0; }
 .job-title { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -7234,7 +7431,7 @@ dialog.room-ask:not(.console) .room-ask-code { width: 100%; margin: 2px 0 0; pad
   animation-delay: 0ms, var(--jiggle-delay, 0ms);
 }
 .bar-badge[hidden] { display: none; }
-.bar-badge svg { display: block; width: 12px; height: 12px; }
+.bar-badge svg { display: block; width: var(--ico-xs); height: var(--ico-xs); }
 .bar-badge:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 70%, transparent); outline-offset: 2px; }
 :root[data-scheme="light"] .bar-badge { --bar-ring: #ffffff; box-shadow: 0 0 0 1.5px var(--bar-ring), 0 1px 2px rgba(20, 30, 20, .18); }
 @media (prefers-reduced-motion: reduce) {
@@ -7255,10 +7452,27 @@ dialog.room-ask:not(.console) .room-ask-code { width: 100%; margin: 2px 0 0; pad
 .bar-tile:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 70%, transparent); outline-offset: 0; }
 .bar-tile:active { transform: scale(.97); }
 .bar-tile-glyph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--phosphor); background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: var(--key-rest, none); }
-.bar-tile-glyph svg { display: block; width: 18px; height: 18px; }
+.bar-tile-glyph svg { display: block; width: var(--ico-md); height: var(--ico-md); }
 .bar-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .bar-card-empty { margin: 4px 2px 6px; font-size: 12.5px; color: var(--text-2); }
 .bar-card-hint { margin: 10px 2px 0; font-size: 11.5px; color: var(--text-3); }
+/* «Add to the bar» (2026-10-17): a title and, under it, how the bar is arranged; Done at their right.
+   Below, each key that can still go on is drawn as it will stand on the bar (its face, its drawing in
+   the bar's ink, the bar's 18 px) with a «+» on the corner where the bar's keys wear their «−», and
+   its whole name under it, on two lines if it needs them, never cut. */
+.bar-card.bar-add { width: min(380px, calc(100vw - 32px)); padding: 16px 16px 14px; }
+.bar-add .bar-card-head { align-items: flex-start; margin-bottom: 14px; }
+.bar-card-titles { display: grid; gap: 3px; min-width: 0; }
+.bar-card-titles h3 { font-size: 14px; }
+.bar-card-sub { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-2); }
+.bar-add .bar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 2px 2px; }
+.bar-add .bar-tile { gap: 8px; padding: 12px 6px 10px; color: var(--text-2); font-size: 12px; line-height: 1.3; }
+.bar-add .bar-tile-glyph { position: relative; width: 40px; height: 40px; border-radius: 12px; color: var(--text); background: var(--surface, var(--panel)); box-shadow: var(--key-rest, none); transition: color var(--motion-fast) var(--ease-out); }
+.bar-add .bar-tile:is(:hover, :focus-visible) .bar-tile-glyph { color: var(--phosphor); }
+.bar-add .bar-tile-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; text-align: center; overflow-wrap: anywhere; }
+.bar-tile-plus { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--phosphor); color: var(--phosphor-ink); }
+.bar-tile-plus svg { display: block; width: var(--ico-xs); height: var(--ico-xs); }
+:root[data-scheme="light"] .bar-add .bar-tile:is(:hover, :focus-visible) .bar-tile-glyph { color: color-mix(in srgb, var(--phosphor) 72%, #000000); }
 @media (prefers-reduced-motion: reduce) { .bar-card { animation: none; } .bar-tile:active { transform: none; } }
 
 /* On a narrow screen: keys that do not fit wait behind «more», the brand keeps its place, and
@@ -7269,9 +7483,12 @@ dialog.room-ask:not(.console) .room-ask-code { width: 100%; margin: 2px 0 0; pad
 .bar-more-card[hidden] { display: none; }
 @media (max-width: 720px) {
   .bar > .bar-left { min-width: 58px; flex-shrink: 1; }
-  .bar.bar-editing { overflow-x: auto; scrollbar-width: none; }
-  .bar.bar-editing::-webkit-scrollbar { display: none; }
 }
+/* Being arranged, at any width (2026-10-17): every key shows, so a bar with more keys than room
+   scrolls sideways inside its own box instead of spilling under the house's keys, and the key
+   being carried is held between the first and the last (app.js, barDragMove). */
+.bar.bar-editing { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
+.bar.bar-editing::-webkit-scrollbar { display: none; }
 
 /* Badges are a plain disc of the accent: no ring around them, anywhere. */
 :is(.bar-count, .modules-count, .mother-count, .remedy-badge, .bar-badge, .chats-count, .badge-count) { box-shadow: none !important; outline: none !important; border: 0 !important; }
@@ -7315,7 +7532,7 @@ dialog.room-ask:not(.console) .room-ask-code { width: 100%; margin: 2px 0 0; pad
 .steps-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 6px; border-radius: 12px; }
 .steps-list li:not(.done):hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
 .steps-tick { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 26%, transparent); color: transparent; transition: background-color var(--motion) var(--ease-out), color var(--motion) var(--ease-out); }
-.steps-tick svg { display: block; width: 14px; height: 14px; }
+.steps-tick svg { display: block; width: var(--ico-xs); height: var(--ico-xs); }
 .steps-list li.done .steps-tick { background: var(--acc, var(--phosphor)); color: var(--acc-ink, var(--phosphor-ink)); box-shadow: none; }
 .steps-words { display: grid; gap: 2px; min-width: 0; }
 .steps-words b { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
@@ -7574,6 +7791,15 @@ html.via-phone[data-wallpaper]:not([data-wallpaper="default"]) { --phone-ground:
   background: var(--agent-gradient, var(--agent-solid, var(--agent))) !important;
   color: #ffffff !important;
 }
+/* Switched off: an agent in the bar that cannot answer (not installed, no adapter, or no session)
+   is a quiet grey disc with its mark, no colour and no ring, until it can (2026-10-17). */
+#agents.agents .avatar.off {
+  background: color-mix(in srgb, var(--text) 9%, transparent) !important;
+  color: color-mix(in srgb, var(--text) 38%, transparent) !important;
+  border: 0 !important; box-shadow: none !important; filter: grayscale(1);
+}
+#agents.agents .avatar.off::before { display: none; }
+#agents.agents .avatar.off.open { box-shadow: 0 0 0 2px var(--lay-4), 0 0 0 3.5px color-mix(in srgb, var(--text) 30%, transparent) !important; }
 /* What was said by a ring keeps its ring: the open agent in the bar, the chosen one in the picker. */
 .agents .avatar.open:not(.offline):not(.detected),
 .picker .avatar.pick[aria-checked="true"]:not(.offline):not(.detected) { box-shadow: 0 0 0 2px var(--lay-4), 0 0 0 3.5px var(--agent-solid, var(--agent)) !important; }
@@ -7593,10 +7819,21 @@ html.via-phone[data-wallpaper]:not([data-wallpaper="default"]) { --phone-ground:
   container-type: normal;
 }
 .shell > .bar.bar-home[hidden], .via-phone .shell > .bar.bar-home { display: none !important; }
+/* When the room's bar folds its keys into 34 px squares, the house's fold with them (app.js,
+   roomWidth): one row, one size of key, one size of drawing. */
+.shell > .bar.bar-home.keys-square { padding-block: 9px; }
+.shell > .bar.bar-home.keys-square > .tree-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 11px; }
+.shell > .bar.bar-home.keys-square > .tree-button svg { width: var(--ico-md); height: var(--ico-md); }
+/* The notes to accept, short (app.js, barFit): when nothing else can leave a narrow bar, the tray
+   and its number, and the words in the key's name. */
+#inbox-pill .inbox-count { display: none; font-variant-numeric: tabular-nums; }
+.bar.bar-tight > #inbox-pill .handoff-words { display: none; }
+.bar.bar-tight > #inbox-pill .inbox-count { display: inline; }
+.bar.bar-tight > #inbox-pill { padding-inline: 10px 12px; }
 :root:not(.via-phone) .shell > .bar.with-home {
   width: auto; justify-self: stretch;
   margin-left: max(20px, calc((100% - 1440px) / 2));
-  margin-right: calc(max(20px, calc((100% - 1440px) / 2)) + var(--home-w, 150px) + 10px);
+  margin-right: calc(max(20px, calc((100% - 1440px) / 2)) + var(--home-w, 150px) + 16px);
 }
 /* With the second bar beside it the room's bar is ~120px narrower, so the pulse alone takes the
    wordmark's place a little earlier: before the brand is cut instead of folded. */
@@ -7646,7 +7883,7 @@ dialog.room-switch::backdrop {
 .switch-face { display: grid; place-items: center; width: 100%; height: 100%; }
 .switch-icon.is-coordinator svg { width: 58%; height: 58%; display: block; }
 .switch-badge { position: absolute; top: -6px; right: -6px; display: none; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; font-style: normal; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2.5px var(--bg-2); }
-.switch-badge svg { width: 13px; height: 13px; }
+.switch-badge svg { width: var(--ico-xs); height: var(--ico-xs); }
 .switch-tile.is-waiting .switch-badge { display: grid; background: var(--acc, var(--phosphor)); color: var(--acc-ink, var(--phosphor-ink)); }
 .switch-tile.is-done .switch-badge { display: grid; padding: 0; background: var(--session-ok); color: var(--phosphor-ink); }
 .switch-tile.is-working .switch-badge { display: grid; min-width: 0; width: 22px; padding: 0; background: var(--bg-2); }
@@ -7731,6 +7968,32 @@ dialog.viewer .viewer-seg .viewer-seg-btn:not([hidden]) + .viewer-open { margin-
 .agent-pop .pop-group dd { font-family: var(--read, var(--sans)); font-size: 12.5px; line-height: 1.35; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .agent-pop .caps { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--line); }
 .agent-pop .foot { margin-top: 10px; font-size: 9px; line-height: 1.5; }
+/* The agent's card, ordered (2026-10-14): name and session, one figure, four numbers, the plan, a
+   line for the connection, what it can do and the way to its settings. */
+.agent-pop .head { gap: 10px; }
+.agent-pop .pop-who { display: grid; gap: 1px; min-width: 0; }
+.agent-pop .pop-who .vendor { margin: 0; font-family: var(--read, var(--sans)); font-size: 11.5px; letter-spacing: 0; color: var(--text-3); }
+.agent-pop .pop-session { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 22px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); font-family: var(--read, var(--sans)); font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
+.agent-pop .pop-session::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
+.agent-pop .pop-session.ok::before { background: #34c759; }
+.agent-pop .pop-session.wait::before { background: var(--warn); }
+.agent-pop .pop-session.bad::before { background: var(--danger); }
+.agent-pop .pop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
+.agent-pop .pop-stat { display: grid; gap: 3px; padding: 9px 11px; border-radius: 11px; background: color-mix(in srgb, var(--text) 4.5%, transparent); min-width: 0; }
+.agent-pop .pop-stat span { font-family: var(--read, var(--sans)); font-size: 11px; color: var(--text-3); }
+.agent-pop .pop-stat b { font-family: var(--read, var(--sans)); font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-pop .pop-provider { display: grid; gap: 5px; padding: 11px 0; border-bottom: 1px solid var(--line); }
+.agent-pop .pop-provider h4 { margin: 0 0 2px; font-family: var(--read, var(--sans)); font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0; text-transform: none; }
+.agent-pop .pop-limit { display: flex; justify-content: space-between; gap: 12px; font-family: var(--read, var(--sans)); font-size: 12px; color: var(--text-2); }
+.agent-pop .pop-limit b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
+.agent-pop .pop-limit.hot b { color: var(--crit); }
+.agent-pop .pop-note { margin: 0; font-family: var(--read, var(--sans)); font-size: 12px; line-height: 1.45; color: var(--text-2); }
+.agent-pop .pop-meta { margin: 10px 0 0; font-family: var(--read, var(--sans)); font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
+.agent-pop .caps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px !important; padding-top: 0; border-top: 0; }
+.agent-pop .caps .cap { padding: 3px 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); font-family: var(--read, var(--sans)); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text-3); }
+.agent-pop .caps .cap.on { background: color-mix(in srgb, var(--agent, var(--phosphor)) 13%, transparent); color: color-mix(in srgb, var(--agent, var(--phosphor)) 75%, var(--text)); }
+.agent-pop .pop-go { width: 100%; margin-top: 12px; height: 32px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); font-family: var(--read, var(--sans)); font-size: 12.5px; font-weight: 500; cursor: pointer; }
+.agent-pop .pop-go:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--text) 12%, transparent); outline: 0; }
 
 /* The agent picker: the chosen agent at full colour; the others dimmed, until the pointer finds one. */
 .picker .avatar.pick:not([aria-checked="true"]) { filter: saturate(.55) brightness(.94); opacity: .55; transition: opacity calc(160ms * var(--motion-scale, 1)) var(--ease-out), filter calc(160ms * var(--motion-scale, 1)) var(--ease-out); }
@@ -7822,6 +8085,37 @@ dialog#core .mother-close { height: 30px; padding: 0 13px; border: 0; border-rad
 dialog#core .mother-close:hover { box-shadow: var(--key-over, var(--key-rest)); color: var(--phosphor); }
 dialog#core .mother-close:active { box-shadow: var(--key-down, var(--key-rest)); }
 dialog#core .mother-boot { display: none; }
+/* «Lo que se envía» in the room's hand (2026-10-14): the title over its line on the left, the
+   buttons every window has on the right, centred tabs, and the console's capitals gone from what
+   used to be MU/TH/UR's (the verdict, «next», the memory review, the roles and fields). */
+dialog#core .mother-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "sub actions"; align-items: center; gap: 2px 16px; padding: 16px 16px 14px 24px; }
+dialog#core .mother-title { grid-area: title; line-height: 1.25; }
+dialog#core .mother-sub { grid-area: sub; flex: none; line-height: 1.35; }
+dialog#core .mother-actions { grid-area: actions; align-items: center; gap: 10px; }
+dialog#core .core-copy-all { height: 30px; font-family: var(--read); font-size: 12.5px; font-weight: 550; letter-spacing: 0; text-transform: none; }
+dialog#core .core-tab { display: grid; justify-items: center; text-align: center; }
+dialog#core .core-tab .meta { max-width: 100%; }
+dialog#core .mem-verdict .says, dialog#core .mem-verdict > p:not(.maturity-next) { margin: 0; font-family: var(--read); font-size: 13px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text-2); text-shadow: none; }
+dialog#core .mem-verdict .says b { margin-right: 6px; font-size: 13px; letter-spacing: 0; color: var(--text); }
+dialog#core .mem-verdict .maturity-next { padding: 11px 14px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: none; font-family: var(--read); font-size: 12.5px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text); }
+dialog#core .mem-verdict .maturity-next b { margin-right: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--phosphor); }
+dialog#core .mem-verdict .maturity-next .where { font-size: 12px; letter-spacing: 0; color: var(--text-3); }
+dialog#core :is(.exams, .exam .verdict, .exam-head b, .exams .note, .exam .note, .exam-bullet span, .exam .said, .exam .actions button) { font-family: var(--read); letter-spacing: 0; text-transform: none; text-shadow: none; }
+dialog#core .exam-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+dialog#core .exam-head b { font-size: 13px; font-weight: 600; color: var(--text); }
+dialog#core .exam .verdict { flex: none; padding: 2px 8px; border: 0; border-radius: 7px; font-size: 11.5px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); }
+dialog#core .exam.passed .verdict { background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); }
+dialog#core .exam.failed .verdict { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
+dialog#core .exam :is(.note, .said) { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
+dialog#core .exam-bullet span { font-size: 11.5px; color: var(--text-3); }
+dialog#core .exam .actions button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-size: 12px; box-shadow: none; cursor: pointer; }
+dialog#core .exam .actions button.primary { background: var(--phosphor); color: var(--phosphor-ink); }
+dialog#core .core-role { color: var(--text); }
+dialog#core .core-role input { width: 15px; height: 15px; accent-color: var(--phosphor); }
+dialog#core .core-role-words b { font-family: var(--read); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }
+dialog#core .core-role-words .detail { font-family: var(--read); font-size: 12px; letter-spacing: 0; color: var(--text-3); }
+dialog#core .core-field { font-family: var(--read); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text-3); }
+dialog#core .core-pick select, dialog#core .core-field select { font-family: var(--read) !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; }
 dialog#core .mother-foot { padding: 9px 22px 11px; border-top: 1px solid var(--line); font-family: var(--read); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--text-3); text-align: center; }
 /* The body: tabs, the strip that says for whom, the pane, and the question line. */
 dialog#core .core-body { min-height: 0; gap: 12px; padding: 14px 22px 14px; }
@@ -7991,6 +8285,74 @@ dialog#core .mother-cmd .copy { position: absolute; top: 8px; right: 8px; displa
   width: fit-content; max-width: min(92%, 560px); margin-inline: auto; padding: 8px 16px 9px; border: 0; border-radius: 18px;
 }
 #messages#messages .row > .col > .who { width: fit-content; max-width: 100%; padding: 3px 10px; border-radius: 999px; }
+/* A failure wears the room's own card (2026-10-14): rounded, as wide as its words, in its red
+   tint — it was a square box of another app. Its RETRY and UNDO stay under it. */
+#messages#messages .thread-inner > .system.fail {
+  width: fit-content; max-width: min(92%, 560px); margin-inline: auto; padding: 10px 18px 11px; border: 0; border-radius: 18px;
+  background: color-mix(in srgb, var(--danger) 9%, var(--plane-solid, var(--panel))) !important;
+  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--danger) 30%, transparent) !important;
+}
+#messages#messages .thread-inner > .system.fail .label { font-family: var(--mono); letter-spacing: .14em; }
+
+/* ==========================================================================================
+   NOTICES THAT FOLD INTO DOTS (2026-10-14)
+   ------------------------------------------------------------------------------------------
+   A notice says its piece and, ten seconds later, folds into a row of the notices around it.
+   Folded, the row is one small dot in the colour of its first notice and «+N» for the rest, on
+   the same glass as mode · model · effort so it reads on any wallpaper. A click opens the row as
+   one card with every notice in order, each with its dot; another click, or Escape, folds it.
+   Red is a diagnostic, amber a permission or a warning, green something that went well, grey the
+   rest. Sizes carry !important: the wallpaper's rules for the room's lines would otherwise give a
+   folded notice their width and padding (it was a dot 0 px wide, only its ring showing).
+   ========================================================================================== */
+#messages#messages .thread-inner > .system.folding { animation: notice-fold .22s ease forwards; }
+@keyframes notice-fold { to { opacity: 0; transform: scale(.94); } }
+#messages .sys-dots {
+  display: flex; align-items: center; gap: 6px; width: fit-content; max-width: min(92%, 560px); margin: 6px auto; padding: 4px 9px 4px 7px;
+  border-radius: 999px; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--text-2);
+  background: color-mix(in srgb, var(--bg) 62%, transparent); border: .5px solid color-mix(in srgb, var(--text) 10%, transparent);
+  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
+  transition: background .18s ease;
+}
+#messages .sys-dots:hover, #messages .sys-dots:focus-visible { background: color-mix(in srgb, var(--bg) 78%, transparent); outline: none; }
+#messages .sys-dots > .sys-more { font: inherit; color: inherit; }
+#messages .sys-dots.single { padding: 6px; gap: 0; justify-content: center; }
+#messages#messages .sys-dots > .system.folded { --dot: var(--text-3); margin: 0; cursor: inherit; }
+#messages#messages .sys-dots > .system.folded[data-tone="crit"] { --dot: var(--terror, #d33); }
+#messages#messages .sys-dots > .system.folded[data-tone="warn"] { --dot: var(--warn, #e2a022); }
+#messages#messages .sys-dots > .system.folded[data-tone="ok"] { --dot: var(--ok, var(--phosphor, #2f9e44)); }
+/* Folded: the first notice is the dot; the rest are counted in «+N». */
+#messages#messages .sys-dots:not(.open) > .system.folded {
+  flex: none; width: 8px !important; height: 8px !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
+  overflow: hidden; font-size: 0; line-height: 0; color: transparent; text-shadow: none !important;
+  background: var(--dot) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot) 22%, transparent) !important;
+  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
+  animation: dot-in .28s cubic-bezier(.2, .9, .3, 1.25);
+}
+#messages#messages .sys-dots:not(.open) > .system.folded:not(:first-child) { display: none !important; }
+#messages#messages .sys-dots:not(.open) > .system.folded > * { display: none !important; }
+#messages#messages .sys-dots > .system.folded.quiet { animation: none; }
+@keyframes dot-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+/* Open: one card, every notice in order, each with its dot. No bar on the side. */
+#messages .sys-dots.open {
+  display: grid; gap: 2px; width: min(92%, 560px); padding: 6px; border-radius: 16px; cursor: default;
+  background: color-mix(in srgb, var(--bg) 88%, transparent); border-color: color-mix(in srgb, var(--text) 12%, transparent);
+  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .35); animation: notice-peek .2s ease;
+}
+#messages#messages .sys-dots.open > .system.folded { color: var(--text-2) !important; }
+#messages#messages .sys-dots.open > .system.folded {
+  position: relative; width: auto !important; max-width: none !important; margin: 0 !important; padding: 7px 12px 8px 26px !important; border: 0 !important; border-radius: 10px !important;
+  text-align: left; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
+}
+#messages#messages .sys-dots.open > .system.folded:hover { background: color-mix(in srgb, var(--text) 4%, transparent) !important; }
+#messages#messages .sys-dots.open > .system.folded::before { content: ''; position: absolute; left: 11px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
+#messages#messages .sys-dots.open > .system.folded > b:first-child { display: inline; margin-right: 6px; }
+#messages .sys-dots.open > .sys-more { justify-self: center; margin-top: 2px; padding: 3px 10px; border-radius: 999px; cursor: pointer; color: var(--text-3); }
+#messages .sys-dots.open > .sys-more:hover { color: var(--text); }
+@keyframes notice-peek { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  #messages#messages .sys-dots > .system.folded, #messages .sys-dots.open, #messages#messages .thread-inner > .system.folding { animation: none !important; transition: none !important; }
+}
 
 /* ==========================================================================================
    SIGUE ABIERTO AQUÍ, THE SAME GLASS AS MODE · MODEL · EFFORT (2026-10-09)
@@ -8002,9 +8364,9 @@ dialog#core .mother-cmd .copy { position: absolute; top: 8px; right: 8px; displa
    (`#composer#composer` only outranks CHIPS IN FLAT TONE, which had flattened them into tags.)
    ========================================================================================== */
 :root {
-  --lq-fill: color-mix(in srgb, var(--bg) 45%, transparent);
-  --lq-fill-over: color-mix(in srgb, var(--bg) 62%, transparent);
-  --lq-rim: none;
+  --lq-fill: color-mix(in srgb, var(--text) 7%, color-mix(in srgb, var(--bg) 45%, transparent));
+  --lq-fill-over: color-mix(in srgb, var(--text) 11%, color-mix(in srgb, var(--bg) 62%, transparent));
+  --lq-rim: 0 0 0 .5px color-mix(in srgb, var(--text) 12%, transparent), inset 0 1px 0 rgb(255 255 255 / .05);
 }
 :root[data-scheme="light"] {
   --lq-fill: color-mix(in srgb, var(--bg) 62%, transparent);
@@ -8036,7 +8398,7 @@ dialog#core .mother-cmd .copy { position: absolute; top: 8px; right: 8px; displa
    the colour of a stop; it fills a little under the pointer. */
 #messages .system.plan > b:first-child { display: flex; align-items: center; justify-content: center; gap: 6px; }
 #messages .system.plan .act.stop { width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0; margin: -3px 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); letter-spacing: 0; cursor: pointer; transition: background-color calc(150ms * var(--motion-scale, 1)) var(--ease-out); }
-#messages .system.plan .act.stop svg { width: 14px; height: 14px; }
+#messages .system.plan .act.stop svg { width: var(--ico-sm); height: var(--ico-sm); }
 #messages .system.plan .act.stop:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--crit) 24%, transparent); outline: 0; }
 #messages .system.plan .act.stop:disabled { opacity: .45; cursor: default; }
 
@@ -8218,7 +8580,7 @@ dialog.tour-bonjour::backdrop { background: transparent; }
 .tour-head-words { display: grid; gap: 4px; }
 .tour-head h2 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.015em; }
 .tour-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, transparent); cursor: pointer; }
-.tour-close svg { width: 14px; height: 14px; }
+.tour-close svg { width: var(--ico-sm); height: var(--ico-sm); }
 .tour-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); }
 .tour-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
 .tour-window .tour-nav { display: grid; align-content: start; gap: 2px; margin: 0; padding: 10px 8px; list-style: none; overflow-y: auto; border-right: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
@@ -8338,7 +8700,33 @@ dialog.tour-bonjour::backdrop { background: transparent; }
 .tour-pill { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 3px 0 0; border-radius: 999px; background: color-mix(in srgb, var(--tour-acc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tour-acc) 40%, transparent); }
 .tour-pill-go { height: 28px; padding: 0 6px 0 12px; border: 0; background: transparent; font: inherit; font-family: var(--read); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: color-mix(in srgb, var(--tour-acc) 70%, var(--text)); cursor: pointer; }
 .tour-pill-x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: var(--text-2); background: transparent; cursor: pointer; }
-.tour-pill-x svg { width: 11px; height: 11px; }
+.tour-pill-x svg { width: var(--ico-xs); height: var(--ico-xs); }
+/* A phone's room bar (2026-10-14): only what keeps it whole — the pulse, the live light, DETENER
+   TODO and «more» on the left; Inicio, the projects and Ajustes on the right. Reload is the page's
+   own pull, and the tour goes on from Ajustes › Versión. */
+@media (max-width: 560px) {
+  .shell > .bar { gap: 8px; }
+  .shell > .bar .brand { width: 40px; overflow: hidden; flex: none; }
+  .shell > .bar .tour-pill-slot, .shell > .bar-home #reload-button { display: none !important; }
+}
+/* The room's bar knows its own width (2026-10-14): split beside a second conversation and the
+   browser it is narrow on a wide screen, where the screen's media queries never fire. */
+/* Both names: «bar» is the one every older fold of the bar asks for; with only «roombar» here
+   (2026-10-14) none of them fired and a narrow bar kept its wide keys. */
+.shell > .bar:not(.bar-home) { container: bar roombar / inline-size; }
+@container roombar (max-width: 760px) {
+  .tour-pill-go[data-short] { font-size: 0; }
+  .tour-pill-go[data-short]::after { content: attr(data-short); font-size: 12px; }
+}
+@container roombar (max-width: 470px) {
+  .bar-left .brand { width: 40px; overflow: hidden; flex: none; }
+  .tour-pill-slot { display: none !important; }
+}
+/* A narrow bar (2026-10-14): the pill says «Recorrido · 3/13»; the full sentence stays its name. */
+@media (max-width: 1180px) {
+  .tour-pill-go[data-short] { font-size: 0; }
+  .tour-pill-go[data-short]::after { content: attr(data-short); font-size: 12px; }
+}
 .tour-pill-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
 
 /* A hint: one line, once, beside the place it speaks of, in the top layer — a bubble, no beak. And
@@ -8353,7 +8741,32 @@ dialog.tour-bonjour::backdrop { background: transparent; }
 .tour-hint b { font-size: 14px; font-weight: 650; }
 .tour-hint p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
 .tour-hint .tour-btn { justify-self: end; margin-top: 4px; }
-.tour-hint.inline { position: relative; inset: auto; z-index: auto; margin: 0 0 12px; text-align: left; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tour-acc) 40%, transparent); background: color-mix(in srgb, var(--tour-acc) 10%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
+/* Inside a window (a modal sheet, where a floating card could not be pressed): the same card as the
+   floating hint, set into the window with its margins — not a tinted band glued to its edges
+   (2026-10-17). Eyebrow, title and line on the left; its one key on the right, the hint's small key. */
+.tour-hint.inline {
+  position: relative; inset: auto; z-index: auto; max-height: none; overflow: visible;
+  margin: 12px 12px 4px; padding: 12px 14px 12px 16px; border-radius: 16px; text-align: left;
+  grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px; align-items: center;
+  background: color-mix(in srgb, var(--bg-2, var(--bg)) 94%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tour-acc) 32%, transparent), 0 8px 22px -14px rgba(0, 0, 0, .4);
+  -webkit-backdrop-filter: none; backdrop-filter: none; animation: none;
+}
+.tour-hint.inline > :not(.tour-btn) { grid-column: 1; }
+.tour-hint.inline > .tour-btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; margin: 0; }
+:root[data-scheme="light"] .tour-hint.inline { background: #ffffff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tour-acc) 30%, transparent), 0 8px 22px -16px rgba(20, 30, 20, .3); }
+@media (max-width: 560px) { .tour-hint.inline { grid-template-columns: minmax(0, 1fr); } .tour-hint.inline > .tour-btn { grid-column: 1; grid-row: auto; margin-top: 6px; } }
+/* The way to a first-time hint whose place is out of view: a pill at the edge the place went past,
+   with the hint's own title and which way to go. A click takes the page there (tour.js). */
+.tour-hint-away { --tour-acc: var(--s-acc, var(--acc, var(--phosphor))); position: fixed; inset: auto; left: 50%; translate: -50% 0; margin: 0; z-index: 2147483000; display: inline-flex; align-items: center; gap: 8px; max-width: min(420px, calc(100vw - 32px)); padding: 8px 14px 8px 10px; border: 0; border-radius: 999px; font: inherit; font-family: var(--read); color: var(--text); background: color-mix(in srgb, var(--bg-2, var(--bg)) 94%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tour-acc) 70%, transparent), 0 14px 32px -14px rgba(0, 0, 0, .45); cursor: pointer; animation: tour-rise calc(360ms * var(--motion-scale, 1)) cubic-bezier(.2, .8, .2, 1) both; }
+.tour-hint-away[data-side="up"] { top: calc(env(safe-area-inset-top, 0px) + 84px); bottom: auto; }
+.tour-hint-away[data-side="down"] { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); top: auto; }
+.tour-hint-away svg { flex: none; width: var(--ico-sm, 15px); height: var(--ico-sm, 15px); color: var(--tour-acc); }
+.tour-hint-away[data-side="down"] svg { rotate: 180deg; }
+.tour-hint-away b { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.tour-hint-away span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
+.tour-hint-away:is(:hover, :focus-visible) { box-shadow: 0 0 0 2px var(--tour-acc), 0 14px 32px -14px rgba(0, 0, 0, .45); outline: none; }
+.tour-hint-away[hidden], .tour-hint[hidden] { display: none !important; }
 
 @media (max-width: 720px) {
   .tour-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
@@ -8362,7 +8775,7 @@ dialog.tour-bonjour::backdrop { background: transparent; }
   .tour-nav-name { overflow: visible; }
 }
 @media (prefers-reduced-motion: reduce) {
-  dialog.tour-bonjour[open], .tour-bonjour-stage > *, .tour-bonjour-done > *, .tour-chapter, .ts-moved-row, .tour-hint, .tour-notice { animation: none; }
+  dialog.tour-bonjour[open], .tour-bonjour-stage > *, .tour-bonjour-done > *, .tour-chapter, .ts-moved-row, .tour-hint, .tour-hint-away, .tour-notice { animation: none; }
   .tour-scene *, .tour-scene *::after { animation: none !important; }
   .ts-type b:first-child, .ts-arrive { opacity: 1; }
   .ts-search em { width: 54%; }
@@ -8495,10 +8908,1313 @@ dialog.tour-bonjour::backdrop { background: transparent; }
   .ts-widgets .ts-card:nth-child(2) i { animation-delay: .15s; } .ts-widgets .ts-card:nth-child(3) i { animation-delay: .3s; } .ts-widgets .ts-card:nth-child(4) i { animation-delay: .45s; }
 }
 @keyframes ts-fill { from { background-size: 0 100%; background-repeat: no-repeat; } to { background-size: 100% 100%; background-repeat: no-repeat; } }
-.hint-card.in-modal::before { content: none; }
 
 /* The tables of what was renamed or moved: a long new name wraps under itself, never past the box. */
 .ts-moved-row .now { overflow-wrap: anywhere; line-height: 1.35; }
 
 /* The welcome and its chapters are dialogs too: their own ring is not drawn around them. */
 dialog.tour-bonjour:focus, dialog.tour-bonjour:focus-visible, dialog.whats-new:focus, dialog.whats-new:focus-visible { outline: none; }
+
+/* ==========================================================================================
+   RESPUESTAS SIN BURBUJA (2026-10-15). La forma de siempre es C · piezas con carril difuso (app.js
+   pone data-reply="pieces" y data-reply-legible="lane"); las demás quedan para comparar, por atributos en
+   <html> que pone el selector de prueba (app.js, ?reply=): data-reply = doc (A · regla bajo la
+   cabecera), doc-inline (A · el avatar entra a la cabecera), pieces (C · plan en tarjeta),
+   pieces-edge (C · tarjeta con el filo de cada agente). data-reply-legible = lane (vidrio difuso
+   detrás de cada respuesta), column (una columna de lectura detrás de toda la conversación), halo
+   (sin plano: un halo en las letras), stripe (franja que se desvanece a la derecha). El carril solo
+   existe sobre un fondo de pantalla.
+   ========================================================================================== */
+:root[data-reply] #messages#messages .row.assistant { max-width: min(760px, 88%); }
+:root[data-reply] #messages#messages .row.assistant .bubble { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 2px 0 0 !important; }
+:root[data-reply] #messages#messages .row.assistant .who { margin-left: 0; }
+:root[data-reply] #messages#messages .row.assistant .bubble-foot { margin-top: 6px; }
+:root[data-reply] #messages#messages .row.assistant .stamp > span { font-family: var(--mono); }
+/* A · regla bajo la cabecera */
+:root[data-reply="doc"] #messages#messages .row.assistant .who { padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
+/* A · avatar en la cabecera: la fila es una sola columna y el agente se dice con un punto de su color. */
+:root[data-reply="doc-inline"] #messages#messages .row.assistant { grid-template-columns: minmax(0, 1fr); }
+:root[data-reply="doc-inline"] #messages#messages .row.assistant > .avatar { display: none; }
+:root[data-reply="doc-inline"] #messages#messages .row.assistant .who { align-items: center; margin-bottom: 4px; }
+:root[data-reply="doc-inline"] #messages#messages .row.assistant .who::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--agent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent) 18%, transparent); }
+:root[data-reply="doc-inline"] #messages#messages .row.assistant .who > span:first-child { font-size: 11.5px; font-weight: 600; }
+/* C · lo accionable en tarjeta */
+:root[data-reply^="pieces"] #messages#messages .row.assistant .plan-card { border: 0; border-radius: 14px; padding: 10px 14px; background: var(--panel); box-shadow: var(--lift-1); }
+:root[data-reply="pieces-edge"] #messages#messages .row.assistant .plan-card li { list-style: none; margin: 6px 0 6px -18px; padding: 5px 0 5px 10px; border-left: 3px solid var(--agent); border-radius: 2px; }
+:root[data-reply="pieces-edge"] #messages#messages .row.assistant .plan-card { border-left: 3px solid var(--agent); }
+/* Los carriles, solo sobre un fondo de pantalla */
+:root[data-reply][data-reply-legible][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .col { position: relative; isolation: isolate; }
+:root[data-reply][data-reply-legible="lane"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .col::before,
+:root[data-reply][data-reply-legible="stripe"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .col::before {
+  content: ''; position: absolute; inset: -10px -18px -8px -14px; z-index: -1; border-radius: 22px;
+  background: color-mix(in srgb, var(--bg) 62%, transparent);
+  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
+  -webkit-mask-image: radial-gradient(120% 140% at 40% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 140% at 40% 50%, #000 62%, transparent 100%);
+}
+:root[data-reply][data-reply-legible="stripe"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .col::before {
+  inset: -10px -60px -8px -14px; border-radius: 18px 0 0 18px; background: color-mix(in srgb, var(--bg) 70%, transparent);
+  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 68%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 68%, transparent 100%);
+}
+:root[data-reply][data-reply-legible="column"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .thread-inner {
+  border-radius: 26px; background: color-mix(in srgb, var(--bg) 52%, transparent);
+  -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15);
+  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 8%, transparent);
+  padding-left: 18px; padding-right: 18px;
+}
+:root[data-reply][data-reply-legible="halo"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant :is(.bubble, .who) {
+  text-shadow: 0 0 1px var(--bg), 0 0 6px var(--bg), 0 0 14px color-mix(in srgb, var(--bg) 85%, transparent), 0 0 24px color-mix(in srgb, var(--bg) 60%, transparent);
+}
+:root[data-reply][data-reply-legible="halo"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.assistant .bubble { font-weight: 400; }
+/* El selector de la prueba: solo existe con ?reply= (app.js, PRUEBA · respuestas sin burbuja). */
+.reply-lab { position: fixed; left: 50%; top: 66px; z-index: 90; transform: translateX(-50%); display: grid; gap: 4px; padding: 6px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 .5px var(--line-2), 0 10px 28px -8px rgba(0, 0, 0, .45); font-family: var(--read); }
+.reply-lab .lab-row { display: flex; align-items: center; gap: 3px; }
+.reply-lab b { width: 58px; padding: 0 6px; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
+.reply-lab button { white-space: nowrap; height: 27px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 500 12px var(--read); cursor: pointer; }
+.reply-lab button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
+.reply-lab button.on { background: var(--phosphor); color: var(--phosphor-ink); }
+.reply-lab button:disabled { opacity: .4; cursor: default; }
+.reply-lab .lab-sample { margin-left: auto; box-shadow: inset 0 0 0 1px var(--line-2); }
+
+/* ==========================================================================================
+   PIEZAS QUE SE USAN (2026-10-15): la petición de comandos y la tarjeta de @madre local, con la
+   letra de lectura y botones que se sienten botones. Solo forma: lo que hacen no cambia.
+   ========================================================================================== */
+/* «@agente te pide correr» */
+#messages#messages .choice.run-request .choice-q { margin: 2px 2px 14px; font-family: var(--read); font-size: 16px; font-weight: 600; line-height: 1.4; }
+#messages#messages .choice.run-request .run-line { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 0 !important; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
+#messages#messages .choice.run-request .run-line + .run-line, #messages#messages .choice.run-request .run-why + .run-line { margin-top: 6px; }
+#messages#messages .choice.run-request .run-line:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 7%, transparent) !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; }
+#messages#messages .choice.run-request .run-line .choice-key { width: 22px; height: 22px; margin: 0; border: 0 !important; border-radius: 6px; background: color-mix(in srgb, var(--text) 7%, transparent) !important; box-shadow: none !important; color: var(--text-3); font-size: 11.5px; }
+#messages#messages .choice.run-request .run-line .choice-text { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text) !important; font-family: var(--mono); font-size: 13px; line-height: 1.45; }
+#messages#messages .choice.run-request .run-line .choice-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border: 0 !important; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent) !important; box-shadow: none !important; color: var(--text) !important; font-family: var(--read); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: lowercase; white-space: nowrap; }
+#messages#messages .choice.run-request .run-line .choice-tag::first-letter { text-transform: uppercase; }
+#messages#messages .choice.run-request .run-line:not(.ran):not(.failed):not(.refused):not(.running):not(.serving) .choice-tag { background: var(--agent, var(--phosphor)) !important; color: var(--agent-on, var(--phosphor-ink)) !important; }
+#messages#messages .choice.run-request .run-line.ran .choice-tag { background: color-mix(in srgb, var(--ok, var(--phosphor)) 15%, transparent) !important; color: var(--ok, var(--phosphor)) !important; }
+#messages#messages .choice.run-request .run-line.ran .choice-tag { position: relative; padding-left: 26px; }
+#messages#messages .choice.run-request .run-line.ran .choice-tag::before { content: '✓'; position: absolute; left: 11px; text-transform: none; }
+#messages#messages .choice.run-request .run-line.failed .choice-tag { background: color-mix(in srgb, var(--crit) 15%, transparent) !important; color: var(--crit) !important; }
+#messages#messages .choice.run-request .run-line.refused { opacity: 1; }
+#messages#messages .choice.run-request .run-line.refused .choice-text { color: var(--text-3) !important; }
+#messages#messages .choice.run-request .run-line.refused .choice-tag { background: transparent !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; color: var(--text-3) !important; }
+#messages#messages .choice.run-request .run-why { margin: 6px 0 0 46px; font-family: var(--read); font-size: 12.5px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--text-3); }
+#messages#messages .choice.run-request .run-summary { display: inline-flex; align-items: center; margin: 12px 2px 0; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); font-family: var(--read); font-size: 12.5px; letter-spacing: 0; color: var(--text-2); }
+#messages#messages .choice.run-request.returned .run-summary { background: color-mix(in srgb, var(--ok, var(--phosphor)) 13%, transparent); color: var(--ok, var(--phosphor)); }
+#messages#messages .choice.run-request :is(.run-all, .run-back) { height: 30px; padding: 0 13px; border: 0 !important; border-radius: 9px; background: color-mix(in srgb, var(--text) 8%, transparent) !important; color: var(--text) !important; font-family: var(--read); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
+#messages#messages .choice.run-request .choice-foot { margin: 14px 2px 0; font-family: var(--read); font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text-3); }
+/* @madre local: una tarjeta que se lee, a la izquierda, y su botón como el de las demás. */
+#messages#messages .system.local-model { justify-items: start; gap: 6px; padding: 14px 16px; text-align: left; }
+#messages#messages .system.local-model .head { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
+#messages#messages .system.local-model .head .who { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--agent, var(--phosphor)) 14%, transparent); color: var(--agent, var(--phosphor)); }
+#messages#messages .system.local-model .says { max-width: 62ch; font-family: var(--read); font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text); text-align: left; }
+#messages#messages .system.local-model .says.small { font-size: 12.5px; color: var(--text-3); }
+#messages#messages .system.local-model .acts { justify-content: flex-start; margin-top: 4px; }
+#messages#messages .system.local-model .acts button { height: 30px; padding: 0 14px; border: 0 !important; border-radius: 9px; background: var(--phosphor) !important; box-shadow: none !important; color: var(--phosphor-ink) !important; font-family: var(--read); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: lowercase; }
+#messages#messages .system.local-model .acts button::first-letter { text-transform: uppercase; }
+#messages#messages .system.local-model .acts button + button { background: color-mix(in srgb, var(--text) 8%, transparent) !important; color: var(--text) !important; }
+.reply-lab .lab-code { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); font: 600 12px var(--mono); letter-spacing: .08em; }
+
+/* «#3 EDITAR concedido»: un estado pequeño en el color de su modo, no una franja punteada. */
+#messages#messages .mode-ask.settled { display: inline-flex !important; grid-template-columns: none; justify-self: start; align-self: flex-start; width: fit-content !important; max-width: 100%; margin-left: 0 !important; margin-right: auto !important; padding: 5px 12px 5px 10px; border: 0 !important; border-radius: 999px; background: color-mix(in srgb, var(--mode-c, var(--ok, var(--phosphor))) 13%, transparent) !important; box-shadow: none !important; }
+#messages#messages .mode-ask.settled .mode-what { display: inline-flex; align-items: center; gap: 7px; font-family: var(--read); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--mode-c, var(--ok, var(--phosphor))); }
+#messages#messages .mode-ask.settled .mode-what::before { content: '✓'; font-weight: 700; }
+#messages#messages .mode-ask.settled[data-mode="1"] { --mode-c: var(--mode-1); }
+#messages#messages .mode-ask.settled[data-mode="2"] { --mode-c: var(--mode-2); }
+#messages#messages .mode-ask.settled[data-mode="3"] { --mode-c: var(--mode-3); }
+#messages#messages .mode-ask.settled[data-mode="4"] { --mode-c: var(--mode-4); }
+
+/* ==========================================================================================
+   PRUEBA · las tarjetas de /run en cuatro formas (2026-10-15), por data-term en <html>:
+   line (a), window (b), pill (c), step (d). Sin el atributo, la de siempre.
+   ========================================================================================== */
+/* a · línea: el comando primero, el estado y quién a la derecha, la última línea debajo. */
+:root[data-term="line"] #messages#messages .command-card.terminal { border-radius: 14px; }
+:root[data-term="line"] #messages .command-card.terminal :is(.term-tag, .term-count) { display: none; }
+:root[data-term="line"] #messages .command-card.terminal .term-head { gap: 10px; padding: 10px 12px; }
+:root[data-term="line"] #messages .command-card.terminal .term-head .chev-icon { order: -1; }
+:root[data-term="line"] #messages .command-card.terminal .term-line { font-size: 13px; }
+:root[data-term="line"] #messages .command-card.terminal .term-status { font-family: var(--read); font-size: 12px; padding: 3px 10px; }
+:root[data-term="line"] #messages .command-card.terminal .term-who { font-family: var(--read); font-size: 12px; }
+:root[data-term="line"] #messages .command-card.terminal .term-peek { padding: 0 12px 10px 38px; font-size: 12px; }
+:root[data-term="line"] #messages .command-card.terminal .term-peek::before { content: '→ '; color: var(--text-3); }
+/* b · ventana: una terminal pequeña, oscura en los dos temas, con su salida a la vista. */
+:root[data-term="window"] #messages#messages .command-card.terminal { overflow: hidden; border-radius: 14px; border: 0 !important; background: #0d100d !important; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), var(--lift-1) !important; color: #e9ede6; }
+:root[data-term="window"] #messages .command-card.terminal .term-head { padding: 9px 12px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .07); }
+:root[data-term="window"] #messages .command-card.terminal .term-head::before { content: ''; flex: none; width: 34px; height: 10px; background: radial-gradient(circle at 5px 5px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 17px 5px, #febc2e 4px, transparent 4.5px), radial-gradient(circle at 29px 5px, #28c840 4px, transparent 4.5px); opacity: .85; }
+:root[data-term="window"] #messages .command-card.terminal :is(.term-tag, .term-count) { display: none; }
+:root[data-term="window"] #messages .command-card.terminal .term-line { color: #e9ede6; font-size: 12.5px; }
+:root[data-term="window"] #messages .command-card.terminal .term-who { color: #9aa197; }
+:root[data-term="window"] #messages .command-card.terminal .term-peek { margin: 0; padding: 10px 14px 12px; font-size: 12px; color: #b8c2b4; white-space: pre-wrap; }
+:root[data-term="window"] #messages .command-card.terminal .term-peek::before { content: '› '; color: #28c840; }
+:root[data-term="window"] #messages .command-card.terminal pre { background: transparent; border-top-color: rgba(255, 255, 255, .07); color: #e9ede6; }
+/* c · píldora: como las llamadas a herramientas de los chats, una línea del ancho de lo que dice. */
+:root[data-term="pill"] #messages#messages .command-card.terminal:not(.open) { justify-self: start; width: fit-content; max-width: 100%; border-radius: 999px; }
+:root[data-term="pill"] #messages .command-card.terminal:not(.open) .term-peek, :root[data-term="pill"] #messages .command-card.terminal :is(.term-tag, .term-count) { display: none; }
+:root[data-term="pill"] #messages .command-card.terminal:not(.open) .term-head { padding: 6px 12px 6px 8px; gap: 8px; }
+:root[data-term="pill"] #messages .command-card.terminal .term-status { order: -1; font-family: var(--read); font-size: 12px; }
+:root[data-term="pill"] #messages .command-card.terminal .term-line { font-size: 12.5px; }
+:root[data-term="pill"] #messages .command-card.terminal .term-who { font-family: var(--read); font-size: 12px; }
+:root[data-term="pill"] #messages#messages .command-card.terminal.open { border-radius: 14px; }
+/* d · paso: sin tarjeta; un punto de estado en un hilo, el comando y debajo quién, cuánto y qué dijo. */
+:root[data-term="step"] #messages#messages .command-card.terminal { position: relative; padding-left: 26px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
+:root[data-term="step"] #messages#messages .command-card.terminal::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, transparent); }
+:root[data-term="step"] #messages#messages .command-card.terminal::after { content: '✓'; position: absolute; left: 0; top: 9px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ok, var(--phosphor)); color: var(--bg); font: 700 10px var(--read); }
+:root[data-term="step"] #messages#messages .command-card.terminal.failed::after { content: '✕'; background: var(--crit); }
+:root[data-term="step"] #messages .command-card.terminal :is(.term-tag, .term-count) { display: none; }
+:root[data-term="step"] #messages .command-card.terminal .term-head { flex-wrap: wrap; padding: 6px 0; row-gap: 2px; }
+:root[data-term="step"] #messages .command-card.terminal .term-line { flex: 1 1 calc(100% - 40px); font-size: 13px; }
+:root[data-term="step"] #messages .command-card.terminal .term-head .chev-icon { order: 0; }
+:root[data-term="step"] #messages .command-card.terminal .term-status { order: 2; padding: 0; background: none !important; font-family: var(--read); font-size: 12px; }
+:root[data-term="step"] #messages .command-card.terminal .term-who { order: 3; font-family: var(--read); font-size: 12px; }
+:root[data-term="step"] #messages .command-card.terminal .term-who::before { content: '· '; color: var(--text-3); }
+:root[data-term="step"] #messages .command-card.terminal .term-peek { padding: 0 0 6px; font-size: 12px; }
+:root[data-term="step"] #messages .command-card.terminal pre { border: 0; border-radius: 10px; margin-bottom: 6px; }
+:root[data-term="step"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .command-card.terminal { padding-right: 12px; border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--bg) 62%, transparent) !important; -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
+#messages#messages .mode-ask.settled { background: color-mix(in srgb, var(--mode-c, var(--phosphor)) 16%, color-mix(in srgb, var(--bg) 78%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-c, var(--phosphor)) 45%, transparent) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
+#messages#messages .mode-ask.settled .mode-what { color: color-mix(in srgb, var(--mode-c, var(--phosphor)) 70%, var(--text)); }
+
+/* ==========================================================================================
+   LABORATORIO DEL CHAT (2026-10-15): el panel de ?lab (app.js) y las cinco formas de cada
+   elemento, por data-labNN en <html>. A es siempre como se ve hoy.
+   ========================================================================================== */
+.lab-panel { position: fixed; top: 64px; right: 12px; bottom: 12px; z-index: 95; width: 300px; display: flex; flex-direction: column; border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 .5px var(--line-2), 0 18px 40px -12px rgba(0, 0, 0, .5); font-family: var(--read); }
+.lab-panel.folded { bottom: auto; width: auto; }
+.lab-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
+.lab-head b { font: 600 13px var(--read); }
+.lab-fold { width: 26px; height: 26px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); cursor: pointer; }
+.lab-code { margin-left: auto; padding: 4px 9px; border-radius: 8px; background: color-mix(in srgb, var(--phosphor) 16%, transparent); color: var(--phosphor); font: 600 12px var(--mono); letter-spacing: .06em; }
+.lab-copy, .lab-again { height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--phosphor); color: var(--phosphor-ink); font: 600 12px var(--read); cursor: pointer; }
+.lab-copy { flex: 1 1 100%; }
+.lab-list { flex: 1; overflow: auto; padding: 6px 8px; display: grid; gap: 2px; align-content: start; }
+.lab-row { display: grid; gap: 3px; padding: 7px 6px; border-radius: 10px; }
+.lab-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
+.lab-top { display: flex; align-items: center; gap: 8px; }
+.lab-n { font: 600 10.5px var(--mono); color: var(--text-3); }
+.lab-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
+.lab-keys { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, transparent); }
+.lab-keys button { width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: 600 11px var(--mono); cursor: pointer; }
+.lab-keys button.on { background: var(--phosphor); color: var(--phosphor-ink); }
+.lab-desc { padding-left: 26px; font-size: 11.5px; color: var(--text-3); }
+.lab-again { margin: 8px 12px 12px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
+:root[data-lab="on"] .shell { padding-right: 312px; }
+@media (max-width: 900px) { :root[data-lab="on"] .shell { padding-right: 0; } .lab-panel { width: 260px; } }
+/* 01 · Mensaje del humano */
+:root[data-lab01="B"] #messages#messages .row.user .bubble { background: var(--panel-2) !important; color: var(--text) !important; border-radius: 20px !important; box-shadow: none !important; }
+:root[data-lab01="C"] #messages#messages .row.user .bubble { background: transparent !important; color: var(--text) !important; box-shadow: none !important; padding: 0 !important; text-align: right; }
+:root[data-lab01="D"] #messages#messages .row.user { justify-self: stretch; max-width: 100%; }
+:root[data-lab01="D"] #messages#messages .row.user .col { justify-items: stretch; }
+:root[data-lab01="D"] #messages#messages .row.user .bubble { background: var(--panel) !important; color: var(--text) !important; border-radius: 14px !important; box-shadow: 0 0 0 1px var(--line-2) !important; text-align: left; }
+:root[data-lab01="D"] #messages#messages .row.user .who { justify-content: flex-start; }
+:root[data-lab01="E"] #messages#messages .row.user .bubble { background: var(--panel-2) !important; color: var(--text) !important; border-radius: 20px !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
+:root[data-lab01="E"] #messages#messages .row.user .stamp .to { order: -1; font-size: 12px; color: var(--text); }
+/* 02 · Adjuntos */
+:root[data-lab02="B"] #messages .row.user .files { display: flex; flex-wrap: wrap; gap: 6px; }
+:root[data-lab02="B"] #messages .row.user .file-tile { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); }
+:root[data-lab02="C"] #messages .row.user .file-tile { display: inline-grid; grid-template-columns: 30px auto; align-items: center; gap: 10px; width: auto; height: auto; padding: 8px 12px 8px 8px; border: 0; border-radius: 12px; background: var(--panel); box-shadow: var(--lift-1); color: var(--text); }
+:root[data-lab02="C"] #messages .row.user .file-tile .kind { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
+:root[data-lab02="D"] #messages .row.user .files { display: flex; flex-wrap: wrap; gap: 4px 10px; }
+:root[data-lab02="D"] #messages .row.user .file-tile { width: auto; height: auto; padding: 0; border: 0; background: none; color: inherit; opacity: .75; font-size: 12px; }
+:root[data-lab02="D"] #messages .row.user .file-tile .kind { display: none; }
+:root[data-lab02="D"] #messages .row.user .file-tile .name::before { content: '📎 '; }
+:root[data-lab02="E"] #messages .row.user .bubble { display: flex; flex-direction: column; }
+:root[data-lab02="E"] #messages .row.user .files { order: -1; margin: 0 0 8px; }
+/* 03 · Pensando */
+:root[data-lab03="B"] #messages .row.thinking .bubble > i { display: none; }
+:root[data-lab03="B"] #messages .row.thinking .bubble { background: transparent !important; box-shadow: none !important; }
+:root[data-lab03="B"] #messages .row.thinking .bubble::before { content: 'Pensando…'; background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lab-shimmer 2.2s linear infinite; font-weight: 500; }
+@keyframes lab-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+:root[data-lab03="C"] #messages .row.thinking .bubble { background: transparent !important; box-shadow: none !important; }
+:root[data-lab03="C"] #messages .row.thinking .bubble > i { display: none; }
+:root[data-lab03="C"] #messages .row.thinking > .avatar { animation: lab-pulse 1.4s ease-in-out infinite; }
+@keyframes lab-pulse { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.08); } }
+:root[data-lab03="D"] #messages .row.thinking .bubble > i { display: none; }
+:root[data-lab03="D"] #messages .row.thinking .bubble { width: 140px; height: 4px; padding: 0 !important; border-radius: 4px !important; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent) !important; box-shadow: none !important; }
+:root[data-lab03="D"] #messages .row.thinking .bubble::before { content: ''; display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--agent, var(--phosphor)); animation: lab-bar 1.4s ease-in-out infinite; }
+@keyframes lab-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
+:root[data-lab03="E"] #messages .row.thinking .bubble > i { display: none; }
+:root[data-lab03="E"] #messages .row.thinking .bubble { display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 12px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--agent, var(--text)) 12%, transparent) !important; box-shadow: none !important; font-size: 12.5px; }
+:root[data-lab03="E"] #messages .row.thinking .bubble::before { content: 'pensando'; color: var(--agent, var(--text)); font-weight: 500; }
+/* 04 · Cabecera del agente */
+:root[data-lab04="B"] #messages#messages .row.assistant .who > span:first-child { font-family: var(--read); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
+:root[data-lab04="B"] #messages#messages .row.assistant .who .badge:not(.mode) { background: none !important; padding: 0; font-family: var(--read); letter-spacing: 0; text-transform: none; color: var(--text-3); }
+:root[data-lab04="C"] #messages#messages .row.assistant .who > span:first-child { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--agent) 15%, transparent); font-weight: 600; }
+:root[data-lab04="D"] #messages#messages .row.assistant .who > :not(:first-child) { opacity: 0; transition: opacity .2s; }
+:root[data-lab04="D"] #messages#messages .row.assistant:hover .who > :not(:first-child) { opacity: 1; }
+:root[data-lab04="E"] #messages#messages .row.assistant { grid-template-columns: minmax(0, 1fr); }
+:root[data-lab04="E"] #messages#messages .row.assistant > .avatar { display: none; }
+:root[data-lab04="E"] #messages#messages .row.assistant .who { align-items: center; }
+:root[data-lab04="E"] #messages#messages .row.assistant .who::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--agent); }
+/* 05 · Cuerpo de la respuesta (hoy: prosa libre con carril) */
+:root[data-lab05="B"] #messages#messages .row.assistant .bubble { background: var(--panel) !important; box-shadow: var(--lift-1) !important; border-radius: 20px 20px 20px 6px !important; padding: 12px 16px !important; }
+:root[data-lab05="C"] #messages#messages .row.assistant .bubble { background: var(--panel) !important; box-shadow: 0 0 0 1px var(--line-2) !important; border-radius: 14px !important; padding: 12px 16px !important; }
+:root[data-lab05="D"] #messages#messages .row.assistant .bubble { padding: 4px 0 4px 14px !important; border-left: 3px solid var(--agent) !important; }
+:root[data-lab05="E"] #messages#messages .row.assistant .who { padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
+:root[data-lab05]:not([data-lab05="A"]) #messages#messages .row.assistant .col::before { display: none; }
+:root[data-lab05="D"] #messages#messages .row.assistant .col::before, :root[data-lab05="E"] #messages#messages .row.assistant .col::before { display: block; }
+/* 06 · Memoria citada */
+:root[data-lab06="B"] #messages .cite { font-family: var(--mono); font-size: 10px; vertical-align: super; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--madre-green) 16%, transparent); color: var(--madre-green); }
+:root[data-lab06="C"] #messages .cite { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--madre-green) 14%, transparent); color: var(--madre-green); font: 500 11.5px var(--mono); }
+:root[data-lab06="D"] #messages .cite { text-decoration: underline dotted var(--madre-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
+:root[data-lab06="E"] #messages .cite { font-size: .8em; color: var(--text-3); }
+/* 07 · Plan */
+:root[data-lab07="B"] #messages .plan-card ol { list-style: none; padding-left: 0; }
+:root[data-lab07="B"] #messages .plan-card li { position: relative; padding: 6px 0 6px 26px; }
+:root[data-lab07="B"] #messages .plan-card li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
+:root[data-lab07="C"] #messages .plan-card ol { padding-left: 22px; }
+:root[data-lab07="C"] #messages .plan-card li { padding: 8px 0; border-top: 1px dashed var(--line-2); }
+:root[data-lab07="C"] #messages .plan-card li:first-child { border-top: 0; }
+:root[data-lab07="D"] #messages .plan-card ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
+:root[data-lab07="D"] #messages .plan-card li { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--agent) 10%, transparent); }
+:root[data-lab07="E"] #messages .plan-card ol { list-style: none; padding-left: 0; }
+:root[data-lab07="E"] #messages .plan-card li { position: relative; margin: 0; padding: 6px 0 10px 24px; }
+:root[data-lab07="E"] #messages .plan-card li::before { content: ''; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--agent); }
+:root[data-lab07="E"] #messages .plan-card li:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 23px; bottom: -2px; width: 2px; background: var(--line-2); }
+/* 08 · Bloque de código */
+:root[data-lab08="B"] #messages .codeblock { overflow: hidden; border: 0 !important; border-radius: 12px; background: var(--panel) !important; box-shadow: var(--lift-1); }
+:root[data-lab08="B"] #messages .codeblock .lang, :root[data-lab08="B"] #messages .codeblock .copy { font-family: var(--read); letter-spacing: 0; text-transform: none; }
+:root[data-lab08="C"] #messages .codeblock .lang { display: none; }
+:root[data-lab08="C"] #messages .codeblock .copy { opacity: 0; transition: opacity .2s; }
+:root[data-lab08="C"] #messages .codeblock:hover .copy { opacity: 1; }
+:root[data-lab08="C"] #messages .codeblock { border: 0 !important; background: color-mix(in srgb, var(--text) 5%, transparent) !important; }
+:root[data-lab08="D"] #messages .codeblock { border: 0 !important; background: #0d100d !important; color: #e9ede6; }
+:root[data-lab08="D"] #messages .codeblock :is(pre, code, .lang, .copy) { color: #e9ede6 !important; background: transparent !important; }
+:root[data-lab08="E"] #messages .codeblock pre { max-height: 7.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
+/* 09 · Pie de la respuesta */
+:root[data-lab09="B"] #messages .row.assistant .bubble-foot .stamp { display: none; }
+:root[data-lab09="B"] #messages .row.assistant .bubble-foot { opacity: 0; transition: opacity .2s; }
+:root[data-lab09="B"] #messages .row.assistant:hover .bubble-foot { opacity: 1; }
+:root[data-lab09="C"] #messages .row.assistant .bubble-foot .stamp { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); }
+:root[data-lab09="D"] #messages .row.assistant .bubble-actions .act { border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, transparent); }
+:root[data-lab09="E"] #messages .row.assistant .bubble-foot .stamp { opacity: .45; transition: opacity .2s; }
+:root[data-lab09="E"] #messages .row.assistant:hover .bubble-foot .stamp { opacity: 1; }
+/* 10 · Elección */
+:root[data-lab10="B"] #messages .choice:not(.run-request) .choice-list { display: flex; flex-wrap: wrap; gap: 6px; }
+:root[data-lab10="B"] #messages .choice:not(.run-request) .choice-option { width: auto; display: inline-flex; padding: 7px 14px; border-radius: 999px; }
+:root[data-lab10="B"] #messages .choice:not(.run-request) .choice-key { display: none; }
+:root[data-lab10="C"] #messages .choice:not(.run-request) .choice-option { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
+:root[data-lab10="D"] #messages .choice:not(.run-request) .choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+:root[data-lab10="D"] #messages .choice:not(.run-request) .choice-option { grid-template-columns: 1fr; align-content: start; min-height: 74px; }
+:root[data-lab10="E"] #messages .choice:not(.run-request) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
+:root[data-lab10="E"] #messages .choice:not(.run-request) .choice-list { display: flex; flex-wrap: wrap; gap: 6px; }
+:root[data-lab10="E"] #messages .choice:not(.run-request) .choice-option { width: auto; padding: 7px 14px; border-radius: 9px; }
+:root[data-lab10="E"] #messages .choice:not(.run-request) .choice-option.recommended { background: var(--agent, var(--phosphor)); color: var(--agent-on, var(--phosphor-ink)); }
+:root[data-lab10="E"] #messages .choice:not(.run-request) :is(.choice-key, .choice-kicker, .choice-foot) { display: none; }
+/* 11 · Petición de permiso */
+:root[data-lab11="B"] #messages .mode-ask:not(.settled) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
+:root[data-lab11="B"] #messages .mode-ask:not(.settled) .mode-why { display: none; }
+:root[data-lab11="C"] #messages .mode-ask:not(.settled) { border: 0 !important; border-left: 4px solid var(--mode-2) !important; border-radius: 6px 14px 14px 6px !important; background: var(--panel) !important; }
+:root[data-lab11="D"] #messages .mode-ask:not(.settled) { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .45) !important; }
+:root[data-lab11="E"] #messages .mode-ask:not(.settled) { background: transparent !important; border: 1px solid var(--line-2) !important; box-shadow: none !important; }
+/* 12 · Permiso concedido */
+:root[data-lab12="B"] #messages#messages .mode-ask.settled { align-self: stretch; width: auto !important; background: none !important; box-shadow: none !important; gap: 10px; }
+:root[data-lab12="B"] #messages#messages .mode-ask.settled::before, :root[data-lab12="B"] #messages#messages .mode-ask.settled::after { content: ''; flex: 1; align-self: center; height: 1px; background: var(--line-2); }
+:root[data-lab12="C"] #messages#messages .mode-ask.settled { align-self: center; background: none !important; box-shadow: none !important; }
+:root[data-lab12="C"] #messages#messages .mode-ask.settled .mode-what { color: var(--text-3); font-weight: 400; }
+:root[data-lab12="C"] #messages#messages .mode-ask.settled .mode-what::before { content: none; }
+:root[data-lab12="D"] #messages#messages .mode-ask.settled .mode-what::before { content: '🔓'; }
+:root[data-lab12="E"] #messages#messages .mode-ask.settled { background: none !important; box-shadow: none !important; }
+:root[data-lab12="E"] #messages#messages .mode-ask.settled .mode-what { color: var(--text-2); font-weight: 400; }
+:root[data-lab12="E"] #messages#messages .mode-ask.settled .mode-what::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mode-c, var(--phosphor)); }
+/* 13 · Petición de comandos */
+:root[data-lab13="B"] #messages#messages .choice.run-request .run-line { background: transparent !important; box-shadow: none !important; border-radius: 0; border-top: 1px solid var(--line) !important; }
+:root[data-lab13="C"] #messages#messages .choice.run-request .run-line { background: #0d100d !important; }
+:root[data-lab13="C"] #messages#messages .choice.run-request .run-line .choice-text { color: #e9ede6 !important; }
+:root[data-lab13="D"] #messages#messages .choice.run-request .choice-list { counter-reset: lab-run; }
+:root[data-lab13="D"] #messages#messages .choice.run-request .run-line { counter-increment: lab-run; }
+:root[data-lab13="D"] #messages#messages .choice.run-request .run-line .choice-key { font-size: 0 !important; }
+:root[data-lab13="D"] #messages#messages .choice.run-request .run-line .choice-key::after { content: counter(lab-run); font: 600 11.5px var(--mono); color: var(--text-2); }
+:root[data-lab13="E"] #messages#messages .choice.run-request .run-line:not(.refused):not(:hover) .choice-tag { opacity: 0; }
+/* 15 · Avisos del sistema (abiertos en B–E) */
+:root[data-lab15]:not([data-lab15="A"]) #messages#messages .sys-dots.open { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
+:root[data-lab15]:not([data-lab15="A"]) #messages#messages .sys-dots.open > .sys-more { display: none; }
+:root[data-lab15="B"] #messages#messages .sys-dots.open > .system.folded { text-align: center; padding-left: 12px !important; background: none !important; }
+:root[data-lab15="B"] #messages#messages .sys-dots.open > .system.folded::before { display: none; }
+:root[data-lab15="C"] #messages#messages .sys-dots.open > .system.folded { text-align: center; padding: 8px 12px !important; border-top: 1px solid var(--line-2); border-radius: 0 !important; background: none !important; }
+:root[data-lab15="C"] #messages#messages .sys-dots.open > .system.folded::before { display: none; }
+:root[data-lab15="D"] #messages#messages .sys-dots.open { justify-items: start; }
+:root[data-lab15="D"] #messages#messages .sys-dots.open > .system.folded { justify-self: start; border-radius: 999px !important; background: color-mix(in srgb, var(--panel) 88%, transparent) !important; box-shadow: var(--lift-1); }
+:root[data-lab15="E"] #messages#messages .sys-dots.open { gap: 8px; }
+:root[data-lab15="E"] #messages#messages .sys-dots.open > .system.folded { border-radius: 14px !important; background: var(--panel) !important; box-shadow: var(--lift-1); }
+/* 16 · Error y diagnóstico */
+:root[data-lab16="B"] #messages#messages .thread-inner > .system.fail { justify-self: start; margin-left: 40px; text-align: left; }
+:root[data-lab16="B"] #messages#messages .thread-inner > .system.fail::before { content: '⚠ '; }
+:root[data-lab16="C"] #messages#messages .thread-inner > .system.fail { width: 100%; max-width: 100%; border-radius: 10px; text-align: left; }
+:root[data-lab16="D"] #messages#messages .thread-inner > .system.fail { background: none !important; box-shadow: none !important; padding: 0; font-size: 12.5px; }
+:root[data-lab16="E"] #messages#messages .thread-inner > .system.fail { background: var(--panel) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent), var(--lift-1) !important; color: var(--text); }
+/* 17 · Espacio entre turnos */
+:root[data-lab17="B"] #messages .thread-inner > * + * { margin-top: 4px !important; }
+:root[data-lab17="C"] #messages .thread-inner > * + * { margin-top: 28px !important; }
+:root[data-lab17="D"] #messages .thread-inner > .row + .row { padding-top: 14px; border-top: 1px solid var(--line); }
+:root[data-lab17="E"] #messages .thread-inner > .row.assistant + .row.assistant { margin-top: 2px !important; }
+:root[data-lab17="E"] #messages .thread-inner > :is(.row.assistant[data-agent="claude"] + .row.assistant[data-agent="claude"], .row.assistant[data-agent="codex"] + .row.assistant[data-agent="codex"], .row.assistant[data-agent="gemini"] + .row.assistant[data-agent="gemini"], .row.assistant[data-agent="opencode"] + .row.assistant[data-agent="opencode"], .row.assistant[data-agent="madre"] + .row.assistant[data-agent="madre"]) .who { display: none; }
+:root[data-lab17="E"] #messages .thread-inner > :is(.row.assistant[data-agent="claude"] + .row.assistant[data-agent="claude"], .row.assistant[data-agent="codex"] + .row.assistant[data-agent="codex"], .row.assistant[data-agent="gemini"] + .row.assistant[data-agent="gemini"], .row.assistant[data-agent="opencode"] + .row.assistant[data-agent="opencode"], .row.assistant[data-agent="madre"] + .row.assistant[data-agent="madre"]) > .avatar { visibility: hidden; }
+:root[data-lab15="B"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .sys-dots.open > .system.folded,
+:root[data-lab15="C"][data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .sys-dots.open > .system.folded { background: color-mix(in srgb, var(--bg) 62%, transparent) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 12px !important; }
+
+/* ==========================================================================================
+   CHAT · ACCC-BABA-ECBB-DCAA-C (2026-10-15). Lo que se eligió en el laboratorio (?lab), hecho
+   forma de la sala: adjuntos en tarjeta, avatar que late al pensar, el agente en una píldora, la
+   respuesta en burbuja, el plan como lista de tareas, la hora sola al pie, elecciones en lista con
+   número, el permiso en una línea, el concedido como divisoria, comandos en pasos, cada /run en
+   píldora (data-term="pill", app.js) y aire entre turnos. Cada regla se aparta cuando el
+   laboratorio compara otra forma de su elemento (data-labNN en <html>). Sin backdrop-filter en el
+   hilo, como dicen los planos: sobre un fondo de pantalla, cada pieza lleva su propio material.
+   ========================================================================================== */
+
+/* 02 · Adjuntos: una tarjeta por archivo, con su tipo, su nombre y su tamaño. */
+:root:not([data-lab02]) #messages#messages .bubble .files { gap: 8px; margin-top: 10px; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile:not(.image) {
+  display: inline-grid; grid-template-columns: 34px minmax(0, auto); align-items: center; column-gap: 10px;
+  max-width: min(100%, 280px); padding: 7px 14px 7px 7px; border: 0; border-radius: 12px;
+  background: var(--plane-solid); color: var(--text); text-align: left;
+  box-shadow: 0 0 0 .5px rgb(var(--plane-ink) / .14), 0 1px 2px rgb(var(--plane-ink) / .1);
+  transition: transform calc(160ms * var(--motion-scale)) ease, box-shadow calc(160ms * var(--motion-scale)) ease;
+}
+:root:not([data-lab02]) #messages#messages .bubble .file-tile:not(.image):hover { transform: translateY(-1px); box-shadow: 0 0 0 .5px rgb(var(--plane-ink) / .18), 0 4px 10px -4px rgb(var(--plane-ink) / .28); }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 70%, transparent); outline-offset: 2px; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile .kind { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--phosphor) 12%, transparent); color: var(--phosphor); font: 600 9.5px var(--mono); letter-spacing: .06em; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile .file-text { display: grid; gap: 1px; min-width: 0; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--read); letter-spacing: 0; }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile .meta { font: 400 11.5px/1.3 var(--read); font-variant-numeric: tabular-nums; color: var(--text-3); }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile.image { overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 .5px rgb(var(--plane-ink) / .14); }
+:root:not([data-lab02]) #messages#messages .bubble .file-tile.image img { border-radius: 0; }
+
+/* 03 · Pensando: sin globo. El avatar respira y deja un anillo en su color; al lado, lo que hace y
+   cuánto lleva. Sobre un fondo de pantalla, la línea va en el material de las etiquetas. */
+:root:not([data-lab03]) #messages#messages .row.thinking .bubble { gap: 0; padding: 4px 6px 4px 2px; border-radius: 999px; background: transparent !important; box-shadow: none !important; }
+:root:not([data-lab03]) #messages#messages .row.thinking .bubble > i { display: none; }
+:root:not([data-lab03]) #messages#messages .row.thinking .status { margin-left: 0; font-size: 14px; font-style: normal; color: var(--text-2); }
+:root:not([data-lab03]) #messages#messages .row.thinking .status::after { display: none; }
+:root:not([data-lab03]) #messages#messages .row.thinking :is(.elapsed, .tokens) { margin-left: 10px; font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
+:root:not([data-lab03]) #messages#messages .row.thinking .stop-turn { margin-left: 6px; }
+:root:not([data-lab03]) #messages#messages .row.thinking > .avatar { position: relative; animation: think-breathe calc(2.4s * var(--motion-scale) / .7) ease-in-out infinite; }
+:root:not([data-lab03]) #messages#messages .row.thinking > .avatar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: think-ring calc(2.4s * var(--motion-scale) / .7) ease-out infinite; }
+:root:not([data-lab03])[data-wallpaper]:not([data-wallpaper="default"]) #messages#messages .row.thinking .bubble { padding: 4px 8px 4px 14px; background: var(--plane-meta) !important; }
+@keyframes think-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
+@keyframes think-ring {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent, var(--phosphor)) 50%, transparent); }
+  70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--agent, var(--phosphor)) 0%, transparent); }
+}
+
+/* 04 · Cabecera: el nombre del agente en su píldora, en letra de lectura; modelo y esfuerzo detrás,
+   en píldoras neutras (AJUSTES EN LA SALA REAL, al final); el modo conserva su color. */
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who { align-items: center; gap: 8px; padding: 3px 10px 3px 3px; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who > span:first-child { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--agent) 15%, transparent); color: color-mix(in srgb, var(--agent) 82%, var(--text)); font: 600 12.5px/1.4 var(--read); letter-spacing: 0; text-transform: none; }
+
+/* 05 · Cuerpo: la burbuja, con la esquina corta hacia el avatar, que va abajo. */
+:root:not([data-reply]) #messages#messages .row.assistant:not(.delegated) .bubble { border-radius: 20px 20px 20px 6px; padding: 13px 17px 10px; }
+
+/* 07 · Plan: una lista de tareas; cada casilla en el color de quien la hará. */
+:root:not([data-lab07]) #messages#messages .plan-card { margin: 10px 0 8px; padding: 10px 14px 8px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); }
+:root:not([data-lab07]) #messages#messages .plan-card .plan-label { display: block; margin-bottom: 4px; }
+:root:not([data-lab07]) #messages#messages .plan-card ol { margin: 0; padding: 0; list-style: none; }
+:root:not([data-lab07]) #messages#messages .plan-card li { position: relative; margin: 0; padding: 6px 0 6px 28px; font-size: 14px; line-height: 1.45; }
+:root:not([data-lab07]) #messages#messages .plan-card li::before { content: ''; position: absolute; left: 0; top: calc(6px + (1.45em - 17px) / 2); width: 17px; height: 17px; box-sizing: border-box; border-radius: 5px; background: color-mix(in srgb, var(--agent) 8%, var(--plane-solid)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--agent) 55%, var(--line-2)); }
+:root:not([data-lab07]) #messages#messages .plan-card li + li { border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
+
+/* 09 · Pie: la hora sola; lo que costó aparece al pasar o al enfocar la respuesta. */
+:root:not([data-lab09]) #messages#messages .row.assistant .bubble-foot .stamp > span:not(:first-child) { opacity: 0; transition: opacity calc(180ms * var(--motion-scale)) ease; }
+:root:not([data-lab09]) #messages#messages .row.assistant:is(:hover, :focus-within) .bubble-foot .stamp > span { opacity: 1; }
+:root:not([data-lab09]) #messages#messages .row.assistant .bubble-foot .stamp > span:first-child { font-variant-numeric: tabular-nums; }
+@media (hover: none) { :root:not([data-lab09]) #messages#messages .row.assistant .bubble-foot .stamp > span { opacity: 1; } }
+
+/* 10 · Elección: una lista con número, como las de los chats; cada fila es una frase que se presiona. */
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-list { gap: 0; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-radius: 0; background: transparent; font-size: 14.5px; line-height: 1.45; }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option + .choice-option { box-shadow: inset 0 1px 0 var(--line); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option:hover { background: color-mix(in srgb, var(--agent, var(--text)) 6%, transparent); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option:focus-visible { outline-offset: -2px; }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-key { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); font: 600 11.5px var(--mono); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option.recommended { background: color-mix(in srgb, var(--agent, var(--phosphor)) 5%, transparent); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option.recommended .choice-key,
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option.picked .choice-key { background: var(--agent, var(--phosphor)); color: var(--agent-on, var(--bg)); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-option.picked { background: color-mix(in srgb, var(--agent, var(--phosphor)) 10%, transparent); }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-tag { padding: 3px 9px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--agent, var(--phosphor)) 13%, transparent); color: color-mix(in srgb, var(--agent, var(--phosphor)) 85%, var(--text)); font: 500 11.5px var(--read); letter-spacing: 0; text-transform: lowercase; }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-tag::first-letter { text-transform: uppercase; }
+:root:not([data-lab10]) #messages#messages .choice:not(.run-request) .choice-foot { margin-top: 12px; font: 400 12px/1.5 var(--read); letter-spacing: 0; text-transform: none; color: var(--text-3); }
+
+/* 11 · Permiso: en una línea, como Claude Code: qué pide y por cuánto, los botones a la derecha, y
+   debajo, en letra secundaria, cómo se confirma. */
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 2px; padding: 10px 12px 10px 14px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--warn, #e2a022) 7%, var(--plane-solid)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn, #e2a022) 38%, transparent), 0 1px 2px rgb(var(--plane-ink) / .08) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-what { flex: 1 1 260px; font: 400 14px/1.45 var(--read); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-what .who { padding: 0; border-radius: 0; background: none !important; font-weight: 600; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-time { font: 400 13px var(--read); letter-spacing: 0; color: var(--text-2); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-why { order: 9; flex: 1 1 100%; font: 400 12.5px/1.45 var(--read); color: var(--text-3); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-windows { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-window { flex: none; font: 500 12px var(--read); letter-spacing: 0; padding: 4px 9px; white-space: nowrap; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-actions { margin: 0; gap: 6px; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) :is(.mode-go, .mode-alt) { height: 30px; padding: 0 13px; border-radius: 9px; font: 500 12.5px var(--read); letter-spacing: 0; text-transform: lowercase; white-space: nowrap; transition: background calc(150ms * var(--motion-scale)), color calc(150ms * var(--motion-scale)); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) :is(.mode-go, .mode-alt)::first-letter { text-transform: uppercase; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-go { font-weight: 600; box-shadow: none; }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-alt { border: 0; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
+:root:not([data-lab11]) #messages#messages .mode-ask:not(.settled) .mode-alt:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
+
+/* 12 · Concedido: una divisoria a lo ancho de la respuesta, con el permiso al centro en su color. */
+:root:not([data-lab12]) #messages#messages .mode-ask.settled { display: flex !important; align-items: center; gap: 12px; justify-self: stretch; align-self: stretch; width: auto !important; margin: 12px 0 2px !important; padding: 0; background: none !important; box-shadow: none !important; }
+:root:not([data-lab12]) #messages#messages .mode-ask.settled::before,
+:root:not([data-lab12]) #messages#messages .mode-ask.settled::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--mode-c, var(--ok, var(--phosphor))) 40%, var(--line-2)); animation: settle-line calc(420ms * var(--motion-scale) / .7) cubic-bezier(.2, .7, .2, 1) both; }
+:root:not([data-lab12]) #messages#messages .mode-ask.settled::before { transform-origin: right; }
+:root:not([data-lab12]) #messages#messages .mode-ask.settled::after { transform-origin: left; }
+:root:not([data-lab12]) #messages#messages .mode-ask.settled .mode-what { flex: none; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--mode-c, var(--ok, var(--phosphor))) 14%, var(--plane-solid)); color: color-mix(in srgb, var(--mode-c, var(--ok, var(--phosphor))) 80%, var(--text)); }
+@keyframes settle-line { from { transform: scaleX(0); opacity: 0; } }
+
+/* 13 · Petición de comandos: pasos numerados; el paso que corrió dice ✓ y el que falló ✕. */
+:root:not([data-lab13]) #messages#messages .choice.run-request .choice-list { counter-reset: run-step; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line { counter-increment: run-step; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line .choice-key { font-size: 0 !important; border-radius: 50%; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line .choice-key::after { content: counter(run-step); font: 600 11.5px var(--mono); color: var(--text-2); }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.ran .choice-key { background: color-mix(in srgb, var(--ok, var(--phosphor)) 16%, transparent) !important; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.ran .choice-key::after { content: '✓'; color: var(--ok, var(--phosphor)); font-family: var(--read); }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.failed .choice-key { background: color-mix(in srgb, var(--crit) 15%, transparent) !important; }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.failed .choice-key::after { content: '✕'; color: var(--crit); font-family: var(--read); }
+:root:not([data-lab13]) #messages#messages .choice.run-request .run-line.refused .choice-key::after { color: var(--text-3); }
+:root:not([data-lab13]) #messages#messages .choice.run-request :is(.run-all, .run-back) { text-transform: lowercase; }
+:root:not([data-lab13]) #messages#messages .choice.run-request :is(.run-all, .run-back)::first-letter { text-transform: uppercase; }
+
+/* 17 · Aire entre turnos, como en los chats de hoy; lo que es del mismo turno queda junto. */
+:root:not([data-lab17]) #messages#messages .thread-inner > * + * { margin-top: 28px; }
+:root:not([data-lab17]) #messages#messages .thread-inner > :is(.command-card, .sys-dots) + :is(.command-card, .sys-dots),
+:root:not([data-lab17]) #messages#messages .thread-inner > .row.assistant + :is(.choice, .command-card) { margin-top: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  #messages#messages .row.thinking > .avatar, #messages#messages .row.thinking > .avatar::after, #messages#messages .mode-ask.settled::before, #messages#messages .mode-ask.settled::after { animation: none !important; }
+  #messages#messages .row.thinking > .avatar::after { box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent, var(--phosphor)) 30%, transparent); }
+  #messages#messages .bubble .file-tile:hover { transform: none; }
+}
+
+/* ==========================================================================================
+   AJUSTES EN LA SALA REAL (2026-10-15, tras ACCC-BABA-ECBB-DCAA-C)
+   ========================================================================================== */
+
+/* El conjunto de un agente en un solo carril: la cabecera, la burbuja, lo que pide (elección,
+   comandos) y sus /run empiezan donde empieza la burbuja, a la derecha del avatar. */
+:root:not([data-reply]) #messages#messages .row.assistant { column-gap: 14px; }
+:root:not([data-reply]) #messages#messages .row.assistant .col > .who { margin-left: 0; }
+:root:not([data-reply]) #messages#messages .thread-inner > :is(.choice, .command-card) { --agent-lane: 42px; margin-left: var(--agent-lane) !important; margin-right: 0; max-width: min(760px, calc(100% - var(--agent-lane))); }
+:root:not([data-reply])[data-term="pill"] #messages#messages .thread-inner > .command-card.terminal.open { width: auto; }
+
+/* La cabecera: un plano con píldoras dentro, que se leen como una pieza. El plano deja 3 px
+   alrededor de todo (radio 14 = 11 de la píldora + 3), las píldoras van a 4 px entre sí, todas de
+   22 px, letra de lectura de 12 px y el mismo material: sólido, con un filo de medio píxel; el
+   color solo tiñe. El texto suelto (la pregunta citada, lo cobrado) lleva el mismo aire que una
+   píldora. En angosto se acomoda en renglones en vez de desbordarse. */
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who { flex-wrap: wrap; align-items: center; gap: 4px; row-gap: 4px; max-width: 100%; padding: 3px; box-sizing: border-box; border-radius: 14px; box-shadow: inset 0 0 0 .5px rgb(var(--plane-ink) / .1) !important; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who > span:first-child,
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who :is(.badge, .to-agent) {
+  --chip: var(--text); --chip-mix: 5%;
+  display: inline-block; flex: none; height: 22px; max-width: 100%; padding: 0 10px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  border: 0; border-radius: 11px; background: color-mix(in srgb, var(--chip) var(--chip-mix), var(--plane-solid)) !important;
+  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--chip) 18%, transparent);
+  color: color-mix(in srgb, var(--chip) 80%, var(--text)); font: 500 12px/22px var(--read); letter-spacing: 0; text-transform: none;
+}
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who :is(.badge, .to-agent) { --chip: var(--text-2); }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who > span:first-child { --chip: var(--agent); --chip-mix: 15%; font-weight: 600; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .to-agent { --chip: var(--agent); --chip-mix: 13%; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.ash { --chip: var(--phosphor); --chip-mix: 13%; text-transform: lowercase; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge:not(.model, .mode)::first-letter,
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.model.effort::first-letter { text-transform: uppercase; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.mode { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who :is(.reply, .spent) { padding: 0 7px; line-height: 22px; letter-spacing: 0; text-transform: none; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .reply { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .spent { flex: none; padding-left: 4px; font: 400 11px/22px var(--mono); font-variant-numeric: tabular-nums; color: var(--text-3); }
+
+/* Modo · modelo · esfuerzo en claro: el mismo vidrio blanco que ya tiene en oscuro. */
+:root[data-scheme="light"] .composer > .pick-options .pick-label {
+  background: rgb(255 255 255 / .6);
+  box-shadow: 0 0 0 .5px rgb(20 30 20 / .1), inset 0 1px 0 #ffffff, 0 6px 18px rgb(20 30 20 / .1);
+  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
+}
+
+/* Cambiar de proyecto: al pasar, el cuadro de atrás se despega un poco; al presionar, o con la
+   ventana abierta, se ilumina el de enfrente. */
+.switch-button svg > path { transition: transform calc(220ms * var(--motion-scale) / .7) cubic-bezier(.2, .8, .2, 1); }
+.switch-button:is(:hover, :focus-visible) svg > path { transform: translate(1.3px, -1.3px); }
+.switch-button svg > .ic-f { transition: fill calc(160ms * var(--motion-scale)) ease, filter calc(160ms * var(--motion-scale)) ease; }
+.switch-button:active svg > .ic-f, body:has(dialog.room-switch[open]) .switch-button svg > .ic-f { fill: currentColor; fill-opacity: .9; filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 45%, transparent)); }
+@media (prefers-reduced-motion: reduce) { .switch-button svg > path { transition: none; } .switch-button:is(:hover, :focus-visible) svg > path { transform: none; } }
+
+/* El foco de un aviso de primera vez (spotlight, tour.js): lo que el aviso nombra se ve claro, con
+   un aro suave del acento, y el resto de la página baja un poco. Sin pico en la tarjeta. */
+.hint-spot {
+  position: fixed; z-index: 2147482999; pointer-events: none; box-sizing: border-box;
+  box-shadow: 0 0 0 200vmax rgb(14 20 16 / .16), 0 0 0 2px color-mix(in srgb, var(--accent, var(--phosphor)) 55%, transparent), 0 0 24px 2px color-mix(in srgb, var(--accent, var(--phosphor)) 32%, transparent);
+  background: rgb(255 255 255 / .06);
+  animation: hint-spot-in calc(360ms * var(--motion-scale, .7) / .7) cubic-bezier(.2, .8, .2, 1) both;
+  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
+}
+.hint-spot[hidden] { display: none; }
+:root:not([data-scheme="light"]) .hint-spot { box-shadow: 0 0 0 200vmax rgb(0 0 0 / .3), 0 0 0 2px color-mix(in srgb, var(--accent, var(--phosphor)) 60%, transparent), 0 0 26px 3px color-mix(in srgb, var(--accent, var(--phosphor)) 30%, transparent); }
+@keyframes hint-spot-in { from { opacity: 0; transform: scale(1.06); } }
+@media (prefers-reduced-motion: reduce) { .hint-spot { animation: none; transition: none; } }
+
+/* La fila de avisos dice con una flecha que se despliega: hacia abajo junto a «+N» cerrada, hacia
+   arriba en «Plegar» abierta. La flecha es la misma, girada, y va centrada con el texto. */
+#messages .sys-dots { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10 8 6l4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
+#messages .sys-dots > .sys-more::after {
+  content: ''; display: inline-block; flex: none; width: 10px; height: 10px; background: currentColor;
+  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
+  transition: transform calc(180ms * var(--motion-scale)) ease;
+}
+#messages#messages .sys-dots:not(.open) > .sys-more:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
+#messages#messages .sys-dots:not(.open) > .sys-more::after { transform: rotate(180deg); opacity: .8; }
+#messages#messages .sys-dots:not(.open):hover > .sys-more::after { transform: rotate(180deg) translateY(-1px); opacity: 1; }
+/* «Plegar»: una tecla de 26 px, la palabra y su flecha en la misma línea media. */
+#messages#messages .sys-dots.open > .sys-more {
+  display: inline-block; height: 26px; margin-top: 4px; padding: 0 11px 0 13px; box-sizing: border-box; border-radius: 999px;
+  font: 500 12.5px/26px var(--read); letter-spacing: 0; text-transform: lowercase; white-space: nowrap; color: var(--text-2);
+  transition: background calc(150ms * var(--motion-scale)) ease, color calc(150ms * var(--motion-scale)) ease;
+}
+#messages#messages .sys-dots.open > .sys-more::first-letter { text-transform: uppercase; }
+#messages#messages .sys-dots.open > .sys-more::after { width: 11px; height: 11px; margin-left: 6px; vertical-align: middle; position: relative; top: -1px; }
+#messages#messages .sys-dots.open > .sys-more:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
+#messages#messages .sys-dots.open > .sys-more:hover::after { transform: translateY(-1px); }
+@media (prefers-reduced-motion: reduce) { #messages .sys-dots > .sys-more::after { transition: none; } }
+
+/* Los avisos abiertos como una lista que se lee (2026-10-15): cada uno con su punto, la etiqueta
+   pequeña arriba y lo que dice debajo en letra de lectura; una línea fina entre uno y otro; la
+   memoria, las barras de límite y los comandos alineados a la izquierda como lo demás; lo repetido
+   seguido, una sola vez con «×N» (groupRepeats, app.js). */
+#messages#messages .sys-dots.open { gap: 0; width: min(92%, 600px); padding: 6px 6px 8px; border-radius: 18px; }
+#messages#messages .sys-dots.open > .system.folded {
+  display: block; padding: 11px 14px 12px 34px !important; border-radius: 12px !important;
+  font: 400 13.5px/1.5 var(--read) !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important;
+  color: var(--text-2) !important;
+}
+#messages#messages .sys-dots.open > .system.folded + .system.folded:not(.repeat)::after { content: ''; position: absolute; left: 34px; right: 14px; top: 0; height: 1px; background: color-mix(in srgb, var(--text) 7%, transparent); }
+#messages#messages .sys-dots.open > .system.folded:hover::after, #messages#messages .sys-dots.open > .system.folded:hover + .system.folded::after { opacity: 0; }
+#messages#messages .sys-dots.open > .system.folded::before { left: 14px; top: 16px; width: 8px; height: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 18%, transparent); }
+#messages#messages .sys-dots.open > .system.folded.repeat { display: none !important; }
+/* La etiqueta: su propia línea, pequeña, en el tono del aviso. */
+#messages#messages .sys-dots.open > .system.folded > b:first-child {
+  display: block; width: fit-content; margin: 0 0 3px; font: 600 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--dot) 70%, var(--text-2));
+}
+#messages#messages .sys-dots.open > .system.folded:is([data-tone="info"], :not([data-tone])) > b:first-child { color: var(--text-3); }
+#messages#messages .sys-dots.open > .system.folded[data-times] > b:first-child::after { content: var(--times); margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); font-weight: 600; letter-spacing: .04em; }
+#messages#messages .sys-dots.open > .system.folded > b:not(:first-child) { font-weight: 600; color: var(--text); }
+/* La barra de un límite: bajo el texto, a la izquierda, fina. */
+#messages#messages .sys-dots.open > .system.folded .gauge { display: block; width: min(100%, 280px); height: 4px; margin: 9px 0 1px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
+#messages#messages .sys-dots.open > .system.folded .gauge .now { display: block; height: 100%; border-radius: inherit; background: var(--dot); }
+/* El comando de un módulo: un trozo de código, no una caja con borde. */
+#messages#messages .sys-dots.open > .system.folded .cmd { display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 7px 0 0; padding: 3px 9px; border: 0 !important; box-shadow: none !important; outline: 0; border-radius: 7px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); font: 400 12px/1.5 var(--mono); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
+/* La memoria: como los demás, a la izquierda; quién, en su píldora; la cuenta en voz baja. */
+#messages#messages .sys-dots.open > .system.folded.claim { display: block; width: auto; }
+#messages#messages .sys-dots.open > .system.folded.claim > .claim-head { font-size: 10px; }
+#messages#messages .sys-dots.open > .system.folded.claim > .claim-head .who { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--agent, var(--text)) 14%, transparent); color: color-mix(in srgb, var(--agent, var(--text)) 80%, var(--text)); letter-spacing: .06em; }
+#messages#messages .sys-dots.open > .system.folded.claim .claim-body { display: block; font-size: 13.5px; color: var(--text-2); }
+#messages#messages .sys-dots.open > .system.folded.claim .claim-note { display: block; margin-top: 2px; font: 400 12px/1.5 var(--read); letter-spacing: 0; text-transform: none; color: var(--text-3); }
+#messages#messages .sys-dots.open > .system.folded.claim .claim-acts { justify-content: flex-start; }
+#messages#messages .sys-dots.open > .sys-more { justify-self: center; margin-top: 8px; }
+#messages#messages .sys-dots.open > .system.folded.claim > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; text-align: left !important; justify-self: start !important; }
+/* La cabecera en una sola línea (2026-10-15): lo primero que cede es la pregunta citada (se corta
+   con «…»), luego modelo, esfuerzo y las demás insignias; el nombre y lo cobrado no se cortan. */
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who { flex-wrap: nowrap; border-radius: 14px; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who > span:first-child,
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .spent { flex: none; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who :is(.badge, .to-agent) { flex: none; }
+/* Solo lo que es una frase (de dónde viene una orden, «orden 1 de 1 · …») puede cortarse. */
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge:not(.model, .mode, .ash) { flex: 0 1 auto; min-width: 60px; }
+/* Con el chat angosto se callan primero los que se pueden leer en otro lado: el esfuerzo (lo dice
+   el sello de tu mensaje) y, más angosto, el ahorro de tokens (lo dice la caja de escribir). */
+#messages .thread-inner { container: thread / inline-size; }
+@container thread (max-width: 540px) { :root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.effort { display: none; } }
+@container thread (max-width: 430px) { :root:not([data-lab04]) #messages#messages .row.assistant .col > .who .badge.ash { display: none; } }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .reply { flex: 1 1 0; min-width: 0; max-width: max-content; }
+:root:not([data-lab04]) #messages#messages .row.assistant .col > .who .reply:empty { display: none; }
+/* El punto de un aviso solo (2026-10-15): más chico y casi transparente, para no ensuciar el
+   lienzo; vuelve a verse entero al pasar o al enfocarlo. La fila con «+N» se atenúa menos. */
+#messages#messages .sys-dots.single { padding: 3px; margin-block: 2px; border-color: transparent; background: color-mix(in srgb, var(--bg) 30%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; opacity: .5; transition: opacity calc(180ms * var(--motion-scale)) ease, background calc(180ms * var(--motion-scale)) ease; }
+#messages#messages .sys-dots.single > .system.folded { width: 6px !important; height: 6px !important; box-shadow: none !important; }
+#messages#messages .sys-dots:not(.open):not(.single) { opacity: .8; transition: opacity calc(180ms * var(--motion-scale)) ease; }
+#messages#messages .sys-dots:not(.open):is(:hover, :focus-visible) { opacity: 1; background: color-mix(in srgb, var(--bg) 78%, transparent); }
+/* El contexto compartido no lleva etiqueta: empieza con palabras y sus @agentes van en la frase. */
+#messages#messages .sys-dots.open > .system.folded.handoff > b:first-child { display: inline; margin: 0; font: 600 13.5px/1.5 var(--read); letter-spacing: 0; text-transform: none; color: var(--text); }
+
+/* Lo que queda detrás de la caja de escribir (2026-10-15): la conversación se desvanece en los últimos
+   ~10 px antes del borde de la caja de escribir (--type-gap; más largo se veía como un resplandor) (--dock-h la mide app.js, measureDock) en vez de asomarse bajo modo · modelo y detrás
+   de la versión. El final de la conversación sigue subiendo por encima: el hilo ya deja ese aire. */
+:root:not(.via-phone) #messages.thread {
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--type-gap, var(--dock-h, 0px)) - 10px), transparent calc(100% - var(--type-gap, var(--dock-h, 0px)) + 2px));
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--type-gap, var(--dock-h, 0px)) - 10px), transparent calc(100% - var(--type-gap, var(--dock-h, 0px)) + 2px));
+}
+/* La barra del proyecto junto a dos paneles (2026-10-15): angosta en una pantalla ancha. Por
+   debajo de 760 px «Primeros pasos» queda en su anillo y su cuenta (la frase sigue en su nombre y
+   su título) y las teclas se juntan, para que todo quepa sin pisar Inicio · Proyectos · Ajustes y
+   el nombre del proyecto no sea lo primero en irse. */
+@container roombar (max-width: 760px) {
+  .shell > .bar:not(.bar-home) { gap: 10px; }
+  #steps-pill .steps-label { display: none; }
+  #steps-pill { gap: 6px; padding-inline: 9px 11px; }
+  /* El nombre del proyecto se queda; el título de la conversación es el que se corta con «…». */
+  .shell > .bar:not(.bar-home) .project:not(.chat-here) { font-size: 11px; }
+  .shell > .bar:not(.bar-home) .project:not(.chat-here)::after { content: none; }
+}
+/* Cerrada, la salida de un /run no da su ancho a la píldora (2026-10-15): sus líneas largas (un
+   `cloc`, una tabla) la estiraban de lado a lado aunque no se vieran. Ocupa el ancho de la píldora
+   sin pedirlo; abierta, vuelve a medir lo suyo. */
+:root[data-term="pill"] #messages#messages .command-card.terminal:not(.open) .term-out { width: 0; min-width: 100%; }
+/* La esquina de quién hizo MADRE (public/attribution.js): un enlace a su autor, con aire bajo
+   modo · modelo · esfuerzo para no pegarse a su vidrio cuando el centro es angosto. */
+.shell > .colophon { margin-top: 8px; }
+.colophon-link { color: inherit; text-decoration: none; border-radius: inherit; }
+.colophon-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
+.colophon-link:focus-visible { outline: 2px solid var(--accent, var(--phosphor)); outline-offset: 3px; }
+/* Lo que está fuera de la pantalla no se dibuja (2026-10-15): cada pieza de la conversación lleva
+   content-visibility:auto, así que el navegador no la mide ni la pinta hasta que se acerca, y
+   recuerda su alto una vez vista (contain-intrinsic-size: auto). Buscar con ⌘F, seleccionar y
+   saltar a una cita siguen funcionando. El margen de recorte deja ver las sombras y los anillos
+   que salen un poco de su caja. */
+#messages .thread-inner > :is(.row, .choice, .command-card, .system, .sys-dots) {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 140px;
+  overflow-clip-margin: 28px;
+}
+/* ---------- Correcciones de UX de 1.0.2 (2026-10-16) ----------
+   1 · Un /run con punto de restauración se viste como los demás avisos del lienzo: esquinas de
+   14 px y su DESHACER debajo, a la izquierda. Era una cápsula de 999 px que se inflaba en círculo
+   al meter el botón en un segundo renglón. */
+:root[data-term="pill"] #messages#messages .command-card.terminal.has-undo:not(.open) { border-radius: 14px; }
+#messages#messages .command-card.terminal.has-undo > :is(.undo, .outcome) { display: block; margin: 0 12px 10px 10px; }
+#messages#messages .command-card.terminal.has-undo.open > :is(.undo, .outcome) { margin-top: 10px; }
+/* 3 · La píldora cerrada respeta el carril del agente: su máximo era el 100 % de la columna y,
+   corrida 42 px a la derecha, la columna (overflow-x: hidden) le cortaba el final. */
+:root[data-term="pill"] #messages#messages .command-card.terminal:not(.open) { max-width: min(760px, calc(100% - var(--agent-lane, 0px))); }
+/* 4 · El aviso del botón de conversaciones va montado en su esquina, por fuera del squircle, con
+   un anillo del color del fondo que lo separa del vidrio. */
+.chats-button.working::after, .chats-button.unread::after { top: -3px; right: -3px; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--bg), 0 0 8px color-mix(in srgb, var(--phosphor) 55%, transparent); }
+/* 8 · Una línea larga se lee entera antes de presionarla, sin volver la tarjeta una pared: pasada
+   cierta altura, la línea se recorre dentro de su botón. */
+#messages .run-request .run-line .choice-text { max-height: 15.5em; overflow-y: auto; overscroll-behavior: contain; }
+/* 2 · Pensando: el anillo que respira alrededor del avatar sale unos píxeles de su caja y la
+   columna lo cortaba en seco por la izquierda (overflow-x: hidden pegado al avatar) y la fila, por
+   su contención de pintado (content-visibility). La columna recorta con margen y la fila viva no se
+   contiene: siempre está en pantalla. */
+/* Chrome keeps overflow-clip-margin only when both axes clip; with overflow-x alone the ring was
+   still cut flush with the avatar (2026-10-17). Clipping the height too costs nothing: the column
+   pads 36px above and the dock's height below, and nothing in it hangs past that. */
+#messages .thread-inner { overflow: clip; overflow-clip-margin: 24px; }
+#messages .thread-inner > .row.thinking { content-visibility: visible; }
+/* 9 · Desplazarse es del humano. El hilo ya no anima cada asignación de su posición: con el scroll
+   suave, el «volver al final» instantáneo y el animado peleaban en el mismo cuadro y la vista
+   temblaba. Los desplazamientos que sí deben deslizarse lo piden ellos mismos. */
+#messages.thread { scroll-behavior: auto; }
+/* Nada dentro del hilo muestrea lo que hay detrás (la regla de arriba sobre backdrop-filter): la
+   fila de avisos plegados se había quedado fuera y, al desplazarse rápido, dejaba su vidrio atrás
+   como una ventana fantasma. Lleva una tinta plana un poco más espesa en su lugar. */
+#messages .sys-dots { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 80%, transparent); }
+#messages .sys-dots:hover, #messages .sys-dots:focus-visible { background: color-mix(in srgb, var(--bg) 90%, transparent); }
+/* 10 · Abajo terminó algo: un botón redondo y ligero sobre la caja, con un punto del color de quien
+   contestó. Lleva al final y se va solo al llegar. */
+.to-end {
+  position: fixed; z-index: 39; left: var(--composer-center, 50%); bottom: calc(100vh - var(--composer-top, 70vh) + 14px); translate: -50% 0;
+  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
+  color: var(--text); background: color-mix(in srgb, var(--surface, var(--panel)) 86%, transparent);
+  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
+  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 16%, transparent), 0 2px 4px rgba(0, 0, 0, .18), 0 10px 24px -8px rgba(0, 0, 0, .42);
+  transition: bottom calc(220ms * var(--motion-scale)) var(--ease-out, ease), color calc(160ms * var(--motion-scale)) ease;
+  animation: to-end-in calc(260ms * var(--motion-scale)) var(--ease-out, ease) both;
+}
+.to-end[hidden] { display: none; }
+.to-end svg { width: var(--ico-md); height: var(--ico-md); }
+.to-end:hover { color: var(--phosphor); }
+.to-end:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 60%, transparent); outline-offset: 2px; }
+.to-end .to-end-dot { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--agent, var(--phosphor)); box-shadow: 0 0 0 2px var(--bg); }
+.to-end.leaving { animation: to-end-out calc(200ms * var(--motion-scale)) ease both; }
+:root[data-scheme="light"] .to-end { background: color-mix(in srgb, #ffffff 88%, transparent); box-shadow: 0 0 0 .5px rgba(20, 30, 20, .12), 0 2px 4px rgba(20, 30, 20, .08), 0 10px 24px -8px rgba(20, 30, 20, .22); }
+:root.toasting .to-end { bottom: calc(100vh - var(--composer-top, 70vh) + 32px + var(--toast-h, 38px)); }
+@keyframes to-end-in { from { opacity: 0; transform: translateY(8px) scale(.85); } }
+@keyframes to-end-out { to { opacity: 0; transform: translateY(6px) scale(.9); } }
+/* 7 · Un aviso del sistema nace como el punto de su color y se abre en su píldora; al irse vuelve
+   a cerrarse en el punto. La forma no cambia, solo cómo llega y cómo se va. Lleva una sombra más,
+   amplia y muy suave, que lo despega del lienzo; y mientras está, la conversación que estaba en su
+   final sube lo que mide para que el aviso no tape la última línea. */
+.toast { --toast-tone: var(--text-3); }
+.toast[data-tone="done"] { --toast-tone: #34c759; }
+.toast[data-tone="look"] { --toast-tone: #e0a23c; }
+.toast[data-tone="wrong"] { --toast-tone: var(--danger); }
+.toast:not([hidden]) { animation: toast-bloom calc(480ms * var(--motion-scale)) cubic-bezier(.3, .7, .2, 1) both; }
+.toast:not([hidden])::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--toast-tone); pointer-events: none; animation: toast-bloom-tint calc(480ms * var(--motion-scale)) ease-out both; }
+.toast:not([hidden]) > * { animation: toast-words calc(240ms * var(--motion-scale)) ease calc(230ms * var(--motion-scale)) both; }
+.toast.leaving:not([hidden]) { animation: toast-fold calc(300ms * var(--motion-scale)) cubic-bezier(.5, 0, .6, 1) both; }
+.toast.leaving:not([hidden])::before { animation: toast-fold-tint calc(300ms * var(--motion-scale)) ease-in both; }
+.toast.leaving:not([hidden]) > * { animation: toast-words-out calc(120ms * var(--motion-scale)) ease both; }
+@keyframes toast-bloom {
+  from { clip-path: inset(calc(50% - 5px) calc(50% - 5px) round 999px); transform: translateX(-50%) scale(.92); }
+  32% { clip-path: inset(0 calc(50% - var(--toast-h, 38px) / 2) round 999px); }
+  78%, to { clip-path: inset(0 round 20px); transform: translateX(-50%); }
+}
+@keyframes toast-bloom-tint { from, 30% { opacity: 1; } 70%, to { opacity: 0; } }
+@keyframes toast-words { from { opacity: 0; } }
+@keyframes toast-fold {
+  from { clip-path: inset(0 round 20px); transform: translateX(-50%); }
+  55% { clip-path: inset(0 calc(50% - var(--toast-h, 38px) / 2) round 999px); opacity: 1; }
+  85% { clip-path: inset(calc(50% - 5px) calc(50% - 5px) round 999px); opacity: 1; }
+  to { clip-path: inset(calc(50% - 5px) calc(50% - 5px) round 999px); transform: translateX(-50%) scale(.92); opacity: 0; }
+}
+@keyframes toast-fold-tint { from, 25% { opacity: 0; } 60%, to { opacity: 1; } }
+@keyframes toast-words-out { to { opacity: 0; } }
+.toast:not([hidden]) {
+  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 14%, transparent), inset 0 1px 0 rgb(255 255 255 / .06), 0 2px 4px rgba(0, 0, 0, .24), 0 12px 28px -6px rgba(0, 0, 0, .5), 0 28px 60px -18px rgba(0, 0, 0, .45), 0 0 0 10px color-mix(in srgb, var(--bg) 16%, transparent), 0 24px 70px 6px rgba(0, 0, 0, .16);
+}
+:root[data-scheme="light"] .toast:not([hidden]) { box-shadow: 0 0 0 .5px rgba(20, 30, 20, .08), 0 2px 4px rgba(20, 30, 20, .1), 0 12px 28px -6px rgba(20, 30, 20, .22), 0 28px 60px -18px rgba(20, 30, 20, .2), 0 0 0 10px rgb(255 255 255 / .22), 0 24px 70px 6px rgba(20, 30, 20, .08); }
+#messages .thread-inner { transition: padding-bottom calc(280ms * var(--motion-scale)) var(--ease-out, ease); }
+:root.toast-room #messages .thread-inner { padding-bottom: calc(var(--dock-h, 0px) + 28px + var(--toast-h, 38px) + 18px); }
+@media (prefers-reduced-motion: reduce) {
+  .toast:not([hidden]), .toast:not([hidden])::before, .toast:not([hidden]) > *, .toast.leaving:not([hidden]), .toast.leaving:not([hidden])::before { animation-duration: 1ms; }
+  .to-end, .to-end.leaving { animation: none; }
+}
+/* 6 · La caja de escribir no se aplasta: el texto conserva un ancho para escribir y la dirección
+   (HUMANO › COPILOTO › AHORRO DE TOKENS ›) se corta con «…» antes que el destinatario, que siempre
+   se ve. La ficha del ahorro de tokens no se parte en renglones. */
+.field { grid-template-columns: auto minmax(0, max-content) minmax(min(220px, 42%), 1fr) auto auto auto auto; }
+.field > .crew-label { display: flex; min-width: 0; overflow: hidden; }
+.crew-label > .crew-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.crew-label > .crew-to { flex: none; white-space: pre; }
+.ash-toggle { white-space: nowrap; flex: none; }
+@container composer (max-width: 560px) {
+  .field { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto; }
+}
+/* 5 · La receta para entrenar tu IA (Mac y Linux) cabe en su hoja: cada paso es una columna que
+   puede angostarse y cada comando se lee completo, partido en renglones, con Copiar siempre a la
+   vista arriba a la derecha. Antes la línea más larga ensanchaba el paso y la hoja la cortaba. */
+.sx-steps, .sx-steps > li { grid-template-columns: minmax(0, 1fr); min-width: 0; }
+.sx-steps .sx-command { min-width: 0; align-items: flex-start; }
+.sx-steps .sx-command code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; padding: 5px 0; line-height: 1.55; }
+.sx-steps .sx-command > :not(code) { flex: none; }
+/* La caja con muchos renglones se recorre por dentro: la primera línea visible se desvanece bajo
+   su borde en lugar de verse partida a la mitad. */
+.editor.scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px); mask-image: linear-gradient(to bottom, transparent 0, #000 12px); }
+.sx-steps .sx-command code { background: none; border: 0; border-radius: 0; }
+/* Un paso de medición al abrir una conversación (app.js, measureRows): cada fila se dibuja una vez
+   para que el navegador recuerde su alto real y el historial no salte al llegar a lo nunca visto. */
+#messages .thread-inner > .cv-measure { content-visibility: visible; }
+
+/* 1.0.3 · Your computer: every model size, to run and to train, against this machine. */
+.sx-more > .sx-table { overflow-x: auto; }
+.sx-models { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
+.sx-models th { text-align: left; font-weight: 550; color: var(--text-2); padding: 6px 10px 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent); white-space: nowrap; }
+.sx-models td { padding: 7px 10px 7px 0; color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent); white-space: nowrap; }
+.sx-models tr:last-child td { border-bottom: 0; }
+.sx-models td.no { color: var(--text-2); }
+.sx-models tr.pick td:first-child { color: var(--phosphor); font-weight: 600; }
+
+/* 1.0.3 · Turning MADRE off: the key takes the accent under the pointer, like every key of its bar,
+   and what stays on screen once it is off says so plainly (public/power.js). */
+.madre-off { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: var(--bg, #050605); color: var(--text); }
+.madre-off h1 { margin: 6px 0 0; font-size: 22px; font-weight: 600; }
+.madre-off p { margin: 0; max-width: 420px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
+.madre-off .madre-off-stuck { color: var(--danger); }
+.madre-off-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, transparent); }
+.madre-off-mark svg { width: 24px; height: 24px; }
+html.madre-is-off body > :not(.madre-off) { visibility: hidden; }
+
+/* 1.0.3 · Modules and Diagnostics lift less under the pointer: the key's own shadow and a slight
+   one beneath, not the heavier one of the keys that are pressed (2026-10-17). */
+:root { --key-lift: rgba(0, 0, 0, .34); }
+:root[data-scheme="light"] { --key-lift: rgba(22, 30, 22, .16); }
+:root .shell .bar > :is(#modules-button, #mother-button, #code-button):is(:hover, :focus-visible) { box-shadow: var(--key-rest), 0 3px 8px -5px var(--key-lift) !important; }
+/* CODE under the pointer: its brackets take the accent, as every key's drawing does, and a slash
+   draws itself between them. Open, the whole drawing stays in the accent, slash and all. */
+#code-button .code-slash { stroke-dasharray: 10; stroke-dashoffset: 10; opacity: 0; transition: stroke-dashoffset calc(240ms * var(--motion-scale, 1)) var(--ease-out), opacity calc(120ms * var(--motion-scale, 1)) var(--ease-out); }
+#code-button:is(:hover, :focus-visible, [aria-pressed="true"]) .code-slash { stroke-dashoffset: 0; opacity: 1; }
+:root[data-scheme] .shell .bar > #code-button:is(:hover, :focus-visible, [aria-pressed="true"]) svg { color: var(--phosphor); }
+:root[data-scheme="light"] .shell .bar > #code-button:is(:hover, :focus-visible, [aria-pressed="true"]) svg { color: color-mix(in srgb, var(--phosphor) 70%, #000000); }
+@media (prefers-reduced-motion: reduce) { #code-button .code-slash { transition: none; } }
+
+/* 1.0.3 · The code workspace: the viewer docked beside the conversation (public/app.js, «the code
+   workspace»). Over the room nothing of this shows; docked, the files sit at its side, the open files
+   are tabs, a quiet path says where the caret is, an agent's changes wear the agent's colour, and a
+   page or a document can show what it makes beside its text. The room's own pieces throughout. */
+dialog.viewer > .code-shell { flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; }
+dialog.viewer > .code-shell > .viewer-body { flex: 1 1 auto; height: auto; min-height: 0; min-width: 0; }
+.code-files { flex: none; width: 216px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--text) 2%, transparent); }
+.code-files[hidden] { display: none; }
+.code-files-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px 14px; font-family: var(--read); font-size: 12px; font-weight: 600; color: var(--text-2); }
+.code-files-fold { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); cursor: pointer; }
+.code-files-fold:hover { color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); }
+.code-files-fold svg { width: var(--ico-sm); height: var(--ico-sm); }
+.code-files-search { margin: 0 10px 8px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); font: inherit; font-family: var(--read); font-size: 12.5px; outline: none; }
+.code-files-search:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--phosphor) 35%, transparent); }
+.code-files > .code-files-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 6px 12px; }
+.code-files-list { list-style: none; margin: 0; padding: 0; }
+.code-file { width: 100%; display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 8px 3px calc(8px + var(--depth, 0) * 12px); border: 0; border-radius: 7px; background: transparent; color: var(--text); font-family: var(--mono); font-size: 12px; text-align: left; cursor: pointer; }
+.code-file:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
+.code-file.on { background: color-mix(in srgb, var(--phosphor) 13%, transparent); color: var(--phosphor); }
+.code-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.code-file-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 10.5px; direction: rtl; text-align: left; }
+.code-folder { color: var(--text-2); }
+.code-folder-caret { flex: none; display: inline-grid; place-items: center; width: var(--ico-xs); height: var(--ico-xs); color: var(--text-3); }
+.code-folder-caret svg { display: block; width: var(--ico-xs); height: var(--ico-xs); rotate: -90deg; transition: rotate var(--motion-fast) var(--ease-out); }
+.code-folder[aria-expanded="true"] .code-folder-caret svg { rotate: 0deg; }
+@media (prefers-reduced-motion: reduce) { .code-folder-caret svg { transition: none; } }
+.code-file-agent { flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--agent, var(--text-3)); }
+.code-files-empty { padding: 8px 12px; color: var(--text-3); font-family: var(--read); font-size: 12px; }
+
+.code-tabs { flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 6px 10px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--text) 2.5%, transparent); }
+.code-tabs::-webkit-scrollbar { display: none; }
+.code-tabs[hidden] { display: none; }
+.code-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 4px; border-radius: 9px 9px 0 0; color: var(--text-2); }
+.code-tab.on { background: var(--panel); color: var(--text); box-shadow: 0 -1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); }
+.code-tab-name { height: 28px; padding: 0 6px; border: 0; background: transparent; color: inherit; font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
+.code-tab.on .code-tab-name { font-weight: 600; cursor: default; }
+.code-tab-dirty { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); }
+.code-tab-agent { width: 7px; height: 7px; border-radius: 50%; background: var(--agent); }
+.code-tab-close { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); }
+.code-tab:hover .code-tab-close, .code-tab.on .code-tab-close, .code-tab-close:focus-visible { opacity: 1; }
+.code-tab-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
+.code-tab-close svg { width: var(--ico-xs); height: var(--ico-xs); }
+
+.code-crumbs { flex: none; display: flex; align-items: center; gap: 12px; min-height: 30px; padding: 4px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--text-3); }
+.code-crumbs[hidden] { display: none; }
+.code-crumbs-path { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
+.code-crumbs-path i { font-style: normal; opacity: .6; }
+.code-crumbs-path b { color: var(--text-2); font-weight: 600; }
+.code-crumbs-path .code-crumbs-symbol { color: var(--text); }
+.code-crumbs-changes { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--agent); }
+.code-crumbs-changes .code-file-agent { margin: 0; }
+.code-crumbs-step { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--chip-r, 7px); background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-2); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
+.code-crumbs-step:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--text) 11%, transparent); color: var(--text); outline: 0; }
+.code-crumbs-step svg { display: block; width: var(--ico-xs); height: var(--ico-xs); }
+.code-crumbs-step.back svg { rotate: 90deg; }
+.code-crumbs-step.on svg { rotate: -90deg; }
+
+/* An agent's change, in its colour: a band at the line numbers, a light ground on the lines, and a
+   card under them with what was there before and the three answers. */
+.viewer-body pre.code .ln.ag { color: var(--ag); box-shadow: inset 3px 0 0 var(--ag); }
+.viewer-body pre.code .tx.ag { background: color-mix(in srgb, var(--ag) 9%, transparent); }
+/* An agent's change, under its lines: a card of the windows' own material (Settings' cards), who
+   changed them as the agent's tag (no edge in its colour: on a round card it read as an eyebrow), what
+   was there before as lines with their «−» (never crossed out: it has to be read), and three tags of a
+   flat tone, each with its drawing at the size of a drawing beside a word. */
+.code-change { grid-column: 1 / -1; display: grid; gap: 8px; margin: 6px 16px 12px 52px; padding: 10px 12px; border-radius: 12px; background: var(--surface, var(--panel)); box-shadow: var(--bevel, none), var(--float-sm, 0 6px 16px -10px rgba(0, 0, 0, .4)); white-space: normal; font-family: var(--read); }
+.code-change-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
+.code-change-who { padding: 1px 7px; border-radius: var(--chip-r, 7px); background: color-mix(in srgb, var(--agent) 14%, transparent); color: var(--agent); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
+.code-change-was { display: grid; margin: 0; padding: 6px 0; max-height: 12em; overflow: auto; border-radius: 8px; background: color-mix(in srgb, var(--danger) 6%, transparent); color: var(--text-2); font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre; }
+.code-change-was > span { padding: 0 10px 0 26px; position: relative; }
+.code-change-was > span::before { content: '−'; position: absolute; left: 10px; color: color-mix(in srgb, var(--danger) 80%, var(--text-2)); }
+.code-change-acts { display: flex; flex-wrap: wrap; gap: 6px; }
+.code-change-act { --tone: var(--text); display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: var(--chip-r, 7px); background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); font-family: var(--read); font-size: 12.5px; font-weight: 550; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out); }
+.code-change-act:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--tone) 20%, transparent); outline: 0; }
+.code-change-act:disabled { opacity: .5; cursor: default; }
+.code-change-act.keep { --tone: var(--phosphor); }
+.code-change-act.undo { --tone: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
+.code-change-act.undo:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--text) 12%, transparent); }
+.code-change-act.why { --tone: var(--agent); }
+.code-change-ico { display: inline-grid; place-items: center; flex: none; }
+.code-change-ico svg { display: block; width: var(--ico-sm); height: var(--ico-sm); }
+:root[data-scheme="light"] .code-change-act.keep { color: color-mix(in srgb, var(--phosphor) 72%, #000000); }
+.code-editor .ed-gutter-inner > .mk { color: var(--mk); box-shadow: inset 3px 0 0 var(--mk); background: color-mix(in srgb, var(--mk) 10%, transparent); }
+
+/* Side by side: the text and what it makes. */
+.viewer-body.with-beside { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(280px, 46%); padding: 0; overflow: hidden; }
+.viewer-body.with-beside > :first-child { min-height: 0; height: 100%; overflow: auto; }
+.code-beside { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--text) 2%, transparent); }
+.code-beside-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--read); font-size: 12px; color: var(--text-2); }
+.code-beside-head b { color: var(--text); font-weight: 600; }
+.code-beside-live { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--phosphor); }
+.code-beside > iframe.ripley { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; border-radius: 0; box-shadow: none; }
+.code-beside > .viewer-markdown { flex: 1 1 auto; min-height: 0; overflow: auto; width: auto; padding: 14px 18px 24px; font-size: 14.5px; }
+.code-beside-off { display: grid; gap: 12px; justify-items: start; padding: 18px; font-family: var(--read); font-size: 13px; line-height: 1.5; color: var(--text-2); }
+.code-beside-off p { margin: 0; }
+dialog.viewer .viewer-beside[aria-pressed="true"] { color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 14%, transparent); }
+
+/* Nothing open yet. */
+.code-home { width: min(460px, 100%); display: grid; gap: 10px; justify-items: start; margin: 8vh auto 0; font-family: var(--read); }
+.code-home h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); }
+.code-home h4 { margin: 14px 0 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
+.code-home p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
+.code-home-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 2px; }
+.code-home-list .code-file { gap: 8px; }
+.code-home-list .code-file small { margin-left: auto; flex: none; color: var(--text-3); font-size: 10.5px; }
+.code-home-list .code-file .code-file-agent { margin: 0; }
+
+/* ⌘P */
+.quick-open { position: fixed; z-index: 90; inset: 14vh auto auto 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55); overflow: hidden; }
+.quick-open[hidden] { display: none; }
+.quick-open-input { width: 100%; height: 48px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-family: var(--read); font-size: 15px; outline: none; }
+.quick-open-list { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 420px); overflow: auto; }
+.quick-open-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
+.quick-open-item b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
+.quick-open-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-family: var(--mono); font-size: 11px; }
+.quick-open-item .code-file-agent { align-self: center; }
+.quick-open-item.on, .quick-open-item:hover { background: color-mix(in srgb, var(--phosphor) 12%, transparent); }
+.quick-open-empty { padding: 12px; color: var(--text-3); font-family: var(--read); font-size: 13px; }
+
+/* The verbs of the ask card: a row of flat-tone chips above the suggestions. */
+.ask-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
+.ask-action { height: 28px; padding: 0 11px; border: 0; border-radius: var(--chip-r, 7px); background: color-mix(in srgb, var(--phosphor) 14%, var(--chip-ground, transparent)); color: var(--phosphor); font-family: var(--read); font-size: 12.5px; font-weight: 600; cursor: pointer; }
+.ask-action:hover, .ask-action:focus-visible { background: color-mix(in srgb, var(--phosphor) 24%, var(--chip-ground, transparent)); outline: 0; }
+@media (prefers-reduced-motion: reduce) { .code-tab-close { transition: none; } }
+.viewer-body.with-beside > :not(.code-beside) { grid-column: 1; grid-row: 1; }
+.viewer-body.with-beside > .code-beside { grid-column: 2; grid-row: 1; }
+.code-crumbs .code-files-show { margin: 0 -4px 0 -8px; }
+.viewer-body.with-beside { grid-template-rows: minmax(0, 1fr); }
+.viewer-body.with-beside > pre.code { align-content: start; }
+.viewer-body.with-beside { place-items: stretch; }
+/* Narrow, what the code makes goes under it. */
+.viewer-body.with-beside.stacked { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
+.viewer-body.with-beside.stacked > .code-beside { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--line); }
+/* The header of the code workspace: the tabs and the path under it already name the file, so the
+   header keeps only its tools; too narrow for their words, they keep their drawings, and past that
+   it takes two lines instead of going out of the window: the window's keys always on the top one,
+   the tools under them (wrap-reverse sends what does not fit, the last keys, upwards; narrower
+   still, the spacer fills the top line beside the window's keys so every tool goes below). */
+dialog.viewer.code:has(> .code-crumbs:not([hidden])) > .viewer-head > :is(#viewer-path, #viewer-lang) { display: none; }
+dialog.viewer.code > .viewer-head { flex-wrap: wrap-reverse; row-gap: 6px; justify-content: flex-end; }
+@container viewerhead (max-width: 420px) {
+  dialog.viewer.code > .viewer-head > .viewer-spacer { order: 1; flex: 1 1 calc(100% - 140px); }
+  dialog.viewer.code > .viewer-head > .surface-modes { order: 2; }
+}
+.viewer-beside { display: inline-flex; align-items: center; justify-content: center; }
+.viewer-beside > svg { display: none; width: var(--ico-sm); height: var(--ico-sm); }
+@container viewerhead (max-width: 620px) {
+  .viewer-head > .viewer-beside { padding: 4px 7px; }
+  .viewer-head > .viewer-beside > svg { display: block; }
+  .viewer-head > .viewer-beside > span { display: none; }
+  dialog.viewer .viewer-head .viewer-seg .viewer-open { font-size: 0; padding: 0 9px; letter-spacing: 0; }
+  dialog.viewer .viewer-head .viewer-seg .viewer-open .tail-mark { margin-left: 0; }
+  dialog.viewer .viewer-head .viewer-seg-btn { padding: 0 9px; }
+  .viewer-head > .viewer-mode { padding: 5px 8px; letter-spacing: .08em; }
+  .viewer-head > .surface-modes { margin-left: 0; }
+}
+
+/* ==========================================================================================
+   1.0.3 · SIGNS DRAWN, THE AGENT ASKED, THE CORE'S SCROLL (2026-10-17)
+   ------------------------------------------------------------------------------------------
+   ↗ and ▾ at the end of a key's words and ◉ at the start of a label are drawn (app.js, tailMark
+   and leadWords), at the size of a mark; the folders' and the folds' carets are the chooser's
+   chevron, turned by their state. Asking about code, the agent chosen is lit and the rest are
+   quietly off. And the core scrolls at its window's edge, never over its cards.
+   ========================================================================================== */
+.tail-mark { display: inline-grid; place-items: center; width: var(--ico-xs); height: var(--ico-xs); margin-left: 3px; vertical-align: -2px; flex: none; }
+.tail-mark svg { display: block; width: 100%; height: 100%; }
+.lead-mark { display: inline-grid; place-items: center; width: var(--ico-xs); height: var(--ico-xs); margin-right: 6px; vertical-align: -2px; flex: none; }
+.lead-mark svg { display: block; width: 100%; height: 100%; }
+.tree-body .node .caret { display: inline-grid; place-items: center; width: var(--ico-xs); height: var(--ico-xs); font-size: 0; }
+.tree-body .node .caret svg { display: block; width: var(--ico-xs); height: var(--ico-xs); rotate: -90deg; transition: rotate var(--motion-fast) var(--ease-out); }
+.tree-body li[aria-expanded="true"] > .node .caret svg { rotate: 0deg; }
+.card-fold > summary .caret { display: inline-flex; align-items: center; gap: 4px; }
+.card-fold > summary .caret-mark { display: inline-grid; place-items: center; width: var(--ico-xs); height: var(--ico-xs); }
+.card-fold > summary .caret-mark svg { display: block; width: 100%; height: 100%; rotate: -90deg; transition: rotate var(--motion-fast) var(--ease-out); }
+.card-fold[open] > summary .caret-mark svg { rotate: 0deg; }
+@media (prefers-reduced-motion: reduce) { .tree-body .node .caret svg, .card-fold > summary .caret-mark svg { transition: none; } }
+
+.ask-card .ask-crew .ask-agent { transition: opacity var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
+.ask-card .ask-crew .ask-agent[aria-checked="false"] { opacity: .4; filter: grayscale(.9); box-shadow: none !important; }
+.ask-card .ask-crew .ask-agent[aria-checked="false"]:is(:hover, :focus-visible) { opacity: .75; filter: grayscale(.35); }
+.ask-card .ask-crew .ask-agent[aria-checked="true"] { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--surface, var(--panel)), 0 0 0 3.5px var(--agent), 0 0 14px -2px color-mix(in srgb, var(--agent) 55%, transparent) !important; }
+@media (prefers-reduced-motion: reduce) { .ask-card .ask-crew .ask-agent { transition: none; } }
+
+dialog#core { --core-pad: 22px; }
+dialog#core .core-body { padding-inline: var(--core-pad); }
+dialog#core .core-panes { margin-inline: calc(-1 * var(--core-pad)); padding-inline: calc(var(--core-pad) + 2px); scrollbar-gutter: stable; }
+@media (max-width: 720px) { dialog#core { --core-pad: 14px; } }
+
+/* ==========================================================================================
+   YOUR OWN PICTURE (1.0.3) · --wp-custom
+   ------------------------------------------------------------------------------------------
+   The same layers as the wallpapers that ship — a veil, or a mesh of the picture's own colours,
+   its tint for the room's material, its blur — with the colours the page took from the picture
+   (public/wallpaper.js, paintCustomWall: --wpc-* on the root, as "r g b") and the point of it that
+   stays in view (--wpc-pos). Until they arrive, a plain ground of the theme.
+   ========================================================================================== */
+:root, .look-preview[data-scheme="dark"] {
+  --wp-custom: linear-gradient(rgb(var(--wpc-veil-d, 12 12 12) / min(.96, calc(.68 * var(--veil-k, 1)))), rgb(var(--wpc-veil-d, 12 12 12) / min(.97, calc(.78 * var(--veil-k, 1))))), var(--wpc-url, none) var(--wpc-pos, 50% 50%) / cover no-repeat, rgb(var(--wpc-veil-d, 12 12 12));
+}
+:root[data-scheme="light"], .look-preview[data-scheme="light"] {
+  --wp-custom: linear-gradient(rgb(var(--wpc-veil-l, 246 246 246) / min(.96, calc(.52 * var(--veil-k, 1)))), rgb(var(--wpc-veil-l, 246 246 246) / min(.97, calc(.64 * var(--veil-k, 1))))), var(--wpc-url, none) var(--wpc-pos, 50% 50%) / cover no-repeat, rgb(var(--wpc-veil-l, 241 241 241));
+}
+:is(:root:not([data-scheme="light"]), .look-preview[data-scheme="dark"])[data-wp-style="mesh"] {
+  --wp-custom: radial-gradient(75% 65% at 12% 8%, rgb(var(--wpc-m1-d, 32 32 32) / min(.95, calc(.9 * var(--veil-k, 1)))), transparent 72%), radial-gradient(65% 75% at 92% 28%, rgb(var(--wpc-m2-d, 44 44 44) / min(.95, calc(.9 * var(--veil-k, 1)))), transparent 72%), radial-gradient(85% 65% at 42% 102%, rgb(var(--wpc-m3-d, 18 18 18) / min(.95, calc(.9 * var(--veil-k, 1)))), transparent 74%), linear-gradient(rgb(var(--wpc-veil-d, 12 12 12) / min(.9, calc(.56 * var(--veil-k, 1)))), rgb(var(--wpc-veil-d, 12 12 12) / min(.9, calc(.56 * var(--veil-k, 1))))), var(--wpc-url, none) var(--wpc-pos, 50% 50%) / cover no-repeat, rgb(var(--wpc-veil-d, 12 12 12));
+}
+:is(:root[data-scheme="light"], .look-preview[data-scheme="light"])[data-wp-style="mesh"] {
+  --wp-custom: radial-gradient(75% 65% at 12% 8%, rgb(var(--wpc-m1-l, 240 240 240) / min(.95, calc(.78 * var(--veil-k, 1)))), transparent 72%), radial-gradient(65% 75% at 92% 28%, rgb(var(--wpc-m2-l, 246 246 246) / min(.95, calc(.78 * var(--veil-k, 1)))), transparent 72%), radial-gradient(85% 65% at 42% 102%, rgb(var(--wpc-m3-l, 236 236 236) / min(.95, calc(.78 * var(--veil-k, 1)))), transparent 74%), linear-gradient(rgb(var(--wpc-veil-l, 246 246 246) / min(.9, calc(.42 * var(--veil-k, 1)))), rgb(var(--wpc-veil-l, 246 246 246) / min(.9, calc(.42 * var(--veil-k, 1))))), var(--wpc-url, none) var(--wpc-pos, 50% 50%) / cover no-repeat, rgb(var(--wpc-veil-l, 241 241 241));
+}
+:root[data-wallpaper="custom"] .shell::before { background: var(--wp-custom); }
+.look-preview[data-wallpaper="custom"], .paper[data-wp="custom"]:not(.paper-add) .paper-swatch { background: var(--wp-custom); }
+.look-preview[data-wallpaper="custom"]::before { background: var(--wp-custom); }
+:is(:root, .look-preview)[data-wallpaper="custom"] { --tint: rgb(var(--wpc-tint-d, 27 27 27)); }
+:is(:root, .look-preview)[data-scheme="light"][data-wallpaper="custom"] { --tint: rgb(var(--wpc-tint-l, 245 245 245)); }
+:is(:root[data-wallpaper="custom"], .look-preview[data-wallpaper="custom"]) { --wp-blur-on: var(--wp-blur, 0px); }
+:root[data-wallpaper="custom"] .shell::before { inset: calc(-2 * var(--wp-blur-on, 0px)); filter: blur(var(--wp-blur-on, 0px)); }
+.look-preview[data-wallpaper="custom"] { background: none !important; position: relative; isolation: isolate; overflow: hidden; }
+.look-preview[data-wallpaper="custom"]::before { content: ""; position: absolute; inset: calc(-2 * var(--wp-blur-on, 0px)); z-index: -1; filter: blur(var(--wp-blur-on, 0px)); pointer-events: none; }
+
+/* Its tile: the picture once it is here; before, a «+» on the ground, the way to add it. Busy while
+   the page prepares and keeps it. */
+.paper.paper-add .paper-swatch { display: grid; place-items: center; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 16%, transparent); color: var(--text-2); }
+.paper.paper-add .paper-swatch svg { width: var(--ico-md); height: var(--ico-md); }
+.paper.paper-add:is(:hover, :focus-visible) .paper-swatch { color: var(--phosphor); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--phosphor) 50%, transparent); }
+.paper.busy { pointer-events: none; }
+.paper.busy .paper-swatch { animation: paper-busy 1.1s ease-in-out infinite; }
+@keyframes paper-busy { 50% { opacity: .45; } }
+@media (prefers-reduced-motion: reduce) { .paper.busy .paper-swatch { animation: none; opacity: .6; } }
+
+/* Framing it: the whole picture, and over it the part the screen shows, carried by hand. What the
+   screen does not show is dimmed; the frame keeps a white line and the window's own corner. */
+.wall-tools { display: grid; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
+.wall-tools-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.wall-tools-words { display: grid; gap: 2px; min-width: 0; }
+.wall-tools-words b { font-family: var(--read); font-size: 12.5px; font-weight: 600; color: var(--text); }
+.wall-tools-hint { font-family: var(--read); font-size: 12px; line-height: 1.4; color: var(--text-2); }
+.wall-frame { display: grid; place-items: center; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }
+.wall-frame-fit { position: relative; display: block; line-height: 0; border-radius: 8px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
+.wall-frame-pic { display: block; max-width: 100%; max-height: 150px; width: auto; height: auto; }
+.wall-frame-view { position: absolute; border-radius: 6px; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4000px rgb(0 0 0 / .42); outline: 0; }
+.wall-frame:not([data-free="none"]) .wall-frame-fit { cursor: grab; }
+.wall-frame.moving .wall-frame-fit { cursor: grabbing; }
+.wall-frame-view:focus-visible { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px color-mix(in srgb, var(--phosphor) 70%, transparent), 0 0 0 4000px rgb(0 0 0 / .42); }
+.wall-tools-acts { display: flex; flex-wrap: wrap; gap: 8px; }
+
+/* ==========================================================================================
+   NEURAL MODE (1.0.3) · its key in the maps' heads, and its invitation
+   ------------------------------------------------------------------------------------------
+   The Memory map and the Projects map can be drawn as the neurons of a brain (public/neural.js,
+   nostromo-engine.js drawNeural). The key sits with the maps' other keys and takes their shape;
+   on, its neuron fills and takes the cold light of the mode. When the machine does not give the
+   map its frames, the key breathes and a card under it offers the mode: what it is, try it or not.
+   ========================================================================================== */
+:root { --neural: #56c8ff; --neural-ink: #021018; }
+.nostromo-head .neural-key { display: inline-flex; align-items: center; gap: 6px; }
+.nostromo-head .neural-key svg { flex: none; width: var(--ico-sm); height: var(--ico-sm); }
+/* Its word is written as it reads (the head lowercases its keys and lifts the first letter, which here is the drawing). */
+:is(#nostromo, .mv) .nostromo-actions .neural-key { text-transform: none; }
+:is(#nostromo, .mv) .nostromo-actions .neural-key[aria-pressed="true"] { color: var(--neural-ink); background: var(--neural); }
+:is(#nostromo, .mv) .nostromo-actions .neural-key[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--neural) 86%, #ffffff); }
+.nostromo-head .neural-key[aria-pressed="true"] .ic-f { fill: currentColor; }
+.nostromo-head .neural-key.invite { animation: neural-breathe calc(2400ms * var(--motion-scale, 1)) ease-in-out infinite; }
+@keyframes neural-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgb(86 200 255 / 0); } 50% { box-shadow: 0 0 0 4px rgb(86 200 255 / .35), 0 0 22px rgb(86 200 255 / .3); } }
+.via-phone #nostromo-neural { display: none; }
+.neural-invite {
+  position: absolute; z-index: 6; width: min(340px, calc(100% - 24px));
+  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 12px; padding: 14px 14px 12px;
+  border-radius: 14px; color: #eef3ff; font-family: var(--read); text-transform: none; letter-spacing: 0;
+  background: rgb(8 14 26 / .92); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
+  box-shadow: 0 0 0 .5px rgb(86 200 255 / .28), 0 18px 44px -18px rgb(0 0 0 / .7), 0 0 40px -12px rgb(86 200 255 / .28);
+  animation: neural-invite-in calc(240ms * var(--motion-scale, 1)) var(--ease-glide, ease-out);
+}
+@keyframes neural-invite-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
+.neural-invite-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--neural); background: radial-gradient(circle at 50% 45%, rgb(86 200 255 / .3), rgb(86 200 255 / .06) 70%); box-shadow: inset 0 0 0 .5px rgb(86 200 255 / .4); }
+.neural-invite-mark svg { width: var(--ico-md); height: var(--ico-md); }
+.neural-invite-words { display: grid; gap: 3px; align-content: center; min-width: 0; }
+.neural-invite-words b { font-size: 13.5px; font-weight: 600; color: #ffffff; }
+.neural-invite-words span { font-size: 12.5px; line-height: 1.45; color: rgb(220 232 255 / .72); }
+.neural-invite-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
+/* Its two keys are its own: the map is dark in either theme, so they never take the page's. */
+.neural-invite :is(.neural-invite-go, .neural-invite-later) { height: 30px; padding: 0 14px; border: 0; border-radius: 9px; font-family: var(--read); font-size: 12.5px; font-weight: 600; letter-spacing: 0; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out); }
+.neural-invite .neural-invite-later { color: #eef3ff; background: rgb(255 255 255 / .08); }
+.neural-invite .neural-invite-later:is(:hover, :focus-visible) { background: rgb(255 255 255 / .15); outline: 0; }
+.neural-invite .neural-invite-go { color: var(--neural-ink); background: var(--neural); }
+.neural-invite .neural-invite-go:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--neural) 84%, #ffffff); outline: 0; }
+@media (prefers-reduced-motion: reduce) { .nostromo-head .neural-key.invite, .neural-invite { animation: none; } }
+
+/* The maps' close (1.0.3): the same sunk track and turning cross as every window, in the dark the
+   maps always stand on, whatever the room's theme. */
+:is(#nostromo, .mv) .nostromo-actions .surface-modes {
+  --neu-hi: rgba(255, 255, 255, .07); --neu-lo: rgba(0, 0, 0, .72); --surface: #1b1e1b;
+  --key-track: inset 1.5px 1.5px 4px var(--neu-lo), inset -1.5px -1.5px 4px var(--neu-hi);
+  --key-rest: -2px -2px 5px var(--neu-hi), 3px 3px 7px var(--neu-lo);
+  box-shadow: var(--key-track); background: rgb(255 255 255 / .04) !important;
+}
+:is(#nostromo, .mv) .nostromo-actions .surface-modes .surface-mode.close { color: rgb(242 241 238 / .78); }
+:is(#nostromo, .mv) .nostromo-actions .surface-modes .surface-mode.close:is(:hover, :focus-visible) { color: #ffffff; background: var(--surface); box-shadow: var(--key-rest); }
+
+
+/* The Market's offer in the conversation (2026-10-18, app.js offerModule): one card under the
+   message that asked for what a module does — its drawing, what would help, and its keys. */
+#messages .system.market-offer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; max-width: min(640px, 100%); margin: 4px auto 6px; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left; background: var(--plane-solid, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc, var(--phosphor)) 30%, transparent), 0 6px 18px -12px rgba(0, 0, 0, .4); font-family: var(--read); letter-spacing: 0; text-transform: none; }
+#messages .market-offer-words { display: grid; gap: 2px; min-width: 0; }
+#messages .market-offer-words b { font-size: 14px; font-weight: 650; color: var(--text); }
+#messages .market-offer-words span { font-size: 13px; line-height: 1.45; color: var(--text-2); }
+#messages .market-offer-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+#messages .market-offer-acts button { padding: 6px 12px; border: 0; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
+#messages .market-offer-acts button.primary { color: var(--acc-ink, var(--phosphor-ink, #0b0b0b)); background: var(--acc, var(--phosphor)); }
+#messages .market-offer-acts button.quiet { background: transparent; color: var(--text-3); }
+#messages .market-offer-acts button:disabled { opacity: .6; cursor: default; }
+/* Beside «Add a module», at the right: the push goes to whichever stands first. */
+.mods-head .mods-market { flex: none; height: 30px; padding: 0 12px; margin-left: auto; }
+.mods-head .mods-market + .mods-add { margin-left: 0; }
+
+/* THE MARKET, full screen (market-view.js, 2026-10-18): the same store in Home and in a project.
+   It takes the whole window, as a store does, over whatever was open; its own colors are the
+   room's tokens, so it follows light and dark, and each module wears its own two colors. */
+html.mk-open, html.mk-open body { overflow: hidden; }
+/* The page's own first-time hints wait under the store and come back when it closes. */
+html.mk-open :is(.tour-hint, .tour-hint-away, .hint-spot) { visibility: hidden !important; }
+.mk { position: fixed; inset: 0; z-index: 2147482990; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--read); outline: 0; opacity: 0; transform: scale(.985); transition: opacity calc(200ms * var(--motion-scale, 1)) ease, transform calc(240ms * var(--motion-scale, 1)) cubic-bezier(.2, .8, .2, 1); }
+.mk.in { opacity: 1; transform: none; }
+.mk button { font-family: inherit; }
+.mk-bar { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); }
+.mk-leave { justify-self: start; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); cursor: pointer; }
+.mk-leave:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
+.mk-leave svg { width: 16px; height: 16px; }
+.mk-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
+.mk-tab { min-width: 104px; padding: 6px 18px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
+.mk-tab[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
+.mk-here { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; white-space: nowrap; }
+.mk-here span { color: var(--text-2); font-size: 13.5px; }
+.mk-search { justify-self: end; width: min(280px, 100%); }
+.mk-search[hidden] { display: flex !important; visibility: hidden; }
+.mk-main { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
+.mk-page { width: min(1120px, 100%); margin: 0 auto; padding: 30px 32px calc(72px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; box-sizing: border-box; }
+.mk-page > * { min-width: 0; }
+.mk-head h1 { margin: 0; font-size: clamp(30px, 4vw, 40px); font-weight: 760; letter-spacing: -.02em; line-height: 1.05; }
+.mk-head p { margin: 8px 0 0; max-width: 72ch; color: var(--text-2); font-size: 15px; line-height: 1.5; }
+.mk-empty { margin: 0; color: var(--text-2); font-size: 14.5px; }
+
+/* A module's app icon: its drawing in white on its own colors, rounded like the icons on a phone. */
+.mk-icon { --mk-size: 56px; flex: none; display: grid; place-items: center; width: var(--mk-size); height: var(--mk-size); border-radius: calc(var(--mk-size) * .235); color: #fff; background: linear-gradient(160deg, var(--mk-a, #94a3b8), var(--mk-b, #334155)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .14), 0 8px 18px -10px var(--mk-b, #334155); }
+.mk-icon svg { width: 58%; height: 58%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
+
+/* The carousel: one featured module at a time, its picture beside what it does. */
+.mk-carousel { position: relative; }
+.mk-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 26px; box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .55); }
+.mk-track::-webkit-scrollbar { display: none; }
+.mk-slide { --mk-a: #60a5fa; --mk-b: #1d4ed8; position: relative; flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; min-height: 380px; overflow: hidden; scroll-snap-align: start; color: #fff; cursor: pointer; background: radial-gradient(90% 120% at 88% 12%, color-mix(in srgb, var(--mk-a) 70%, #fff) 0%, transparent 60%), linear-gradient(135deg, var(--mk-a), var(--mk-b)); }
+.mk-slide::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 0% 100%, rgba(0, 0, 0, .28), transparent 70%); }
+.mk-slide-words { position: relative; display: grid; align-content: center; gap: 10px; min-width: 0; padding: 40px 0 40px 46px; }
+.mk-slide-words small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .86; }
+.mk-slide-words h2 { margin: 0; font-size: clamp(28px, 3.6vw, 42px); font-weight: 780; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; }
+.mk-slide-words p { margin: 0; max-width: 34ch; font-size: 16.5px; line-height: 1.45; opacity: .94; text-wrap: pretty; }
+.mk-slide-get { display: flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; margin-top: 16px; padding: 10px 12px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); box-sizing: border-box; }
+.mk-slide-get .mk-icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 4px 10px -4px rgba(0, 0, 0, .4); }
+.mk-slide-who { display: grid; gap: 1px; min-width: 0; padding-right: 6px; }
+.mk-slide-who b { font-size: 14.5px; }
+.mk-slide-who span { font-size: 12.5px; opacity: .85; }
+.mk-slide-art { position: relative; align-self: stretch; display: grid; place-items: center; padding: 22px 26px 22px 0; }
+.mk-slide-art svg { width: 100%; height: auto; max-height: 340px; }
+.mk-arrow { position: absolute; bottom: 44px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .3); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transition: opacity calc(160ms * var(--motion-scale, 1)) ease; }
+.mk-carousel:hover .mk-arrow, .mk-arrow:focus-visible { opacity: 1; }
+/* Both in the corner, out of the words' way. */
+.mk-arrow.prev { right: 64px; }
+.mk-arrow.next { right: 16px; }
+.mk-arrow svg { width: 18px; height: 18px; }
+.mk-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
+.mk-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--text) 22%, transparent); cursor: pointer; transition: width calc(220ms * var(--motion-scale, 1)) ease, background-color calc(220ms * var(--motion-scale, 1)) ease; }
+.mk-dot[aria-current="true"] { width: 24px; background: var(--text); }
+
+/* The key: tonal while it is a question, solid on a module's page, quiet once it is on. */
+.mk-get { flex: none; height: 30px; padding: 0 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--madre-green) 15%, transparent); color: var(--madre-green); font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; cursor: pointer; }
+.mk-get:hover { background: color-mix(in srgb, var(--madre-green) 24%, transparent); }
+.mk-get.on { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); }
+.mk-get.light { background: #fff; color: #111; }
+.mk-get.light:hover { background: rgba(255, 255, 255, .88); }
+.mk-get.big { height: 40px; padding: 0 22px; background: var(--madre-green); color: var(--madre-green-ink); font-size: 14.5px; }
+.mk-get.big:hover { filter: brightness(1.06); }
+.mk-get.big:is(.quiet, .on) { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
+.mk-get:disabled { opacity: .55; cursor: progress; }
+.mk-link { padding: 0; border: 0; background: none; color: var(--madre-green); font-size: 13.5px; font-weight: 600; cursor: pointer; }
+.mk-link:hover { text-decoration: underline; }
+
+/* The shelves: rows of modules, three across where they fit, like a store's lists. */
+.mk-shelf { display: grid; gap: 6px; }
+.mk-shelf > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
+.mk-shelf h2, .mk-section > h2 { margin: 0; font-size: 22px; font-weight: 720; letter-spacing: -.01em; }
+.mk-shelf > header p { margin: 0; color: var(--text-2); font-size: 14px; }
+.mk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); column-gap: 30px; }
+.mk-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
+.mk-row-open { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.mk-row-words { display: grid; gap: 3px; min-width: 0; }
+.mk-row-words b { font-size: 15px; font-weight: 650; }
+.mk-row-words span { display: -webkit-box; overflow: hidden; color: var(--text-2); font-size: 13px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.mk-row-side { display: grid; justify-items: center; gap: 3px; }
+.mk-row-side small { color: var(--text-3); font-size: 10.5px; }
+.mk-row-side small:empty { display: none; }
+
+/* A module's page. */
+.mk-product { gap: 30px; }
+.mk-back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px 4px 0; border: 0; background: none; color: var(--madre-green); font-size: 15px; font-weight: 600; cursor: pointer; }
+.mk-back svg { width: 17px; height: 17px; }
+.mk-product-top { display: flex; align-items: center; gap: 28px; }
+.mk-product-words { display: grid; gap: 8px; min-width: 0; }
+.mk-product-words h1 { margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 760; letter-spacing: -.02em; line-height: 1.08; }
+.mk-product-words > p:not(.mk-said) { margin: 0; color: var(--text-2); font-size: 16px; }
+.mk-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 8px; }
+.mk-state { color: var(--text-2); font-size: 13.5px; }
+.mk-only { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 13.5px; }
+.mk-select { height: 32px; max-width: 240px; padding: 0 10px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); font: inherit; font-size: 13.5px; }
+.mk-keys > .mk-select { height: 40px; }
+.mk-said { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
+.mk-said:empty { display: none; }
+.mk-said[data-tone="bad"] { color: var(--crit, #d93025); }
+.mk-said[data-tone="good"] { color: var(--madre-green); }
+.mk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
+.mk-facts > div { display: grid; justify-items: center; gap: 4px; padding: 14px 16px; text-align: center; }
+.mk-facts > div + div { border-left: 1px solid var(--line); }
+.mk-facts dt { color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.mk-facts dd { margin: 0; font-size: 14.5px; font-weight: 600; }
+.mk-section { display: grid; gap: 14px; }
+.mk-shot { display: grid; place-items: center; width: min(760px, 100%); aspect-ratio: 16 / 9; padding: 3%; overflow: hidden; border-radius: 22px; background: radial-gradient(90% 120% at 85% 10%, color-mix(in srgb, var(--mk-a) 70%, #fff) 0%, transparent 60%), linear-gradient(135deg, var(--mk-a, #94a3b8), var(--mk-b, #334155)); box-sizing: border-box; }
+.mk-shot svg { width: min(100%, 720px); height: 100%; }
+.mk-about { margin: 0; max-width: 72ch; font-size: 15.5px; line-height: 1.6; }
+.mk-touches { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
+.mk-touch { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 16px; font-size: 14px; line-height: 1.45; }
+.mk-touch + .mk-touch { border-top: 1px solid var(--line); }
+.mk-touch span:first-child { color: var(--text-3); }
+
+/* MODULES in Home: one card per module, a switch for every project and a chip for each one. */
+.mk-card { display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
+.mk-card.focused { box-shadow: 0 0 0 2px var(--madre-green); }
+.mk-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
+.mk-card-open { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 220px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.mk-card-words { display: grid; gap: 2px; min-width: 0; }
+.mk-card-words b { font-size: 15px; font-weight: 650; }
+.mk-card-words span { color: var(--text-2); font-size: 13px; }
+.mk-all { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13.5px; }
+.mk-switch { display: flex; flex: none; width: 44px; height: 26px; padding: 3px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--text) 18%, transparent); cursor: pointer; transition: background-color calc(160ms * var(--motion-scale, 1)) ease; }
+.mk-knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform calc(180ms * var(--motion-scale, 1)) cubic-bezier(.2, .8, .2, 1); }
+.mk-switch.on { background: var(--madre-green); }
+.mk-switch.on .mk-knob { transform: translateX(18px); }
+.mk-switch:disabled, .mk-chip:disabled { opacity: .55; cursor: progress; }
+.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 58px; }
+.mk-chip { padding: 6px 12px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); font-size: 13px; cursor: pointer; }
+span.mk-chip { cursor: default; }
+.mk-chip.on { background: color-mix(in srgb, var(--madre-green) 16%, transparent); color: var(--madre-green); font-weight: 600; }
+/* The page's own notice, over the Market while it is open, where a store says things: at the bottom. */
+html.mk-open .toast { z-index: 2147482995 !important; left: 50% !important; right: auto !important; top: auto !important; bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important; }
+
+@media (max-width: 760px) {
+  .mk-bar { grid-template-columns: auto minmax(0, 1fr); padding-inline: 14px; }
+  .mk-bar-mid { justify-self: end; }
+  .mk-search { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
+  .mk-search[hidden] { display: none !important; }
+  .mk-tab { min-width: 0; padding-inline: 14px; }
+  .mk-page { gap: 28px; padding: 20px 16px calc(52px + env(safe-area-inset-bottom, 0px)); }
+  .mk-slide { grid-template-columns: minmax(0, 1fr); min-height: 0; }
+  .mk-slide-get { width: 100%; }
+  .mk-slide-who { flex: 1; }
+  .mk-slide-words { padding: 26px 22px 6px; }
+  .mk-slide-words p { max-width: none; }
+  .mk-slide-art { padding: 4px 14px 18px; }
+  .mk-slide-art svg { max-height: 230px; }
+  .mk-arrow { display: none; }
+  .mk-product-top { flex-direction: column; align-items: flex-start; gap: 16px; }
+  .mk-product-top > .mk-icon { --mk-size: 96px !important; }
+  .mk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .mk-facts > div:nth-child(3) { border-left: 0; }
+  .mk-facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
+  .mk-touch { grid-template-columns: 1fr; gap: 2px; }
+  .mk-chips { padding-left: 0; }
+}
+@media (prefers-reduced-motion: reduce) { .mk, .mk-dot, .mk-knob { transition: none; } }
+
+/* KEYS BESIDE THE VERSION (attribution.js, drawColophonKeys, 2026-10-18): what a module puts in the
+   corner, drawn by MADRE. A mark in the same pill as the version; hovered or focused, a card above
+   it with the module's words and the key that opens its address. */
+.colophon-keys { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
+.colophon-key { position: relative; display: inline-flex; }
+.colophon-key-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--text-2); text-decoration: none; transition: color calc(160ms * var(--motion-scale, 1)) ease, transform calc(200ms * var(--motion-scale, 1)) cubic-bezier(.2, .8, .2, 1); }
+.colophon-key-mark svg { width: 14px; height: 14px; }
+.colophon-key.heart .colophon-key-mark { color: #e5484d; }
+.colophon-key:is(:hover, :focus-within) .colophon-key-mark { transform: scale(1.18); }
+.colophon-key.heart:is(:hover, :focus-within) .colophon-key-mark svg { animation: colophon-beat calc(900ms * var(--motion-scale, 1)) ease-in-out infinite; }
+@keyframes colophon-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(.96); } 60% { transform: scale(1.1); } }
+.colophon-key-mark:focus-visible { outline: 2px solid var(--madre-green); outline-offset: 2px; }
+.colophon-card { position: absolute; right: -10px; bottom: calc(100% + 12px); z-index: 20; display: grid; gap: 6px; width: max-content; max-width: 260px; padding: 12px 14px; border-radius: 14px; background: var(--surface, var(--panel)); color: var(--text); font-family: var(--read); font-size: 12.5px; font-weight: 450; letter-spacing: 0; line-height: 1.45; text-align: left; text-transform: none; white-space: normal; user-select: text; box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 14%, transparent), 0 12px 28px -8px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity calc(160ms * var(--motion-scale, 1)) ease, transform calc(200ms * var(--motion-scale, 1)) ease, visibility 0s linear calc(200ms * var(--motion-scale, 1)); }
+/* A bridge over the gap, so the pointer can travel from the mark to the card without losing it. */
+.colophon-card::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
+.colophon-key:is(:hover, :focus-within) .colophon-card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
+.colophon-card b { font-size: 13px; font-weight: 650; }
+.colophon-card span { color: var(--text-2); }
+.colophon-card-go { justify-self: start; margin-top: 2px; padding: 6px 12px; border-radius: 99px; background: var(--madre-green); color: var(--madre-green-ink); font-weight: 650; text-decoration: none; }
+.colophon-card-go:hover { filter: brightness(1.06); }
+@media (prefers-reduced-motion: reduce) { .colophon-key.heart:is(:hover, :focus-within) .colophon-key-mark svg { animation: none; } }