/* ──────────────────────────────────────────────────────────────── site.css — shared design system for the notes blog. Linear-clean, Geist sans + mono, electric-blue single accent. Light / dark / auto via [data-theme] on ; defaults to auto. ──────────────────────────────────────────────────────────────── */ /* Tokens --------------------------------------------------------- */ :root { --bg: #fafafa; --bg-elevated: #ffffff; --bg-subtle: #f4f4f5; --fg: #09090b; --fg-muted: #52525b; --fg-subtle: #a1a1aa; --border: #e4e4e7; --border-strong: #d4d4d8; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-fg: #ffffff; --accent-tint: rgba(37, 99, 235, 0.10); --code-bg: #f4f4f5; --code-border: #e4e4e7; --selection: rgba(37, 99, 235, 0.20); --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0a0b; --bg-elevated: #111114; --bg-subtle: #18181b; --fg: #fafafa; --fg-muted: #a1a1aa; --fg-subtle: #71717a; --border: #27272a; --border-strong: #3f3f46; --accent: #60a5fa; --accent-hover: #93c5fd; --accent-fg: #0a0a0b; --accent-tint: rgba(96, 165, 250, 0.14); --code-bg: #18181b; --code-border: #27272a; --selection: rgba(96, 165, 250, 0.24); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --bg: #0a0a0b; --bg-elevated: #111114; --bg-subtle: #18181b; --fg: #fafafa; --fg-muted: #a1a1aa; --fg-subtle: #71717a; --border: #27272a; --border-strong: #3f3f46; --accent: #60a5fa; --accent-hover: #93c5fd; --accent-fg: #0a0a0b; --accent-tint: rgba(96, 165, 250, 0.14); --code-bg: #18181b; --code-border: #27272a; --selection: rgba(96, 165, 250, 0.24); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); } :root[data-theme="light"] { --bg: #fafafa; --bg-elevated: #ffffff; --bg-subtle: #f4f4f5; --fg: #09090b; --fg-muted: #52525b; --fg-subtle: #a1a1aa; --border: #e4e4e7; --border-strong: #d4d4d8; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-fg: #ffffff; --accent-tint: rgba(37, 99, 235, 0.10); --code-bg: #f4f4f5; --code-border: #e4e4e7; --selection: rgba(37, 99, 235, 0.20); } /* Reset ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } ::selection { background: var(--selection); } html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss03", "ss04"; letter-spacing: -0.005em; } /* Fixed top-right / top-left controls --------------------------- */ #theme-toggle, #lang-toggle, #post-lang-toggle, #post-home-link { position: fixed; top: 16px; z-index: 100; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; background: var(--bg-elevated); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } #theme-toggle:hover, #lang-toggle:hover, #post-lang-toggle:hover, #post-home-link:hover { border-color: var(--accent); color: var(--accent); } #theme-toggle { right: 16px; } #lang-toggle { right: 96px; } #post-lang-toggle { right: 16px; } #post-home-link { left: 16px; } /* Landing layout ------------------------------------------------- */ .wrap { max-width: 720px; margin: 0 auto; padding: 88px 24px 96px; } /* Header --------------------------------------------------------- */ .site-header { margin-bottom: 56px; } .site-header h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 10px; } .site-header .tagline { color: var(--fg-muted); font-size: 15px; margin: 0; letter-spacing: -0.005em; } /* Filter bar ---------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 40px; padding: 0; background: transparent; border: none; border-radius: 0; } .filter-bar .label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 6px; } .tag-chip { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--fg-muted); background: var(--bg-subtle); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: all var(--dur-fast) var(--ease-out); letter-spacing: -0.005em; } .tag-chip:hover { color: var(--fg); background: var(--bg-elevated); border-color: var(--border); } .tag-chip.active { background: var(--fg); color: var(--bg); border-color: var(--fg); } /* Posts ---------------------------------------------------------- */ #post-list { display: flex; flex-direction: column; gap: 4px; } .post { display: block; position: relative; padding: 20px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--fg); transition: background var(--dur-fast) var(--ease-out); border-radius: 0; } .post:last-of-type { border-bottom: 1px solid var(--border); } .post:hover { background: linear-gradient( 90deg, var(--accent-tint) 0%, transparent 80% ); } .post:hover .post-title { color: var(--accent); } .post.hidden { display: none; } .post-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.015em; transition: color var(--dur-fast) var(--ease-out); } .post-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); margin-bottom: 6px; letter-spacing: 0; font-variant-numeric: tabular-nums; } .post-summary { font-size: 14px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 10px; max-width: 65ch; } /* On hover-capable devices, hide summaries by default and reveal on hover. Touch devices keep summaries visible (no hover state). */ @media (hover: hover) and (pointer: fine) { .post .post-summary { max-height: 0; margin: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out); } .post:hover .post-summary, .post:focus-visible .post-summary { max-height: 240px; margin: 0 0 10px; opacity: 1; } } .post-tags { display: flex; gap: 6px; flex-wrap: wrap; } .post-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--fg-subtle); padding: 1px 6px; background: var(--bg-subtle); border-radius: var(--radius-sm); letter-spacing: 0; } /* Series grouping ----------------------------------------------- */ .series-group { margin: 12px 0; padding: 18px 20px 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); position: relative; } .series-group::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--accent); border-radius: var(--radius-md) 0 0 var(--radius-md); } .series-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .series-title { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.005em; } .series-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; } .series-group .post { border-top: 1px solid var(--border); padding: 14px 0; } /* Collapsible series: hide non-latest posts when group is collapsed. The series-header acts as the toggle when collapsible. */ .series-header[role="button"] { cursor: pointer; user-select: none; } .series-group[data-collapsed="true"] .post.hidden-collapsed { display: none; } .series-toggle { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); transition: transform var(--dur-fast) var(--ease-out); } .series-group:not([data-collapsed="true"]) .series-toggle { transform: rotate(180deg); } .series-header[role="button"]:hover .series-toggle, .series-header[role="button"]:hover .series-count { color: var(--accent); } .series-group .post:first-of-type { border-top: none; } .series-group .post:last-of-type { border-bottom: none; } .series-badge { display: inline-block; padding: 0 5px; margin-right: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; background: var(--accent); color: var(--accent-fg); border-radius: 3px; vertical-align: 1px; font-variant-numeric: tabular-nums; letter-spacing: 0; } /* Empty / loading states ---------------------------------------- */ .empty { color: var(--fg-subtle); text-align: center; padding: 64px 0; font-size: 13px; font-style: normal; font-family: var(--font-mono); } /* Footer --------------------------------------------------------- */ footer { margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); letter-spacing: 0; } footer a { color: var(--fg-muted); text-decoration: none; } footer a:hover { color: var(--accent); } /* ────────────────────────────────────────────────────────────── POST PAGE STYLES — applied to articles in posts/*.html ────────────────────────────────────────────────────────────── */ .layout { display: flex; align-items: flex-start; min-height: 100vh; } aside.toc { position: sticky; top: 0; flex: 0 0 300px; width: 300px; height: 100vh; overflow-y: auto; padding: 32px 20px 32px 24px; border-right: 1px solid var(--border); background: var(--bg-subtle); font-size: 13px; } aside.toc .toc-title { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--fg-subtle); text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } aside.toc ul { list-style: none; padding: 0; margin: 0; } aside.toc li { margin: 1px 0; } aside.toc ul ul { padding-left: 12px; border-left: 1px solid var(--border); margin: 2px 0 2px 5px; } aside.toc a { display: block; padding: 4px 8px; color: var(--fg-muted); text-decoration: none; border-radius: var(--radius-sm); line-height: 1.4; font-size: 12.5px; transition: all var(--dur-fast) var(--ease-out); } aside.toc a:hover { background: var(--bg-elevated); color: var(--fg); } aside.toc a.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; } main.content { flex: 1 1 auto; min-width: 0; max-width: 800px; padding: 64px 64px 96px; margin: 0 auto; } main.content h1, main.content h2, main.content h3, main.content h4 { scroll-margin-top: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); } main.content h1 { font-size: clamp(1.85rem, 3vw, 2.4rem); line-height: 1.15; margin: 0 0 16px; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); letter-spacing: -0.03em; } main.content h2 { font-size: 1.5rem; margin-top: 2.4em; margin-bottom: 0.6em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border); letter-spacing: -0.022em; } main.content h3 { font-size: 1.15rem; margin-top: 2em; margin-bottom: 0.5em; } main.content h4 { font-size: 1rem; margin-top: 1.6em; margin-bottom: 0.4em; } main.content p, main.content li { font-size: 15px; line-height: 1.72; color: var(--fg); } main.content p { margin: 0.9em 0; } main.content a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out); } main.content a:hover { border-bottom-color: var(--accent); } main.content a.headerlink { color: var(--fg-subtle); border: none; margin-left: 8px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); font-weight: 400; } main.content h1:hover .headerlink, main.content h2:hover .headerlink, main.content h3:hover .headerlink, main.content h4:hover .headerlink { opacity: 1; } main.content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-sm); padding: 1px 5px; letter-spacing: 0; } main.content pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-md); padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; } main.content pre code { background: transparent; border: none; padding: 0; font-size: inherit; } main.content blockquote { border-left: 3px solid var(--accent); background: var(--bg-subtle); padding: 10px 16px; margin: 1.2em 0; color: var(--fg-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } main.content blockquote p { margin: 0.4em 0; } main.content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14px; } main.content table th, main.content table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); } main.content table th { font-weight: 600; color: var(--fg-muted); background: var(--bg-subtle); border-bottom-color: var(--border-strong); } main.content table tr:hover { background: var(--bg-subtle); } main.content hr { border: none; border-top: 1px solid var(--border); margin: 2.4em 0; } main.content img, main.content svg { max-width: 100%; height: auto; border-radius: var(--radius-md); } main.content figure { margin: 1.6em 0; } main.content figcaption { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); text-align: center; margin-top: 8px; letter-spacing: 0; } /* Mobile --------------------------------------------------------- */ @media (max-width: 900px) { .layout { flex-direction: column; } aside.toc { position: static; width: 100%; flex: none; height: auto; max-height: none; border-right: none; border-bottom: 1px solid var(--border); padding: 16px 20px; } main.content { padding: 32px 20px 64px; max-width: 100%; } #post-home-link { left: 12px; top: 12px; padding: 6px 9px; font-size: 11px; } #post-lang-toggle { right: 12px; top: 12px; padding: 6px 9px; font-size: 11px; } } @media (max-width: 600px) { .wrap { padding: 64px 18px 64px; } .site-header h1 { font-size: 1.85rem; } #theme-toggle, #lang-toggle { padding: 6px 9px; font-size: 11px; top: 12px; } #theme-toggle { right: 12px; } #lang-toggle { right: 84px; } } /* Static nav.toc sidebar (onetrans-style) ----------------------- */ nav.toc { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; overflow-y: auto; overflow-x: hidden; background: var(--bg-subtle); border-right: 1px solid var(--border); padding: 56px 16px 24px 20px; font-size: 12.5px; line-height: 1.5; box-sizing: border-box; z-index: 90; } nav.toc strong { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } nav.toc ul { list-style: none; margin: 4px 0; padding-left: 14px; } nav.toc > div > ul, nav.toc > ul { padding-left: 0; } nav.toc li { margin: 1px 0; } nav.toc a { display: block; padding: 4px 8px; color: var(--fg-muted); text-decoration: none; border-radius: var(--radius-sm); border-left: 2px solid transparent; line-height: 1.4; transition: all var(--dur-fast) var(--ease-out); } nav.toc a:hover { background: var(--bg-elevated); color: var(--fg); } nav.toc > div > ul > li > a, nav.toc > ul > li > a { font-weight: 600; color: var(--fg); } nav.toc ul ul a { font-size: 11.5px; color: var(--fg-subtle); } nav.toc a.active, nav.toc ul ul a.active { background: var(--accent-tint); border-left-color: var(--accent); color: var(--accent); font-weight: 600; } nav.toc code { font-family: var(--font-mono); font-size: 11px; background: transparent; border: none; padding: 0; } /* Push main.content right when a nav.toc sidebar is present. Uses :has() (Safari 15.4+, Chrome 105+, Firefox 121+). */ body:has(nav.toc) main.content { max-width: 920px; margin-left: 300px; margin-right: auto; padding: 56px 40px 96px; } @media (max-width: 900px) { nav.toc { position: static; width: auto; bottom: auto; max-height: 280px; border-right: none; border-bottom: 1px solid var(--border); padding: 24px 20px; } body:has(nav.toc) main.content { margin-left: auto; padding: 24px 20px 64px; } } /* Dynamic TOC sidebar (#toc, used by gemm-ai-style scripts) ----- */ #toc { position: fixed; top: 64px; left: 16px; width: 248px; max-height: calc(100vh - 96px); overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 14px 16px; font-size: 12.5px; line-height: 1.5; box-shadow: var(--shadow-md); z-index: 90; } #toc.collapsed { width: 40px; padding: 10px 8px; overflow: hidden; } #toc.collapsed > *:not(#toc-toggle) { display: none; } #toc-toggle { position: absolute; top: 6px; right: 6px; border: none; background: transparent; cursor: pointer; color: var(--fg-subtle); font-size: 14px; padding: 4px 6px; line-height: 1; border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } #toc-toggle:hover { background: var(--bg-subtle); color: var(--fg); } #toc h4 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--fg-subtle); letter-spacing: 0.08em; text-transform: uppercase; padding-right: 28px; border-bottom: 1px solid var(--border); padding-bottom: 8px; } #toc ul { list-style: none; padding: 0; margin: 0; } #toc li { margin: 1px 0; } #toc a { display: block; color: var(--fg-muted); text-decoration: none; padding: 4px 8px; border-radius: var(--radius-sm); border-left: 2px solid transparent; line-height: 1.4; word-break: break-word; transition: all var(--dur-fast) var(--ease-out); } #toc a:hover { background: var(--bg-subtle); color: var(--fg); } #toc a.active { background: var(--accent-tint); border-left-color: var(--accent); color: var(--accent); font-weight: 600; } #toc li.lvl-3 > a { padding-left: 18px; font-size: 11.5px; color: var(--fg-subtle); } #toc li.lvl-3 > a.active { color: var(--accent); } @media (max-width: 1180px) { #toc { display: none; } } /* Callouts / asides / examples (post content) ------------------- */ main.content .callout, main.content .aside, main.content .example, main.content .practice { margin: 1.2em 0; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); border-left-width: 3px; font-size: 14px; line-height: 1.65; background: var(--bg-subtle); } main.content .callout { border-left-color: var(--accent); } main.content .callout.note { border-left-color: var(--accent); } main.content .callout.warn, main.content .practice { border-left-color: #d97706; background: rgba(217, 119, 6, 0.06); } main.content .example { border-left-color: var(--accent); background: var(--accent-tint); } main.content .aside { border-left-color: var(--fg-subtle); background: var(--bg-subtle); } main.content .callout .label, main.content .aside .label, main.content .example .label, main.content .practice .label { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 6px; } main.content .example .label { color: var(--accent); } main.content .practice .label { color: #d97706; } main.content .callout > p:first-child, main.content .aside > p:first-child, main.content .example > p:first-child, main.content .practice > p:first-child { margin-top: 0; } main.content .callout > p:last-child, main.content .aside > p:last-child, main.content .example > p:last-child, main.content .practice > p:last-child { margin-bottom: 0; } main.content .figure-caption { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); text-align: center; margin: 4px 0 12px; letter-spacing: 0; } main.content .small { font-size: 13px; color: var(--fg-muted); } main.content .tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; background: var(--accent-tint); color: var(--accent); border-radius: var(--radius-sm); vertical-align: middle; letter-spacing: 0; } main.content .toc-back-to-top { display: block; margin-top: 20px; font-family: var(--font-mono); color: var(--fg-subtle); font-size: 11.5px; text-decoration: none; } main.content .toc-back-to-top:hover { color: var(--accent); } /* Inline syntax color tokens (legacy .kw / .cm) ----------------- */ main.content .kw { color: #c026d3; font-weight: 500; } main.content .cm { color: var(--fg-subtle); font-style: italic; } :root[data-theme="dark"] main.content .kw, :root:not([data-theme="light"]) main.content .kw { color: #f0abfc; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) main.content .kw { color: #f0abfc; } } /* Pygments .codehilite — single neutral scheme that adapts ----- */ main.content .codehilite { background: transparent; } main.content .codehilite .c, main.content .codehilite .ch, main.content .codehilite .cm, main.content .codehilite .c1, main.content .codehilite .cs, main.content .codehilite .cp, main.content .codehilite .cpf { color: var(--fg-subtle); font-style: italic; } main.content .codehilite .k, main.content .codehilite .kc, main.content .codehilite .kd, main.content .codehilite .kn, main.content .codehilite .kp, main.content .codehilite .kr, main.content .codehilite .kt { color: #c026d3; font-weight: 500; } main.content .codehilite .o, main.content .codehilite .ow { color: var(--fg-muted); } main.content .codehilite .s, main.content .codehilite .s1, main.content .codehilite .s2, main.content .codehilite .sa, main.content .codehilite .sb, main.content .codehilite .sc, main.content .codehilite .sd, main.content .codehilite .se, main.content .codehilite .sh, main.content .codehilite .si, main.content .codehilite .sx, main.content .codehilite .sr, main.content .codehilite .ss, main.content .codehilite .dl { color: #16a34a; } main.content .codehilite .m, main.content .codehilite .mb, main.content .codehilite .mf, main.content .codehilite .mh, main.content .codehilite .mi, main.content .codehilite .mo, main.content .codehilite .il { color: var(--accent); } main.content .codehilite .nb, main.content .codehilite .bp { color: #0891b2; } main.content .codehilite .nc, main.content .codehilite .nn, main.content .codehilite .nf, main.content .codehilite .nv, main.content .codehilite .vc, main.content .codehilite .vg, main.content .codehilite .vi, main.content .codehilite .vm, main.content .codehilite .fm { color: var(--fg); } main.content .codehilite .nd { color: #c026d3; } main.content .codehilite .nt, main.content .codehilite .na { color: #c026d3; } main.content .codehilite .ne, main.content .codehilite .gr, main.content .codehilite .err { color: #dc2626; } main.content .codehilite .gi { color: #16a34a; } main.content .codehilite .gd { color: #dc2626; } main.content .codehilite .gh, main.content .codehilite .gp, main.content .codehilite .gu { color: var(--accent); font-weight: 600; } main.content .codehilite .gs { font-weight: 600; } main.content .codehilite .ge { font-style: italic; } main.content .codehilite .w { color: var(--fg-subtle); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) main.content .codehilite .k, :root:not([data-theme="light"]) main.content .codehilite .kc, :root:not([data-theme="light"]) main.content .codehilite .kd, :root:not([data-theme="light"]) main.content .codehilite .kn, :root:not([data-theme="light"]) main.content .codehilite .kp, :root:not([data-theme="light"]) main.content .codehilite .kr, :root:not([data-theme="light"]) main.content .codehilite .kt, :root:not([data-theme="light"]) main.content .codehilite .nd, :root:not([data-theme="light"]) main.content .codehilite .nt, :root:not([data-theme="light"]) main.content .codehilite .na { color: #e879f9; } :root:not([data-theme="light"]) main.content .codehilite .s, :root:not([data-theme="light"]) main.content .codehilite .s1, :root:not([data-theme="light"]) main.content .codehilite .s2, :root:not([data-theme="light"]) main.content .codehilite .sa, :root:not([data-theme="light"]) main.content .codehilite .sb, :root:not([data-theme="light"]) main.content .codehilite .sc, :root:not([data-theme="light"]) main.content .codehilite .sd, :root:not([data-theme="light"]) main.content .codehilite .se, :root:not([data-theme="light"]) main.content .codehilite .sh, :root:not([data-theme="light"]) main.content .codehilite .si, :root:not([data-theme="light"]) main.content .codehilite .sx, :root:not([data-theme="light"]) main.content .codehilite .sr, :root:not([data-theme="light"]) main.content .codehilite .ss, :root:not([data-theme="light"]) main.content .codehilite .dl, :root:not([data-theme="light"]) main.content .codehilite .gi { color: #4ade80; } :root:not([data-theme="light"]) main.content .codehilite .nb, :root:not([data-theme="light"]) main.content .codehilite .bp { color: #67e8f9; } :root:not([data-theme="light"]) main.content .codehilite .ne, :root:not([data-theme="light"]) main.content .codehilite .gr, :root:not([data-theme="light"]) main.content .codehilite .err, :root:not([data-theme="light"]) main.content .codehilite .gd { color: #f87171; } } :root[data-theme="dark"] main.content .codehilite .k, :root[data-theme="dark"] main.content .codehilite .kc, :root[data-theme="dark"] main.content .codehilite .kd, :root[data-theme="dark"] main.content .codehilite .kn, :root[data-theme="dark"] main.content .codehilite .kp, :root[data-theme="dark"] main.content .codehilite .kr, :root[data-theme="dark"] main.content .codehilite .kt, :root[data-theme="dark"] main.content .codehilite .nd, :root[data-theme="dark"] main.content .codehilite .nt, :root[data-theme="dark"] main.content .codehilite .na { color: #e879f9; } :root[data-theme="dark"] main.content .codehilite .s, :root[data-theme="dark"] main.content .codehilite .s1, :root[data-theme="dark"] main.content .codehilite .s2, :root[data-theme="dark"] main.content .codehilite .sa, :root[data-theme="dark"] main.content .codehilite .sb, :root[data-theme="dark"] main.content .codehilite .sc, :root[data-theme="dark"] main.content .codehilite .sd, :root[data-theme="dark"] main.content .codehilite .se, :root[data-theme="dark"] main.content .codehilite .sh, :root[data-theme="dark"] main.content .codehilite .si, :root[data-theme="dark"] main.content .codehilite .sx, :root[data-theme="dark"] main.content .codehilite .sr, :root[data-theme="dark"] main.content .codehilite .ss, :root[data-theme="dark"] main.content .codehilite .dl, :root[data-theme="dark"] main.content .codehilite .gi { color: #4ade80; } :root[data-theme="dark"] main.content .codehilite .nb, :root[data-theme="dark"] main.content .codehilite .bp { color: #67e8f9; } :root[data-theme="dark"] main.content .codehilite .ne, :root[data-theme="dark"] main.content .codehilite .gr, :root[data-theme="dark"] main.content .codehilite .err, :root[data-theme="dark"] main.content .codehilite .gd { color: #f87171; } /* Reduced motion ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Scroll reveal -------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.shown { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }