.
Without these resets, the global
`p, .p { margin: 0 0 var(--space-4); }` from
colors_and_type.css would stack on top of the blocks'
own bottom margins. */
.hero-lead p, .positioning-statement p { margin: 0; }
.hero-lead p:not(:last-child),
.positioning-statement p:not(:last-child) { margin-bottom: 12px; }
.hero-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero-switch {
font-size: 14px;
line-height: 1.5;
color: var(--fg-muted);
margin: 16px 0 0;
}
/* min-height reserves the badge row so late or failed external
badge images don't shift the hero; the JS in baseof.html hides
a failed badge's link ([hidden]) instead of letting the browser
paint a broken-image icon. */
.hero-badges {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
margin-top: 22px;
min-height: 20px;
}
.hero-badges a { display: inline-flex; line-height: 0; }
.hero-badges a[hidden] { display: none; }
.hero-badges img { height: 20px; display: block; }
/* ========== POSITIONING BAND ========== */
/* The strip between the hero and the "Available on" channels:
a one-sentence scope statement (the content/_index.md body)
set as display type, then a quiet "Runs in" row of surface
links from the homepage front matter. The statement carries
the concrete rule scope so the hero lead never has to (see
docs/brand/messaging.md). Per the design system, the surface
links are plain text links — capsules/pills are status-only,
never navigation — and the serif-italic accent stays
reserved for the hero, so the statement renders in plain
sans. */
.positioning {
padding: 40px 0 32px;
border-bottom: 1px solid var(--border-subtle);
}
/* Paragraph margin resets live with .hero-lead's (same
rendered-Markdown wrapping). */
.positioning-statement {
max-width: 700px;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.015em;
color: var(--fg);
margin-bottom: 18px;
}
.positioning-engine {
display: flex;
align-items: baseline;
gap: 16px;
}
/* One mono-label recipe for both band rows: the positioning
strip's "Runs in" and the logos strip's "Available on". */
.positioning-label,
.logos-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.positioning-label { flex-shrink: 0; }
.positioning-surfaces {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
/* Quiet navigation links: solid underline on hover (the global
`a:hover` rule), accent color on hover like .logos-item. */
.positioning-surface {
font-size: 14px;
font-weight: 500;
color: var(--steel-700);
}
.positioning-surface:hover {
color: var(--accent);
}
/* ========== BUTTONS ========== */
.btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-sans); font-weight: 500; font-size: 14px;
padding: 9px 16px;
border-radius: 4px;
border: 1px solid transparent;
cursor: pointer;
line-height: 1.2;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast),
box-shadow var(--dur-fast),
transform var(--dur-fast);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--forge-600); color: #fff; box-shadow: var(--shadow-inset); }
.btn-primary:hover { background: var(--forge-700); }
.btn-secondary { background: var(--bg-raised); color: var(--steel-800); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--steel-500); background: var(--steel-50); }
.btn-ghost { background: transparent; color: var(--steel-700); }
.btn-ghost:hover { background: var(--steel-100); color: var(--fg); }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-mono { font-family: var(--font-mono); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* ========== SECTION HEADERS ========== */
.section { padding: 80px 0; border-bottom: 1px solid var(--border-subtle); }
.section-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--forge-600);
margin-bottom: 12px;
}
.section-title {
font-size: 38px; font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 14px;
}
.section-title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--forge-600);
letter-spacing: -0.02em;
}
.section-lead {
font-size: 17px; color: var(--fg-muted); line-height: 1.55;
max-width: 640px;
margin: 0 0 48px;
}
/* ========== FEATURE GRID — PILLAR LAYOUT ========== */
/* ── Pillar group ── */
.pillar { margin-bottom: 52px; }
.pillar:last-child { margin-bottom: 0; }
.pillar-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
/* steel-500: the lighter steel-300/400 pair sat below the 4.5:1
WCAG AA contrast bar at these tiny sizes. */
.pillar-num {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--steel-500);
flex-shrink: 0;
}
.pillar-name {
margin: 0;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--steel-500);
flex-shrink: 0;
}
.pillar-rule {
flex: 1;
height: 1px;
background: var(--steel-100);
}
/* ── Card grid ── */
/* Hairline separators: 1px gap over steel-100 background. */
.card-grid {
display: grid;
/* Default for any card count (the grid is data-driven): support
cards flow into as many ~240px columns as fit, so an unexpected
count never collapses to a single column. data-count 3/4 tune
this below; the lead always spans the full row (.card--lead). */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1px;
background: var(--steel-100);
border: 1px solid var(--steel-100);
border-radius: 12px;
overflow: hidden;
}
/* Tuned column counts for the real pillar sizes: 3 cards -> 2-col
support row, 4 cards -> 3-col. */
.card-grid[data-count="3"] {
grid-template-columns: repeat(2, 1fr);
}
.card-grid[data-count="4"] {
grid-template-columns: repeat(3, 1fr);
}
/* ── Card base ── */
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--canvas-raised);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: background 130ms ease;
}
.card:hover { background: var(--steel-50); color: inherit; text-decoration: none; }
.card:focus-visible {
outline: 2px solid var(--forge-500);
outline-offset: -2px;
z-index: 1;
}
/* Lead card: spans the full row (any count) and lays out horizontally. */
.card--lead {
grid-column: 1 / -1;
flex-direction: row;
align-items: stretch;
min-height: 300px;
}
/* 2px forge gradient accent on lead cards */
.card--lead::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(
90deg,
var(--forge-500) 0%,
var(--forge-300) 60%,
transparent 100%
);
z-index: 1;
}
/* ── Card internals ── */
.card-body {
display: flex;
flex-direction: column;
padding: 26px 26px 22px;
flex: 1;
min-height: 180px;
}
.card-body--lead {
padding: 36px 36px 32px 36px;
flex: 0 0 320px;
min-width: 240px;
position: relative;
}
/* The tile (.icon-tile + tint class, set by feature-grid.html)
supplies size, background, and glyph color; this class only
adds the card-local spacing. Glyphs keep their 18px/24px
attribute size inside the tile. */
.card-icon {
margin-bottom: 16px;
stroke-width: 1.5;
}
.card-body--lead .card-icon {
width: 36px;
height: 36px;
margin-bottom: 20px;
}
.card-icon svg { stroke-width: inherit; }
.card-title {
font-size: 14.5px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--steel-900);
margin-bottom: 7px;
}
.card-body--lead .card-title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.028em;
line-height: 1.18;
margin-bottom: 11px;
}
.card-desc {
font-size: 13px;
line-height: 1.58;
color: var(--steel-500);
margin: 0;
}
.card-body--lead .card-desc {
font-size: 15px;
line-height: 1.65;
color: var(--steel-600);
max-width: 30ch;
}
/* .rule-chip — the MDSxxx rule tags shown on feature cards. */
.rule-chip {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--steel-500);
background: var(--steel-50);
border: 1px solid var(--steel-100);
border-radius: 3px;
padding: 2px 6px;
line-height: 1.5;
}
.card-body--lead .rule-chip {
color: var(--forge-700);
background: var(--forge-50);
border-color: var(--forge-100);
}
.card-rules {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 14px;
}
.card-content { display: flex; flex-direction: column; flex: 1; }
/* steel-500 / forge-600 bases: the old steel-300 / forge-400 read
at ~2:1 against the card background — under the 4.5:1 WCAG AA
bar — and touch users never see the darker hover state. */
.card-more {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--steel-500);
margin-top: auto;
padding-top: 18px;
text-decoration: none;
transition: color 130ms ease;
}
.card:hover .card-more { color: var(--steel-700); }
.card-body--lead .card-more { color: var(--forge-600); font-size: 12.5px; }
.card--lead:hover .card-more { color: var(--forge-700); }
.card-more svg { transition: transform 130ms ease; }
.card:hover .card-more svg { transform: translateX(2px); }
/* ── Lead card media panel ── */
.card-media {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 24px 24px 24px 16px;
min-width: 200px;
background: var(--canvas-sunken);
}
.card-media--terminal {
background: #F0EDE8;
padding: 20px 20px 20px 12px;
}
.card-media--editor {
background: #F0EDE8;
align-items: flex-start;
padding-top: 24px;
}
.card-media--graph {
background: var(--steel-50);
}
.card-media--doc {
background: #F0EDE8;
}
.card-media--ci {
background: var(--steel-50);
}
.card--lead:hover .card-media {
filter: brightness(1.02);
}
/* ── Artifact frame — shared frame language ── */
/* Every artifact (real capture or mockup, dark or light) floats on its
tile with this one shadow — variants must not override it. The value
is the design system's screenshot float tier (--shadow-float). */
.artifact-frame {
width: 100%;
max-width: 440px;
border-radius: 9px;
box-shadow: var(--shadow-float);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Shared titlebar base */
.artifact-titlebar {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
flex-shrink: 0;
border-bottom: 1px solid;
}
.artifact-title {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.02em;
flex: 1;
text-align: center;
color: var(--steel-500);
}
/* Shared traffic dots */
.term-dots, .vscode-traffic, .graph-traffic, .doc-traffic, .ci-traffic {
display: flex;
gap: 5px;
flex-shrink: 0;
}
.term-dot, .vscode-dot, .graph-dot, .doc-dot, .ci-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
/* ── Artifact 1: Terminal (dark) ── */
.artifact-frame--terminal {
border: 1px solid #1A1F26;
background: #0F1419;
}
.artifact-titlebar--terminal {
background: #070A0D;
border-bottom-color: #1A1F26;
}
/* The near-black terminal bar needs a lighter title than the default
steel-500 used on the light artifact bars, for legible contrast. */
.artifact-titlebar--terminal .artifact-title { color: var(--term-fg-dim); }
.term-dot-r { background: #FF6B5C; }
.term-dot-y { background: #E58233; }
.term-dot-g { background: #5DC58C; }
.artifact-body--terminal {
padding: 14px 16px 16px;
overflow: hidden;
background: #0F1419;
}
/* The terminal body is a real `mdsmith check -> fix -> check` run rendered
to SVG by scripts/gen-feature-terminal.sh; it sits on the dark frame. */
.term-shot { display: block; width: 100%; height: auto; }
/* A real screenshot framed like the other artifacts — e.g. a VS Code
capture dropped at static/img/features/editor.png. */
.artifact-frame--shot {
border: 1px solid var(--steel-200);
background: #FFFFFF;
}
/* A real screenshot floats framed on the tile's light background (like
the terminal), at its natural aspect — no cropping. */
.artifact-shot { display: block; width: 100%; height: auto; }
/* ── Artifact 2: VS Code editor (light) ── */
.artifact-frame--editor {
border: 1px solid var(--steel-200);
background: #FFFFFF;
}
.artifact-titlebar--editor {
background: #F3F0EC;
border-bottom-color: #E0DDD8;
padding: 8px 12px;
}
.vscode-dot-r { background: #FF5F57; }
.vscode-dot-y { background: #FFBD2E; }
.vscode-dot-g { background: #28CA42; }
.artifact-title--editor {
color: #5C6773;
font-size: 10px;
}
.vscode-body {
display: flex;
flex: 1;
overflow: hidden;
background: #FFFFFF;
min-height: 180px;
}
/* Activity bar — slim left strip */
.vscode-activity-bar {
width: 34px;
background: #F3F0EC;
border-right: 1px solid #E0DDD8;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0;
gap: 4px;
flex-shrink: 0;
}
.vscode-ab-icon {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #8A93A0;
cursor: pointer;
}
.vscode-ab-active { color: #D9651D; }
.vscode-ab-icon svg { display: block; }
/* Main editor pane */
.vscode-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Tab bar */
.vscode-tabs {
display: flex;
background: #F3F0EC;
border-bottom: 1px solid #E0DDD8;
flex-shrink: 0;
}
.vscode-tab {
font-family: var(--font-mono);
font-size: 10px;
padding: 6px 12px 5px;
color: #8A93A0;
border-right: 1px solid #E0DDD8;
white-space: nowrap;
}
.vscode-tab--active {
background: #FFFFFF;
color: #0F1419;
border-bottom-color: #FFFFFF;
border-top: 1.5px solid #D9651D;
margin-top: -0.5px;
}
/* Editor area with gutter */
.vscode-editor-area {
display: flex;
flex: 1;
overflow: hidden;
position: relative;
}
.vscode-gutter {
display: flex;
flex-direction: column;
padding: 8px 8px 8px 4px;
min-width: 28px;
background: #FFFFFF;
border-right: 1px solid #EAECEF;
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.7;
color: #B4BBC4;
text-align: right;
flex-shrink: 0;
user-select: none;
}
.vscode-gutter-active { color: #5C6773; font-weight: 600; }
.vscode-code-area {
flex: 1;
padding: 8px 10px;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.7;
color: #0F1419;
overflow: hidden;
position: relative;
}
.vscode-line { display: block; white-space: nowrap; }
.vscode-line--error { background: rgba(229,72,77,0.06); }
/* VS Code syntax */
.vc-text { color: #3F4A57; }
.vc-url { color: #2563A8; }
/* Wavy underline squiggle */
.vc-squiggle-red {
text-decoration: underline wavy #E5484D;
text-underline-offset: 2px;
text-decoration-thickness: 1.5px;
}
/* Hover popup */
.vscode-hover-popup {
position: absolute;
top: 75px;
left: 28px;
right: 4px;
background: #FFFFFF;
border: 1px solid #D6DAE0;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(15,20,25,0.14), 0 1px 4px rgba(15,20,25,0.08);
overflow: hidden;
z-index: 5;
}
.vscode-hover-header {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 10px 5px;
border-bottom: 1px solid #EAECEF;
font-size: 10.5px;
}
.vscode-lightbulb { font-size: 11px; }
.vscode-hover-rule {
font-family: var(--font-mono);
font-size: 10px;
color: #B98AE8;
font-weight: 600;
}
.vscode-hover-msg { color: #3F4A57; font-size: 10.5px; flex: 1; }
.vscode-hover-actions { padding: 5px 10px 7px; }
.vscode-quickfix-label {
font-size: 10px;
font-weight: 600;
color: var(--forge-600);
display: block;
margin-bottom: 3px;
}
.vscode-quickfix-item {
display: block;
font-family: var(--font-mono);
font-size: 10px;
color: #3F4A57;
padding: 2px 4px;
border-radius: 3px;
background: var(--forge-50);
border: 1px solid var(--forge-100);
margin-bottom: 2px;
}
.vscode-quickfix-dim {
background: var(--steel-50);
border-color: var(--steel-100);
color: #8A93A0;
}
/* Status bar */
.vscode-status-bar {
height: 20px;
background: #D9651D;
display: flex;
align-items: center;
padding: 0 10px;
gap: 12px;
flex-shrink: 0;
}
.vscode-status-problems {
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(255,255,255,0.92);
font-weight: 500;
}
.vscode-status-lang, .vscode-status-ext {
font-family: var(--font-mono);
font-size: 9px;
color: rgba(255,255,255,0.7);
}
.vscode-status-lang { margin-left: auto; }
.vscode-status-ext { margin-left: 8px; }
/* ── Artifact 3: Dependency graph (light) ── */
.artifact-frame--graph {
border: 1px solid var(--steel-200);
background: #FFFFFF;
}
.artifact-titlebar--graph {
background: var(--steel-50);
border-bottom-color: var(--steel-100);
padding: 8px 12px;
}
.graph-dot-r { background: #FF5F57; }
.graph-dot-y { background: #FFBD2E; }
.graph-dot-g { background: #28CA42; }
.artifact-title--graph {
color: #5C6773;
font-size: 10px;
}
.artifact-body--graph {
padding: 12px;
background: #FFFFFF;
overflow: hidden;
}
.graph-svg {
width: 100%;
height: auto;
display: block;
min-height: 160px;
}
/* ── Artifact 4: Document / TOC (light) ── */
.artifact-frame--doc {
border: 1px solid var(--steel-200);
background: #FFFFFF;
}
.artifact-titlebar--doc {
background: #F3F0EC;
border-bottom-color: #E0DDD8;
padding: 8px 12px;
}
.doc-dot-r { background: #FF5F57; }
.doc-dot-y { background: #FFBD2E; }
.doc-dot-g { background: #28CA42; }
.artifact-title--doc { color: #5C6773; font-size: 10px; }
.artifact-body--doc {
background: #FFFFFF;
overflow: hidden;
}
.doc-file {
padding: 6px 0;
position: relative;
}
.doc-line {
display: flex;
align-items: baseline;
min-height: 21px;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.7;
}
.doc-line--added {
background: rgba(45,142,90,0.08);
}
.doc-gutter {
width: 26px;
min-width: 26px;
text-align: right;
padding-right: 8px;
font-size: 10px;
font-family: var(--font-mono);
user-select: none;
flex-shrink: 0;
}
.doc-gutter-dim { color: #B4BBC4; }
.doc-gutter-add { color: #2A8E5A; font-weight: 700; }
.doc-code { padding: 0 10px; flex: 1; overflow: hidden; }
.doc-blank { color: #EAECEF; }
/* Doc syntax */
.doc-h2 { color: #0F1419; font-weight: 600; }
.doc-h3 { color: #3F4A57; font-weight: 600; }
.doc-directive { color: #D9651D; font-style: italic; font-size: 10px; }
.doc-list-item { color: #3F4A57; }
.doc-link { color: #2563A8; }
.doc-annotation {
font-size: 10px;
color: #2A8E5A;
background: rgba(45,142,90,0.07);
border-top: 1px solid rgba(45,142,90,0.15);
padding: 6px 10px 6px 34px;
font-family: var(--font-mono);
}
.doc-annotation code {
font-family: var(--font-mono);
font-size: 10px;
background: rgba(45,142,90,0.12);
padding: 1px 4px;
border-radius: 3px;
color: #2A8E5A;
}
/* ── Artifact 5: CI checks (GitHub Actions light style) ── */
.artifact-frame--ci {
border: 1px solid var(--steel-200);
background: #FFFFFF;
}
.artifact-titlebar--ci {
background: var(--steel-50);
border-bottom-color: var(--steel-100);
padding: 8px 12px;
}
.ci-dot-r { background: #FF5F57; }
.ci-dot-y { background: #FFBD2E; }
.ci-dot-g { background: #28CA42; }
.artifact-title--ci { color: #5C6773; font-size: 10px; }
.artifact-body--ci {
padding: 12px 14px;
background: #FFFFFF;
overflow: hidden;
}
.ci-checks-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--steel-100);
}
.ci-workflow-name {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
color: #0F1419;
}
.ci-all-pass {
font-size: 10px;
color: #2A8E5A;
font-weight: 600;
}
.ci-check-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.ci-check {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-radius: 5px;
background: var(--steel-50);
border: 1px solid var(--steel-100);
}
.ci-check--pass { border-left: 2.5px solid #2A8E5A; }
.ci-check-icon { flex-shrink: 0; display: flex; align-items: center; }
.ci-check-name {
font-family: var(--font-mono);
font-size: 10.5px;
color: #0F1419;
flex: 1;
}
.ci-check-time {
font-family: var(--font-mono);
font-size: 9.5px;
color: #8A93A0;
}
/* Gate step */
.ci-gate-step {
background: var(--steel-50);
border: 1px solid var(--steel-100);
border-radius: 6px;
overflow: hidden;
}
.ci-step-header {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--steel-100);
border-bottom: 1px solid var(--steel-200);
}
.ci-step-arrow { color: #5C6773; font-size: 9px; }
.ci-step-name {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: #3F4A57;
}
.ci-step-body { padding: 8px 10px; }
.ci-step-cmd {
font-family: var(--font-mono);
font-size: 10.5px;
color: #3F4A57;
margin-bottom: 5px;
}
.ci-dollar { color: var(--forge-500); margin-right: 4px; }
.ci-arg { color: #F4B860; }
.ci-step-output {
display: flex;
align-items: center;
gap: 8px;
}
.ci-pass-badge {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
color: #FFFFFF;
background: #2A8E5A;
padding: 1px 7px;
border-radius: 3px;
letter-spacing: 0.05em;
}
.ci-step-dim {
font-family: var(--font-mono);
font-size: 10px;
color: #5C6773;
}
@media (max-width: 960px) {
/* Tablet: a count=4 pillar's 3 support columns collapse to 2.
Wider desktops keep the base 3-column layout (clean row of 3);
<=880px collapses to a single column below. */
.card-grid[data-count="4"] {
grid-template-columns: repeat(2, 1fr);
}
.card-body--lead {
flex: 0 0 300px;
}
}
/* ========== INSTALL LIST ========== */
/* Stacked, always-visible channel list (replaces the old tabs:
every channel is visible so a reader finds theirs without
clicking). */
.install-list {
background: var(--steel-900);
border: 1px solid var(--steel-800);
border-radius: var(--radius-md);
overflow: hidden;
}
.install-row {
display: flex; align-items: center; gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid var(--steel-800);
}
.install-row:last-child { border-bottom: 0; }
.install-row:hover { background: var(--steel-950); }
.install-label {
flex: 0 0 90px;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--forge-400);
}
/* The label links to the channel's registry / marketplace page so
editor users reach the storefront's install button and anyone can
check provenance. Keep the forge-400 look on the dark list — the
global link color (forge-700) would be too dark there. */
a.install-label { text-decoration: none; }
a.install-label:hover { color: var(--forge-300); text-decoration: underline; }
.install-row .install-cmd {
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-mono);
font-size: 13.5px;
white-space: nowrap;
overflow-x: auto;
background: transparent;
border: 0;
padding: 0;
border-radius: 0;
}
.install-body {
padding: 18px 20px;
font-family: var(--font-mono);
font-size: 13.5px;
line-height: 1.5;
background: var(--steel-900);
border: 1px solid var(--steel-800);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.install-cmd { color: var(--term-fg); }
.install-cmd .prompt { color: var(--term-fg-dim); }
.install-cmd .cmd { color: var(--forge-300); }
.install-cmd .arg { color: var(--term-fg); }
.install-copy {
background: transparent;
border: 1px solid var(--steel-700);
color: var(--steel-300);
padding: 5px 10px; font-size: 11.5px; font-family: var(--font-mono);
border-radius: 4px; cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.install-copy:hover { color: var(--canvas); border-color: var(--steel-500); }
.install-copy.is-copied { color: var(--term-ok); border-color: var(--term-ok); }
/* Install picker: platform-tag filter chips above the channel
list. Chips toggle .install-row[hidden]; with JS off every row
stays visible and the chips are inert. */
.install-picker { display: flex; flex-direction: column; gap: 14px; }
.install-filters { display: flex; flex-wrap: wrap; gap: 8px; }
/* Chips sit on the light section background, not on the dark
install list, so their text must read against --bg (canvas).
Only the text changed: the old --steel-300 / --canvas washed out
on the light canvas, so default/hover text now uses --fg-muted /
--fg. The borders keep their original steel-700 / steel-500
tokens (both clear the 3:1 non-text-contrast bar on canvas). The
active state moves to the site's .chip.is-on treatment (forge-700
on forge-50, ~7:1) for a consistent, legible "selected" look. */
.install-filter {
background: transparent;
border: 1px solid var(--steel-700);
color: var(--fg-muted);
padding: 5px 12px; font-size: 12px; font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: 0.05em;
border-radius: 999px; cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.install-filter:hover { color: var(--fg); border-color: var(--steel-500); }
.install-filter.is-active {
color: var(--forge-700); border-color: var(--forge-500); background: var(--forge-50);
}
.install-row[hidden] { display: none; }
/* On narrow screens the single-row layout truncated commands to a
few characters ("$ go install g…") with no visible affordance —
the overflow-x scroll is invisible until touched. Wrap instead:
label and copy button share the top line, the command drops to
a full-width line below (still nowrap + scrollable for the
longest curl/unzip lines). */
@media (max-width: 560px) {
.install-row { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
.install-label { flex: 1 1 auto; }
.install-row .install-cmd { order: 3; flex-basis: 100%; }
}
/* Sits on the light section background; --fg-muted reads at ~8.4:1. */
.install-note {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--fg-muted);
}
/* ========== TERMINAL ========== */
.term {
background: var(--steel-900);
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--steel-800);
box-shadow: var(--shadow-lg);
}
.term-bar {
height: 32px;
background: var(--steel-950);
display: flex; align-items: center; padding: 0 12px;
gap: 6px;
border-bottom: 1px solid var(--steel-800);
}
.term-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--steel-700); }
.term-bar .dot.r { background: #FF6B5C; }
.term-bar .dot.y { background: var(--forge-400); }
.term-bar .dot.g { background: var(--term-ok); }
.term-bar .title { margin-left: auto; margin-right: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--term-fg-dim); }
.term-body {
padding: 16px 18px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
color: var(--term-fg);
min-height: 320px;
}
.term-prompt { color: var(--term-fg-dim); }
.term-cmd { color: var(--forge-400); }
.term-flag { color: var(--term-key); }
.term-arg { color: var(--term-fg); }
.term-ok { color: var(--term-ok); }
.term-err { color: var(--term-err); }
.term-warn { color: var(--term-warn); }
.term-dim { color: var(--term-fg-dim); }
.term-key { color: var(--term-key); }
.term-str { color: var(--term-string); }
.term-caret {
display: inline-block; width: 8px; height: 16px;
background: var(--term-caret); vertical-align: middle;
animation: blink 1s steps(1) infinite;
margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
/* ========== DIAGNOSTIC BLOCK ========== */
.diag {
background: var(--steel-900);
color: var(--term-fg);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
padding: 12px 16px;
border-radius: var(--radius-md);
border-left: 3px solid var(--err-500);
}
.diag.is-ok { border-left-color: var(--ok-500); }
.diag.is-warn { border-left-color: var(--warn-500); }
/* ========== TABLES ========== */
.tbl {
width: 100%;
border-collapse: collapse;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
font-size: 14px;
}
.tbl thead th {
background: var(--steel-50);
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--steel-700);
text-align: left;
padding: 10px 14px;
border-bottom: 1px solid var(--border-strong);
}
.tbl tbody td {
padding: 10px 14px;
border-bottom: 1px solid var(--border-subtle);
color: var(--fg-muted);
vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--canvas); }
.tbl .mono { font-family: var(--font-mono); font-size: 13px; color: var(--forge-600); }
/* ========== DOCS LAYOUT ========== */
.docs-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 48px;
padding: 32px 0 80px;
max-width: 1180px;
margin: 0 auto;
padding-left: 32px;
padding-right: 32px;
}
.docs-side {
position: sticky;
top: 80px;
align-self: flex-start;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
/* The collapse toggle is a mobile-only affordance: on desktop
the sidebar is always shown, so the button stays hidden and
the nav renders unconditionally. */
.docs-side-toggle { display: none; }
.docs-side-nav { display: block; }
.docs-side-group { margin-bottom: 22px; }
.docs-side-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-subtle);
margin: 0 0 8px;
padding: 0 8px;
}
.docs-side-link {
display: block;
padding: 5px 10px;
font-size: 13.5px;
color: var(--steel-700);
border-radius: 3px;
line-height: 1.4;
border-left: 2px solid transparent;
margin-left: 6px;
}
.docs-side-link:hover { color: var(--fg); text-decoration: none; background: var(--steel-50); }
.docs-side-link.is-active {
color: var(--forge-700);
border-left-color: var(--forge-500);
background: var(--forge-50);
font-weight: 500;
}
.docs-main { min-width: 0; }
.docs-breadcrumb { font-size: 13px; color: var(--fg-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.docs-breadcrumb .sep { color: var(--steel-500); font-family: var(--font-mono); }
.docs-prose h1 { font-size: 38px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 12px; line-height: 1.1; }
.docs-prose h2 {
font-size: 24px; font-weight: 600; letter-spacing: -0.015em;
margin: 40px 0 10px; line-height: 1.2;
padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.docs-prose h3 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
.docs-prose p { font-size: 15px; line-height: 1.7; margin: 0 0 14px; color: var(--steel-800); }
.docs-prose ul { margin: 0 0 16px; padding-left: 20px; }
.docs-prose li { font-size: 15px; line-height: 1.7; color: var(--steel-800); margin-bottom: 4px; }
.docs-prose code { font-family: var(--font-mono); font-size: 13px; background: var(--code-bg); padding: 1px 5px; border-radius: 2px; border: 1px solid var(--code-border); color: var(--steel-800); }
.docs-prose pre {
background: var(--steel-900); color: var(--term-fg);
padding: 14px 16px; border-radius: var(--radius-md);
font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
overflow-x: auto; margin: 16px 0;
}
.docs-prose pre code { background: none; color: inherit; padding: 0; border: 0; }
.docs-prose .callout {
background: var(--forge-50); border: 1px solid var(--forge-100);
border-left: 3px solid var(--forge-500);
padding: 14px 18px; border-radius: var(--radius-md);
margin: 16px 0; font-size: 14px; color: var(--forge-800);
}
.docs-prose .callout .label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--forge-700); display: block; margin-bottom: 6px; }
/* ========== RULES TABLE ========== */
.rules-toolbar {
display: flex; align-items: center; gap: 12px;
padding: 20px 0;
flex-wrap: wrap;
}
.rules-filter {
flex: 1; min-width: 240px;
padding: 8px 12px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--bg-raised);
font-family: var(--font-sans);
font-size: 14px;
color: var(--fg);
}
.rules-filter:focus { outline: none; border-color: var(--forge-500); box-shadow: var(--shadow-focus); }
.rules-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 11px;
padding: 3px 8px; border-radius: 3px;
border: 1px solid var(--border-strong);
background: var(--bg-raised);
color: var(--steel-700);
cursor: pointer;
}
.chip:hover { border-color: var(--steel-400); }
.chip.is-on { border-color: var(--forge-500); background: var(--forge-50); color: var(--forge-700); }
.pill {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
padding: 2px 8px; border-radius: 999px; line-height: 1.55;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill.is-stable { background: #DDF0E5; color: #1f5e3e; }
.pill.is-stable .dot { background: #2A8E5A; }
.pill.is-experimental { background: var(--forge-50); color: var(--forge-700); }
.pill.is-experimental .dot { background: var(--forge-500); }
.pill.is-planned { background: var(--steel-100); color: var(--steel-700); }
.pill.is-planned .dot { background: var(--steel-400); }
/* ========== PLAYGROUND ========== */
.pg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
height: 600px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-raised);
}
.pg-pane { display: flex; flex-direction: column; min-width: 0; }
.pg-pane + .pg-pane { border-left: 1px solid var(--border); }
.pg-head {
height: 38px;
background: var(--steel-50);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 14px;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-subtle);
}
.pg-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--forge-500); }
.pg-editor {
flex: 1;
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
border: 0;
outline: none;
resize: none;
color: var(--steel-900);
background: var(--bg-raised);
}
.pg-diag-list {
flex: 1;
overflow-y: auto;
background: var(--steel-900);
padding: 12px 0;
}
.pg-diag-row {
display: grid;
grid-template-columns: 80px 80px 1fr;
gap: 10px;
padding: 8px 16px;
font-family: var(--font-mono);
font-size: 12.5px;
border-bottom: 1px solid var(--steel-800);
color: var(--term-fg);
}
.pg-diag-row .loc { color: var(--term-key); }
.pg-diag-row .rule { color: var(--term-err); font-weight: 500; }
.pg-diag-row .msg { color: var(--term-fg); }
.pg-diag-row.is-clean { color: var(--term-ok); padding: 24px 16px; text-align: center; grid-template-columns: 1fr; }
/* ========== COMPARE ========== */
.cmp-cell { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }
.cmp-cell.yes { background: #F0F8F2; color: #1f5e3e; }
.cmp-cell.no { color: var(--fg-subtle); }
.cmp-cell.partial { background: #FCEFD2; color: #7a4a07; }
/* ========== ICON TILES ========== */
/* Colored icon containers from the design system. The --tint-*
triads cycle across a grid (never two adjacent tiles in the
same hue); bare glyphs in prose and nav keep currentColor. */
.icon-tile {
width: 32px; height: 32px;
flex: none;
border-radius: 6px;
border: 1px solid transparent;
display: inline-flex; align-items: center; justify-content: center;
}
.icon-tile.is-ember { background: var(--tint-ember-bg); color: var(--tint-ember-fg); border-color: var(--tint-ember-line); }
.icon-tile.is-sky { background: var(--tint-sky-bg); color: var(--tint-sky-fg); border-color: var(--tint-sky-line); }
.icon-tile.is-moss { background: var(--tint-moss-bg); color: var(--tint-moss-fg); border-color: var(--tint-moss-line); }
.icon-tile.is-amber { background: var(--tint-amber-bg); color: var(--tint-amber-fg); border-color: var(--tint-amber-line); }
.icon-tile.is-clay { background: var(--tint-clay-bg); color: var(--tint-clay-fg); border-color: var(--tint-clay-line); }
.icon-tile.is-slate { background: var(--tint-slate-bg); color: var(--tint-slate-fg); border-color: var(--tint-slate-line); }
.icon-tile.is-forge-grad { background: var(--grad-forge); color: #fff; border-color: var(--forge-600); }
/* ========== BENTO ========== */
/* 6-col feature bento from the design system. Cells rest on
bg-raised + 1px border and lift to shadow-md on hover; at most
one is-glow and one is-dark cell per bento. */
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.bento-card {
grid-column: span 2;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
display: flex; flex-direction: column; gap: 10px;
position: relative;
overflow: hidden;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.bento-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.bento-card.is-wide { grid-column: span 3; }
.bento-card.is-hero { grid-column: span 4; }
.bento-card.is-full { grid-column: span 6; }
.bento-card.is-tall { grid-row: span 2; }
.bento-card h3 { font-size: 16px; font-weight: 600; margin: 2px 0 0; letter-spacing: -0.01em; }
.bento-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; margin: 0; }
.bento-card .rule-chip {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: 11px;
background: var(--steel-50); border: 1px solid var(--border-strong);
padding: 1px 6px; border-radius: 3px; color: var(--steel-700);
align-self: flex-start;
}
.bento-card.is-glow::before {
content: "";
position: absolute; inset: 0;
background: var(--grad-glow);
pointer-events: none;
}
.bento-card.is-glow > * { position: relative; }
.bento-card.is-dark { background: var(--grad-steel); border-color: var(--steel-800); color: var(--term-fg); }
.bento-card.is-dark h3 { color: var(--canvas); }
.bento-card.is-dark p { color: var(--steel-400); }
.bento-card.is-dark .icon-tile { background: var(--steel-800); color: var(--forge-300); border-color: var(--steel-700); }
@media (max-width: 880px) {
.bento { grid-template-columns: 1fr; }
.bento-card, .bento-card.is-wide, .bento-card.is-hero,
.bento-card.is-full, .bento-card.is-tall { grid-column: auto; grid-row: auto; }
}
/* ========== SCREENSHOT SHOWCASE ========== */
/* A stage cell with a floating window/screenshot on it — the
feature-section motif from the design system. Put .shot-stage
on the cell, .shot on the window (composes with the terminal
mock as class="term shot"; works on plain too). */
.shot-stage {
position: relative;
display: flex; align-items: center; justify-content: center;
padding: 48px;
background: var(--bg-raised);
overflow: hidden;
}
.shot-stage.is-glow::before {
content: "";
position: absolute; inset: 0;
background: var(--grad-glow);
pointer-events: none;
}
.shot-stage.is-ember { background: var(--grad-ember); }
.shot-stage > * { position: relative; }
.shot {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-float);
max-width: 100%;
}
.shot.is-sm { box-shadow: var(--shadow-float-sm); }
.shot > img { display: block; width: 100%; border-radius: inherit; }
/* ========== LOGOS STRIP ========== */
.logos {
padding: 40px 0;
border-bottom: 1px solid var(--border-subtle);
}
.logos-strip {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 32px;
filter: grayscale(1); opacity: 0.7;
}
/* .logos-label shares the mono-label recipe declared in the
POSITIONING BAND section. */
.logos-item { font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--steel-700); letter-spacing: -0.01em; }
.logos-item:hover { color: var(--accent); text-decoration: none; }
.logos-strip:hover { filter: none; opacity: 1; }
/* ========== FOOTER ========== */
.footer {
padding: 56px 0 36px;
border-top: 1px solid var(--border);
background: var(--canvas-sunken);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 32px;
padding-bottom: 32px;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
}
.footer-col h4 {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-subtle);
margin: 0 0 12px;
}
.footer-col a { display: block; font-size: 14px; color: var(--steel-700); padding: 3px 0; }
.footer-col a:hover { color: var(--fg); }
.footer-tagline { font-size: 14px; color: var(--fg-muted); line-height: 1.6; max-width: 320px; margin: 14px 0 0; }
.footer-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-subtle); font-family: var(--font-mono); }
/* ========== HERO DEMO ========== */
.hero-demo {
margin: 0;
background: var(--steel-900);
border: 1px solid var(--steel-800);
border-radius: var(--radius-md);
overflow: hidden;
/* Screenshot float tier — reserved for screenshots, never UI
chrome (see docs/development/design-system.md). */
box-shadow: var(--shadow-float);
}
.hero-demo-bar {
height: 32px;
background: var(--steel-950);
display: flex; align-items: center; padding: 0 12px;
gap: 6px;
border-bottom: 1px solid var(--steel-800);
}
.hero-demo-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--steel-700); }
.hero-demo-bar .dot.r { background: #FF6B5C; }
.hero-demo-bar .dot.y { background: var(--forge-400); }
.hero-demo-bar .dot.g { background: var(--term-ok); }
.hero-demo-title {
margin-left: auto; margin-right: auto;
font-family: var(--font-mono); font-size: 11.5px; color: var(--term-fg-dim);
}
.hero-demo-img { display: block; width: 100%; height: auto; }
/* ========== CODE BLOCKS ========== */
/* The codeblock render hook wraps Chroma output in .codeblock.
Chroma (noClasses) writes its own background-color inline on
the
; pin it to the site's steel-900 panel so the dark
github-dark token colors keep full contrast and the panel
shade matches every other code surface. */
.codeblock { margin: 16px 0; }
.codeblock pre,
.docs-prose .codeblock pre,
.codeblock .highlight pre {
background: var(--steel-900) !important;
color: var(--term-fg);
padding: 14px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--steel-800);
overflow-x: auto;
margin: 0;
}
.codeblock pre code { background: none; border: 0; padding: 0; color: inherit; }
/* ========== DOCS INDEX ========== */
.docs-index {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
margin: 24px 0;
}
.docs-index-group { background: var(--bg-raised); padding: 20px 22px; }
.docs-index-group h2 {
font-size: 15px; font-weight: 600; margin: 0 0 6px;
border: 0; padding: 0;
font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--fg-subtle);
}
.docs-index-group h2 a { color: var(--fg-subtle); }
.docs-index-group h2 a:hover { color: var(--accent); }
.docs-index-summary { font-size: 13px; color: var(--fg-muted); margin: 0 0 10px; }
.docs-index-list { list-style: none; margin: 0; padding: 0; }
.docs-index-list li { font-size: 14px; line-height: 1.5; margin: 0 0 7px; color: var(--steel-800); }
.docs-index-list a { font-weight: 500; }
.docs-index-desc { color: var(--fg-subtle); font-weight: 400; }
.docs-index-flat { margin-top: 16px; }
.docs-side-home {
display: block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--fg-subtle);
padding: 4px 8px 4px 0;
margin-bottom: 14px;
}
.docs-side-home:hover, .docs-side-home.is-active { color: var(--accent); text-decoration: none; }
a.docs-side-title {
display: block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-subtle);
margin: 0 0 8px;
padding: 0 8px;
}
a.docs-side-title:hover, a.docs-side-title.is-active { color: var(--accent); text-decoration: none; }
.docs-side-sub {
margin-top: 8px;
font-weight: 600;
color: var(--steel-600);
}
.docs-side-nested { padding-left: 18px; font-size: 13px; color: var(--steel-500); }
/* ========== RULE PAGES ========== */
.rule-meta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 16px;
}
.rule-id {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--fg-subtle);
letter-spacing: 0.04em;
}
.rule-source-link {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--border-subtle);
font-size: 13px;
}
.rule-source-link a {
display: inline-flex; align-items: center; gap: 6px;
color: var(--fg-subtle);
}
.rule-source-link a:hover { color: var(--accent); }
/* Category chips — each maps to a distinct palette pair with
contrast ≥ 4.5:1 against its background. */
.chip.cat-heading { background: var(--steel-100); border-color: var(--steel-300); color: var(--steel-700); }
.chip.cat-whitespace { background: var(--steel-50); border-color: var(--steel-300); color: var(--steel-700); }
.chip.cat-code { background: var(--forge-50); border-color: var(--forge-200); color: var(--forge-700); }
.chip.cat-link { background: #D9E6F5; border-color: #2563A8; color: #1a4780; }
.chip.cat-prose { background: #DDF0E5; border-color: #2A8E5A; color: #1f5e3e; }
.chip.cat-structural { background: #FCEFD2; border-color: #C77A0C; color: #7a4a07; }
.chip.cat-directive { background: var(--forge-50); border-color: var(--forge-300); color: var(--forge-700); }
.chip.cat-list { background: var(--steel-100); border-color: var(--steel-300); color: var(--steel-700); }
.chip.cat-table { background: #D9E6F5; border-color: #2563A8; color: #1a4780; }
.chip.cat-accessibility { background: #DDF0E5; border-color: #2A8E5A; color: #1f5e3e; }
.chip.cat-line { background: var(--steel-50); border-color: var(--steel-300); color: var(--steel-700); }
/* Auto-linked rule references (render-codespan hook). Keep the
code-span look; add a subtle accent + underline so it reads
as a link without losing the monospace token styling. */
a.rule-ref { text-decoration: none; }
a.rule-ref code {
color: var(--accent);
border-color: var(--forge-200);
cursor: pointer;
}
a.rule-ref:hover code { text-decoration: underline; }
/* ========== UTIL ========== */
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.mono { font-family: var(--font-mono); }
@media (max-width: 880px) {
.hero-grid { grid-template-columns: 1fr; gap: 36px; }
.hero h1 { font-size: 44px; }
/* Feature grid — every pillar collapses to a single column. The
data-count variants are listed too: the tuned 2/3-column templates
carry higher specificity, so a bare `.card-grid` would not override
them here. */
.card-grid,
.card-grid[data-count="3"],
.card-grid[data-count="4"] {
grid-template-columns: 1fr;
border-radius: 8px;
}
.card-grid .card--lead {
grid-column: auto;
}
/* Lead card: artifact on top, body below */
.card--lead {
flex-direction: column-reverse;
}
.card-body--lead {
padding: 28px 24px 24px;
flex: none;
min-width: 0;
width: 100%;
}
.card-body--lead .card-desc { max-width: none; }
.card-body--lead .card-title { font-size: 18px; }
.card-media {
min-height: 180px;
min-width: 0;
width: 100%;
border-bottom: 1px solid var(--steel-100);
padding: 16px;
}
.card-media--terminal { padding: 12px; }
.artifact-frame { max-width: 100%; }
/* Scale down VS Code artifact */
.vscode-code-area { font-size: 9.5px; }
.vscode-gutter { font-size: 9px; }
.vscode-hover-popup { position: static; margin-top: 4px; }
/* Graph SVG — full width */
.graph-svg { height: 160px; }
.pillar { margin-bottom: 36px; }
.card-body { padding: 22px 20px 18px; }
.docs-index { grid-template-columns: 1fr; }
.docs-grid { grid-template-columns: 1fr; gap: 20px; }
/* Standard mobile pattern: the long docs nav collapses
behind a disclosure so page content sits directly under
the breadcrumb instead of below the entire tree. The
aside shrinks to just the toggle until expanded. */
.docs-side {
position: static;
max-height: none;
overflow: visible;
}
/* Progressive enhancement: the collapse is JS-only. Without
the `html.js` flag (script disabled or failed) the toggle
stays hidden and the nav stays visible, so docs navigation
is always reachable. */
.docs-side-toggle {
display: none;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 8px;
padding: 10px 14px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-subtle);
background: var(--steel-50);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
}
html.js .docs-side-toggle { display: flex; }
/* Lucide's createIcons() swaps the for an
inline