`, with a header that has the
language pill + a copy button. Tables get `
`
for horizontal scroll + frosted top/bottom mask. */
/* ---------- theme glue for hljs --------------------------------------
src_old defined a separate set of --code-* variables for light/dark.
We keep that pattern so the hljs rules stay verbatim from src_old —
adapting only the actual color picks to match the bronze/charcoal
palette of the new theme. */
:root {
--code-bg: var(--surface-code);
--code-text: var(--mercury);
--code-border: var(--line);
--code-function: #d7b27a; /* bronze-ish — class/function names */
--code-keyword: #a3a2a3; /* muted grey — keywords */
--code-string: #c9a978; /* warm tan — strings, regexp */
--code-number: #c7a669; /* gold — numbers, literals */
--code-comment: #6ea37b; /* mossy green — comments */
--code-operator: #a3a3a3;
--code-type: #d7ba7d;
--code-tag: #ffc190;
}
[data-theme="light"] {
--code-bg: var(--surface-code);
--code-text: var(--mercury);
--code-border: var(--line);
--code-function: #8a6a2d;
--code-keyword: #4b5563;
--code-string: #0a6a55;
--code-number: #2e5fb5;
--code-comment: #3f7a48;
--code-operator: #4b5563;
--code-type: #7a5a17;
--code-tag: #8a6a2d;
}
/* ---------- block-level structure ------------------------------------ */
.md-container {
font-family: "Space Grotesk", system-ui, sans-serif;
font-feature-settings: "ss01", "ss02";
color: var(--mercury);
font-size: 17.4px;
line-height: 1.65;
letter-spacing: -0.005em;
max-width: 912px;
}
.md-container > :first-child { margin-top: 0; }
.md-container > :last-child { margin-bottom: 0; }
.md-container * { overflow-wrap: break-word; }
/* headings — single weight, sizes step down */
.md-container h1,
.md-container h2,
.md-container h3,
.md-container h4,
.md-container h5,
.md-container h6 {
color: var(--mercury);
font-family: "Space Grotesk", system-ui, sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 1.4em 0 0.5em;
}
.md-container h1 { font-size: 26.4px; }
.md-container h2 { font-size: 22.8px; }
.md-container h3 { font-size: 19.2px; }
.md-container h4 { font-size: 17.4px; }
.md-container h5 { font-size: 15.6px; }
.md-container h6 { font-size: 14.4px; color: var(--lightGray); }
@media (max-width: 640px) {
.md-container h1 { font-size: 21.6px; }
.md-container h2 { font-size: 18px; }
.md-container h3,
.md-container h4,
.md-container h5,
.md-container h6 { font-size: 16.2px; }
}
.md-container p {
margin: 0 0 0.85em;
}
/* inline-level */
.md-container a {
color: var(--accent-strong, var(--mercury));
background: rgba(var(--accent-rgb), 0.10);
border: 1px solid rgba(var(--accent-rgb), 0.30);
padding: 0.5px 5px;
border-radius: 5px;
text-decoration: underline;
text-underline-offset: 2.4px;
text-decoration-color: rgba(var(--accent-rgb), 0.45);
transition: background 140ms, border-color 140ms, text-decoration-color 140ms, color 140ms;
}
.md-container a:hover {
background: rgba(var(--accent-rgb), 0.18);
border-color: rgba(var(--accent-rgb), 0.55);
text-decoration-color: var(--accent-strong, var(--mercury));
}
/* Image-only / media links shouldn't get a pill; the image is the affordance. */
.md-container a:has(> img),
.md-container a:has(> picture),
.md-container a:has(> svg) {
background: transparent;
border: none;
padding: 0;
text-decoration: none;
}
.md-container strong { font-weight: 600; color: var(--mercury); }
.md-container em { font-style: italic; color: var(--lightGray); }
.md-container em strong,
.md-container strong em { font-style: italic; font-weight: 600; color: var(--mercury); }
.md-container s {
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: var(--feather);
color: var(--silver);
}
/* lists — keep native markers, just tune spacing */
.md-container ol,
.md-container ul {
margin: 0.5em 0 0.9em;
padding-left: 1.8em;
}
.md-container li { margin: 0.18em 0; }
.md-container li > p { margin: 0.2em 0; }
/* blockquote */
.md-container blockquote {
margin: 0.85em 0;
padding: 9.6px 16.8px;
background: var(--whisper);
border-left: 3.6px solid var(--metallic-line);
border-radius: 0 7.2px 7.2px 0;
color: var(--lightGray);
}
.md-container blockquote > :first-child { margin-top: 0; }
.md-container blockquote > :last-child { margin-bottom: 0; }
/* horizontal rule */
.md-container hr {
border: 0;
height: 1px;
margin: 1.2em 0;
background: var(--line);
}
/* images */
.md-container img {
max-width: 100%;
border-radius: 9.6px;
border: 1px solid var(--line-faint);
}
/* ---------- inline code (excludes hljs blocks) ----------------------- */
.md-container code:not(.hljs) {
background: var(--surface-code);
color: var(--mercury);
padding: 0.15em 0.45em;
border-radius: 4.8px;
border: 1px solid var(--line-faint);
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.92em;
}
/* ---------- code blocks (hljs) ---------------------------------------
Chrome adapted from new_code/CodeBlock.html (lang badge + lang label
+ line count + copy button + line-number gutter). The token colors
inside the code body keep the project's hljs-* palette defined
below, not the designer's neutral palette — those felt washed out
for our theme. */
.cb {
margin: 1.2em 0 0.6em;
border-radius: 12px;
background: var(--surface-card);
border: 1px solid var(--line-strong);
box-shadow:
0 0 0 1px var(--shadow-card),
0 14px 28px -18px var(--shadow-strong);
overflow: hidden;
}
.cb-head {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 8px 8px 12px;
border-bottom: 1px solid var(--line-faint);
background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), transparent);
}
.cb-badge {
display: inline-grid;
place-items: center;
min-width: 28px;
height: 20px;
padding: 0 6px;
border-radius: 5px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--brownGrey);
background: rgba(var(--accent-rgb), 0.10);
border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.cb-name {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 11.5px;
color: var(--mountain);
letter-spacing: 0.04em;
}
.cb-spacer { flex: 1; }
.cb-lines {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
color: var(--mountain);
letter-spacing: 0.06em;
margin-right: 4px;
}
.cb-copy {
all: unset;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px 5px 8px;
border-radius: 6px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.04em;
color: var(--silver);
background: transparent;
transition: background 140ms, color 140ms;
}
.cb-copy:hover { background: var(--hover); color: var(--mercury); }
.cb-copy svg { width: 14px; height: 14px; }
.cb-copy .check,
.cb-copy .cb-copy-label-copied { display: none; }
.cb-copy.copied { color: var(--brownGrey); }
.cb-copy.copied .copy,
.cb-copy.copied .cb-copy-label-copy { display: none; }
.cb-copy.copied .check,
.cb-copy.copied .cb-copy-label-copied { display: inline-block; }
/* Body:
… …
No left padding on the pre — each .cb-line owns a 44px gutter that
absolute-positions a CSS counter for the line number. Counter is
rendered via ::before content, so it's NOT part of textContent
when copying. */
.cb-pre {
margin: 0;
padding: 12px 14px 14px 0;
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
line-height: 1.7;
color: var(--thirdWhite);
overflow-x: auto;
tab-size: 2;
-moz-tab-size: 2;
background: var(--surface-code);
}
.cb-pre code,
.cb-pre code.hljs {
display: block;
padding: 0;
margin: 0;
background: transparent;
border: 0;
border-radius: 0;
color: inherit;
counter-reset: cb-line;
}
.cb-line {
display: block;
counter-increment: cb-line;
padding-left: 44px;
position: relative;
min-height: 1.7em;
}
.cb-line::before {
content: counter(cb-line);
position: absolute;
left: 0;
top: 0;
width: 30px;
text-align: right;
color: var(--mountain);
opacity: 0.7;
user-select: none;
font-variant-numeric: tabular-nums;
}
/* Fallback for any bare hljs (no .md-code wrapper) — kept so anything
else emitting hljs HTML still renders sensibly. */
.hljs {
background: var(--code-bg);
color: var(--code-text);
border: 1px solid var(--code-border);
border-radius: 7.2px;
margin: 0.9em 0;
}
pre code.hljs { display: block; overflow-x: auto; padding: 12px 14.4px; font-size: 13.8px; }
code.hljs { padding: 3px 5px; }
/* hljs scrollbar — match the rest of the app's thin scrollbar style */
.md-code pre code.hljs::-webkit-scrollbar { height: 6px; width: 6px; }
.md-code pre code.hljs::-webkit-scrollbar-thumb {
background: var(--carbonFiber);
border-radius: 999px;
}
.md-code pre code.hljs::-webkit-scrollbar-track { background: transparent; }
/* hljs token colors — verbatim selectors from src_old, palette retargeted
at our --code-* vars above. */
.hljs-title,
.hljs-title.function_,
.hljs-title.class_ { color: var(--code-function); }
.hljs-keyword { color: var(--code-keyword); }
.hljs-variable,
.hljs-property { color: var(--code-text); }
.hljs-string { color: var(--code-string); }
.hljs-number,
.hljs-literal,
.hljs-boolean { color: var(--code-number); }
.hljs-comment { color: var(--code-comment); font-style: italic; }
.hljs-operator,
.hljs-punctuation { color: var(--code-operator); }
.hljs-params { color: var(--code-text); }
.hljs-type,
.hljs-built_in,
.hljs-constructor { color: var(--code-type); }
.hljs-tag { color: var(--code-tag); }
.hljs-attr { color: var(--code-text); }
.hljs-template-variable { color: var(--code-text); }
.hljs-regexp { color: var(--code-string); }
.hljs-meta { color: var(--code-operator); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
/* ---------- tables --------------------------------------------------- */
.md-table {
margin: 0.9em 0;
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: 9.6px;
overflow: hidden;
}
.md-table-scroll {
max-height: 26rem;
overflow: auto;
}
.md-container table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14.4px;
line-height: 1.5;
}
.md-container thead {
position: sticky;
top: 0;
z-index: 1;
background: var(--surface-elev);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.md-container thead th {
text-align: left;
font-weight: 500;
color: var(--lightGray);
padding: 8.4px 12px;
border-bottom: 1px solid var(--line);
background: var(--surface-elev);
}
.md-container tbody td {
padding: 6px 12px;
border-bottom: 1px solid var(--line-faint);
color: var(--mercury);
vertical-align: top;
}
.md-container tbody tr:last-child td { border-bottom: 0; }
.md-container tbody tr:nth-child(even) td { background: var(--hover); }
.md-container tbody tr:hover td { background: var(--hover-strong); }
/* ---------- katex ---------------------------------------------------- */
.md-container .katex { font-size: 1.05em; }
.md-container .katex-display {
margin: 0.8em 0;
overflow-x: auto;
overflow-y: hidden;
}
.md-container .katex-display > .katex {
display: inline-block;
white-space: nowrap;
}
/* scroll-margin-top lifts the scrollIntoView landing point below the
sticky top bar + its fade-out gradient (chat-view chrome is ~80px),
so heading anchors land clearly visible instead of tucked under the
chaos→transparent fade. Applies to anything addressable by a TOC. */
.md-container a[name],
.md-container [id] {
scroll-margin-top: 96px;
}
/* ---------- empty anchor (TOC jump target) -------------------------------
`
` and `
` are jump targets, not links
the user is meant to click — browsers render them as 0×0 spans which
read as visual lint. Replace the empty box with a small chain-link
sigil rendered via mask-image so it picks up theme color from
background-color. Bone by default, bronze on hover. Heading-wrapped
anchors that *contain text* are untouched (the :empty filter). */
.md-container a[name]:empty,
.md-container a[id]:empty {
display: inline-block;
width: 14px;
height: 14px;
margin: 0 0 0 6px;
vertical-align: middle;
background-color: var(--mountain);
-webkit-mask-image: url("data:image/svg+xml;utf8,
");
mask-image: url("data:image/svg+xml;utf8,
");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
opacity: 0.55;
transition: background-color 180ms, opacity 180ms, transform 180ms;
}
.md-container a[name]:empty:hover,
.md-container a[id]:empty:hover {
background-color: var(--accent);
opacity: 1;
transform: translateY(-0.5px);
}
/* ----------
keycap -------------------------------------------------
Same visual as the KeyChip used in Settings → Shortcuts. The cap palette
and drop shadow come from --kbd-* vars defined in chat.html, so light
and dark themes adapt automatically. */
.md-container kbd {
display: inline-grid;
place-items: center;
min-width: 30px;
height: 28px;
padding: 0 10px;
transform: translateY(-1.2px);
vertical-align: middle;
/* "Kbd Symbols" covers ⌫ ⌦ ⇥ ⌘ arrows etc.; JetBrains Mono handles
letters/digits. unicode-range on the symbol font keeps it from
claiming ASCII. */
font-family: "Kbd Symbols", "JetBrains Mono", monospace;
font-size: 13.2px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--kbd-cap-text);
background: linear-gradient(180deg, var(--kbd-cap-from) 0%, var(--kbd-cap-to) 100%);
border: 1px solid var(--kbd-cap-border);
border-radius: 6px;
box-shadow:
inset 0 1.2px 0 var(--kbd-cap-hi),
inset 0 -1.4px 0 var(--kbd-cap-lo),
var(--kbd-drop);
transition: transform 160ms, box-shadow 160ms;
}