/* ============================================================
   Venin for Gridea Pro
   Ported from hugo-theme-venin (AGPL-3.0) by Eltrac
   https://github.com/eltrac/hugo-theme-venin
   ============================================================ */

/* ---------- variables ---------- */

:root {
    /* colors (light) */
    --background-color: oklch(0.9707 0.0027 286.35);
    --bright-background-color: oklch(0.9851 0 0);
    --block-background-color: oklch(0.933 0.007 295.445);
    --border-color: oklch(0.8758 0.0123 247.97);
    --text-color: oklch(0.2316 0.0038 286.1);
    --secondary-text-color: oklch(0.5399 0.0077 286.14);
    --link-color: oklch(0.3147 0.0071 285.99);

    /* fonts */
    --serif-font-family:
        "Noto Serif", "Noto Serif SC", "Noto Serif TC",
        "Noto Serif CJK SC", "Noto Serif CJK TC",
        "Source Han Serif SC", "Source Han Serif TC",
        "Songti SC", "Times New Roman", Times, serif;
    --fangsong-font-family:
        "Zhuque Fangsong (technical preview)", "STFangsong",
        "FangSong", "仿宋", serif;
    --mono-font-family:
        "Courier New", Courier, Menlo, Monaco, Consolas,
        "Liberation Mono", "Lucida Console", monospace;

    /* layout */
    --page-width: 650px;
    --page-margin-y: 3rem;
}
@media screen and (min-width: 768px) {
    :root { --page-margin-y: 5rem; }
}

.dark {
    --background-color: oklch(0.2408 0.0049 219.67);
    --block-background-color: oklch(0.216 0.004 228.978);
    --border-color: rgba(255, 255, 255, 0.2);
    --text-color: oklch(0.8532 0.0082 73.73);
    --secondary-text-color: oklch(0.6863 0.0196 78.19);
    --link-color: oklch(0.9054 0.0081 73.74);
    --bright-background-color: oklch(0.5103 0 0);
}

/* ---------- reset ---------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
}

body {
    font-family: var(--serif-font-family);
    -webkit-font-smoothing: antialiased;
    color: var(--text-color);
    position: relative;
    margin: 0;

    /* faint web pattern over the background */
    background-color: var(--background-color);
    background-size: 5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8 0-2.76-2.24-5-5-5-4.418 0-8 3.582-8 8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='var(--block-background-color)' fill-opacity='0.018' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.dark body {
    background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8 0-2.76-2.24-5-5-5-4.418 0-8 3.582-8 8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='var(--block-background-color)' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

main {
    margin-block: var(--page-margin-y);
    position: relative;
}

article.article,
.article {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 1rem;
}

a {
    color: var(--text-color);
    text-decoration: none;
    text-underline-offset: 0.25rem;
}
a:hover { text-decoration: underline; }

button {
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: 1rem;
    font-family: var(--serif-font-family);
    cursor: pointer;
    background: none;
}

hr {
    margin: 2.5rem auto;
    border: 0.05rem dashed var(--border-color);
}

img { max-width: 100%; }

/* ---------- utility ---------- */

/* xerox: printed/photocopied look via SVG turbulence filter */
.xerox { filter: url(#venin-xerox); }
.xerox-soft { filter: url(#venin-xerox-soft); }

.font-mono { font-family: var(--mono-font-family); }
.text-secondary { color: var(--secondary-text-color); }
.hidden { display: none; }

.round-sticker {
    background-color: var(--block-background-color);
    border-radius: 9999px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    padding: 1rem;
}

/* bundled bat SVG needs inversion in dark mode; user images must not */
.dark img.logo-invert { filter: invert(1); }

.small-button {
    display: inline-block;
    background-color: var(--block-background-color);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-color);
    transition: border-color 0.15s;
    text-decoration: none;
}
.small-button:hover {
    text-decoration: none;
    border-color: var(--text-color);
}

/* tooltips ([data-tooltip]) */
.tooltipped { position: relative; }
.tooltipped .__generated-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0.25rem);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    pointer-events: none;
    margin-bottom: 0.5rem;
    z-index: 1000;
}
.dark .tooltipped .__generated-tooltip {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}
.tooltipped:hover .__generated-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ---------- header ---------- */

.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    max-width: 100%;
    margin-inline: auto;
    padding: 0 1rem;
}
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0;
        max-width: var(--page-width);
    }
}

.site-header .title-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-width: 0;
    max-width: 100%;
}
@media (min-width: 768px) {
    .site-header .title-group {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem;
    }
}

.title-image-container img.title-image {
    width: 3rem;
    height: auto;
    display: block;
}
@media (min-width: 768px) {
    .title-image-container img.title-image { width: 5rem; }
}

.site-title {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.site-title:hover { text-decoration: none; }
@media (min-width: 768px) {
    .site-title { font-size: 2rem; }
}

.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
}
@media (min-width: 768px) {
    .header-nav {
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        padding-left: 1.5rem;
    }
}

.header-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 100%;
}

/* the inverted pill navigation */
#header-navigation {
    margin-block: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    border-radius: 1rem;
    overflow: hidden;
}
#header-navigation a {
    display: inline-block;
    padding: 0.25rem 0.35rem;
    white-space: nowrap;
}
#header-navigation a:first-child { padding-left: 0.75rem; }
#header-navigation a:last-child { padding-right: 0.75rem; }
@media (min-width: 768px) {
    #header-navigation a { padding: 0.25rem 0.5rem; }
}
#header-navigation a:not(.active) {
    color: var(--background-color);
    background-color: var(--text-color);
}
#header-navigation a.active {
    color: var(--text-color);
    background-color: var(--block-background-color);
}

#header-navigation a:hover { text-decoration: none; opacity: 0.85; }

.theme-select {
    font-family: var(--mono-font-family);
    font-size: 0.875rem;
    background-color: var(--block-background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    padding: 0.1rem 0.2rem;
}

.search-button {
    font-family: var(--mono-font-family);
    font-size: 0.875rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px dashed var(--border-color);
    color: var(--secondary-text-color);
}
.search-button:hover { border-color: var(--secondary-text-color); }

.header-rss img {
    height: 1rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.7;
}
.header-rss:hover img { opacity: 1; }
.dark .header-rss img { filter: invert(1); }

/* ---------- post list (home / blog / tag pages) ---------- */

.posts-list {
    display: flex;
    flex-direction: column;
    margin-block: 1rem;
}

.posts-item { width: 100%; margin-top: 0.5rem; }

.posts-item header { width: 100%; }
@media (min-width: 768px) {
    .posts-item header {
        display: flex;
        justify-content: space-between;
    }
    .posts-item header .category-pill-wrap { margin-block: 1rem; }
}

.posts-item .post-meta-line {
    font-family: var(--mono-font-family);
    color: var(--secondary-text-color);
    margin: 0;
}
.posts-item .post-meta-line a { color: var(--secondary-text-color); }

.posts-item h2 {
    margin: 0.25rem 0;
    font-size: 1.5rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
@media (min-width: 768px) {
    .posts-item h2 { font-size: 1.875rem; }
}

.post-summary {
    font-size: 1.125rem;
    line-height: 1.625;
    margin-top: 0;
    color: var(--secondary-text-color);
}
.post-summary p:first-child { margin-top: 0; }
.post-summary p:last-child { margin-bottom: 0; }
/* abstracts may carry images; keep them contained */
.post-summary img {
    max-height: 10rem;
    width: auto;
    border-radius: 0.25rem;
}

/* ---------- category pill & tags ---------- */

.category-pill,
.tag {
    color: var(--secondary-text-color);
}
.category-pill:hover, .tag:hover { color: var(--text-color); text-decoration: none; }

/* ---------- post page ---------- */

.post-header { margin-bottom: 2rem; position: relative; }

.post-banner {
    display: block;
    width: 100%;
    max-height: 21rem;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.post-title {
    font-size: 1.875rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    overflow-wrap: anywhere;
}
@media (min-width: 768px) {
    .post-title { font-size: 2.25rem; }
}
.post-title small {
    display: block;
    color: var(--secondary-text-color);
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 0.4rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.post-meta .post-date { color: var(--secondary-text-color); }

/* ---------- home ---------- */

.home-hero {
    margin-block: 1rem;
}
.site-description {
    color: var(--secondary-text-color);
    margin: 0.5rem 0 0;
}

/* mono section label ("最新文章" on the landing page) */
.section-label {
    font-family: var(--mono-font-family);
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    margin: 2rem 0 0.25rem;
}
.home-latest { margin-top: 0.25rem; }

/* favorite quote on the landing page */
.home-quote {
    margin-block: 3rem 1rem;
    font-family: var(--fangsong-font-family);
}
.home-quote .quote-text {
    margin: 0;
    font-size: 1.35rem;
    line-height: 2.1;
}
.home-quote .quote-text::before {
    content: "「";
    color: var(--secondary-text-color);
    margin-right: 0.15em;
}
.home-quote .quote-text::after {
    content: "」";
    color: var(--secondary-text-color);
    margin-left: 0.15em;
}
.home-quote .quote-author {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--mono-font-family);
    font-style: normal;
    font-size: 1rem;
    color: var(--secondary-text-color);
    text-align: right;
}

.home-more {
    display: flex;
    gap: 0.6rem;
    margin-block: 2rem 1rem;
}

#home-nav {
    position: relative;
    width: 100%;
    display: flex;
    list-style: none;
    gap: 1rem;
    font-size: 0.875rem;
    max-width: var(--page-width);
    margin: 1rem auto;
    padding: 0;
}
#home-nav a { color: var(--secondary-text-color); }
#home-nav a.active { color: var(--text-color); }

/* ---------- pagination ---------- */

.post-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-block: 2.5rem;
    font-family: var(--mono-font-family);
    font-size: 0.875rem;
}
.post-pagination .page-numbers {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background-color: var(--block-background-color);
}
.post-pagination .page-numbers:hover { text-decoration: none; border-color: var(--text-color); }
.post-pagination .current-page { color: var(--secondary-text-color); }

/* ---------- markdown body ---------- */

.markdown-body { max-width: 100%; line-height: 1.75; overflow-wrap: break-word; }

.markdown-body p {
    hyphens: auto;
    margin-bottom: 1em;
}

/* zh bold gets dotted emphasis instead of heavy strokes */
.markdown-body strong {
    font-style: normal;
    padding-bottom: 0.3em;
    background-image: radial-gradient(circle, var(--text-color) 1.8px, transparent 1.8px);
    background-size: 1em 0.3em;
    background-repeat: repeat-x;
    background-position: left bottom;
}

.markdown-body img:not(p > img) {
    max-width: 100%;
    display: block;
    margin: 1rem auto;
    border-radius: 0.25rem;
}

/* inline images in paragraphs: display at natural size, no hover pop */
.markdown-body p > img:not([width]) {
    max-width: 100%;
    height: auto;
    display: inline;
    vertical-align: baseline;
}
/* large images promoted back to block by venin.js */
.markdown-body p > img.img-block {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 1rem auto;
    border-radius: 0.25rem;
}

.markdown-body ul { list-style-type: square; }
.markdown-body ul, .markdown-body ol {
    padding-inline-start: 1.75rem;
}
.markdown-body ul li, .markdown-body ol li { padding-left: 0.25rem; }
.markdown-body ul ::marker, .markdown-body ol ::marker {
    color: var(--secondary-text-color);
}

.markdown-body mark {
    color: var(--text-color);
    background-color: rgba(255, 235, 0, 0.25);
    text-decoration: underline;
    text-decoration-color: rgb(255, 235, 0);
    text-underline-offset: 5px;
}

.markdown-body del { opacity: 0.5; }
.markdown-body iframe { max-width: 100%; }

.markdown-body a:not(.footnote-backref, .footnote-ref) {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-color: var(--border-color);
    color: var(--link-color);
    transition: text-decoration-color 0.1s ease-in-out;
}
.markdown-body a:not(.footnote-backref, .footnote-ref):hover {
    text-decoration-color: var(--secondary-text-color);
}

/* external link icon */
.markdown-body a[target="_blank"]::after,
.markdown-body a.external-link::after {
    content: "";
    display: inline-block;
    margin-left: 0.05em;
    background-image: url("/img/external.svg");
    background-size: cover;
    opacity: 0.65;
    height: 1em;
    width: 1em;
    vertical-align: middle;
}
.dark .markdown-body a[target="_blank"]::after,
.dark .markdown-body a.external-link::after { filter: invert(1); }

.markdown-body a.footnote-ref {
    color: var(--secondary-text-color);
    margin-right: 0.25rem;
    font-size: 0.9rem;
}
.markdown-body a.footnote-ref::before { content: "["; }
.markdown-body a.footnote-ref::after { content: "]"; }

.markdown-body code {
    font-size: 90%;
    font-family: var(--mono-font-family);
    color: var(--secondary-text-color);
    font-weight: 600;
    background-color: var(--block-background-color);
    padding: 0.1em 0.3em;
    border-radius: 0.25rem;
}

.markdown-body pre {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 5px;
    border-top-right-radius: 0;
    position: relative;
    background-color: var(--block-background-color);
    overflow: auto;
}
.markdown-body pre > code {
    padding: 0;
    color: unset;
    font-weight: unset;
    background-color: inherit;
    border: 0;
    overflow: auto;
    display: block;
    line-height: 1.5;
}

/* vertical language tab on code blocks (when data-lang present);
   hidden on small screens where the overhang would overflow */
.markdown-body pre[data-lang]::before {
    content: attr(data-lang);
    display: block;
    box-sizing: border-box;
    line-height: 1rem;
    position: absolute;
    top: 0;
    right: -1rem;
    width: 1rem;
    min-height: 2.5rem;
    writing-mode: vertical-rl;
    text-align: center;
    font-size: 0.75em;
    font-family: var(--mono-font-family);
    background: #333;
    color: #fff;
    padding: 0.5rem 0;
    border-radius: 0 4px 4px 0;
}
@media (max-width: 767px) {
    .markdown-body pre[data-lang]::before { display: none; }
    .markdown-body pre { border-top-right-radius: 5px; max-width: 100%; }
}

.markdown-body figure { display: block; margin: 0; }
.markdown-body figcaption {
    max-width: 100%;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    font-weight: 400;
    text-align: center;
    white-space: normal;
}

.markdown-body blockquote {
    position: relative;
    font-family: var(--fangsong-font-family);
    border: none;
    margin-inline: 0;
    padding: 0 0 0 0.25rem;
    color: inherit;
}
.markdown-body blockquote::before,
.markdown-body blockquote::after {
    color: var(--secondary-text-color);
    position: absolute;
    font-weight: 800;
    font-size: 1.2em;
}
.markdown-body blockquote::before {
    content: "\201C";
    top: 0;
    left: -1.1rem;
}
.markdown-body blockquote::after {
    content: "\201D";
    right: -1.1rem;
    bottom: 0;
}
@media (max-width: 767px) {
    .markdown-body blockquote::before { left: -0.8rem; }
    .markdown-body blockquote::after { display: none; }
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}
.markdown-body th, .markdown-body td {
    border-bottom: 1px dashed var(--border-color);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.markdown-body th { font-family: var(--mono-font-family); font-size: 0.85em; }

.markdown-body sup[id*="fnref"]:target { background-color: rgba(255, 235, 0, 0.25); }

/* ---------- TOC (wide screens) ---------- */

#toc-container {
    display: none;
}
@media (min-width: 1200px) {
    #toc-container {
        display: block;
        position: absolute;
        bottom: 0;
        left: calc(50% + var(--page-width) / 2 + 2rem);
        right: auto;
        height: 100%;
        width: calc(50% - var(--page-width) / 2 - 3rem);
        min-width: 10rem;
    }
    #toc-container .toc-inner {
        position: sticky;
        top: 3rem;
        font-size: 0.8rem;
    }
}
@media (min-width: 1536px) {
    #toc-container .toc-inner { font-size: 0.875rem; }
}

#toc ul {
    margin-block: 0;
    padding-inline-start: 1rem;
    overflow: hidden;
    position: relative;
}
#toc > ul { padding-inline-start: 0; }
#toc li {
    list-style: none;
    margin-block: 0.15rem;
}
#toc li > a {
    color: var(--secondary-text-color);
    text-decoration: none;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}
#toc li > a::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 0.3rem;
    background-color: var(--block-background-color);
    border-radius: 0.2rem;
    transition: background 0.3s;
    flex-shrink: 0;
}
#toc li ul { max-height: 25rem; overflow-y: auto; }
#toc li:not(.active) ul { max-height: 0; }
#toc a:hover, #toc li.active > a { color: var(--text-color); }
#toc li.active > a::before { background-color: var(--secondary-text-color); }

/* ---------- back to top (the bat) ---------- */

#back2top {
    position: fixed;
    top: -6.25rem;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 0.3s ease;
    background: linear-gradient(to top, transparent, oklch(from var(--background-color) l c h / 0.9));
    pointer-events: none;
}
#back2top.visible { top: 0; }
#back2top.shake { animation: head-shake 0.6s ease; }

@keyframes head-shake {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(0.3rem); }
    50% { transform: translateY(-0.2rem); }
    75% { transform: translateY(0.15rem); }
}

#back2top-button {
    display: block;
    background: transparent;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}
#back2top-button img {
    display: block;
    width: 2rem;
    height: 2rem;
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04));
}
.dark #back2top-button img { filter: invert(1) drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)); }
#back2top-instruction {
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    margin: 0.3rem 0 0;
}

/* ---------- post navigation (prev/next) ---------- */

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 2rem;
    font-family: var(--mono-font-family);
    font-size: 0.875rem;
}
.post-nav a { max-width: 48%; overflow-wrap: anywhere; }
.post-nav .post-nav-next { text-align: right; margin-left: auto; }
.post-nav .nav-label { color: var(--secondary-text-color); }

/* ---------- interaction / comments ---------- */

.interaction-note {
    background-color: var(--block-background-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin-block: 2rem;
}
.interaction-note a { color: var(--text-color); text-decoration: underline; }

.comments-section { margin-block: 2.5rem; }
.comments-section .comments-title {
    font-family: var(--mono-font-family);
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin-bottom: 0.5rem;
}

/* ---------- footer ---------- */

.site-footer {
    margin: 2rem auto 0;
    font-family: var(--mono-font-family);
    font-size: 0.875rem;
    padding: 0 1rem;
    max-width: var(--page-width);
}
@media (min-width: 768px) {
    .site-footer {
        padding: 0;
        display: flex;
        justify-content: space-between;
        width: var(--page-width);
    }
}
.site-footer p { margin: 0.2rem 0; }
.site-footer .footer-links ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) {
    .site-footer .footer-links { display: flex; flex-direction: column; align-items: flex-end; }
    .site-footer .footer-links ul { justify-content: flex-end; }
}
.site-footer .footer-links a {
    opacity: 0.7;
    transition: opacity 0.15s;
}
.site-footer .footer-links a:hover { opacity: 1; text-decoration: none; }
.site-footer .footer-links img {
    height: 1rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
.dark .site-footer .footer-links img { filter: invert(1); }
.site-footer .footer-links .icon-char {
    font-size: 1rem;
    font-family: var(--serif-font-family);
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* ---------- archive ---------- */

.archive-year {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 2rem 0 0.5rem;
}
.archive-year:first-child { margin-top: 0.5rem; }
.archive-year .archive-count {
    font-size: 0.875rem;
    font-weight: 400;
    font-family: var(--mono-font-family);
    color: var(--secondary-text-color);
}
.archive-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.archive-list li {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding-block: 0.2rem;
    min-width: 0;
}
.archive-list li a { overflow-wrap: anywhere; }
.archive-list time {
    font-family: var(--mono-font-family);
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    flex-shrink: 0;
    width: 5.5rem;
}

/* ---------- tags page ---------- */

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block: 1.5rem;
}
.tags-cloud a {
    display: inline-block;
    background-color: var(--block-background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    padding: 0.15rem 0.55rem;
    transition: border-color 0.15s;
}
.tags-cloud a:hover { border-color: var(--text-color); text-decoration: none; }
.tags-cloud .tag-count {
    font-family: var(--mono-font-family);
    font-size: 0.75rem;
    color: var(--secondary-text-color);
}

/* ---------- memos ---------- */

.memos-list { margin-block: 1rem; }
.memo-item {
    background-color: var(--block-background-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-block: 0.75rem;
}
.memo-item .memo-content { font-size: 0.95rem; }
.memo-item .memo-content p:first-child { margin-top: 0; }
.memo-item .memo-content p:last-child { margin-bottom: 0; }
.memo-item .memo-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.4rem;
    font-family: var(--mono-font-family);
    font-size: 0.75rem;
    color: var(--secondary-text-color);
}
.memo-tag {
    background-color: var(--background-color);
    border-radius: 0.2rem;
    padding: 0 0.3rem;
}

/* long memos collapse, with an expand button injected by venin.js */
.memo-body {
    max-height: 10rem;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}
.memo-body.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    background: linear-gradient(transparent, var(--block-background-color));
    pointer-events: none;
}
.memo-expand-btn {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-family: var(--mono-font-family);
    color: var(--secondary-text-color);
    background: none;
    padding: 0;
}
.memo-expand-btn:hover { color: var(--text-color); }

/* ---------- memos heatmap (GitHub style) ---------- */

.heatmap-wrap {
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.heatmap-wrap table {
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
    table-layout: fixed;
}
.heatmap-wrap td.cell {
    border-radius: 2px;
    height: 13px;
    cursor: default;
}
.heatmap-wrap td.cell:hover {
    outline: 1px solid rgba(40, 223, 153, 0.6);
    outline-offset: -1px;
}
.heatmap-wrap td:empty { height: 13px; }
.heatmap-month-label {
    font-size: 11px;
    color: var(--secondary-text-color);
    text-align: left;
    padding: 0 0 4px 0;
    line-height: 1;
}
.heatmap-day-label {
    font-size: 10px;
    color: var(--secondary-text-color);
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    text-align: right;
    padding-right: 6px;
    line-height: 1;
}
.heatmap-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 6px;
    font-size: 11px;
    font-family: var(--mono-font-family);
    color: var(--secondary-text-color);
}
.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.heatmap-legend-cell {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* ---------- links page ---------- */

/* the card list lives inside .markdown-body, so beat its ul/a rules */
.markdown-body ul.links-list {
    list-style: none;
    padding: 0;
    margin-block: 1.5rem;
}
.links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.links-list li { margin: 0; padding-left: 0; }
.links-list li::marker { content: ""; }
.markdown-body .links-list a[target="_blank"]::after { display: none; }
.markdown-body .links-list a.friend-card {
    text-decoration: none;
    color: var(--text-color);
    text-decoration-color: transparent;
}
.friend-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--block-background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    transition: border-color 0.15s;
}
.friend-card:hover { border-color: var(--text-color); text-decoration: none; }
.friend-card img {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
}
.friend-card .friend-name {
    display: block;
    font-weight: 700;
    line-height: 1.4;
}
.friend-card .friend-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    line-height: 1.4;
}

/* ---------- search overlay ---------- */

#search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 10vh 1rem 1rem;
    background: oklch(from var(--background-color) l c h / 0.7);
    backdrop-filter: blur(0.4rem);
}
#search-overlay.open { display: flex; }

.search-panel {
    width: 100%;
    max-width: 37.5rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.2);
    overflow: hidden;
}
.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px dashed var(--border-color);
}
#search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-family: var(--serif-font-family);
    font-size: 1rem;
}
#search-input::placeholder { color: var(--secondary-text-color); }
.search-hint kbd {
    font-family: var(--mono-font-family);
    font-size: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    color: var(--secondary-text-color);
}
#search-results {
    max-height: 50vh;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.3rem;
}
#search-results li { margin: 0; }
#search-results a {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
}
#search-results a:hover, #search-results a.selected {
    background-color: var(--block-background-color);
    text-decoration: none;
}
#search-results .result-title { font-weight: 700; }
#search-results .result-meta {
    font-family: var(--mono-font-family);
    font-size: 0.72rem;
    color: var(--secondary-text-color);
}
#search-results .result-snippet {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.1rem;
}
#search-results mark {
    background-color: rgba(255, 235, 0, 0.35);
    color: inherit;
    padding: 0;
}
.search-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}

/* ---------- 404 ---------- */

.page-404 {
    position: relative;
    min-height: calc(100dvh - var(--page-margin-y) * 2 - 6rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
@media (min-width: 768px) {
    .page-404 { flex-direction: row; gap: 5rem; }
}
.page-404 .image-404 {
    width: 10rem;
    filter: url(#venin-xerox-soft);
}
.dark .page-404 .image-404 { filter: url(#venin-xerox-soft) invert(1); }
@media (min-width: 768px) {
    .page-404 .image-404 { width: 15rem; }
}
.page-404 .title-404 {
    font-size: 5rem;
    font-style: italic;
    filter: url(#venin-xerox);
    color: var(--secondary-text-color);
    margin: 0;
}

/* ---------- misc pages ---------- */

.page-title {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.1em;   /* 与站名一致的字距，参考 geedea.pro */
    text-align: center;      /* 与首页站名保持居中 */
    overflow-wrap: anywhere; /* 窄屏时自动折行，不溢出 */
    max-width: 100%;         /* 限制宽度，配合折行 */
    line-height: 1.4;        /* 统一行高，保证各页面标题占位对齐一致 */
    min-height: 2.8rem;      /* 2rem × 1.4 = 2.8rem，确保单行标题高度统一 */
    margin: 0 0 1rem;
}

.section-intro { color: var(--secondary-text-color); }

/* library/rating (kept for feature parity) */
.rating-stars { color: var(--secondary-text-color); letter-spacing: 0.1em; }