:root {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "Fira Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --fs-base: 16px;
    --lh-base: 1.5;
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1rem;
    --bp-sm: 30em;
    --bp-lg: 48em;
    --bp-xl: 58em;
    --sidebar-width: 20rem;
    --content-gutter: 0rem;
    --space-0: 0;
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --radius-1: 3px;
    --radius-2: 4px;
    --underline-thickness: .12em;
    --underline-offset: 2px;
    --color-bg: #fff;
    --color-text: #515151;
    --color-strong: #303030;
    --color-muted: #7a7a7a;
    --color-hr-top: #eee;
    --color-hr-bottom: #fff;
    --color-link: #227bb9;
    --color-code-bg: #f9f9f9;
    --color-highlight: #f8f8f8;
    --sidebar-fg: rgba(255, 255, 255, .5);
    --sidebar-bg: #202020;
    --theme-red: #ac4142;
    --theme-orange: #d28445;
    --theme-yellow: #f4bf75;
    --theme-green: #90a959;
    --theme-cyan: #75b5aa;
    --theme-blue: #6a9fb5;
    --theme-magenta: #aa759f;
    --theme-brown: #8f5536;
    --container-max: 42rem;
    --scrollbar-w: 16px;
    --scrollbar-radius: 10px;
    --scrollbar-gap: 0;
    --lang-bg: #333;
    --lang-fg: #fff;
    --lang-btn-bg: #444;
    --lang-btn-hover: #666;
    --lang-radius: 3px;
    --lang-fs: 12px;
    --lang-btn-fs: 10px;
    --lang-pad-y: 4px;
    --lang-pad-x: 8px;
    --nav-weight: 700;
    --nav-fs: clamp(1.15rem, 0.5vw + 0.95rem, 1.25rem);
    --nav-fs-lg: clamp(1.15rem, 0.5vw + 0.95rem, 1.35rem);
    --nav-gap: .2rem;
    --nav-pad-y: .25rem;
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0
}

html {
    font-family: var(--font-sans);
    line-height: var(--lh-base);
    font-size: clamp(16px, calc(16px + 0.004 * (100vi - 320px)), 20px);
}

body {
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    --accent: var(--theme-blue);
}

.theme-base-08 {
    --accent: var(--theme-red)
}

.theme-base-09 {
    --accent: var(--theme-orange)
}

.theme-base-0a {
    --accent: var(--theme-yellow)
}

.theme-base-0b {
    --accent: var(--theme-green)
}

.theme-base-0c {
    --accent: var(--theme-cyan)
}

.theme-base-0d {
    --accent: var(--theme-blue)
}

.theme-base-0e {
    --accent: var(--theme-magenta)
}

.theme-base-0f {
    --accent: var(--theme-brown)
}

a {
    color: var(--color-link);
    text-decoration: none
}

a:hover,
a:focus {
    text-decoration: underline
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: var(--space-1);
    font-weight: 700;
    line-height: 1.25;
    color: #313131;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: var(--fs-h1)
}

h2 {
    margin-top: var(--space-2);
    font-size: var(--fs-h2)
}

h3 {
    margin-top: var(--space-3);
    font-size: var(--fs-h3)
}

h4,
h5,
h6 {
    margin-top: var(--space-2);
    font-size: var(--fs-h4)
}

p {
    margin: 0 0 var(--space-2)
}

strong {
    color: var(--color-strong)
}

ul,
ol,
dl {
    margin-top: 0;
    margin-bottom: var(--space-2)
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: var(--space-1)
}

hr {
    position: relative;
    margin: var(--space-3) 0;
    border: 0;
    border-top: 1px solid var(--color-hr-top);
    border-bottom: 1px solid var(--color-hr-bottom);
}

abbr {
    font-size: 85%;
    font-weight: 700;
    color: #555;
    text-transform: uppercase
}

abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #e5e5e5
}

code,
pre {
    font-family: var(--font-mono)
}

code {
    padding: .25em .5em;
    font-size: 85%;
    color: #b3555e;
    background: var(--color-code-bg);
    border-radius: var(--radius-1);
}

pre {
    display: block;
    margin: 0 0 var(--space-2);
    padding: var(--space-2);
    font-size: .8rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--color-code-bg);
}

pre code {
    padding: 0;
    font-size: 100%;
    color: inherit;
    background: transparent
}

.highlight {
    margin-bottom: var(--space-2);
    border-radius: var(--radius-2);
    background: var(--color-highlight)
}

.highlight pre {
    margin-bottom: 0
}

.highlight .c {
    color: #6a737d;
    font-style: italic
}

.highlight .k {
    color: #d73a49
}

.highlight .s {
    color: #032f62
}

.highlight .na {
    color: #005cc5
}

.highlight .nb {
    color: #24292e
}

.highlight .nc {
    color: #6f42c1
}

.highlight .no {
    color: #e36209
}

.highlight .nd {
    color: #6f42c1
}

.highlight .nf {
    color: #005cc5
}

.highlight .nt {
    color: #22863a
}

.highlight .mi {
    color: #005cc5
}

.highlight .o {
    color: #d73a49
}

blockquote {
    padding: var(--space-1) var(--space-2);
    margin: .8rem 0;
    color: var(--color-muted);
    border-left: .25rem solid #e5e5e5;
}

@media (min-width:30em) {
    blockquote {
        padding-right: 5rem;
        padding-left: 1.25rem
    }
}

img {
    display: block;
    margin: 0 0 var(--space-2);
    border-radius: 5px;
    max-width: 100%
}

table {
    margin-bottom: var(--space-2);
    width: 100%;
    border: 1px solid #e5e5e5;
    border-collapse: collapse
}

td,
th {
    padding: .25rem .5rem;
    border: 1px solid #e5e5e5
}

tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
    background: var(--color-code-bg)
}

.lead {
    font-size: 1.15rem;
    font-weight: 300
}

.message {
    margin-bottom: var(--space-2);
    padding: var(--space-2);
    color: #717171;
    background: var(--color-code-bg)
}

.container {
    max-width: var(--container-max);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    margin-left: auto;
    margin-right: auto;
}

.masthead {
    padding: var(--space-2) 0;
    margin-bottom: 3rem
}

.masthead-title {
    margin: 0;
    color: #505050
}

.masthead-title a {
    color: #505050
}

.masthead-title small {
    font-size: 75%;
    font-weight: 400;
    color: #c0c0c0;
    letter-spacing: 0
}

.page,
.post {
    margin-bottom: 4em
}

.page-title,
.post-title,
.post-title a {
    color: #303030
}

.page-title,
.post-title {
    margin-top: 0
}

.post-date {
    display: block;
    margin-top: -.5rem;
    margin-bottom: var(--space-2);
    color: #757575
}

.related {
    padding: var(--space-3) 0;
    border-top: 1px solid #eee
}

.related-posts {
    padding-left: 0;
    list-style: none
}

.related-posts h3 {
    margin-top: 0
}

.related-posts li small {
    font-size: 75%;
    color: #999
}

.related-posts li a:hover {
    color: var(--color-link);
    text-decoration: none
}

.related-posts li a:hover small {
    color: inherit
}

.pagination {
    overflow: hidden;
    margin-left: calc(-1*var(--space-2));
    margin-right: calc(-1*var(--space-2));
    font-family: inherit;
    color: #ccc;
    text-align: center
}

.pagination-item {
    display: block;
    padding: var(--space-2);
    border: 1px solid #eee
}

.pagination-item:first-child {
    margin-bottom: -1px
}

a.pagination-item:hover {
    background: #f5f5f5
}

@media (min-width:30em) {
    .pagination {
        margin: 3rem 0
    }

    .pagination-item {
        float: left;
        width: 50%
    }

    .pagination-item:first-child {
        margin-bottom: 0;
        border-top-left-radius: var(--radius-2);
        border-bottom-left-radius: var(--radius-2)
    }

    .pagination-item:last-child {
        margin-left: -1px;
        border-top-right-radius: var(--radius-2);
        border-bottom-right-radius: var(--radius-2)
    }
}

.sidebar {
    text-align: center;
    padding: var(--space-2) var(--space-2);
    color: var(--sidebar-fg);
    background: var(--sidebar-bg);
}

.sidebar a {
    color: #fff
}

.sidebar-about h1 {
    color: #fff;
    margin-top: 0;
    font-family: inherit;
    font-weight: 800;
    font-size: 3.25rem;
}

.sidebar .sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--nav-gap)
}

.sidebar .sidebar-nav li {
    list-style: none;
    margin: 0;
    padding: 0
}

.sidebar a.sidebar-nav-item,
.sidebar .sidebar-nav-item {
    font-size: var(--nav-fs);
    font-weight: var(--nav-weight);
    line-height: 1.35;
    padding: var(--nav-pad-y) 0;
}

a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
    text-decoration: underline
}

.sidebar-nav-item.active {
    font-weight: 700
}

@media (min-width:48em) {

    .sidebar a.sidebar-nav-item,
    .sidebar .sidebar-nav-item {
        font-size: var(--nav-fs-lg)
    }
}

@media (min-width:48em) {
    .sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        width: var(--sidebar-width);
        z-index: 3;
    }

    .layout-reverse .sidebar {
        right: 0;
        left: auto
    }

    body:not(.layout-reverse) .sidebar {
        left: 0;
        right: auto
    }

    .sidebar .container {
        max-width: unset;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        padding: var(--space-2) var(--space-2);
    }

    .sidebar-about {
        margin-bottom: var(--space-3)
    }

    .sidebar-nav {
        margin: var(--space-2) 0
    }

    .sidebar-footer {
        margin-top: auto;
        padding-top: var(--space-3)
    }
}

.content {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-thickness);
    scrollbar-color: var(--accent) transparent;
}

@supports (scrollbar-width:auto) {
    .content {
        scrollbar-width: auto
    }
}

.content::-webkit-scrollbar {
    width: var(--scrollbar-w)
}

.content::-webkit-scrollbar-track {
    background: transparent;
    margin-block: var(--scrollbar-gap)
}

.content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: var(--scrollbar-radius);
    border: calc((var(--scrollbar-w)-8px)/2) solid transparent;
    background-clip: content-box;
}

.content::-webkit-scrollbar-thumb:hover {
    background: var(--accent)
}

.sidebar h2,
.sidebar h3 {
    font-family: inherit;
    font-weight: 700
}

.theme-base-08 .sidebar {
    background: var(--theme-red)
}

.theme-base-08 .content a,
.theme-base-08 .related-posts li a:hover {
    color: var(--theme-red)
}

.theme-base-09 .sidebar {
    background: var(--theme-orange)
}

.theme-base-09 .content a,
.theme-base-09 .related-posts li a:hover {
    color: var(--theme-orange)
}

.theme-base-0a .sidebar {
    background: var(--theme-yellow)
}

.theme-base-0a .content a,
.theme-base-0a .related-posts li a:hover {
    color: var(--theme-yellow)
}

.theme-base-0b .sidebar {
    background: var(--theme-green)
}

.theme-base-0b .content a,
.theme-base-0b .related-posts li a:hover {
    color: var(--theme-green)
}

.theme-base-0c .sidebar {
    background: var(--theme-cyan)
}

.theme-base-0c .content a,
.theme-base-0c .related-posts li a:hover {
    color: var(--theme-cyan)
}

.theme-base-0d .sidebar {
    background: var(--theme-blue)
}

.theme-base-0d .content a,
.theme-base-0d .related-posts li a:hover {
    color: var(--theme-blue)
}

.theme-base-0e .sidebar {
    background: var(--theme-magenta)
}

.theme-base-0e .content a,
.theme-base-0e .related-posts li a:hover {
    color: var(--theme-magenta)
}

.theme-base-0f .sidebar {
    background: var(--theme-brown)
}

.theme-base-0f .content a,
.theme-base-0f .related-posts li a:hover {
    color: var(--theme-brown)
}

@media (min-width:48em) {
    body {
        overflow: hidden
    }

    .layout-reverse .content {
        margin-left: var(--space-2);
        margin-right: calc(var(--sidebar-width) + var(--content-gutter))
    }

    body:not(.layout-reverse) .content {
        margin-left: calc(var(--sidebar-width) + var(--content-gutter));
        margin-right: var(--space-2)
    }

    .content {
        max-width: none;
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable both-edges;
        padding-right: var(--space-2);
    }

    .content .container {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 var(--space-2)
    }
}

.language-switcher {
    background: var(--lang-bg);
    color: var(--lang-fg);
    padding: var(--lang-pad-y) var(--lang-pad-x);
    border-radius: var(--lang-radius);
    font-size: var(--lang-fs);
    display: inline-block;
}

.sidebar .language-switcher {
    display: block;
    width: max-content;
    margin: var(--space-1) auto 0
}

.language-switcher p {
    font-size: var(--lang-btn-fs);
    margin: 0;
    font-weight: 700
}

.language-switcher a {
    display: inline-block;
    margin: 2px;
    padding: 2px 6px;
    background: var(--lang-btn-bg);
    font-size: var(--lang-btn-fs);
    color: #fff;
    text-decoration: none;
    border-radius: var(--lang-radius);
    transition: background .2s linear;
}

.language-switcher a:hover {
    background: var(--lang-btn-hover)
}

@media (min-width: 48em) {
    .sidebar {
        --space-2: 0.75rem;
        --space-3: 1rem;
        --nav-gap: .15rem;
        --nav-pad-y: .2rem;
        --nav-fs: clamp(1rem, 0.35svh + 0.90rem, 1.25rem);
        --nav-fs-lg: clamp(1.05rem, 0.40svh + 0.95rem, 1.35rem);
    }

    .sidebar-about h1 {
        font-size: clamp(2rem, 1.6svh + 1.2rem, 3.25rem);
    }

    .language-switcher {
        font-size: clamp(10px, 0.22svh + 8px, 12px);
    }

    .language-switcher p {
        font-size: clamp(9px, 0.20svh + 7px, 10px);
    }
}

@media (min-width: 48em) and (max-height: 720px) {
    .sidebar {
        --space-2: 0.5rem;
        --space-3: 0.75rem;
    }

    .sidebar-about {
        margin-bottom: var(--space-2);
    }
}