/*
  PaperMod v8+
  License: MIT https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE
  Copyright (c) 2020 nanxiaobei and adityatelange
  Copyright (c) 2021-2025 adityatelange
*/
:root {
    --gap: 24px;
    --content-gap: 20px;
    --nav-width: 1024px;
    --main-width: 720px;
    --header-height: 60px;
    --footer-height: 60px;
    --radius: 8px;
    --theme: rgb(255, 255, 255);
    --entry: rgb(255, 255, 255);
    --primary: rgb(30, 30, 30);
    --secondary: rgb(108, 108, 108);
    --tertiary: rgb(214, 214, 214);
    --content: rgb(31, 31, 31);
    --code-block-bg: rgb(28, 29, 33);
    --code-bg: rgb(245, 245, 245);
    --border: rgb(238, 238, 238);
    /* The site's only colour. Everything else here is a grey: links are
       the one thing worth picking out of the page, so the accent is spent
       on them and nothing else. 7.10:1 on white and 6.51:1 on the home
       page's own background, both clear of WCAG AA's 4.5:1. */
    --link: rgb(10, 88, 166);
}

.dark {
    --theme: rgb(29, 30, 32);
    --entry: rgb(46, 46, 51);
    --primary: rgb(218, 218, 219);
    --secondary: rgb(155, 156, 157);
    --tertiary: rgb(65, 66, 68);
    --content: rgb(196, 196, 197);
    --code-block-bg: rgb(46, 46, 51);
    --code-bg: rgb(55, 56, 62);
    --border: rgb(51, 51, 51);
    /* 7.53:1 on the post background, 5.27:1 on the home page's lighter
       one -- the tightest of the four combinations, still above AA. */
    --link: rgb(122, 176, 255);
}

.list {
    background: var(--code-bg);
}

.dark.list {
    background: var(--theme);
}
*,
::after,
::before {
    box-sizing: border-box;
}

html {
    -webkit-tap-highlight-color: transparent;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a,
button,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    word-break: break-word;
    background: var(--theme);
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
table {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
    margin-bottom: 0;
}

ul {
    padding: 0;
}

a {
    text-decoration: none;
}

body,
figure,
ul {
    margin: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    overflow-x: auto;
    word-break: keep-all;
}

button,
input,
textarea {
    padding: 0;
    font: inherit;
    background: 0 0;
    border: 0;
}

input,
textarea {
    outline: 0;
}

button,
input[type=button],
input[type=submit] {
    cursor: pointer;
}

input:-webkit-autofill,
textarea:-webkit-autofill {
    box-shadow: 0 0 0 50px var(--theme) inset;
}

img {
    display: block;
    max-width: 100%;
}
.not-found {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    font-size: 160px;
    font-weight: 700;
}
.archive-posts {
    width: 100%;
    font-size: 16px;
}

.archive-year {
    margin-top: 40px;
}

.archive-year:not(:last-of-type) {
    border-bottom: 2px solid var(--border);
}

.archive-month {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
}

.archive-month-header {
    margin: 25px 0;
    width: 200px;
}

.archive-month:not(:last-of-type) {
    border-bottom: 1px solid var(--border);
}

.archive-entry {
    position: relative;
    padding: 5px;
    margin: 10px 0;
}

.archive-entry-title {
    margin: 5px 0;
    font-weight: 400;
}

.archive-count,
.archive-meta {
    color: var(--secondary);
    font-size: 14px;
}
.footer,
.top-link {
    font-size: 12px;
    color: var(--secondary);
}

.footer {
    max-width: calc(var(--main-width) + var(--gap) * 2);
    margin: auto;
    padding: calc((var(--footer-height) - var(--gap)) / 2) var(--gap);
    text-align: center;
    line-height: 24px;
}

.footer span {
    margin-inline-start: 1px;
    margin-inline-end: 1px;
}

.footer span:last-child {
    white-space: nowrap;
}

.footer a {
    color: inherit;
    border-bottom: 1px solid var(--secondary);
}

.footer a:hover {
    border-bottom: 1px solid var(--primary);
}

.top-link {
    visibility: hidden;
    position: fixed;
    bottom: 60px;
    right: 30px;
    z-index: 99;
    background: var(--tertiary);
    width: 42px;
    height: 42px;
    padding: 12px;
    border-radius: 64px;
    transition: visibility 0.5s, opacity 0.8s linear;
}

.top-link,
.top-link svg {
    filter: drop-shadow(0px 0px 0px var(--theme));
}

.footer a:hover,
.top-link:hover {
    color: var(--primary);
}

.top-link:focus,
#theme-toggle:focus {
    outline: 0;
}
.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: calc(var(--nav-width) + var(--gap) * 2);
    margin-inline-start: auto;
    margin-inline-end: auto;
    line-height: var(--header-height);
}

.nav a {
    display: block;
}

.logo,
#menu {
    display: flex;
    margin: auto var(--gap);
}

.logo {
    flex-wrap: inherit;
}

.logo a {
    font-size: 24px;
    font-weight: 700;
}

.logo a img, .logo a svg {
    display: inline;
    vertical-align: middle;
    pointer-events: none;
    transform: translate(0, -10%);
    border-radius: 6px;
    margin-inline-end: 8px;
}

button#theme-toggle {
    font-size: 26px;
    margin: auto 4px;
}

body.dark #moon {
    vertical-align: middle;
    display: none;
}

body:not(.dark) #sun {
    display: none;
}

#menu {
    list-style: none;
    word-break: keep-all;
    overflow-x: auto;
    white-space: nowrap;
}

#menu li + li {
    margin-inline-start: var(--gap);
}

#menu a {
    font-size: 16px;
}

#menu .active {
    font-weight: 500;
    border-bottom: 2px solid currentColor;
}

.lang-switch li,
.lang-switch ul,
.logo-switches {
    display: inline-flex;
    margin: auto 4px;
}

.lang-switch {
    display: flex;
    flex-wrap: inherit;
}

.lang-switch a {
    margin: auto 3px;
    font-size: 16px;
    font-weight: 500;
}

.logo-switches {
    flex-wrap: inherit;
}
.main {
    position: relative;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    max-width: calc(var(--main-width) + var(--gap) * 2);
    margin: auto;
    padding: var(--gap);
}

.page-header h1 {
    font-size: 40px;
}

.pagination {
    display: flex;
}

.pagination a {
    color: var(--theme);
    font-size: 13px;
    line-height: 36px;
    background: var(--primary);
    border-radius: calc(36px / 2);
    padding: 0 16px;
}

.pagination .next {
    margin-inline-start: auto;
}


.social-icons a {
    display: inline-flex;
    padding: 10px;
}

.social-icons a svg {
    height: 26px;
    width: 26px;
}

code {
    direction: ltr;
}

div.highlight,
pre {
    position: relative;
}

.copy-code {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(78, 78, 78, 0.8);
    border-radius: var(--radius);
    padding: 0 5px;
    font-size: 14px;
    user-select: none;
}

div.highlight:hover .copy-code,
pre:hover .copy-code {
    display: block;
}
.first-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    margin: var(--gap) 0 calc(var(--gap) * 2) 0;
}

.first-entry .entry-header {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.first-entry .entry-header h1 {
    font-size: 34px;
    line-height: 1.3;
}

.first-entry .entry-content {
    margin: 14px 0;
    font-size: 16px;
    -webkit-line-clamp: 3;
}

.first-entry .entry-footer {
    font-size: 14px;
}

.home-info .entry-content {
    -webkit-line-clamp: unset;
}

.post-entry {
    position: relative;
    margin-bottom: var(--gap);
    padding: var(--gap);
    background: var(--entry);
    border-radius: var(--radius);
    transition: transform 0.1s;
    border: 1px solid var(--border);
}

.post-entry:active {
    transform: scale(0.96);
}

.tag-entry .entry-cover {
    display: none;
}

.entry-header h2 {
    font-size: 24px;
    line-height: 1.3;
}

.entry-content {
    margin: 8px 0;
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.entry-footer {
    color: var(--secondary);
    font-size: 13px;
}

.entry-link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.entry-hint {
    color: var(--secondary);
}

.entry-hint-parent {
    display: flex;
    justify-content: space-between;
}

.entry-cover {
    font-size: 14px;
    margin-bottom: var(--gap);
    text-align: center;
}

.entry-cover img {
    border-radius: var(--radius);
    pointer-events: none;
    width: 100%;
    height: auto;
}

.entry-cover a {
    color: var(--secondary);
    box-shadow: 0 1px 0 var(--primary);
}
.page-header,
.post-header {
    margin: 24px auto var(--content-gap) auto;
}

.post-title {
    margin-bottom: 2px;
    font-size: 40px;
}

.post-description {
    margin-top: 10px;
    margin-bottom: 5px;
}

.post-meta,
.breadcrumbs {
    color: var(--secondary);
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
}

.post-meta .i18n_list li {
    display: inline-flex;
    list-style: none;
    margin: auto 3px;
    box-shadow: 0 1px 0 var(--secondary);
}

.breadcrumbs a {
    font-size: 16px;
}

.post-content {
    color: var(--content);
}

.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin: 24px 0 16px;
}

.post-content h1 {
    margin: 40px auto 32px;
    font-size: 40px;
}

.post-content h2 {
    margin: 32px auto 24px;
    font-size: 32px;
}

.post-content h3 {
    font-size: 24px;
}

.post-content h4 {
    font-size: 16px;
}

.post-content h5 {
    font-size: 14px;
}

.post-content h6 {
    font-size: 12px;
}

.post-content a,
.toc a:hover {
    box-shadow: 0 1px 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.post-content a code {
    margin: auto 0;
    border-radius: 0;
    box-shadow: 0 -1px 0 var(--primary) inset;
}

.post-content del {
    text-decoration: line-through;
}

.post-content dl,
.post-content ol,
.post-content p,
.post-content figure,
.post-content ul {
    margin-bottom: var(--content-gap);
}

.post-content ol,
.post-content ul {
    padding-inline-start: 20px;
}

.post-content li {
    margin-top: 5px;
}

.post-content li p {
    margin-bottom: 0;
}

.post-content dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.post-content dt {
    width: 25%;
    font-weight: 700;
}

.post-content dd {
    width: 75%;
    margin-inline-start: 0;
    padding-inline-start: 10px;
}

.post-content dd ~ dd,
.post-content dt ~ dt {
    margin-top: 10px;
}

.post-content table {
    margin-bottom: var(--content-gap);
}

.post-content table th,
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
    min-width: 80px;
    padding: 8px 5px;
    line-height: 1.5;
    border-bottom: 1px solid var(--border);
}

.post-content table th {
    text-align: start;
}

.post-content table:not(.highlighttable) td code:only-child {
    margin: auto 0;
}

.post-content .highlight table {
    border-radius: var(--radius);
}

.post-content .highlight:not(table) {
    margin: 10px auto;
    background: var(--code-block-bg) !important;
    border-radius: var(--radius);
    direction: ltr;
}

.post-content li > .highlight {
    margin-inline-end: 0;
}

.post-content ul pre {
    margin-inline-start: calc(var(--gap) * -2);
}

.post-content .highlight pre {
    margin: 0;
}

.post-content .highlighttable {
    table-layout: fixed;
}

.post-content .highlighttable td:first-child {
    width: 40px;
}

.post-content .highlighttable td .linenodiv {
    padding-inline-end: 0 !important;
}

.post-content .highlighttable td .highlight,
.post-content .highlighttable td .linenodiv pre {
    margin-bottom: 0;
}

.post-content code {
    margin: auto 4px;
    padding: 4px 6px;
    font-size: 0.78em;
    line-height: 1.5;
    background: var(--code-bg);
    border-radius: 2px;
}

.post-content pre code {
    display: grid;
    margin: auto 0;
    padding: 10px;
    color: rgb(213, 213, 214);
    background: var(--code-block-bg) !important;
    border-radius: var(--radius);
    overflow-x: auto;
    word-break: break-all;
}

.post-content blockquote {
    margin: 20px 0;
    padding: 0 14px;
    border-inline-start: 3px solid var(--primary);
}

.post-content hr {
    margin: 30px 0;
    height: 2px;
    background: var(--tertiary);
    border: 0;
}

.post-content iframe {
    max-width: 100%;
}

.post-content img {
    border-radius: 4px;
    margin: 1rem 0;
}

.post-content img[src*="#center"] {
    margin: 1rem auto;
}

.post-content figure.align-center {
    text-align: center;
}

.post-content figure > figcaption {
    color: var(--primary);
    font-size: 16px;
    font-weight: bold;
    margin: 8px 0 16px;
}

.post-content figure > figcaption > p {
    color: var(--secondary);
    font-size: 14px;
    font-weight: normal;
}

.toc {
    margin: 0 2px 40px 2px;
    border: 1px solid var(--border);
    background: var(--code-bg);
    border-radius: var(--radius);
    padding: 0.4em;
}

.dark .toc {
    background: var(--entry);
}

.toc details summary {
    cursor: zoom-in;
    margin-inline-start: 10px;
    user-select: none;
}

.toc details[open] summary {
    cursor: zoom-out;
}

.toc .details {
    display: inline;
    font-weight: 500;
}

.toc .inner {
    margin: 5px 20px 0;
    padding: 0 10px;
    opacity: 0.9;
}

.toc li ul {
    margin-inline-start: var(--gap);
}

.toc summary:focus {
    outline: 0;
}

.post-footer {
    margin-top: 56px;
}

.post-footer>* {
    margin-bottom: 10px;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tags li {
    display: inline-block;
}

.post-tags a,
.share-buttons,
.paginav {
    border-radius: var(--radius);
    background: var(--code-bg);
    border: 1px solid var(--border);
}

.post-tags a {
    display: block;
    padding: 0 14px;
    color: var(--secondary);
    font-size: 14px;
    line-height: 34px;
    background: var(--code-bg);
}

.post-tags a:hover,
.paginav a:hover {
    background: var(--border);
}

.share-buttons {
    padding: 10px;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    gap: 10px;
}

.share-buttons li,
.share-buttons a {
    display: inline-flex;
}

.share-buttons a:not(:last-of-type) {
    margin-inline-end: 12px;
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
    display: inline-flex;
    color: var(--secondary);
    margin-inline-start: 8px;
    font-weight: 500;
    user-select: none;
}

.paginav {
    display: flex;
    line-height: 30px;
}

.paginav a {
    padding-inline-start: 14px;
    padding-inline-end: 14px;
    border-radius: var(--radius);
}

.paginav .title {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: small;
    color: var(--secondary);
}

.paginav .prev,
.paginav .next {
    width: 50%;
}

.paginav span:hover:not(.title) {
    box-shadow: 0 1px 0;
}

.paginav .next {
    margin-inline-start: auto;
    text-align: right;
}

[dir="rtl"] .paginav .next {
    text-align: left;
}

h1>a>svg {
    display: inline;
}

img.in-text {
    display: inline;
    margin: auto;
}
.terms-tags li {
    display: inline-block;
    margin: 10px;
    font-weight: 500;
}

.terms-tags a {
    display: block;
    padding: 3px 10px;
    background: var(--tertiary);
    border-radius: 6px;
    transition: transform 0.1s;
}

.terms-tags a:active {
    background: var(--tertiary);
    transform: scale(0.96);
}
/* Background */ .bg { color: #cad3f5; background-color: #24273a; }
/* PreWrapper */ .chroma { color: #cad3f5; background-color: #24273a; }
/* Other */ .chroma .x {  }
/* Error */ .chroma .err { color: #ed8796 }
/* CodeLine */ .chroma .cl {  }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #474733 }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8087a2 }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8087a2 }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #c6a0f6 }
/* KeywordConstant */ .chroma .kc { color: #f5a97f }
/* KeywordDeclaration */ .chroma .kd { color: #ed8796 }
/* KeywordNamespace */ .chroma .kn { color: #8bd5ca }
/* KeywordPseudo */ .chroma .kp { color: #c6a0f6 }
/* KeywordReserved */ .chroma .kr { color: #c6a0f6 }
/* KeywordType */ .chroma .kt { color: #ed8796 }
/* Name */ .chroma .n {  }
/* NameAttribute */ .chroma .na { color: #8aadf4 }
/* NameBuiltin */ .chroma .nb { color: #91d7e3 }
/* NameBuiltinPseudo */ .chroma .bp { color: #91d7e3 }
/* NameClass */ .chroma .nc { color: #eed49f }
/* NameConstant */ .chroma .no { color: #eed49f }
/* NameDecorator */ .chroma .nd { color: #8aadf4; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #8bd5ca }
/* NameException */ .chroma .ne { color: #f5a97f }
/* NameFunction */ .chroma .nf { color: #8aadf4 }
/* NameFunctionMagic */ .chroma .fm { color: #8aadf4 }
/* NameLabel */ .chroma .nl { color: #91d7e3 }
/* NameNamespace */ .chroma .nn { color: #f5a97f }
/* NameOther */ .chroma .nx {  }
/* NameProperty */ .chroma .py { color: #f5a97f }
/* NameTag */ .chroma .nt { color: #c6a0f6 }
/* NameVariable */ .chroma .nv { color: #f4dbd6 }
/* NameVariableClass */ .chroma .vc { color: #f4dbd6 }
/* NameVariableGlobal */ .chroma .vg { color: #f4dbd6 }
/* NameVariableInstance */ .chroma .vi { color: #f4dbd6 }
/* NameVariableMagic */ .chroma .vm { color: #f4dbd6 }
/* Literal */ .chroma .l {  }
/* LiteralDate */ .chroma .ld {  }
/* LiteralString */ .chroma .s { color: #a6da95 }
/* LiteralStringAffix */ .chroma .sa { color: #ed8796 }
/* LiteralStringBacktick */ .chroma .sb { color: #a6da95 }
/* LiteralStringChar */ .chroma .sc { color: #a6da95 }
/* LiteralStringDelimiter */ .chroma .dl { color: #8aadf4 }
/* LiteralStringDoc */ .chroma .sd { color: #6e738d }
/* LiteralStringDouble */ .chroma .s2 { color: #a6da95 }
/* LiteralStringEscape */ .chroma .se { color: #8aadf4 }
/* LiteralStringHeredoc */ .chroma .sh { color: #6e738d }
/* LiteralStringInterpol */ .chroma .si { color: #a6da95 }
/* LiteralStringOther */ .chroma .sx { color: #a6da95 }
/* LiteralStringRegex */ .chroma .sr { color: #8bd5ca }
/* LiteralStringSingle */ .chroma .s1 { color: #a6da95 }
/* LiteralStringSymbol */ .chroma .ss { color: #a6da95 }
/* LiteralNumber */ .chroma .m { color: #f5a97f }
/* LiteralNumberBin */ .chroma .mb { color: #f5a97f }
/* LiteralNumberFloat */ .chroma .mf { color: #f5a97f }
/* LiteralNumberHex */ .chroma .mh { color: #f5a97f }
/* LiteralNumberInteger */ .chroma .mi { color: #f5a97f }
/* LiteralNumberIntegerLong */ .chroma .il { color: #f5a97f }
/* LiteralNumberOct */ .chroma .mo { color: #f5a97f }
/* Operator */ .chroma .o { color: #91d7e3; font-weight: bold }
/* OperatorWord */ .chroma .ow { color: #91d7e3; font-weight: bold }
/* Punctuation */ .chroma .p {  }
/* Comment */ .chroma .c { color: #6e738d; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #6e738d; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #6e738d; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #6e738d; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #6e738d; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #6e738d; font-style: italic }
/* CommentPreprocFile */ .chroma .cpf { color: #6e738d; font-weight: bold; font-style: italic }
/* Generic */ .chroma .g {  }
/* GenericDeleted */ .chroma .gd { color: #ed8796; background-color: #363a4f }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #ed8796 }
/* GenericHeading */ .chroma .gh { color: #f5a97f; font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #a6da95; background-color: #363a4f }
/* GenericOutput */ .chroma .go {  }
/* GenericPrompt */ .chroma .gp {  }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #f5a97f; font-weight: bold }
/* GenericTraceback */ .chroma .gt { color: #ed8796 }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w {  }
.chroma {
    background-color: unset !important;
}

.chroma .hl {
    display: flex;
}

.chroma .lnt {
    padding: 0 0 0 12px;
}

.highlight pre.chroma code {
    padding: 8px 0;
}

.highlight pre.chroma .line .cl,
.chroma .ln {
    padding: 0 10px;
}

.chroma .lntd:last-of-type {
    width: 100%;
}
 /* from reset */
::-webkit-scrollbar-track {
    background: 0 0;
}

.list:not(.dark)::-webkit-scrollbar-track {
    background: var(--code-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--tertiary);
    border: 5px solid var(--theme);
    border-radius: var(--radius);
}

.list:not(.dark)::-webkit-scrollbar-thumb {
    border: 5px solid var(--code-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) {
    background: var(--theme);
}

/* from post-single */
.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
    display: none;
}

.post-content :not(table) ::-webkit-scrollbar-thumb {
    border: 2px solid var(--code-block-bg);
    background: rgb(113, 113, 117);
}

.post-content :not(table) ::-webkit-scrollbar-thumb:hover {
    background: rgb(163, 163, 165);
}

.gist table::-webkit-scrollbar-thumb {
    border: 2px solid rgb(255, 255, 255);
    background: rgb(173, 173, 173);
}

.gist table::-webkit-scrollbar-thumb:hover {
    background: rgb(112, 112, 112);
}

.post-content table::-webkit-scrollbar-thumb {
    border-width: 2px;
}

/* from zmedia */
@media screen and (min-width: 768px) {

    /* reset */
    ::-webkit-scrollbar {
        width: 19px;
        height: 11px;
    }
}
@media screen and (max-width: 768px) {
    /* theme-vars */
    :root {
        --gap: 14px;
    }

    /* profile-mode */
    .profile img {
        transform: scale(0.85);
    }

    /* post-entry */
    .first-entry {
        min-height: 260px;
    }

    /* archive */
    .archive-month {
        flex-direction: column;
    }

    .archive-year {
        margin-top: 20px;
    }

    /* footer */
    .footer {
        padding: calc((var(--footer-height) - var(--gap) - 10px) / 2) var(--gap);
    }
}

/* footer */
@media screen and (max-width: 900px) {
    .list .top-link {
        transform: translateY(-5rem);
    }
}

@media screen and (max-width: 340px) {
    .share-buttons {
        justify-content: unset;
    }
}

@media (prefers-reduced-motion) {
    /* terms; profile-mode; post-single; post-entry; post-entry; search; search */
    .terms-tags a:active,
    .button:active,
    .post-entry:active,
    .top-link,
    #searchResults .focus,
    #searchResults li:active {
        transform: none;
    }
}
/*
This is just a placeholder blank stylesheet so as to support adding custom styles budled with theme's default styles

Read https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#bundling-custom-css-with-themes-assets for more info
*/
/* The CV page (generator/cv.py's own rendered markup; see layouts... no,
   this generator has no layouts of its own for it -- see pages.cv_page).
   Ported from content/cv.html's three inline <style> blocks, rewritten
   against the site's own theme tokens (css/core/theme-vars.css) so the
   page follows the site's light/dark toggle instead of carrying fixed
   colours of its own. Visual shape (the blue name banner, the pale
   headline chips, the underlined section headings, the solid sub-heading
   bars) is kept as close to the original as the token palette allows;
   only the two colours no site token covers -- the banner/accent blue and
   the headline-chip blue -- get their own custom properties, defined once
   here and adjusted for dark mode the same way theme-vars.css adjusts the
   rest (a ".dark" class, not a media query -- this site's toggle sets that
   class on <html> rather than following prefers-color-scheme). */

:root {
    --cv-accent: #407fcb;
    --cv-name-bg: var(--cv-accent);
    --cv-name-fg: #ffffff;
    --cv-chip-bg: #f8f9ff;
    --cv-chip-fg: #3145aa;
    --cv-chip-border: #e0e6ff;
    --cv-subheading-bg: #aacbe0;
    --cv-subheading-fg: #1e4963;
}

.dark {
    /* A brighter accent and a dark-tinted chip background keep both the
       banner and the headline chips readable against the theme's dark
       panels, rather than the light-mode colours going muddy on them. */
    --cv-accent: #6ea8e0;
    --cv-name-bg: #2c4a68;
    --cv-name-fg: #eaf2fb;
    --cv-chip-bg: #26344a;
    --cv-chip-fg: #b7c9f2;
    --cv-chip-border: #3a4a68;
    --cv-subheading-bg: #2c4a5e;
    --cv-subheading-fg: #cfe4f2;
}

.cv {
    color: var(--content);
}

.cv-header {
    overflow: hidden;
}

.cv-name {
    background-color: var(--cv-name-bg);
    color: var(--cv-name-fg);
    font-size: 1.4rem;
    font-weight: bold;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem 0;
    text-align: center;
    border-radius: var(--radius);
}

.cv-address {
    float: right;
    clear: right;
    width: 45%;
    font-size: 0.85rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    text-align: right;
}

.cv-profiles {
    float: right;
    clear: right;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    width: 45%;
    font-size: 0.85rem;
    text-align: right;
}

.cv-profiles li {
    display: inline;
    margin-left: 0.75rem;
}

.cv-profile-link {
    color: var(--cv-accent);
}

.cv-headlines {
    clear: both;
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    overflow: hidden;
}

.cv-headlines li {
    display: inline-block;
    background-color: var(--cv-chip-bg);
    color: var(--cv-chip-fg);
    padding: 0.5rem 1rem;
    margin: 0.25rem 0.5rem 0.25rem 0;
    border: 1px solid var(--cv-chip-border);
    border-radius: var(--radius);
    font-weight: bold;
    font-size: 0.85rem;
}

.cv-pdf-note {
    clear: both;
}

.cv-section {
    margin-bottom: 2rem;
    overflow: hidden;
}

.cv-heading {
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: bold;
    margin: 2rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cv-accent);
}

.cv-sub-heading {
    background-color: var(--cv-subheading-bg);
    color: var(--cv-subheading-fg);
    padding: 0.75rem 1rem;
    margin: 1rem 0 0.5rem 0;
    border-radius: var(--radius);
    font-weight: bold;
    font-size: 1rem;
}

.cv-list,
.cv-expandable {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.cv-list li,
.cv-expandable > li {
    margin-bottom: 0.4rem;
}

.cv-details summary {
    cursor: pointer;
    font-weight: 600;
}

.cv-details p,
.cv-details ul {
    margin: 0.5rem 0;
}

.cv-details ul {
    padding-left: 1.5rem;
}

/* The two floated blocks (address, profiles) in .cv-header need clearing
   before .cv-headlines, which already does it with `clear: both`, but a
   narrow viewport (where floats would otherwise overlap the name banner
   less gracefully) still reads fine stacked, so no separate breakpoint is
   needed here the way signature.css needs one for its panel margins. */

/* --- Print ------------------------------------------------------------
   The original CV *claimed* every <details> printed open (its own comment
   said so) but never actually forced it, so a browser's "Print to PDF" of
   that page only ever showed the closed summaries, never the detail
   underneath. Forcing it open takes two rules, because browsers have hidden
   that content two different ways: older engines apply `display: none` to a
   closed <details>'s non-summary children, while current ones (Chromium 131+,
   which is what ./make-cv-pdf.sh drives) put the content in a
   ::details-content pseudo-element and hide it with `content-visibility`,
   which no rule on the children can override. Both are overridden below --
   dropping either one silently halves the PDF. The disclosure triangle is
   hidden since there is nothing left to disclose. Site chrome (nav, footer, the "back to top"
   link, the consulting signature) is hidden; the CV itself keeps
   readable, fixed light-mode colours regardless of which theme is active
   on screen. */
@media print {
    @page {
        margin: 15mm;
        size: A4;
    }

    /* Site chrome, and the link offering the PDF -- pointless inside the PDF. */
    .header,
    .footer,
    .top-link,
    .signature,
    .cv-pdf-note {
        display: none !important;
    }

    .cv-section {
        page-break-inside: avoid;
    }

    .cv-sub-heading {
        page-break-after: avoid;
    }

    details {
        display: block;
    }

    details > summary {
        list-style: none;
    }

    details > summary::-webkit-details-marker {
        display: none;
    }

    details > summary::marker {
        display: none;
    }

    /* For engines that hide the children directly. */
    details > :not(summary) {
        display: block !important;
    }

    /* For engines that hide the generated content wrapper instead. */
    details::details-content {
        content-visibility: visible !important;
        display: block !important;
    }

    .cv,
    .cv-heading,
    .cv-address,
    .cv-profile-link {
        color: #1a1a1a;
    }

    .cv-name {
        background-color: #407fcb;
        color: #ffffff;
    }

    .cv-headlines li {
        background-color: #f8f9ff;
        color: #3145aa;
        border-color: #e0e6ff;
    }

    .cv-sub-heading {
        background-color: #aacbe0;
        color: #1e4963;
    }
}
/* --- Dead links ---------------------------------------------------------
   Prose that used to be a link whose target no longer exists, written in
   markdown as `[text](dead:https://gone.example/page)` and rendered by
   generator/markdown.py as an <a> with no href.

   Styled as prose with a hint, not as a broken link: the words are still
   part of the sentence and should read as such. The dotted underline says
   something was here; the tooltip says what. Deliberately NOT
   strikethrough, which means retracted content -- the text was never
   retracted, only its target lost. */
.dead-link {
    color: var(--secondary);
    border-bottom: 1px dotted var(--secondary);
    cursor: help;
}

/* A tooltip is hover-only, so a touch reader gets the muted styling and no
   explanation. That is an acceptable floor -- the sentence still reads --
   but it is why the styling has to stand on its own rather than relying on
   the title attribute to carry the meaning. */
/* Home page landing sections. See layouts/home.html. */

.home-intro {
    margin-bottom: 8px;
}

.home-intro h1 {
    margin-bottom: 12px;
}

/* The section headings carry the whole structure of this page: without
   enough contrast, Recent and the two Recommended lists read as one long
   list. They used to be 20px against 18px/600 post titles -- a 2px
   difference against text that was very nearly as heavy -- so the heading
   was not winning. 28px sits below a post's own h2 (32px) and well clear of
   the titles beneath it.

   The generous margin-top is doing as much work as the size: it is what
   separates the groups, rather than just labelling them. */
.home-section {
    margin-top: 60px;
}

.home-section h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.home-featured,
.home-recent {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The whole item is a click target, not just the title -- clicking the
   blurb should take you to the post it describes.

   Done with a stretched pseudo-element rather than by wrapping the <a>
   around the title and the blurb together. Wrapping is valid HTML, but it
   makes the link's accessible name the whole of the text inside it, so a
   screen reader announcing links reads out each entire blurb. This way the
   accessible name stays just the title. It is also the pattern the theme
   already uses for listing cards -- see `.entry-link` in
   common/post-entry.css.

   The cost is that the overlay sits over the blurb, so the blurb cannot be
   selected by dragging. There is no version of "the whole card is
   clickable" that avoids that. */
.home-featured-item,
.home-recent-item {
    position: relative;
}

.home-featured-item > a::after,
.home-recent-item > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.home-featured-item {
    margin-bottom: 22px;
}

.home-featured-item > a {
    font-weight: 600;
}

.home-blurb {
    margin: 4px 0 0;
    color: var(--secondary);
    font-size: 15px;
    line-height: 1.5;
}

.home-recent-item {
    display: flex;
    gap: 14px;
    align-items: baseline;
    margin-bottom: 9px;
}

.home-recent-item time {
    color: var(--secondary);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-all-posts {
    margin-top: 22px;
}

/* Stack the date above the title on narrow screens rather than letting
   long titles wrap into a narrow column beside it. */
@media (max-width: 500px) {
    /* 28px is a lot of a narrow screen's width, and the headings are long
       ("Recommended: Quick reads"). Smaller, with the gap trimmed to match,
       keeps the hierarchy without letting a heading wrap to three lines. */
    .home-section {
        margin-top: 44px;
    }

    .home-section h2 {
        font-size: 23px;
    }

    .home-recent-item {
        flex-direction: column;
        gap: 1px;
        margin-bottom: 14px;
    }
}
/* --- Link colour --------------------------------------------------------
   The theme is otherwise entirely monochrome, and marks in-post links with
   an underline rather than a colour. That works inside a paragraph, where a
   link sits in a run of text -- but the home page's post titles had no
   affordance at all: no colour, no underline, no hover, just font-weight
   600. They were the only links on the site with nothing to say they were
   links.

   The accent is spent on content links only. Header, footer and the
   consulting call-to-action stay monochrome: they are navigation furniture,
   and colouring them would make the accent mean "here is a link" everywhere
   and therefore nothing anywhere. */

/* `a[href]`, not `a`. A dead link (docs/hugo-quirks.md's `dead:` scheme)
   renders as an <a> with NO href precisely so that it is not offered as
   something to follow, and it has its own muted, dotted styling. Plain
   `.post-content a` beats `.dead-link` on specificity -- one class plus an
   element against one class -- so it painted dead links the same blue as
   live ones, which is the one thing that styling exists to prevent.
   Matching on [href] means "colour the links you can actually follow". */
.post-content a[href],
.home-featured-item > a[href],
.home-recent-item > a[href] {
    color: var(--link);
}

/* The same underline in-post links get (post-single.css), now on the home
   page's titles too, so a title reads as a link before it is hovered. */
.home-featured-item > a[href],
.home-recent-item > a[href] {
    box-shadow: 0 1px 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* Consulting sign-off block. See layouts/partials/consulting-signature.html.
   Sits between the main content and the footer, aligned to the content column
   the same way .footer is. --entry is white on light and a lifted grey on
   dark, so the panel reads as raised on both post pages (white) and list
   pages (grey), where a --code-bg tint would vanish. */

.signature {
    max-width: calc(var(--main-width) + var(--gap) * 2);
    margin: calc(var(--gap) * 2) auto 0 auto;
    padding: var(--gap);
    background: var(--entry);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
}

/* The ring keeps the circle's edge visible where the portrait's background is
   close to the panel's, which differs between the light and dark themes.
   flex-shrink stops a long line of text from squashing it out of round. */
.signature-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--border);
}

/* Lets the text column shrink below its content width, which flex items will
   not do by default; without this a long unbroken word would widen the panel. */
.signature-body {
    min-width: 0;
}

.signature-text {
    margin: 0;
    color: var(--content);
    line-height: 1.6;
}

.signature-link {
    margin: 12px 0 0 0;
}

.signature-link a {
    font-weight: 600;
    color: var(--primary);
    box-shadow: 0 1px 0 var(--primary);
}

.signature-link a:hover {
    box-shadow: none;
}

/* The home page renders the panel inside <main>, which already applies the
   content width and side padding, so it needs neither. */
.signature-inline {
    max-width: none;
    margin: var(--gap) 0 0 0;
}

/* The panel is edge-to-edge on narrow screens, where the rounded corners and
   side margins would otherwise crowd the text. Not needed for the inline
   variant, whose side spacing comes from <main>. */
@media screen and (max-width: 768px) {
    .signature:not(.signature-inline) {
        margin-inline: var(--gap);
    }
}
/* --- Update notes -------------------------------------------------------
   `::: update` ... `:::` in a post, rendered as <div class="update"> -- an
   editorial note added after publication. See generator/markdown.py.

   A <div> rather than an <aside>: an aside claims the content is tangential,
   and an update is often the opposite. In posts/poker-puzzle it carries the
   puzzle the rest of the post depends on, the linked original having gone
   offline.

   Built from the theme's own tokens, so it follows light and dark without a
   second rule. The "Update:" label is left to the prose rather than generated
   here, so the wording stays the author's. */
.update {
    background: var(--entry);
    border-left: 3px solid var(--tertiary);
    border-radius: var(--radius);
    padding: 1em 1.2em;
    margin: var(--content-gap) 0;
}

/* Otherwise the last paragraph's own bottom margin pads the box unevenly. */
.update > :last-child {
    margin-bottom: 0;
}