:root { --bg: #fafafa; --fg: #111111; --muted: #5c5c5c; --accent: #2f6f4f; --rule: #dddddd; --font: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --content-w: 38rem; --gutter: clamp(1.25rem, 4vw, 1.75rem); }
    @media (prefers-color-scheme: dark) { :root { --bg: #0a0a0a; --fg: #eeeeee; --muted: #9a9a9a; --accent: #4fae82; --rule: #262626; } }
    h1, h2 { font-family: var(--font); font-weight: 700; margin: 0; }
    p, ul, ol { margin: 0 0 1em 0; }
    p:last-child { margin-bottom: 0; }
    .wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); }
    main { padding: 2rem 0 5rem; }
    .post-header { margin-bottom: 2rem; }
    .post-header h1 { font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 1.3; margin: 0 0 0.5rem; }
    .post-header time { font-size: 0.8rem; color: var(--muted); }
    .toc { margin: 0 0 2rem; padding: 0 0 1rem; border-bottom: 1px solid var(--rule); }
    .toc summary { font-size: 0.8rem; color: var(--muted); cursor: pointer; }
    .toc summary:hover, .toc summary:focus-visible { color: var(--accent); }
    .toc ul { list-style: none; padding: 0; margin: 0.75rem 0 0; }
    .toc li { font-size: 0.92rem; margin-bottom: 0.35rem; }
    .toc li:last-child { margin-bottom: 0; }
    .toc a { text-decoration: none; }
    .toc a:hover, .toc a:focus-visible { color: var(--accent); }
    .post-body h2 { font-size: 1.05rem; margin: 1.75rem 0 0.75rem; }
    .post-body p, .post-body li { color: var(--fg); }
    .post-body ul, .post-body ol { padding-left: 1.25rem; }
    .post-body pre { background: var(--rule); padding: 1rem 1.25rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; margin: 0 0 1.25rem; }
    .post-body code { background: var(--rule); padding: 0.15em 0.4em; font-size: 0.9em; }
    .post-body pre code { background: none; padding: 0; }
    .post-footer { margin-top: 3rem; margin-bottom: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.9rem; }
    /* Motion. Opacity and transform only, so no reflow, and no extra
       request — this rides along in a stylesheet the page already has.
       Opt-in via prefers-reduced-motion, and cleared again for print. */

    @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: no-preference) { body { transition: background-color 200ms ease, color 200ms ease; } }
    @media (prefers-reduced-motion: no-preference) { .post-header,
      .toc,
      .post-body > * { animation: rise 350ms ease-out; } }
    @media (prefers-reduced-motion: no-preference) { .post-body > *:nth-of-type(2) { animation-delay: 45ms; } }
    @media (prefers-reduced-motion: no-preference) { .post-body > *:nth-of-type(3) { animation-delay: 90ms; } }
    @media (prefers-reduced-motion: no-preference) { .post-body > *:nth-of-type(4) { animation-delay: 135ms; } }
    @media (prefers-reduced-motion: no-preference) { .post-body > *:nth-of-type(5) { animation-delay: 180ms; } }
    @media (prefers-reduced-motion: no-preference) { .post-body > *:nth-of-type(6) { animation-delay: 225ms; } }
    @media (prefers-reduced-motion: no-preference) { .post-body > *:nth-of-type(7) { animation-delay: 270ms; } }
    @media (prefers-reduced-motion: no-preference) { .post-body > *:nth-of-type(n+8) { animation-delay: 300ms; } }