:root {
    color-scheme: light;
    --bs-color-accent: #335cff;
    --bs-color-accent-hover: #1a47ff;
    --bs-color-accent-active: #335cff;
    --bs-background-1: #ffffff;
    --bs-background-2: #f6f6f6;
    --bs-background-3: #e7e7e7;
    --bs-background-accent: #8ab4f81f;
    --bs-color-1: #1b1b1b;
    --bs-color-2: #757575;
    --bs-color-3: #8e8e8e;
    --bs-color-light-blue: #0099ff;
    --bs-border-color: #dfdfdf;
    --bs-color-green: #069061;
    --bs-color-red: #ef0006;
    --bs-color-yellow: #edbe20;
    --bs-color-blue: #0082d0;
    --bs-color-orange: #ff5800;
    --bs-color-purple: #5203d1;
    --bs-color-white: #ffffff;
    --bs-color-black: #000000;
    --inline-code-background: #eff1f3;
    --inline-code-color: #24292f;

    --color-bs-background-1: var(--bs-background-1);
    --color-bs-background-2: var(--bs-background-2);
    --color-bs-background-3: var(--bs-background-3);
    --color-bs-background-accent: var(--bs-background-accent);
    --color-bs-1: var(--bs-color-1);
    --color-bs-2: var(--bs-color-2);
    --color-bs-3: var(--bs-color-3);
    --color-bs-accent: var(--bs-color-accent);
    --color-bs-border: var(--bs-border-color);
    --color-bs-green: var(--bs-color-green);
    --color-bs-red: var(--bs-color-red);
    --color-bs-yellow: var(--bs-color-yellow);
    --color-bs-blue: var(--bs-color-blue);
    --color-bs-orange: var(--bs-color-orange);
    --color-bs-purple: var(--bs-color-purple);
    --color-bs-white: var(--bs-color-white);
    --color-bs-black: var(--bs-color-black);
    --color-bs-light-blue: var(--bs-color-light-blue);
    --color-bs-accent-hover: var(--bs-color-accent-hover);
    --color-bs-accent-active: var(--bs-color-accent-active);

    color: var(--bs-color-1);
    background: var(--bs-background-1);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
    font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        color-scheme: dark;
        --bs-color-accent: #6685ff;
        --bs-color-accent-hover: #4d70ff;
        --bs-color-accent-active: #6685ff;
        --bs-background-1: #0f0f0f;
        --bs-background-2: #1a1a1a;
        --bs-background-3: #272727;
        --bs-background-accent: #3ea6ff1f;
        --bs-color-1: #e7e7e7;
        --bs-color-2: #a4a4a4;
        --bs-color-3: #797979;
        --bs-color-light-blue: #00aeff;
        --bs-border-color: #2d2d2d;
        --bs-color-green: #00b648;
        --bs-color-red: #dc1b19;
        --bs-color-yellow: #ffc90d;
        --bs-color-blue: #4eb3ec;
        --bs-color-orange: #ff8d4d;
        --bs-color-purple: #b191f9;
        --inline-code-background: #24292e;
        --inline-code-color: #e1e4e8;
    }
}

:is(.dark, .dark-mode) {
    color-scheme: dark;
    --bs-color-accent: #6685ff;
    --bs-color-accent-hover: #4d70ff;
    --bs-color-accent-active: #6685ff;
    --bs-background-1: #0f0f0f;
    --bs-background-2: #1a1a1a;
    --bs-background-3: #272727;
    --bs-background-accent: #3ea6ff1f;
    --bs-color-1: #e7e7e7;
    --bs-color-2: #a4a4a4;
    --bs-color-3: #797979;
    --bs-color-light-blue: #00aeff;
    --bs-border-color: #2d2d2d;
    --bs-color-green: #00b648;
    --bs-color-red: #dc1b19;
    --bs-color-yellow: #ffc90d;
    --bs-color-blue: #4eb3ec;
    --bs-color-orange: #ff8d4d;
    --bs-color-purple: #b191f9;
    --inline-code-background: #24292e;
    --inline-code-color: #e1e4e8;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bs-background-1);
    font-size: 14px;
}

body {
    min-height: 100svh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--bs-color-1);
    background: var(--bs-background-1);
    padding: 2rem;
}

header,
main,
footer {
    max-width: 360px;
    margin: 0 0 2rem;
}

h1,
h2,
h3,
p {
    font-weight: 400;
    font-size: 1rem;
}

p {
    margin-bottom: 1rem;
}

h2,
h3 {
    margin-bottom: 1rem;
}

a {
    color: inherit;
}

a:hover {
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

::selection {
    color: var(--bs-background-1);
    background: var(--bs-color-1);
}

.site-title {
    color: var(--bs-color-1);
    text-decoration: none;
}

.post-list {
    padding: 0;
    list-style: none;
}

.post-list li {
    margin-top: 2rem;
}

.post-meta {
    font-size: 0.85rem;
}

.article-header,
.back-link {
    margin-bottom: 2rem;
}

.article h3 {
    margin-top: 2rem;
}

pre {
    max-width: 100%;
    margin: 0 0 1rem;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color);
    font-size: 0.85rem;
    line-height: 1.5;
    tab-size: 2;
}

code {
    font-family:
        ui-monospace,
        SFMono-Regular,
        "SF Mono",
        Menlo,
        Consolas,
        "Liberation Mono",
        monospace;
}

.article :not(pre) > code {
    padding: 0.15em 0.35em;
    color: var(--inline-code-color);
    background: var(--inline-code-background);
    border-radius: 0.25em;
    font-size: 0.85em;
    white-space: break-spaces;
}

.tm-code {
    --shiki-dark: #e1e4e8;
    color: #24292e;
    background-color: var(--bs-background-1) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) .tm-code,
    :root:not(.light) .tm-code span {
        color: var(--shiki-dark) !important;
        font-style: var(--shiki-dark-font-style) !important;
        font-weight: var(--shiki-dark-font-weight) !important;
        text-decoration: var(--shiki-dark-text-decoration) !important;
    }
}

:is(.dark, .dark-mode) .tm-code,
:is(.dark, .dark-mode) .tm-code span {
    color: var(--shiki-dark) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
}

.company-link {
    white-space: nowrap;
}

.company-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.25em;
    vertical-align: -2px;
}

.company-icon--forte {
    margin-right: 0;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) .company-icon {
        filter: invert(1);
    }
}

:is(.dark, .dark-mode) .company-icon {
    filter: invert(1);
}

footer {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    text-align: left;
}