:root {
        --bg: #fff;
        --fg: #111;
        --muted: #444;
        --faint: #888;
        --faint2: #aaa;
        --border: #eee;
        --accent: #111;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg: #111;
            --fg: #eee;
            --muted: #bbb;
            --faint: #888;
            --faint2: #777;
            --border: #222;
            --accent: #eee;
        }
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: Arial, Helvetica, sans-serif;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    a:focus-visible,
    button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

    .skip-link {
        position: absolute;
        left: -999px;
        top: auto;
        background: var(--bg);
        color: var(--fg);
        padding: 10px 16px;
        border: 1px solid var(--border);
        z-index: 10;
    }

    .skip-link:focus {
        left: 20px;
        top: 20px;
    }

    header {
        max-width: 650px;
        margin: auto;
        padding: 25px 20px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
    }

    .logo {
        font-weight: bold;
    }

    .menu {
        display: flex;
        gap: 15px;
        color: var(--faint);
    }

    .tags {
        max-width: 650px;
        margin: 20px auto 0;
        padding: 0 20px 20px;

        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        font-size: 13px;
        color: var(--faint);
    }

    .tags button {
        font: inherit;
        color: inherit;
        background: none;
        border: none;
        padding: 4px 10px;
        border-radius: 999px;
        cursor: pointer;
    }

    .tags button:hover {
        color: var(--fg);
    }

    .tags button[aria-pressed="true"] {
        color: var(--bg);
        background: var(--accent);
    }

    main {
        max-width: 650px;
        margin: auto;
        padding: 20px;
    }

    .post {
        padding: 70px 0;
        border-bottom: 1px solid var(--border);
        position: relative;
    }

    .post.is-hidden {
        display: none;
    }

    .date {
        font-size: 11px;
        color: var(--faint2);
        margin-bottom: 20px;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .permalink {
        color: var(--faint2);
        opacity: 0;
        transition: opacity .15s;
    }

    .post:hover .permalink,
    .permalink:focus {
        opacity: 1;
    }

    .post h1 {
        margin: 0 0 20px;

        font-size: 38px;
        line-height: 1.05;
        letter-spacing: -1.5px;
    }

    .post img {
        max-width: 100%;
        border-radius: 4px;
        margin: 0 0 25px;
        display: block;
    }

    .post .video-embed {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        margin: 0 0 25px;
    }

    .post .video-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 4px;
    }

    .post .body p {
        margin: 0 0 15px;

        font-size: 17px;
        line-height: 1.65;

        color: var(--muted);
    }

    .post .body a {
        color: var(--fg);
        text-decoration: underline;
    }

    .post .body img {
        margin: 15px 0;
    }

    .hashtags {
        margin-top: 25px;

        display: flex;
        gap: 12px;
        flex-wrap: wrap;

        font-size: 12px;
        color: var(--faint);
    }

    .empty-state,
    .load-error {
        padding: 70px 0;
        color: var(--faint);
        font-size: 15px;
        display: none;
    }

    .empty-state.is-visible,
    .load-error.is-visible {
        display: block;
    }

    .page {
        max-width: 650px;
        margin: auto;
        padding: 100px 20px;
    }

    .page h1 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .page p {
        max-width: 600px;
        line-height: 1.8;
        color: var(--muted);
    }

    footer {
        max-width: 650px;
        margin: auto;
        padding: 50px 20px;

        display: flex;
        justify-content: space-between;

        font-size: 11px;
        color: var(--faint2);
    }

    footer nav {
        display: flex;
        gap: 12px;
    }

    @media (max-width: 600px) {
        .post h1 {
            font-size: 32px;
        }

        footer {
            flex-direction: column;
            gap: 15px;
        }
    }