/* ============================================================================
metacog2.css — shared design SYSTEM for "Stuck in the grid"
A graph-paper research log: WHY an AI agent stays stuck on ls20-L2.
Direction: the agent's VERBATIM reasoning (mono, machine output) beside the
ARC grid it MISREADS. Signature element on every page = the CODE-REGISTER
DIAL (pattern / color / rotation, current -> required), the discrete state
the agent is blind to. Everything else stays quiet.
============================================================================ */
/* --- Google Fonts: Space Grotesk (display) / Source Serif 4 (body) /
JetBrains Mono (agent trace + code-register + data) --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
/* ============================================================================
1. TOKENS — named palette (use exactly), type, spacing
============================================================================ */
:root {
/* base palette — named hex, brief-exact */
--paper: #f4f2ea; /* warm off-white base */
--ink: #17160f; /* text */
--faint-grid: #e4e1d6; /* graph lines */
--stuck: #cf3a2b; /* failure / wrong-model signal */
/* four COMPONENT colors — structural encoding, NOT decoration */
--wm: #1f6fe0; /* WorldModel */
--miner: #2f9e46; /* Miner */
--judge: #d98a1e; /* Judge */
--use: #b8389a; /* Use */
/* derived neutrals (kept on the warm-paper axis) */
--ink-2: #4a473b; /* secondary text */
--ink-3: #7c7868; /* muted / captions */
--line: #d8d4c6; /* hairline borders on panels */
--panel: #faf9f3; /* raised panel fill, just off paper */
--panel-2: #efece1; /* recessed / code fill */
/* tints of the failure + component inks for fills (notebook-ink, subtle) */
--stuck-tint: #f6e3df;
--wm-tint: #e2ecfb;
--miner-tint: #e3f1e7;
--judge-tint: #f8edd9;
--use-tint: #f4e2ef;
/* type families */
--display: "Space Grotesk", system-ui, sans-serif;
--body: "Source Serif 4", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* type scale (clear, modular ~1.25) */
--t-eyebrow: 0.72rem;
--t-small: 0.82rem;
--t-body: 1.02rem;
--t-lead: 1.22rem;
--t-h3: 1.42rem;
--t-h2: 2.0rem;
--t-h1: 3.0rem;
--t-display: 3.9rem;
/* mono scale */
--m-small: 0.78rem;
--m-base: 0.9rem;
/* layout */
--col: 1080px; /* centered narrative column */
--grid-px: 24px; /* graph-paper pitch */
--radius: 3px; /* sharp, log-book feel */
/* spacing */
--s1: 0.4rem; --s2: 0.7rem; --s3: 1.1rem;
--s4: 1.8rem; --s5: 2.8rem; --s6: 4.2rem;
}
/* ============================================================================
2. GRAPH-PAPER BACKGROUND + base reset
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
color: var(--ink);
background-color: var(--paper);
/* very subtle graph paper: two repeating-linear-gradients = faint grid */
background-image:
repeating-linear-gradient(to right,
var(--faint-grid) 0, var(--faint-grid) 1px,
transparent 1px, transparent var(--grid-px)),
repeating-linear-gradient(to bottom,
var(--faint-grid) 0, var(--faint-grid) 1px,
transparent 1px, transparent var(--grid-px));
background-position: 0 0;
font-family: var(--body);
font-size: var(--t-body);
line-height: 1.62;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* centered ~1080px column */
.wrap {
max-width: var(--col);
margin: 0 auto;
padding: var(--s6) var(--s4);
}
/* ============================================================================
3. TYPE SCALE
============================================================================ */
h1, h2, h3, .display {
font-family: var(--display);
font-weight: 600;
letter-spacing: -0.018em;
line-height: 1.08;
color: var(--ink);
margin: 0 0 var(--s3);
}
.display { font-size: var(--t-display); font-weight: 700; letter-spacing: -0.03em; }
h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--t-h2); margin-top: var(--s6); }
h3 { font-size: var(--t-h3); margin-top: var(--s5); }
p { margin: 0 0 var(--s3); max-width: 64ch; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.small { font-size: var(--t-small); }
.muted { color: var(--ink-3); }
a { color: var(--wm); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--wm) 40%, transparent); }
a:hover { border-bottom-color: var(--wm); }
/* eyebrow — small caps label above a heading */
.eyebrow {
font-family: var(--mono);
font-size: var(--t-eyebrow);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 var(--s2);
display: block;
}
/* tiny inline stat — NO big bar charts; numbers stay small + mono */
.stat {
font-family: var(--mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink);
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.05em 0.4em;
font-size: var(--m-small);
white-space: nowrap;
}
.stat--stuck { color: var(--stuck); background: var(--stuck-tint); border-color: color-mix(in srgb, var(--stuck) 30%, var(--line)); }
/* ============================================================================
4. PANEL / LABEL TOKENS
============================================================================ */
.panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s4);
margin: var(--s4) 0;
}
.panel--quiet { background: transparent; border-style: dashed; }
/* generic label chip */
.label {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--mono);
font-size: var(--m-small);
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.12em 0.5em;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--panel-2);
color: var(--ink-2);
}
/* ============================================================================
5. FOUR COMPONENT-COLOR ENCODINGS
The 4 components are a fixed SET — encode with color + label, NOT numbering.
Usage: WorldModel
The .comp class carries a left tick in the component color; the *-tint
variants give a soft fill (e.g. for a component panel/section header).
============================================================================ */
.comp {
display: inline-flex;
align-items: center;
gap: 0.45em;
font-family: var(--mono);
font-size: var(--m-small);
font-weight: 600;
letter-spacing: 0.03em;
padding: 0.14em 0.55em 0.14em 0.5em;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--panel);
color: var(--ink);
}
.comp::before {
content: "";
width: 0.62em; height: 0.62em;
border-radius: 50%;
background: var(--_c, var(--ink-3));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--_c, var(--ink-3)) 22%, transparent);
}
.comp--wm { --_c: var(--wm); border-color: color-mix(in srgb, var(--wm) 32%, var(--line)); }
.comp--miner { --_c: var(--miner); border-color: color-mix(in srgb, var(--miner) 32%, var(--line)); }
.comp--judge { --_c: var(--judge); border-color: color-mix(in srgb, var(--judge) 32%, var(--line)); }
.comp--use { --_c: var(--use); border-color: color-mix(in srgb, var(--use) 32%, var(--line)); }
/* component-colored section card: left rule + soft tint header */
.comp-card { border-left: 3px solid var(--_c, var(--ink-3)); }
.comp-card.comp--wm { --_c: var(--wm); }
.comp-card.comp--miner { --_c: var(--miner); }
.comp-card.comp--judge { --_c: var(--judge); }
.comp-card.comp--use { --_c: var(--use); }
.comp-card > .eyebrow { color: var(--_c, var(--ink-3)); }
/* the fixed SET as a row */
.comp-set { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
/* ============================================================================
6. LAYOUT — 2-column [grid | reasoning] only where it earns it
============================================================================ */
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: var(--s4);
align-items: start;
margin: var(--s4) 0;
}
.split > .grid-col { min-width: 0; }
.split > .reason-col { min-width: 0; }
@media (max-width: 820px) {
.split { grid-template-columns: 1fr; }
:root { --t-display: 2.7rem; --t-h1: 2.2rem; --t-h2: 1.6rem; }
}
/* ============================================================================
7. SIGNATURE COMPONENT — CODE-REGISTER DIAL
Three fields (pattern / color / rotation), each current -> required.
Wrong/missing fields are marked. This is the one memorable element; it
recurs on every page. Markup snippet is in the returned notes.
============================================================================ */
.dial {
font-family: var(--mono);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s2);
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s3);
margin: var(--s4) 0;
}
.dial__title {
grid-column: 1 / -1;
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--t-eyebrow);
font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
border-bottom: 1px solid var(--line);
padding-bottom: var(--s2); margin-bottom: var(--s1);
}
.dial__title .legend { display: inline-flex; gap: 0.9em; letter-spacing: 0.04em; }
.dial__title .legend b { color: var(--ink-2); font-weight: 600; }
/* one field = pattern | color | rotation */
.dial__field {
display: flex; flex-direction: column; gap: 0.35em;
padding: var(--s2);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel-2);
}
.dial__name {
font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-3); font-weight: 600;
}
.dial__values {
display: flex; align-items: center; gap: 0.45em;
font-size: 1.32rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dial__cur { color: var(--ink); }
.dial__arrow { color: var(--ink-3); font-weight: 500; font-size: 1rem; }
.dial__req { color: var(--ink-2); }
/* state markers --------------------------------------------------------- */
/* OK: current already equals required */
.dial__field--ok { border-color: color-mix(in srgb, var(--miner) 40%, var(--line)); }
.dial__field--ok .dial__cur,
.dial__field--ok .dial__req { color: var(--miner); }
.dial__field--ok .dial__name::after { content: " ✓"; color: var(--miner); }
/* WRONG: current set to a wrong value (the agent CHOSE wrong) */
.dial__field--wrong {
border-color: color-mix(in srgb, var(--stuck) 45%, var(--line));
background: var(--stuck-tint);
}
.dial__field--wrong .dial__cur { color: var(--stuck); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--stuck) 60%, transparent); }
.dial__field--wrong .dial__req { color: var(--ink); }
.dial__field--wrong .dial__name::after { content: " ✗"; color: var(--stuck); }
/* MISSING: the field the agent is BLIND to — never set, shows a void glyph */
.dial__field--missing {
border-style: dashed;
border-color: color-mix(in srgb, var(--stuck) 45%, var(--line));
background: repeating-linear-gradient(135deg,
transparent 0, transparent 5px,
color-mix(in srgb, var(--stuck) 7%, transparent) 5px,
color-mix(in srgb, var(--stuck) 7%, transparent) 10px);
}
.dial__field--missing .dial__cur { color: var(--stuck); } /* the "·" void */
.dial__field--missing .dial__req { color: var(--ink); }
.dial__field--missing .dial__name::after { content: " ✗ blind"; color: var(--stuck); letter-spacing: 0; }
/* compact inline variant for page headers / recurring footer */
.dial--mini { padding: var(--s2); gap: var(--s1); }
.dial--mini .dial__title { font-size: 0.6rem; padding-bottom: var(--s1); }
.dial--mini .dial__field { padding: var(--s1) var(--s2); }
.dial--mini .dial__values { font-size: 1.02rem; }
@media (max-width: 560px) {
.dial { grid-template-columns: 1fr; }
}
/* ============================================================================
8. MONO TRACE BLOCK — the agent's verbatim reasoning (machine output).
A memorable texture. .mark = the wrong phrase ("stencil", misread fuel bar).
Turn numbers are fine here (the stuck run IS a sequence).
============================================================================ */
.trace {
font-family: var(--mono);
font-size: var(--m-base);
line-height: 1.55;
color: var(--ink);
background: var(--panel-2);
border: 1px solid var(--line);
border-left: 3px solid var(--ink-3);
border-radius: var(--radius);
padding: var(--s3) var(--s3) var(--s3) var(--s3);
margin: var(--s3) 0;
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
tab-size: 2;
}
/* the trace IS machine output -> a faint header strip */
.trace__head {
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--m-small); color: var(--ink-3);
letter-spacing: 0.04em;
margin: 0 0 var(--s2);
padding-bottom: var(--s2);
border-bottom: 1px dashed var(--line);
}
.trace__turn { color: var(--ink-2); font-weight: 600; }
.trace__turn::before { content: "turn "; color: var(--ink-3); font-weight: 400; }
/* per-line turn numbering inside a multi-turn trace */
.trace ol { list-style: none; margin: 0; padding: 0; counter-reset: turn; }
.trace ol li { counter-increment: turn; padding-left: 3.6em; position: relative; }
.trace ol li::before {
content: "t" counter(turn);
position: absolute; left: 0; width: 3em; text-align: right;
color: var(--ink-3); font-weight: 600;
}
/* THE wrong phrase — the misread that keeps the agent stuck */
.trace .mark {
color: var(--stuck);
font-weight: 600;
background: var(--stuck-tint);
border-bottom: 1.5px solid var(--stuck);
padding: 0 0.15em;
border-radius: 2px;
}
.trace .mark[data-note]::after {
content: " ⟵ " attr(data-note);
color: var(--stuck);
font-weight: 400;
font-size: 0.85em;
background: none;
border: none;
}
/* a chosen ACTION line the agent repeats (fixation) */
.trace .action { color: var(--use); font-weight: 600; }
/* ============================================================================
9. ARC GRID RENDERER — verbatim 16-color ARC palette + paint()
Copied from run_explorer_template.html drawGrid(); palette is the exact
16 entries from metacog_data.json renderer.PALETTE. The JS is embedded here
as a reusable comment block so any page can paste it once; the CSS below
frames the