@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.s-0cc { 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; } .m-acd { max-width: var(--content-width); margin: 0 auto; padding: 1.25rem 1.5rem; } .t-ec1 { display: flex; flex-direction: column; gap: 0.75rem; } .m-2bb { background: var(--bg); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 10; } .m-2bb .s-a7e { display: inline-flex; align-items: baseline; gap: 0.4ch; font-weight: 500; font-size: 14px; color: var(--fg); letter-spacing: 0; } .m-2bb .prompt-host { color: var(--muted); } .m-2bb .prompt-sigil { color: var(--accent); font-weight: 700; } .m-2bb .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; } } .m-2bb .t-883 { margin: 0; font-size: 12px; color: var(--muted); font-style: normal; } .m-2bb .w-89a ul, .m-2bb .x-29f { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 13px; } .m-2bb .w-89a a { color: var(--muted); } .m-2bb .w-89a a:hover { color: var(--fg); } .s-620 { padding: 1.5rem 0 3rem; } .s-620 .s-36d { display: block; } .s-620 .s-36d > .s-a7e { font-size: 15px; font-weight: 500; color: var(--muted); margin: 0 0 1rem; } .s-620 .s-36d > .x-7ff { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .s-620 .t-b77 { border-left: 2px solid transparent; padding: 0.4rem 0 0.4rem 0.75rem; transition: border-color 0.15s ease; } .s-620 .t-b77:hover { border-left-color: var(--accent); } .s-620 .t-b77 > a { display: grid; grid-template-columns: 11ch auto 1fr; gap: 0.75ch; color: var(--fg); align-items: baseline; } .s-620 .post-date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .s-620 .post-arrow { color: var(--accent); } .s-620 .post-title { font-size: 15px; font-weight: 500; } .s-620 .t-b77 > p { margin: 0.25rem 0 0 12.75ch; font-size: 13px; color: var(--muted); } .w-5df { margin: 0; } .w-5df > .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; } .w-5df > .s-a7e { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5rem; line-height: 1.2; } .w-5df .hash-prefix { color: var(--accent); font-weight: 500; } .w-5df > .t-883 { font-size: 13px; color: var(--muted); margin: 0 0 1.25rem; } .w-5df > .t-883 time { font-variant-numeric: tabular-nums; } .w-5df > .w-89b { 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-1c0 { margin: 2rem 0 0; padding: 1rem 0 0; border-top: 1px dashed var(--rule); } .m-1c0 .t-883 { font-size: 12px; color: var(--muted); margin: 0 0 0.4rem; } .m-1c0 .x-7ff { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; font-size: 13px; } .s-9ef { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 1.25rem 0; font-size: 12.5px; } .s-9ef .x-7ff, .s-9ef .x-29f { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; } .s-9ef .t-883 { margin: 0; color: var(--muted); } @media (max-width: 600px) { html { font-size: 14px; } .m-acd { padding: 1rem 1.1rem; } .s-620 .t-b77 > a { grid-template-columns: 1fr; gap: 0.1rem; } .s-620 .t-b77 > p { margin-left: 0; } .w-5df > .frontmatter { font-size: 11.5px; } }