with + status pill) */
.md-typeset .grid.cards > ul > li > p:first-child {
font-size: 1.25rem;
margin-bottom: 0.6rem;
}
.md-typeset .grid.cards > ul > li > p:first-child strong {
font-family: var(--f-mono);
font-weight: 500;
letter-spacing: -0.01em;
}
/* Metadata strip — second , contains only inline code */
.md-typeset .grid.cards > ul > li > p:nth-of-type(2) code {
background: transparent;
border: none;
padding: 0;
color: var(--c-text-soft);
font-size: 0.78rem;
letter-spacing: 0.02em;
}
.md-typeset .grid.cards > ul > li > p:nth-of-type(2) {
margin: 0 0 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--c-border-soft);
}
/* Card body paragraphs */
.md-typeset .grid.cards > ul > li > p:nth-of-type(n+3) {
color: var(--c-text-soft);
font-size: 0.9rem;
line-height: 1.6;
}
/* Card buttons row */
.md-typeset .grid.cards > ul > li > p:last-child {
margin-top: 1.25rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.md-typeset .grid.cards > ul > li > p:last-child .md-button {
font-size: 0.72rem;
padding: 0.4rem 0.8rem;
}
/* ---------- Status pills ---------------------------------- */
.status-pill {
display: inline-block;
font-family: var(--f-mono);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.15rem 0.5rem;
border: 1px solid currentColor;
border-radius: 999px;
vertical-align: middle;
margin-left: 0.4rem;
}
.status-pill.status-stable { color: var(--c-stable); }
.status-pill.status-beta { color: var(--c-beta); }
.status-pill.status-wip { color: var(--c-text-faint); }
/* ---------- Built-on strip -------------------------------- */
.md-typeset .built-on-strip {
font-family: var(--f-mono);
font-size: 0.85rem;
color: var(--c-text-soft);
letter-spacing: 0.01em;
text-align: center;
padding: 1rem 0;
}
.md-typeset .built-on-strip a {
color: var(--c-text-soft);
border-bottom: 1px solid transparent;
transition: color 120ms ease, border-color 120ms ease;
}
.md-typeset .built-on-strip a:hover {
color: var(--c-accent);
border-bottom-color: var(--c-accent);
}
/* ---------- Principles ------------------------------------ */
.md-typeset h2[id="principles"] + p,
.md-typeset h2[id="principles"] ~ p {
max-width: 60ch;
color: var(--c-text-soft);
}
.md-typeset h2[id="principles"] ~ p strong {
display: block;
color: var(--c-text);
font-weight: 500;
margin-bottom: 0.2rem;
font-family: var(--f-sans);
}
/* ---------- Code blocks ----------------------------------- */
.md-typeset pre > code,
.md-typeset .highlight pre {
background: var(--c-surface);
border: 1px solid var(--c-border-soft);
border-radius: 0;
font-size: 0.82rem;
line-height: 1.6;
}
.md-typeset code {
background: var(--c-surface-2);
border-radius: 2px;
padding: 0.1em 0.35em;
font-size: 0.85em;
}
/* ---------- FAQ (pymdownx.details) ------------------------ */
.md-typeset details {
--md-admonition-fg-color: var(--c-text-soft);
--md-admonition-bg-color: transparent;
background: transparent !important;
border: none !important;
border-top: 1px solid var(--c-border-soft) !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
.md-typeset details:last-of-type {
border-bottom: 1px solid var(--c-border-soft) !important;
}
.md-typeset details > summary {
background: transparent !important;
font-family: var(--f-sans);
font-weight: 400;
font-size: 0.95rem;
padding: 1rem 0;
color: var(--c-text) !important;
}
.md-typeset details > summary::before {
background-color: var(--c-text-faint) !important;
-webkit-mask-image: var(--md-details-icon) !important;
mask-image: var(--md-details-icon) !important;
}
.md-typeset details[open] > summary {
color: var(--c-accent) !important;
}
.md-typeset details > :not(summary) {
color: var(--c-text-soft);
padding-left: 0;
font-size: 0.88rem;
line-height: 1.6;
}
/* ---------- Horizontal rules ------------------------------ */
.md-typeset hr {
border: none;
border-top: 1px solid var(--c-border-soft);
margin: 3rem 0;
}
/* ---------- Layout polish --------------------------------- */
.md-main__inner {
margin-top: 0;
}
.md-content__inner {
position: relative;
padding-top: 1rem;
}
.md-content__inner::before {
display: none; /* kill Material's edit-this-page anchor on home */
}
/* Hide page title duplication if Material renders it */
.md-content__inner > h1:first-of-type {
position: relative;
}
/* ============================================================
404 page styling
============================================================ */
.md-typeset h1.err-code,
.md-typeset h1:first-of-type:has(+ p.err-tagline) {
font-family: var(--f-mono);
font-size: 5rem;
font-weight: 400;
letter-spacing: -0.04em;
color: var(--c-accent);
margin: 5rem 0 1rem;
}
.md-typeset .err-tagline {
font-size: 1.4rem;
font-weight: 400;
color: var(--c-text);
letter-spacing: -0.015em;
max-width: 38ch;
margin: 0 0 1.5rem;
}
.md-typeset .err-lede {
color: var(--c-text-soft);
max-width: 56ch;
margin: 0 0 2rem;
font-size: 0.95rem;
line-height: 1.65;
}