@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono/400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono/500.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jetbrains-mono/700.woff2') format('woff2'); } :root { --bg: #fbfbf9; --surface: #ffffff; --fg: #111111; --muted: #6a6a6a; --rule: #e5e5e2; --accent: #1a73c4; --accent-fg: #ffffff; --radius: 4px; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'Menlo', monospace; --font-display: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'Menlo', monospace; --content-width: 720px; } @media (prefers-color-scheme: dark) { :root { --bg: #0d1117; --surface: #161b22; --fg: #e6edf3; --muted: #8b949e; --rule: #30363d; --accent: color-mix(in oklch, #1a73c4 75%, white); --accent-fg: #0d1117; } .frontmatter, .post-date { color: var(--muted); } } * { box-sizing: border-box; } html { background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.c-b84 { margin: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } ::selection { background: var(--accent); color: var(--accent-fg); } img { max-width: 100%; display: block; } .t-c74 { max-width: var(--content-width); margin: 0 auto; padding: 1.25rem 1.5rem; } .w-e7b { display: flex; flex-direction: column; gap: 0.75rem; } .s-404 { background: var(--bg); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 10; } .s-404 .s-0da { display: inline-flex; align-items: baseline; gap: 0.4ch; font-weight: 500; font-size: 14px; color: var(--fg); letter-spacing: 0; } .s-404 .prompt-host { color: var(--muted); } .s-404 .prompt-sigil { color: var(--accent); font-weight: 700; } .s-404 .prompt-cursor { display: inline-block; width: 0.6ch; background: var(--accent); color: var(--bg); animation: blink 1.05s steps(2, end) infinite; margin-left: 0.2ch; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .s-404 .x-3f4 { margin: 0; font-size: 12px; color: var(--muted); font-style: normal; } .s-404 .c-cf7 ul, .s-404 .w-4d8 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 13px; } .s-404 .c-cf7 a { color: var(--muted); } .s-404 .c-cf7 a:hover { color: var(--fg); } .x-393 { padding: 1.5rem 0 3rem; } .x-393 .s-ce4 { display: block; } .x-393 .s-ce4 > .s-0da { font-size: 15px; font-weight: 500; color: var(--muted); margin: 0 0 1rem; } .x-393 .s-ce4 > .w-aa1 { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .x-393 .x-6bf { border-left: 2px solid transparent; padding: 0.4rem 0 0.4rem 0.75rem; transition: border-color 0.15s ease; } .x-393 .x-6bf:hover { border-left-color: var(--accent); } .x-393 .x-6bf > a { display: grid; grid-template-columns: 11ch auto 1fr; gap: 0.75ch; color: var(--fg); align-items: baseline; } .x-393 .post-date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .x-393 .post-arrow { color: var(--accent); } .x-393 .post-title { font-size: 15px; font-weight: 500; } .x-393 .x-6bf > p { margin: 0.25rem 0 0 12.75ch; font-size: 13px; color: var(--muted); } .x-2e1 { margin: 0; } .x-2e1 > .frontmatter { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0 0 1.5rem; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--muted); white-space: pre; overflow-x: auto; } .x-2e1 > .s-0da { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5rem; line-height: 1.2; } .x-2e1 .hash-prefix { color: var(--accent); font-weight: 500; } .x-2e1 > .x-3f4 { font-size: 13px; color: var(--muted); margin: 0 0 1.25rem; } .x-2e1 > .x-3f4 time { font-variant-numeric: tabular-nums; } .x-2e1 > .x-476 { margin: 0 0 1.5rem; } .prose-tech p { margin: 0 0 1.1em; } .prose-tech h2, .prose-tech h3 { font-weight: 700; letter-spacing: -0.005em; margin: 2em 0 0.6em; line-height: 1.3; } .prose-tech h2 { font-size: 22px; } .prose-tech h3 { font-size: 18px; } .prose-tech h2::before { content: '## '; color: var(--accent); font-weight: 500; } .prose-tech h3::before { content: '### '; color: var(--accent); font-weight: 500; } .prose-tech a { color: var(--accent); border-bottom: 1px dotted var(--accent); } .prose-tech a:hover { text-decoration: none; border-bottom-style: solid; } .prose-tech code { font-family: var(--font-mono); font-size: 0.92em; background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 0 4px; } .prose-tech pre { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.85rem 1rem; overflow-x: auto; margin: 1.4em 0; } .prose-tech pre code { background: transparent; border: 0; padding: 0; } .prose-tech blockquote { border-left: 3px solid var(--accent); margin: 1.4em 0; padding: 0.25em 0 0.25em 1em; color: var(--muted); font-style: normal; } .prose-tech blockquote::before { content: '> '; color: var(--accent); font-weight: 700; } .prose-tech ul, .prose-tech ol { padding-left: 1.4em; margin: 0 0 1.1em; } .prose-tech li { margin: 0.25em 0; } .prose-tech img { border: 1px solid var(--rule); border-radius: var(--radius); margin: 1.2em 0; } .prose-tech hr { border: 0; border-top: 1px dashed var(--rule); margin: 2em 0; } .m-866 { margin: 2rem 0 0; padding: 1rem 0 0; border-top: 1px dashed var(--rule); } .m-866 .x-3f4 { font-size: 12px; color: var(--muted); margin: 0 0 0.4rem; } .m-866 .w-aa1 { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; font-size: 13px; } .x-bc6 { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 1.25rem 0; font-size: 12.5px; } .x-bc6 .w-aa1, .x-bc6 .w-4d8 { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; } .x-bc6 .x-3f4 { margin: 0; color: var(--muted); } @media (max-width: 600px) { html { font-size: 14px; } .t-c74 { padding: 1rem 1.1rem; } .x-393 .x-6bf > a { grid-template-columns: 1fr; gap: 0.1rem; } .x-393 .x-6bf > p { margin-left: 0; } .x-2e1 > .frontmatter { font-size: 11.5px; } }