@jossuealcala/madre 1.0.2 → 1.0.3

package/public/styles.css

@@ -95,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. */
@@ -842,7 +850,7 @@ textarea::placeholder { color: var(--text-3); }
 .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; }
@@ -898,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 {
@@ -1021,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; }
@@ -1093,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); }
@@ -1343,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; }
@@ -1398,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; }
@@ -1428,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
@@ -1437,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);
@@ -1538,7 +1558,7 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(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: 14px; height: 14px; }
+.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); }
@@ -1596,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; }
@@ -1713,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; }
@@ -1780,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; }
@@ -2073,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. */
@@ -2113,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; }
@@ -2146,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); }
 
@@ -2297,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); }
@@ -2354,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. */
@@ -2423,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; }
@@ -2488,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; }
@@ -2533,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); }
@@ -2987,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; }
@@ -2998,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); }
@@ -3306,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; } }
@@ -3349,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; }
@@ -3478,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); }
@@ -3626,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; }
@@ -3640,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 =================
@@ -3777,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. */
@@ -3901,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); }
@@ -3942,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 —
@@ -3964,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); }
@@ -4690,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); }
 
@@ -5038,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); }
 }
 
 /* ==========================================================================================
@@ -5121,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:
@@ -5274,7 +5327,7 @@ dialog.custom-window::backdrop { display: none; }
    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: 16px; height: 16px; }
+.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; }
@@ -5359,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); }
 
@@ -5759,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
@@ -5858,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; }
@@ -5877,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; }
@@ -6280,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; }
 
@@ -6345,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); }
@@ -6824,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
@@ -6983,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); }
@@ -7198,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; }
@@ -7369,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) {
@@ -7390,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
@@ -7404,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; }
@@ -7450,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; }
@@ -7709,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; }
@@ -7728,6 +7819,17 @@ 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));
@@ -7781,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); }
@@ -8296,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; }
 
@@ -8478,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); }
@@ -8598,7 +8700,7 @@ 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. */
@@ -8639,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); }
@@ -8648,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%; }
@@ -9441,3 +9568,653 @@ dialog.tour-bonjour:focus, dialog.tour-bonjour:focus-visible, dialog.whats-new:f
   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; } }