@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap');

:root {
    color-scheme: light dark;
    --primary: rgb(31, 89, 147);
    --primary-1: rgb(31, 89, 147, 0.1);
    --primary-2: rgb(31, 89, 147, 0.2);
    --primary-3: rgb(31, 89, 147, 0.3);
    --primary-4: rgb(31, 89, 147, 0.4);
    --primary-5: rgb(31, 89, 147, 0.5);
    --primary-6: rgb(31, 89, 147, 0.6);
    --primary-7: rgb(31, 89, 147, 0.7);
    --primary-8: rgb(31, 89, 147, 0.8);
    --primary-9: rgb(31, 89, 147, 0.9);
    --secondary: rgb(249, 140, 16);
    --secondary-1: rgb(249, 140, 16, 0.1);
    --secondary-2: rgb(249, 140, 16, 0.2);
    --secondary-3: rgb(249, 140, 16, 0.3);
    --secondary-4: rgb(249, 140, 16, 0.4);
    --secondary-5: rgb(249, 140, 16, 0.5);
    --secondary-6: rgb(249, 140, 16, 0.6);
    --secondary-7: rgb(249, 140, 16, 0.7);
    --secondary-8: rgb(249, 140, 16, 0.8);
    --secondary-9: rgb(249, 140, 16, 0.9);
    --blueprint: rgb(4, 26, 63);
    --fg: light-dark(rgb(30, 30, 30), rgb(240, 240, 235));
    --fg-1: light-dark(rgb(30, 30, 30, 0.1), rgb(240, 240, 235, 0.1));
    --fg-2: light-dark(rgb(30, 30, 30, 0.2), rgb(240, 240, 235, 0.2));
    --fg-3: light-dark(rgb(30, 30, 30, 0.3), rgb(240, 240, 235, 0.3));
    --fg-4: light-dark(rgb(30, 30, 30, 0.4), rgb(240, 240, 235, 0.4));
    --fg-5: light-dark(rgb(30, 30, 30, 0.5), rgb(240, 240, 235, 0.5));
    --fg-6: light-dark(rgb(30, 30, 30, 0.6), rgb(240, 240, 235, 0.6));
    --fg-7: light-dark(rgb(30, 30, 30, 0.7), rgb(240, 240, 235, 0.7));
    --fg-8: light-dark(rgb(30, 30, 30, 0.8), rgb(240, 240, 235, 0.8));
    --fg-9: light-dark(rgb(30, 30, 30, 0.9), rgb(240, 240, 235, 0.9));
    --bg: light-dark(rgb(245, 245, 240), rgb(30, 30, 30));
    --bg-1: light-dark(rgb(245, 245, 240, 0.1), rgb(30, 30, 30, 0.1));
    --bg-2: light-dark(rgb(245, 245, 240, 0.2), rgb(30, 30, 30, 0.2));
    --bg-3: light-dark(rgb(245, 245, 240, 0.3), rgb(30, 30, 30, 0.3));
    --bg-4: light-dark(rgb(245, 245, 240, 0.4), rgb(30, 30, 30, 0.4));
    --bg-5: light-dark(rgb(245, 245, 240, 0.5), rgb(30, 30, 30, 0.5));
    --bg-6: light-dark(rgb(245, 245, 240, 0.6), rgb(30, 30, 30, 0.6));
    --bg-7: light-dark(rgb(245, 245, 240, 0.7), rgb(30, 30, 30, 0.7));
    --bg-8: light-dark(rgb(245, 245, 240, 0.8), rgb(30, 30, 30, 0.8));
    --bg-9: light-dark(rgb(245, 245, 240, 0.9), rgb(30, 30, 30, 0.9));
    --muted: light-dark(rgb(90, 90, 85), rgb(180, 180, 175));
    --muted-1: light-dark(rgb(90, 90, 85, 0.1), rgb(180, 180, 175, 0.1));
    --muted-2: light-dark(rgb(90, 90, 85, 0.2), rgb(180, 180, 175, 0.2));
    --muted-3: light-dark(rgb(90, 90, 85, 0.3), rgb(180, 180, 175, 0.3));
    --muted-4: light-dark(rgb(90, 90, 85, 0.4), rgb(180, 180, 175, 0.4));
    --muted-5: light-dark(rgb(90, 90, 85, 0.5), rgb(180, 180, 175, 0.5));
    --muted-6: light-dark(rgb(90, 90, 85, 0.6), rgb(180, 180, 175, 0.6));
    --muted-7: light-dark(rgb(90, 90, 85, 0.7), rgb(180, 180, 175, 0.7));
    --muted-8: light-dark(rgb(90, 90, 85, 0.8), rgb(180, 180, 175, 0.8));
    --muted-9: light-dark(rgb(90, 90, 85, 0.9), rgb(180, 180, 175, 0.9));
    --card: light-dark(rgb(255, 255, 255), rgb(20, 20, 20));
    --card-1: light-dark(rgb(255, 255, 255, 0.1), rgb(20, 20, 20, 0.1));
    --card-2: light-dark(rgb(255, 255, 255, 0.2), rgb(20, 20, 20, 0.2));
    --card-3: light-dark(rgb(255, 255, 255, 0.3), rgb(20, 20, 20, 0.3));
    --card-4: light-dark(rgb(255, 255, 255, 0.4), rgb(20, 20, 20, 0.4));
    --card-5: light-dark(rgb(255, 255, 255, 0.5), rgb(20, 20, 20, 0.5));
    --card-6: light-dark(rgb(255, 255, 255, 0.6), rgb(20, 20, 20, 0.6));
    --card-7: light-dark(rgb(255, 255, 255, 0.7), rgb(20, 20, 20, 0.7));
    --card-8: light-dark(rgb(255, 255, 255, 0.8), rgb(20, 20, 20, 0.8));
    --card-9: light-dark(rgb(255, 255, 255, 0.9), rgb(20, 20, 20, 0.9));
    --white: rgb(255, 255, 255);
    --white-1: rgb(255, 255, 255, 0.1);
    --white-2: rgb(255, 255, 255, 0.2);
    --white-3: rgb(255, 255, 255, 0.3);
    --white-4: rgb(255, 255, 255, 0.4);
    --white-5: rgb(255, 255, 255, 0.5);
    --white-6: rgb(255, 255, 255, 0.6);
    --white-7: rgb(255, 255, 255, 0.7);
    --white-8: rgb(255, 255, 255, 0.8);
    --white-9: rgb(255, 255, 255, 0.9);
    --black: rgb(0, 0, 0);
    --black-1: rgb(0, 0, 0, 0.1);
    --black-2: rgb(0, 0, 0, 0.2);
    --black-3: rgb(0, 0, 0, 0.3);
    --black-4: rgb(0, 0, 0, 0.4);
    --black-5: rgb(0, 0, 0, 0.5);
    --black-6: rgb(0, 0, 0, 0.6);
    --black-7: rgb(0, 0, 0, 0.7);
    --black-8: rgb(0, 0, 0, 0.8);
    --black-9: rgb(0, 0, 0, 0.9);
    --gray: rgb(127.5, 127.5, 127.5);
    --gray-1: rgb(127.5, 127.5, 127.5, 0.1);
    --gray-2: rgb(127.5, 127.5, 127.5, 0.2);
    --gray-3: rgb(127.5, 127.5, 127.5, 0.3);
    --gray-4: rgb(127.5, 127.5, 127.5, 0.4);
    --gray-5: rgb(127.5, 127.5, 127.5, 0.5);
    --gray-6: rgb(127.5, 127.5, 127.5, 0.6);
    --gray-7: rgb(127.5, 127.5, 127.5, 0.7);
    --gray-8: rgb(127.5, 127.5, 127.5, 0.8);
    --gray-9: rgb(127.5, 127.5, 127.5, 0.9);
    --green: rgb(35, 200, 95);
    --green-1: rgb(35, 200, 95, 0.1);
    --green-2: rgb(35, 200, 95, 0.2);
    --green-3: rgb(35, 200, 95, 0.3);
    --green-4: rgb(35, 200, 95, 0.4);
    --green-5: rgb(35, 200, 95, 0.5);
    --green-6: rgb(35, 200, 95, 0.6);
    --green-7: rgb(35, 200, 95, 0.7);
    --green-8: rgb(35, 200, 95, 0.8);
    --green-9: rgb(35, 200, 95, 0.9);
    --red: rgb(220, 55, 70);
    --red-1: rgb(220, 55, 70, 0.1);
    --red-2: rgb(220, 55, 70, 0.2);
    --red-3: rgb(220, 55, 70, 0.3);
    --red-4: rgb(220, 55, 70, 0.4);
    --red-5: rgb(220, 55, 70, 0.5);
    --red-6: rgb(220, 55, 70, 0.6);
    --red-7: rgb(220, 55, 70, 0.7);
    --red-8: rgb(220, 55, 70, 0.8);
    --red-9: rgb(220, 55, 70, 0.9);
    --blue: rgb(60, 130, 245);
    --blue-1: rgb(60, 130, 245, 0.1);
    --blue-2: rgb(60, 130, 245, 0.2);
    --blue-3: rgb(60, 130, 245, 0.3);
    --blue-4: rgb(60, 130, 245, 0.4);
    --blue-5: rgb(60, 130, 245, 0.5);
    --blue-6: rgb(60, 130, 245, 0.6);
    --blue-7: rgb(60, 130, 245, 0.7);
    --blue-8: rgb(60, 130, 245, 0.8);
    --blue-9: rgb(60, 130, 245, 0.9);
    --orange: rgb(255, 195, 5);
    --orange-1: rgb(255, 195, 5, 0.1);
    --orange-2: rgb(255, 195, 5, 0.2);
    --orange-3: rgb(255, 195, 5, 0.3);
    --orange-4: rgb(255, 195, 5, 0.4);
    --orange-5: rgb(255, 195, 5, 0.5);
    --orange-6: rgb(255, 195, 5, 0.6);
    --orange-7: rgb(255, 195, 5, 0.7);
    --orange-8: rgb(255, 195, 5, 0.8);
    --orange-9: rgb(255, 195, 5, 0.9);
    --yellow: rgb(245, 210, 40);
    --yellow-1: rgb(245, 210, 40, 0.1);
    --yellow-2: rgb(245, 210, 40, 0.2);
    --yellow-3: rgb(245, 210, 40, 0.3);
    --yellow-4: rgb(245, 210, 40, 0.4);
    --yellow-5: rgb(245, 210, 40, 0.5);
    --yellow-6: rgb(245, 210, 40, 0.6);
    --yellow-7: rgb(245, 210, 40, 0.7);
    --yellow-8: rgb(245, 210, 40, 0.8);
    --yellow-9: rgb(245, 210, 40, 0.9);
    --brown: rgb(165, 105, 55);
    --brown-1: rgb(165, 105, 55, 0.1);
    --brown-2: rgb(165, 105, 55, 0.2);
    --brown-3: rgb(165, 105, 55, 0.3);
    --brown-4: rgb(165, 105, 55, 0.4);
    --brown-5: rgb(165, 105, 55, 0.5);
    --brown-6: rgb(165, 105, 55, 0.6);
    --brown-7: rgb(165, 105, 55, 0.7);
    --brown-8: rgb(165, 105, 55, 0.8);
    --brown-9: rgb(165, 105, 55, 0.9);
    --purple: rgb(135, 85, 235);
    --purple-1: rgb(135, 85, 235, 0.1);
    --purple-2: rgb(135, 85, 235, 0.2);
    --purple-3: rgb(135, 85, 235, 0.3);
    --purple-4: rgb(135, 85, 235, 0.4);
    --purple-5: rgb(135, 85, 235, 0.5);
    --purple-6: rgb(135, 85, 235, 0.6);
    --purple-7: rgb(135, 85, 235, 0.7);
    --purple-8: rgb(135, 85, 235, 0.8);
    --purple-9: rgb(135, 85, 235, 0.9);
    --pink: rgb(255, 75, 210);
    --pink-1: rgb(255, 75, 210, 0.1);
    --pink-2: rgb(255, 75, 210, 0.2);
    --pink-3: rgb(255, 75, 210, 0.3);
    --pink-4: rgb(255, 75, 210, 0.4);
    --pink-5: rgb(255, 75, 210, 0.5);
    --pink-6: rgb(255, 75, 210, 0.6);
    --pink-7: rgb(255, 75, 210, 0.7);
    --pink-8: rgb(255, 75, 210, 0.8);
    --pink-9: rgb(255, 75, 210, 0.9);
    --transparent: transparent;
    --border: light-dark(rgb(22, 28, 40, 0.1), rgb(255, 255, 255, 0.08));
    --mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);

    &[theme="light"] {
        color-scheme: only light;
    }

    &[theme="dark"] {
        color-scheme: only dark;
    }
}

[theme="light"] {
    color-scheme: only light;
}
[theme="dark"] {
    color-scheme: only dark;
}
[theme="unset"] {
    color-scheme: unset;
}
[theme="reverse"] {
    --fg:  light-dark(rgb(240, 240, 235), rgb(30, 30, 30));
    --fg-1: light-dark(rgb(240, 240, 235, 0.1), rgb(30, 30, 30, 0.1));
    --fg-2: light-dark(rgb(240, 240, 235, 0.2), rgb(30, 30, 30, 0.2));
    --fg-3: light-dark(rgb(240, 240, 235, 0.3), rgb(30, 30, 30, 0.3));
    --fg-4: light-dark(rgb(240, 240, 235, 0.4), rgb(30, 30, 30, 0.4));
    --fg-5: light-dark(rgb(240, 240, 235, 0.5), rgb(30, 30, 30, 0.5));
    --fg-6: light-dark(rgb(240, 240, 235, 0.6), rgb(30, 30, 30, 0.6));
    --fg-7: light-dark(rgb(240, 240, 235, 0.7), rgb(30, 30, 30, 0.7));
    --fg-8: light-dark(rgb(240, 240, 235, 0.8), rgb(30, 30, 30, 0.8));
    --fg-9: light-dark(rgb(240, 240, 235, 0.9), rgb(30, 30, 30, 0.9));
    --bg:  light-dark(rgb(30, 30, 30), rgb(245, 245, 240));
    --bg-1: light-dark(rgb(30, 30, 30, 0.1), rgb(245, 245, 240, 0.1));
    --bg-2: light-dark(rgb(30, 30, 30, 0.2), rgb(245, 245, 240, 0.2));
    --bg-3: light-dark(rgb(30, 30, 30, 0.3), rgb(245, 245, 240, 0.3));
    --bg-4: light-dark(rgb(30, 30, 30, 0.4), rgb(245, 245, 240, 0.4));
    --bg-5: light-dark(rgb(30, 30, 30, 0.5), rgb(245, 245, 240, 0.5));
    --bg-6: light-dark(rgb(30, 30, 30, 0.6), rgb(245, 245, 240, 0.6));
    --bg-7: light-dark(rgb(30, 30, 30, 0.7), rgb(245, 245, 240, 0.7));
    --bg-8: light-dark(rgb(30, 30, 30, 0.8), rgb(245, 245, 240, 0.8));
    --bg-9: light-dark(rgb(30, 30, 30, 0.9), rgb(245, 245, 240, 0.9));
    --muted:  light-dark(rgb(180, 180, 175), rgb(90, 90, 85));
    --muted-1: light-dark(rgb(180, 180, 175, 0.1), rgb(90, 90, 85, 0.1));
    --muted-2: light-dark(rgb(180, 180, 175, 0.2), rgb(90, 90, 85, 0.2));
    --muted-3: light-dark(rgb(180, 180, 175, 0.3), rgb(90, 90, 85, 0.3));
    --muted-4: light-dark(rgb(180, 180, 175, 0.4), rgb(90, 90, 85, 0.4));
    --muted-5: light-dark(rgb(180, 180, 175, 0.5), rgb(90, 90, 85, 0.5));
    --muted-6: light-dark(rgb(180, 180, 175, 0.6), rgb(90, 90, 85, 0.6));
    --muted-7: light-dark(rgb(180, 180, 175, 0.7), rgb(90, 90, 85, 0.7));
    --muted-8: light-dark(rgb(180, 180, 175, 0.8), rgb(90, 90, 85, 0.8));
    --muted-9: light-dark(rgb(180, 180, 175, 0.9), rgb(90, 90, 85, 0.9));
    --card:  light-dark(rgb(20, 20, 20), rgb(255, 255, 255));
    --card-1: light-dark(rgb(20, 20, 20, 0.1), rgb(255, 255, 255, 0.1));
    --card-2: light-dark(rgb(20, 20, 20, 0.2), rgb(255, 255, 255, 0.2));
    --card-3: light-dark(rgb(20, 20, 20, 0.3), rgb(255, 255, 255, 0.3));
    --card-4: light-dark(rgb(20, 20, 20, 0.4), rgb(255, 255, 255, 0.4));
    --card-5: light-dark(rgb(20, 20, 20, 0.5), rgb(255, 255, 255, 0.5));
    --card-6: light-dark(rgb(20, 20, 20, 0.6), rgb(255, 255, 255, 0.6));
    --card-7: light-dark(rgb(20, 20, 20, 0.7), rgb(255, 255, 255, 0.7));
    --card-8: light-dark(rgb(20, 20, 20, 0.8), rgb(255, 255, 255, 0.8));
    --card-9: light-dark(rgb(20, 20, 20, 0.9), rgb(255, 255, 255, 0.9));
    --border: light-dark(rgb(255, 255, 255, 0.08), rgb(22, 28, 40, 0.1));
}

[shine] {
	animation: shine 2s infinite;
	-webkit-mask-image: var(--mask-image);
	-webkit-mask-size: 200%;
}
@keyframes shine {from {-webkit-mask-position: 150%;}to {-webkit-mask-position: -50%;}}

/* ****************************
*********** DEFAULT ***********
******************************/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    user-select: none;
}

html {
    scroll-behavior: smooth;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}

body {
    font-feature-settings: "ss01", "cv11";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

main {
    min-height: calc(100vh - 6rem);
}

.htmx-swapping, .htmx-request {
	opacity: 0;
}

Lazy {
    position: relative;
    overflow: hidden;
    color: inherit;
    font-size: inherit;
    border-radius: inherit;
    min-width: 1rem;
    min-height: 1rem;
    background-color: inherit;
}

Lazy::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--primary-1);
    -webkit-mask-image: var(--mask-image);
    -webkit-mask-size: 200%;
    animation: shine 1s infinite;
    transition: opacity 0.3s;
    z-index: 1;
}

Lazy > * {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
    visibility: hidden;
    opacity: 0;
    border-radius: inherit;
}

Lazy[loaded]::before {
    opacity: 0;
    pointer-events: none;
}

Lazy[loaded] > * {
    visibility: visible;
    opacity: 1;
}

Lazy[absolute] {
    position: absolute;
}

Lazy[inset="0"],
Lazy[absolute][inset="0"] {
    inset: 0;
}

Lazy[size="100%"] {
    width: 100%;
    height: 100%;
}

Lazy > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

button, a {
    display: flex;
    gap: 0.5rem;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

h1, h2, h3 {
    font-weight: inherit;
}

ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

img {
    height: 1rem;
    width: auto;
}

svg {
    inline-size: 1rem;
    block-size: 1rem;
    flex: none;
    display: inline-block;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}