:root { --engram-ink: #1a1d21; --engram-muted: #5b6472; --engram-border: #e6e8eb; --engram-panel: #ffffff; --engram-panel-soft: #f7f8f9; --engram-accent: #6d28d9; --engram-accent-strong: #5b21b6; --engram-accent-soft: #f2edfd; --engram-green: #2f8f46; --engram-amber: #b26b00; --engram-code-panel: #fafafa; --engram-code-border: #e6e8eb; --engram-code-text: #2f3338; --engram-code-muted: #8a929c; --md-accent-fg-color: #6d28d9; --md-typeset-a-color: #6d28d9; --md-default-fg-color: var(--engram-ink); } [data-md-color-scheme="slate"] { --engram-ink: #eef2f7; --engram-muted: #a7b0bf; --engram-border: #2a2f37; --engram-panel: #15181d; --engram-panel-soft: #1b1f25; --engram-accent: #b794f6; --engram-accent-strong: #d6bcfa; --engram-accent-soft: #211b33; --engram-green: #86efac; --engram-amber: #fbbf24; --engram-code-panel: #15181d; --engram-code-border: #2a2f37; --engram-code-text: #d9e2ec; --engram-code-muted: #8795a8; --md-accent-fg-color: #b794f6; --md-typeset-a-color: #b794f6; } /* Material's palette CSS resets --md-typeset-a-color / --md-accent-fg-color to its default indigo (#4051b5 light, #5e8bde slate) on via scheme+primary compound selectors, shadowing the :root brand override for everything inside the page — links, active nav, accents all go off-brand. Re-assert the brand accent with a matching (0,2,0) compound selector that loads after palette.css, so it wins by specificity and order in both modes. */ [data-md-color-scheme="default"][data-md-color-primary="white"], [data-md-color-scheme="slate"][data-md-color-primary="black"] { --md-typeset-a-color: var(--engram-accent); --md-accent-fg-color: var(--engram-accent); } /* ── Sidebar navigation ───────────────────────────────────────────── The pill is pulled left with a negative margin so the link text stays aligned with the section labels while the highlight gets real horizontal breathing room — an intentional highlight, not a swatch. */ .md-nav--primary .md-nav__link { border-radius: 6px; margin-left: -0.55rem; padding: 0.3rem 0.55rem; transition: color 100ms ease, background-color 100ms ease; } .md-nav--primary a.md-nav__link:not(.md-nav__link--active):hover { background: var(--engram-panel-soft); color: var(--engram-ink); } .md-nav--primary .md-nav__item .md-nav__link--active { background: var(--engram-accent-soft); color: var(--engram-accent-strong); font-weight: 600; } .md-nav--primary .md-nav__item .md-nav__link--active:hover { background: var(--engram-accent-soft); color: var(--engram-accent-strong); } /* "On this page" TOC: accent text only, no background pill */ .md-nav--secondary .md-nav__link--active { color: var(--engram-accent-strong); font-weight: 600; } /* Primary CTA uses the neural accent (the white/black header leaves --md-primary-fg-color neutral, which would otherwise wash the button out). */ .md-typeset .md-button--primary { background-color: var(--engram-accent); border-color: var(--engram-accent); color: #ffffff; } .md-typeset .md-button--primary:hover, .md-typeset .md-button--primary:focus { background-color: var(--engram-accent-strong); border-color: var(--engram-accent-strong); color: #ffffff; } [data-md-color-scheme="slate"] .md-typeset .md-button--primary { color: #15181d; } .md-header, .md-tabs { box-shadow: none; } .md-header { border-bottom: 1px solid color-mix(in srgb, var(--engram-border) 72%, transparent); } .md-main__inner { margin-top: 1rem; } .md-content__inner { max-width: 48rem; } .md-typeset { font-size: 0.78rem; line-height: 1.72; } .md-typeset h1, .md-typeset h2, .md-typeset h3 { color: var(--engram-ink); font-weight: 750; letter-spacing: 0; } .md-typeset h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1; margin-bottom: 0.75rem; } .md-typeset h2 { border-top: 1px solid var(--engram-border); font-size: 1.5rem; margin-top: 2.6rem; padding-top: 1.4rem; } .md-typeset h3 { font-size: 1.05rem; } .md-typeset table:not([class]) { border: 1px solid var(--engram-border); border-radius: 8px; box-shadow: none; overflow: hidden; } .md-typeset table:not([class]) th { background: var(--engram-panel-soft); color: var(--engram-ink); font-weight: 700; } .md-typeset table:not([class]) td, .md-typeset table:not([class]) th { border-color: var(--engram-border); padding: 0.7rem 0.85rem; } .md-typeset code { border: 1px solid color-mix(in srgb, var(--engram-border) 70%, transparent); border-radius: 5px; } .md-typeset .highlight { background: var(--engram-code-panel); border: 1px solid var(--engram-code-border); border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); margin: 1rem 0 1.25rem; overflow: hidden; position: relative; } .md-typeset .highlight pre { background: transparent !important; margin: 0; max-height: min(70vh, 34rem); overflow: auto; padding: 0.9rem 1rem; padding-right: 2.8rem; scrollbar-color: var(--engram-code-muted) transparent; scrollbar-width: thin; white-space: pre; } .md-typeset .highlight pre > code { background: transparent !important; border: 0; border-radius: 0; color: var(--engram-code-text); display: block; font-size: 0.68rem; line-height: 1.58; min-width: max-content; padding: 0; } .md-typeset .highlight pre code a { color: inherit; } .md-typeset .highlight:hover { border-color: color-mix(in srgb, var(--engram-accent) 45%, var(--engram-code-border)); } .md-typeset .highlight .md-clipboard, .md-typeset .highlight button.md-clipboard { background: color-mix(in srgb, var(--engram-panel) 82%, transparent); border: 1px solid var(--engram-code-border); border-radius: 6px; color: var(--engram-code-muted); height: 1.7rem; right: 0.45rem; top: 0.45rem; width: 1.7rem; } .md-typeset .highlight .md-clipboard:hover, .md-typeset .highlight button.md-clipboard:hover { background: var(--engram-panel); color: var(--engram-accent-strong); } .md-typeset .admonition, .md-typeset details { border-radius: 8px; box-shadow: none; } .engram-hero { border-bottom: 1px solid var(--engram-border); margin: -0.4rem 0 1.6rem; padding: 2.2rem 0 1.7rem; } .engram-hero > p:first-of-type { color: var(--engram-accent-strong); font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-weight: 720; line-height: 1.35; margin: 0 0 0.8rem; } .engram-hero > p:nth-of-type(2) { color: var(--engram-muted); font-size: 0.93rem; line-height: 1.7; max-width: 42rem; } .engram-hero .md-button { border-radius: 7px; margin: 0.35rem 0.35rem 0.2rem 0; } .engram-hero .md-button:not(.md-button--primary) { border-color: var(--engram-border); color: var(--engram-accent-strong); } /* Secondary button hover: fill with accent and flip the text to a contrasting color. Without this, Material fills the background with the accent while the text stays purple — the washed-out, unreadable state. */ .engram-hero .md-button:not(.md-button--primary):hover, .engram-hero .md-button:not(.md-button--primary):focus { background-color: var(--engram-accent); border-color: var(--engram-accent); color: #ffffff; } [data-md-color-scheme="slate"] .engram-hero .md-button:not(.md-button--primary):hover, [data-md-color-scheme="slate"] .engram-hero .md-button:not(.md-button--primary):focus { color: #15181d; } .engram-signal-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.2rem 0 1.7rem; } .engram-signal-grid > div { background: var(--engram-panel); border: 1px solid var(--engram-border); border-radius: 8px; padding: 0.9rem; } .engram-signal-grid strong { color: var(--engram-ink); display: block; font-size: 0.82rem; margin-bottom: 0.25rem; } .engram-signal-grid p { color: var(--engram-muted); font-size: 0.68rem; line-height: 1.55; margin: 0; } .md-typeset .grid.cards > ul { gap: 1rem; } .md-typeset .grid.cards > ul > li { border: 1px solid var(--engram-border); border-radius: 12px; box-shadow: none; padding: 1.3rem 1.4rem; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .md-typeset .grid.cards > ul > li:hover { border-color: color-mix(in srgb, var(--engram-accent) 55%, var(--engram-border)); box-shadow: 0 6px 20px rgba(26, 29, 33, 0.06); transform: translateY(-1px); } /* Icon sits on its own line above the title, like the screenshot */ .md-typeset .grid.cards > ul > li > p:first-child .twemoji, .md-typeset .grid.cards .twemoji { color: var(--engram-accent); } .md-typeset .grid.cards > ul > li > p:first-child .twemoji svg { height: 1.5rem; width: 1.5rem; } .md-typeset .grid.cards > ul > li strong { color: var(--engram-ink); font-weight: 700; } .md-typeset .grid.cards > ul > li a { color: var(--engram-ink); } .md-typeset .grid.cards > ul > li:hover a { color: var(--engram-accent); } /* ── Mermaid diagrams ──────────────────────────────────────────────── Diagrams are always rendered in light mode (light fills, dark text). We force a white card in both colour schemes so labels stay legible without per-diagram dark-mode overrides. The subtle inset ring gives the card a framed feel without a heavy border. */ .md-typeset .mermaid { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04); margin: 1.75rem 0; overflow-x: auto; padding: 1.75rem 1.5rem; text-align: center; } [data-md-color-scheme="slate"] .md-typeset .mermaid { border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04); } .md-typeset .mermaid svg { display: inline-block; height: auto !important; max-width: 100%; vertical-align: middle; } .md-typeset .tabbed-set { border-radius: 8px; } @media screen and (max-width: 760px) { .md-typeset { font-size: 0.74rem; } .engram-hero { padding-top: 1.1rem; } .engram-signal-grid { grid-template-columns: 1fr; } .engram-hero .md-button { display: block; text-align: center; width: 100%; } .md-typeset .highlight pre { max-height: 24rem; padding-right: 2.5rem; } }