:root {
--sl-color-white: var(--text-primary);
--sl-color-gray-1: #45413c;
--sl-color-gray-2: #6b6660;
--sl-color-gray-3: #8a857e;
--sl-color-gray-4: #c0bcb5;
--sl-color-gray-5: var(--surface);
--sl-color-gray-6: var(--background);
--sl-color-black: var(--background);
--sl-color-accent-low: var(--accent-low);
--sl-color-accent: var(--accent);
--sl-color-accent-high: var(--accent-high);
--sl-color-bg: var(--background);
--sl-color-text: var(--text-primary);
--sl-color-bg-nav: var(--surface);
--sl-color-bg-sidebar: var(--surface);
--sl-color-hairline: var(--border);
}
:root[data-theme='dark'] {
--sl-color-white: var(--text-primary);
--sl-color-gray-1: #d1cdc7;
--sl-color-gray-2: #a8a49e;
--sl-color-gray-3: #6b6660;
--sl-color-gray-4: #3d3a36;
--sl-color-gray-5: #2d2a26;
--sl-color-gray-6: var(--background);
--sl-color-black: #0f0e0d;
--sl-color-accent-low: var(--accent-low);
--sl-color-accent: var(--accent);
--sl-color-accent-high: var(--accent-high);
--sl-color-bg: var(--background);
--sl-color-text: var(--text-primary);
--sl-color-bg-nav: var(--surface);
--sl-color-bg-sidebar: var(--surface);
--sl-color-hairline: var(--border);
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--sl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--sl-font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;
}
.expressive-code {
--ec-codeBg: #1A1918;
--ec-codeSelectionBg: #3D3A36;
--ec-codePadBlock: 1.5rem;
--ec-codePadInline: 1.5rem;
--ec-codeFontFam: var(--sl-font-mono);
--ec-uiFontFam: var(--sl-font);
--ec-brdRad: 8px;
}
.sl-markdown-content {
--sl-content-width: 720px;
}
.sl-markdown-content > * + * {
margin-top: 1.5rem;
}
.sl-markdown-content h2 {
margin-top: 3rem;
}
.sl-markdown-content h3 {
margin-top: 2rem;
}
:root:not([data-theme='dark']) .sl-markdown-content code:not(pre code) {
background-color: var(--sl-color-gray-1);
color: var(--sl-color-gray-6);
border: 1px solid var(--sl-color-gray-2);
padding: 0.125rem 0.25rem;
border-radius: 4px;
}
:root[data-theme='dark'] .sl-markdown-content code:not(pre code) {
background-color: var(--sl-color-gray-5);
color: var(--sl-color-gray-1);
border: 1px solid var(--sl-color-gray-4);
}