@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'InterVariable';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/FiraMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/FiraMono-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/FiraMono-Bold.woff2') format('woff2');
}

:root {
    --font-fallback: -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
    --font-primary: 'Inter', var(--font-fallback);
    --font-mono: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --layout-width: 64rem;
    --layout-padding: 2rem;
    --section-width: 37.5rem;
    --svg-size: 1.5rem;

    --space-0: 0.5rem;
    --space-1: 0.75rem;
    --space-2: 1rem;
    --space-3: 1.25rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 2.5rem;
    --space-7: 3.5rem;
    --space-8: 4rem;
    --space-9: 5rem;
    --space-10: 6rem;

    --px1: 0.0625rem;
    --px2: 0.125rem;
    --px3: 0.1875rem;
    --px4: 0.25rem;
    --px5: 0.3125rem;
    --px6: 0.375rem;

    --radius-sx: 0.1875rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;

    --h1: clamp(2.25rem, 6vw, 2.75rem);
    --h2: clamp(1.625rem, 5vw, 2rem);
    --h3: clamp(1.125rem, 4vw, 1.5rem);
    --h4: clamp(1rem, 3vw, 1.25rem);

    --line-height-p: 1.75;
    --line-height-sub: 1.4;
    --line-height-heading: 1.12;
    --text-margin-sm: 0.5em;
    --text-margin-md: 0.75em;
    --text-margin-lg: 1.5em;

    --underline-offset: 0.1em;
    --underline-thickness: 0.125em;

    --cubic-smooth: 0.16s cubic-bezier(0.25, 0.8, 0.3, 1);
    --cubic-snappy: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-fast: 0.16s ease;

    --neutral-hue: 125;
    --purple-hue: 125;
    --peach-hue: 3;
}

@supports (font-variation-settings: normal) {
    :root {
        --font-primary: 'InterVariable', var(--font-fallback);
        font-optical-sizing: auto;
    }
}

/*

OK = uses the OKLab color model
L = Lightness
C = Chroma (color intensity)
H = Hue (the "color wheel" angle in degrees)

*/

html[data-theme='light'] {
    --text: oklch(0.55 0 var(--neutral-hue));
    --text-alt: oklch(0.39 0 var(--neutral-hue));
    --bg: oklch(0.98 0 var(--neutral-hue));
    --bg-header: oklch(0.98 0 var(--neutral-hue) / 0.88);
    --bg-alt: oklch(1 0 var(--neutral-hue));
    --border: oklch(0.88 0.01 var(--neutral-hue));
    --purple-accent: oklch(0.64 0.12 var(--purple-hue));
    --purple-bg: oklch(0.9 0.03 var(--purple-hue) / 0.4);
    --purple-border: oklch(0.8 0.12 var(--purple-hue));
    --peach-accent: oklch(0.62 0.12 var(--peach-hue));
    --peach-bg: oklch(0.94 0.026 var(--peach-hue) / 0.65);
    --peach-border: oklch(0.79 0.096 var(--peach-hue));
    --inverse-text: oklch(0.28 0.01 var(--purple-hue));
    --inverse-bg: oklch(0.9 0.036 var(--purple-hue));
    --scroll-bar: oklch(0.76 0.02 var(--neutral-hue));
    --shadow-lg: 0 9px 10px -3px oklch(0.24 0 0 / 0.07), 0 4px 6px -4px oklch(0.24 0 0 / 0.06);
    color-scheme: light;
}

html[data-theme='dark'] {
    --text: oklch(0.7 0.003 var(--neutral-hue));
    --text-alt: oklch(0.92 0 var(--neutral-hue));
    --bg: oklch(0.2 0.001 var(--neutral-hue));
    --bg-header: oklch(0.25 0.007 var(--neutral-hue) / 0.9);
    --bg-alt: oklch(0.235 0.001 var(--neutral-hue));
    --border: oklch(0.39 0.001 var(--neutral-hue));
    --purple-accent: oklch(0.72 0.1 var(--purple-hue));
    --purple-bg: oklch(0.35 0.08 var(--purple-hue) / 0.28);
    --purple-border: oklch(0.45 0.07 var(--purple-hue));
    --peach-accent: oklch(0.72 0.1 var(--peach-hue));
    --peach-bg: oklch(0.46 0.12 var(--peach-hue) / 0.2);
    --peach-border: oklch(0.66 0.15 var(--peach-hue) / 0.55);
    --inverse-text: oklch(0.94 0.1 var(--purple-hue));
    --inverse-bg: oklch(0.44 0.06 var(--purple-hue) / 0.8);
    --scroll-bar: oklch(0.47 0.024 var(--neutral-hue));
    --shadow-lg: none;
    color-scheme: dark;
}

html {
    scrollbar-color: var(--scroll-bar) var(--bg);
    font-size: 100%;
    scroll-behavior: smooth;
    transition: none;
    scrollbar-gutter: stable;
}

html[data-ready='true'] {
    transition:
        background-color var(--transition-md),
        color var(--transition-md);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --cubic-smooth: 0s;
        --cubic-snappy: 0s;
        --ease-fast: 0s;
    }
    html {
        scroll-behavior: auto;
    }
    html[data-ready='true'] {
        transition: none;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

svg {
    stroke: currentColor;
    stroke-width: 1.75;
    width: var(--svg-size);
    height: var(--svg-size);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button {
    font: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li {
    overflow-wrap: break-word;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

::selection {
    background: var(--inverse-bg);
    color: var(--inverse-text);
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-md);
    color: var(--text);
    background-color: var(--bg);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    min-height: 100dvh;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    letter-spacing: 0.015em;
    font-weight: 380;
}

/* -------------- LAYOUT */
.mobile {
    display: inline-block;
}
.desktop {
    display: none;
}

main {
    flex: 1;
    margin: 0 auto;
    width: 100%;
    max-width: var(--layout-width);
    padding: var(--space-9) var(--layout-padding);
}

main > h1 {
    margin: 0 auto var(--text-margin-lg);
    width: 100%;
    max-width: var(--section-width); /* default for pages without upper/sidebar */
}

/* If main has upper or sidebar, h1 expand */
main.has-upper > h1,
main.has-sidebar > h1 {
    max-width: var(--layout-width);
}

/* ---------- LAYOUT CONTAINER ---------- */
.layout-container {
    width: 100%;
    margin: 0 auto;
    max-width: var(--section-width); /* default for pages without upper/sidebar */
    gap: var(--space-7);
}

/* ---------- UPPER SECTION ---------- */
main.has-upper .layout-container {
    max-width: var(--layout-width);
}

/* ---------- SIDEBAR ---------- */
main.has-sidebar .layout-container {
    max-width: var(--layout-width);
    display: flex;
    flex-direction: column;
}

/* ---------- UPPER + SIDEBAR ---------- */
main.has-upper.has-sidebar .layout-container {
    display: grid;
    grid-template-areas: 'section' 'sidebar' 'content';

    section.upper-section {
        grid-area: section;
        max-width: var(--section-width);
    }

    aside.sidebar {
        grid-area: sidebar;
    }

    section.main-content {
        grid-area: content;
        max-width: var(--layout-width);
    }
}

/* ---------- DESKTOP ---------- */
@media (min-width: 48rem) {
    .mobile {
        display: none;
    }
    .desktop {
        display: inline-block;
    }
    /* ---------- SIDEBAR ---------- */
    main.has-sidebar .layout-container {
        flex-direction: row-reverse;
        justify-content: space-between;

        aside.sidebar {
            flex: 0 1
                calc(
                    var(--layout-width) - var(--section-width) - var(--space-9) -
                        (var(--layout-padding) * 2)
                );
            min-width: 10rem;
        }
        .sidebar-inner {
            position: sticky;
            top: var(--space-10);
        }
        section.main-content {
            flex: 1 1 var(--section-width);
            min-width: 20rem;
            max-width: var(--section-width);
        }
    }
    /* ---------- UPPER + SIDEBAR ---------- */
    main.has-upper.has-sidebar .layout-container {
        grid-template-areas: 'section sidebar' 'content sidebar';

        aside.sidebar {
            max-width: calc(
                var(--layout-width) - var(--section-width) - var(--space-7) -
                    (var(--layout-padding) * 2)
            );
        }
    }
}

a {
    color: var(--purple-accent);
    overflow-wrap: anywhere;
    text-decoration-skip-ink: auto;
    transition:
        color var(--cubic-smooth),
        background-color var(--cubic-smooth),
        text-decoration-color var(--cubic-smooth);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-thickness);
}
article p a,
article li a {
    font-weight: 500;
    text-decoration-color: var(--purple-accent);
}

a:hover {
    color: var(--peach-accent);
    text-decoration: underline;
    text-decoration-color: var(--peach-border);
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-thickness);
}

@media (prefers-reduced-motion: reduce) {
    a {
        transition: none !important;
    }
}

button:focus-visible,
a:focus-visible {
    outline: var(--px3) solid;
    transition: 0s;
}

button:focus-visible {
    outline-color: var(--text);
}

a:focus-visible {
    outline-color: var(--purple-accent);
    border-radius: var(--px3);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-alt);
    line-height: var(--line-height-heading);
    margin: var(--text-margin-sm) 0;
    font-weight: 700;
}

h1 {
    font-size: var(--h1);
    margin: 0; /* keep zero if you want the first heading flush */
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

/* article headings — share a single margin pattern using em */
article h2,
article h3,
article h4 {
    margin: var(--text-margin-lg) 0 var(--text-margin-sm) 0;
}

p {
    margin: var(--text-margin-md) 0;
    line-height: var(--line-height-p);
}

.divider {
    display: block;
    height: 1px;
    margin-block: var(--space-8);
    background-size: auto 100%;
    background-image: repeating-linear-gradient(to right, var(--border) 0 4px, transparent 4px 6px);
}

.divider.acc1 {
    background-image: repeating-linear-gradient(
        to right,
        var(--purple-border) 0 4px,
        transparent 4px 6px
    );
}
.divider.acc2 {
    background-image: repeating-linear-gradient(
        to right,
        var(--peach-border) 0 4px,
        transparent 4px 6px
    );
}
img {
    max-width: 100%;
    height: auto;
}

a.external-link {
    display: inline;

    svg.external-link-icon {
        stroke: currentColor;
        height: 1.25em;
        width: 1.25em;
        vertical-align: text-bottom;
        margin-left: 0.125em;
        stroke-width: 2;
    }
}

.shadow-lg {
    border-radius: var(--radius-full);
    border: var(--px1) solid var(--border);
    background-color: var(--bg-alt);
    box-shadow: var(--shadow-lg);
}
/* If list-style is needed */
ul.needed,
ol.needed {
    margin: var(--text-margin-md) 0;
    padding-left: var(--space-6);
}

ul.needed li,
ol.needed li {
    margin: var(--text-margin-sm) 0;
    padding-left: var(--space-0);
    line-height: var(--line-height-p);
}

ul.needed li:hover::marker,
ol.needed li:hover::marker {
    color: var(--text-alt);
}

/* Nested lists */
ul.needed ul,
ul.needed ol,
ol.needed ul,
ol.needed ol {
    padding-left: var(--space-3);
}

ul.needed li::marker {
    color: var(--purple-accent);
    content: '➜ ';
    transition: color var(--cubic-smooth);
}

ol.needed {
    list-style: decimal;

    li::marker {
        color: var(--purple-accent);
        font-weight: 500;
    }
}

ul.needed ul {
    list-style: circle;
    margin: var(--space-0) 0;
}
ol.needed ol {
    list-style: lower-alpha;
    margin: var(--space-0) 0;
}