:root {
    --max-width: 720px;
    --bg: #fafafa;
    --fg: #1a1a1a;
    --link: #0066cc;
    --border: #ddd;
    --code-bg: #f0f0f0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.6;
}

header, main, footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

header {
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}

header h1 a {
    color: var(--fg);
    text-decoration: none;
}

main {
    min-height: 60vh;
}

footer {
    border-top: 1px solid var(--border);
    margin-top: 2rem;
    color: #666;
    font-size: 0.9rem;
}

a {
    color: var(--link);
}

.post-list {
    list-style: none;
}

.post-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.post-list a {
    text-decoration: none;
    color: var(--fg);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.post-list a:hover .post-title {
    text-decoration: underline;
}

.post-date {
    color: #666;
    font-size: 0.9rem;
    white-space: nowrap;
}

article h2 {
    margin-bottom: 0.5rem;
}

article .post-date {
    display: block;
    margin-bottom: 1.5rem;
}

.toc {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
    background: var(--bg);
}

.toc h3 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.toc ul {
    list-style: none;
    padding-left: 0;
}

.toc ul ul {
    padding-left: 1.25rem;
}

.toc li {
    margin: 0.25rem 0;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    scroll-margin-top: 1rem;
    margin: 1.5rem 0 0.5rem;
}

.post-content p {
    margin-bottom: 1rem;
}

.post-content pre {
    background: var(--code-bg);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0;
}

.post-content code {
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 0.9rem;
}

.post-content :not(pre) > code {
    background: var(--code-bg);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

.post-content ul,
.post-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.post-content blockquote {
    border-left: 3px solid var(--border);
    padding-left: 1rem;
    margin: 1rem 0;
    color: #555;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.search {
    margin-bottom: 1.5rem;
}

.search input[type="search"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.search input[type="search"]:focus {
    outline: none;
    border-color: var(--link);
}

.search-empty {
    color: #666;
}

.post-tags {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.post-tags li a {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
}

.tag-count {
    color: #666;
}

.post-meta {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.reading-time {
    color: #666;
    font-size: 0.9rem;
}

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.post-nav div {
    flex: 1;
}

.post-nav .nav-older {
    text-align: right;
}

.nav-link {
    display: block;
    text-decoration: none;
}

/*
 * Syntax highlighting (syntect) — Generated theme CSS. Token classes are
 * emitted by syntect (ClassStyle::SpacedPrefixed "tok-") during markdown
 * rendering at boot; the site keeps its own <pre> background (--code-bg).
 *
 * REGENERATION: this block (from the "theme" banner to EOF) is a one-off
 * syntect theme dump, a pure function of the GitHub theme — NOT of the
 * loaded language set. To regenerate exactly:
 *
 *   use syntect::highlighting::ThemeSet;
 *   use syntect::html::{css_for_theme_with_class_style, ClassStyle};
 *   let ts = ThemeSet::load_defaults();
 *   let theme = &ts.themes["GitHub"];
 *   let css = css_for_theme_with_class_style(
 *       theme, ClassStyle::SpacedPrefixed { prefix: "tok-" },
 *   ).unwrap();
 *
 * Append the returned CSS here, keeping the `/* theme "GitHub" ... */`
 * banner after the comment that follows. The hand-written rules above
 * (layout, post-list, toc, etc.) are unrelated and must be preserved.
 */
/*
 * theme "GitHub" generated by syntect
 * (treeshaken to rust/markdown/python/c/vhdl)
 */

.tok-code {
 color: #323232;
 background-color: #ffffff;
}
.tok-comment {
 color: #969896;
font-style: italic;
}
.tok-string {
 color: #183691;
}
.tok-regexp-operator {
 color: #a71d5d;
}
.tok-string.tok-regexp.tok-characterclass .tok-punctuation.tok-definition.tok-string.tok-begin, .tok-string.tok-regexp.tok-characterclass .tok-punctuation.tok-definition.tok-string.tok-end {
 color: #a71d5d;
}
.tok-constant.tok-numeric {
 color: #0086b3;
}
.tok-constant.tok-language {
 color: #0086b3;
}
.tok-constant.tok-character, .tok-constant.tok-other, .tok-variable.tok-other.tok-constant {
 color: #0086b3;
}
.tok-variable {
 color: #323232;
}
.tok-keyword {
 color: #a71d5d;
font-weight: bold;
}
.tok-bitwise-operator {
 color: #a71d5d;
font-weight: bold;
}
.tok-storage {
 color: #a71d5d;
font-weight: bold;
}
.tok-storage.tok-type {
 color: #a71d5d;
font-weight: bold;
}
.tok-entity.tok-name.tok-class {
 color: #0086b3;
}
.tok-entity.tok-other.tok-inherited-class {
 color: #0086b3;
}
.tok-entity.tok-name.tok-function {
 color: #795da3;
font-weight: bold;
}
.tok-variable.tok-parameter {
 color: #323232;
}
.tok-entity.tok-name.tok-tag {
 color: #63a35c;
}
.tok-entity.tok-other.tok-attribute-name {
 color: #795da3;
}
.tok-support.tok-function {
 color: #62a35c;
}
.tok-support.tok-constant {
 color: #0086b3;
}
.tok-support.tok-type, .tok-support.tok-class {
 color: #0086b3;
}
.tok-support.tok-other.tok-variable {
 color: #323232;
}
.tok-invalid, .tok-invalid.tok-illegal, .tok-invalid.tok-deprecated {
 color: #b52a1d;
 background-color: #f5f5f5;
font-weight: bold;
}
.tok-entity.tok-name.tok-filename.tok-find-in-files {
 color: #323232;
font-weight: bold;
}
.tok-constant.tok-numeric.tok-line-number.tok-find-in-files, .tok-constant.tok-numeric.tok-line-number.tok-match.tok-find-in-files {
 color: #b3b3b3;
}
.tok-markup.tok-deleted {
 background-color: #ffecec;
}
.tok-markup.tok-deleted .tok-punctuation.tok-definition.tok-inserted {
 color: #bd2c00;
font-weight: bold;
}
.tok-markup.tok-inserted {
 background-color: #eaffea;
}
.tok-markup.tok-inserted .tok-punctuation.tok-definition.tok-inserted {
 color: #55a532;
font-weight: bold;
}
.tok-source.tok-python .tok-keyword {
font-weight: bold;
}
.tok-source.tok-python .tok-storage {
font-weight: bold;
}
.tok-source.tok-python .tok-storage.tok-type {
font-weight: bold;
}
.tok-source.tok-python .tok-entity.tok-name.tok-function {
 color: #323232;
font-weight: bold;
}
.tok-text.tok-html.tok-markdown .tok-punctuation.tok-definition {
 color: #a71d5d;
}
.tok-text.tok-html.tok-markdown .tok-meta.tok-separator {
 color: #b3b3b3;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-heading {
font-weight: bold;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-raw.tok-block {
 color: #323232;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-raw.tok-inline {
 color: #323232;
}
.tok-text.tok-html.tok-markdown .tok-meta.tok-link, .tok-text.tok-html.tok-markdown .tok-meta.tok-image {
 color: #4183c4;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-underline.tok-link, .tok-text.tok-html.tok-markdown .tok-constant.tok-other.tok-reference {
font-style: italic;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-list {
 color: #ed6a43;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-bold {
font-weight: bold;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-italic {
font-style: italic;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-bold .tok-markup.tok-italic {
font-weight: bold;
font-style: italic;
}
.tok-text.tok-html.tok-markdown .tok-markup.tok-italic .tok-markup.tok-bold {
font-weight: bold;
font-style: italic;
}