:root,
:root[data-theme="dark"] {
    --background: hsl(240, 16%, 6%);
    --background-alt: hsl(240, 16%, 8%);
    --foreground: oklch(0.985 0 0);
    --foreground-alt: oklch(0.85 0.015 286.067);
    --card: hsl(240, 16%, 11%);
    --card-foreground: oklch(0.985 0 0);
    --popover: hsl(240, 16%, 11%);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(77% 0.108 176);
    --primary-dark: oklch(70% 0.108 176);
    --primary-foreground: oklch(0.145 0.025 176);
    --secondary: hsl(240, 10%, 20%);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: hsl(240, 10%, 18%);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --accent: hsl(240, 10%, 18%);
    --accent-foreground: oklch(0.985 0 0);
    --warning: oklch(0.704 0.18669 47.592);
    --destructive: oklch(0.704 0.191 22.216);
    --border: hsla(240, 100%, 95%, 0.1);
    --input: hsla(240, 100%, 97%, 0.15);
    --ring: color-mix(in oklch, var(--foreground) 50%, transparent);
    --chart-1: oklch(0.82 0.108 176);
    --chart-2: oklch(0.72 0.108 176);
    --chart-3: oklch(0.62 0.108 176);
    --chart-4: oklch(0.52 0.108 176);
    --chart-5: oklch(0.42 0.108 176);
    --sidebar: hsl(240, 8%, 12%);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(77% 0.108 176);
    --sidebar-primary-foreground: oklch(0.145 0.025 176);
    --sidebar-accent: hsl(240, 4%, 16%);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: hsla(0, 0%, 100%, 0.1);
    --sidebar-ring: hsl(240, 4%, 46%);
    --radius: 0.45rem;
}

:root[data-theme="light"] {
    --background: oklch(0.985 0 0);
    --background-alt: oklch(0.96 0 0);
    --foreground: oklch(0.141 0.005 285.823);
    --foreground-alt: oklch(0.141 0.005 285.823);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.141 0.005 285.823);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.141 0.005 285.823);
    --primary: oklch(70% 0.108 176);
    --primary-dark: oklch(67% 0.108 176);
    --primary-foreground: oklch(0.145 0.025 176);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.967 0.001 286.375);
    --muted-foreground: oklch(0.552 0.016 285.938);
    --accent: oklch(0.967 0.001 286.375);
    --accent-foreground: oklch(0.21 0.006 285.885);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.92 0.004 286.32);
    --input: oklch(0.92 0.004 286.32);
    --ring: color-mix(in oklch, var(--primary) 40%, transparent);
    --chart-1: oklch(0.82 0.108 176);
    --chart-2: oklch(0.72 0.108 176);
    --chart-3: oklch(0.62 0.108 176);
    --chart-4: oklch(0.52 0.108 176);
    --chart-5: oklch(0.42 0.108 176);
    --radius: 0.45rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.141 0.005 285.823);
    --sidebar-primary: oklch(77% 0.108 176);
    --sidebar-primary-foreground: oklch(0.145 0.025 176);
    --sidebar-accent: oklch(0.967 0.001 286.375);
    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
    --sidebar-border: oklch(0.92 0.004 286.32);
    --sidebar-ring: oklch(0.705 0.015 286.067);
}

:root[data-theme="amoled"] {
    --background: oklch(0 0 0);
    --background-alt: oklch(0.05 0 0);
    --foreground: oklch(0.985 0 0);
    --foreground-alt: oklch(0.88 0 0);
    --card: oklch(0.06 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.08 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(77% 0.108 176);
    --primary-dark: oklch(70% 0.108 176);
    --primary-foreground: oklch(0.145 0.025 176);
    --secondary: oklch(0.12 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.12 0 0);
    --muted-foreground: oklch(0.65 0 0);
    --accent: oklch(0.12 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 8%);
    --input: oklch(1 0 0 / 12%);
    --ring: color-mix(in oklch, var(--primary) 35%, transparent);
    --chart-1: oklch(0.82 0.108 176);
    --chart-2: oklch(0.72 0.108 176);
    --chart-3: oklch(0.62 0.108 176);
    --chart-4: oklch(0.52 0.108 176);
    --chart-5: oklch(0.42 0.108 176);
    --sidebar: oklch(0.04 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(77% 0.108 176);
    --sidebar-primary-foreground: oklch(0.145 0.025 176);
    --sidebar-accent: oklch(0.1 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 8%);
    --sidebar-ring: oklch(0.6 0 0);
}

:root[data-theme="legacy"] {
    --background: hsl(216, 7%, 15%);
    --background-alt: hsl(214, 8%, 18%);
    --foreground: hsl(0, 0%, 80%);
    --foreground-alt: hsl(0, 0%, 76%);
    --card: hsl(214, 8%, 18%);
    --card-foreground: hsl(0, 0%, 80%);
    --popover: hsl(214, 8%, 18%);
    --popover-foreground: hsl(0, 0%, 80%);
    --primary: oklch(77% 0.108 176);
    --primary-dark: oklch(70% 0.108 176);
    --primary-foreground: oklch(0.145 0.025 176);
    --secondary: #80848e;
    --secondary-foreground: hsl(0, 0%, 80%);
    --muted: hsl(214, 7%, 19%);
    --muted-foreground: hsl(0, 0%, 72%);
    --accent: hsl(214, 7%, 19%);
    --accent-foreground: hsl(0, 0%, 80%);
    --destructive: hsl(0, 60%, 50%);
    --border: hsl(240, 1%, 25%);
    --input: hsl(225, 7%, 11%);
    --ring: hsl(213, 6%, 34%);
    --chart-1: oklch(0.82 0.108 176);
    --chart-2: oklch(0.72 0.108 176);
    --chart-3: oklch(0.62 0.108 176);
    --chart-4: oklch(0.52 0.108 176);
    --chart-5: oklch(0.42 0.108 176);
    --sidebar: hsl(220, 7%, 8%);
    --sidebar-foreground: hsl(0, 0%, 80%);
    --sidebar-primary: oklch(77% 0.108 176);
    --sidebar-primary-foreground: oklch(0.145 0.025 176);
    --sidebar-accent: hsl(214, 7%, 19%);
    --sidebar-accent-foreground: hsl(0, 0%, 80%);
    --sidebar-border: hsl(240, 1%, 25%);
    --sidebar-ring: hsl(213, 6%, 34%);
}

:root[data-theme="vaporwave"] {
    --background: oklch(0.13 0.06 290);
    --background-alt: oklch(0.17 0.06 290);
    --foreground: oklch(0.97 0 0);
    --foreground-alt: oklch(0.86 0.04 350);
    --card: oklch(0.20 0.07 290);
    --card-foreground: oklch(0.97 0 0);
    --popover: oklch(0.20 0.07 290);
    --popover-foreground: oklch(0.97 0 0);
    --primary: oklch(0.71 0.28 345);
    --primary-dark: oklch(0.63 0.28 345);
    --primary-foreground: oklch(0.14 0.06 345);
    --secondary: oklch(0.26 0.08 290);
    --secondary-foreground: oklch(0.97 0 0);
    --muted: oklch(0.23 0.07 290);
    --muted-foreground: oklch(0.70 0.04 290);
    --accent: oklch(61.574% 0.24845 336.296);
    --accent-foreground: oklch(0.97 0 0);
    --destructive: oklch(0.60 0.24 22);
    --border: oklch(0.71 0.28 345 / 0.22);
    --input: oklch(0.71 0.28 345 / 0.10);
    --ring: color-mix(in oklch, var(--primary) 40%, transparent);
    --chart-1: oklch(0.71 0.28 345);
    --chart-2: oklch(0.55 0.20 15);
    --chart-3: oklch(0.65 0.22 320);
    --chart-4: oklch(0.60 0.16 290);
    --chart-5: oklch(0.50 0.24 0);
    --sidebar: oklch(0.10 0.05 290);
    --sidebar-foreground: oklch(0.97 0 0);
    --sidebar-primary: oklch(0.71 0.28 345);
    --sidebar-primary-foreground: oklch(0.14 0.06 345);
    --sidebar-accent: oklch(0.18 0.06 290);
    --sidebar-accent-foreground: oklch(0.97 0 0);
    --sidebar-border: oklch(0.71 0.28 345 / 0.18);
    --sidebar-ring: oklch(0.55 0.10 290);
    --radius: 0.6rem;
}

:root[data-theme="nord"] {
    --background: #2e3440;
    --background-alt: #353c4a;
    --foreground: #eceff4;
    --foreground-alt: #d8dee9;
    --card: #3b4252;
    --card-foreground: #eceff4;
    --popover: #3b4252;
    --popover-foreground: #eceff4;
    --primary: oklch(77% 0.108 176);
    --primary-dark: oklch(70% 0.108 176);
    --primary-foreground: oklch(0.145 0.025 176);
    --secondary: #434c5e;
    --secondary-foreground: #eceff4;
    --muted: #434c5e;
    --muted-foreground: #b9c1d0;
    --accent: #81a1c1;
    --accent-foreground: #eceff4;
    --warning: #ebcb8b;
    --destructive: #bf616a;
    --border: rgb(236 239 244 / 10%);
    --input: rgb(236 239 244 / 12%);
    --ring: color-mix(in srgb, var(--primary) 40%, transparent);
    --chart-1: #8fbcbb;
    --chart-2: #88c0d0;
    --chart-3: #81a1c1;
    --chart-4: #5e81ac;
    --chart-5: #b48ead;
    --sidebar: #2b303b;
    --sidebar-foreground: #eceff4;
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: #3b4252;
    --sidebar-accent-foreground: #eceff4;
    --sidebar-border: var(--border);
    --sidebar-ring: #88c0d0;
}
 
:root[data-theme="github-dark"] {
    --background: #0d1117;
    --background-alt: #010409;
    --foreground: #e6edf3;
    --foreground-alt: #c9d1d9;
    --card: #161b22;
    --card-foreground: #e6edf3;
    --popover: #161b22;
    --popover-foreground: #e6edf3;
 
    --primary: oklch(77% 0.108 176);
    --primary-dark: oklch(70% 0.108 176);
    --primary-foreground: oklch(0.145 0.025 176);
 
    --secondary: #21262d;
    --secondary-foreground: #e6edf3;
 
    --muted: #21262d;
    --muted-foreground: #8b949e;
 
    --accent: #30363d;
    --accent-foreground: #e6edf3;
 
    --warning: #d29922;
    --destructive: #f85149;
 
    --border: #30363d;
    --input: #30363d;
    --ring: #1f6feb;
 
    --chart-1: oklch(0.82 0.108 176);
    --chart-2: oklch(0.72 0.108 176);
    --chart-3: oklch(0.62 0.108 176);
    --chart-4: oklch(0.52 0.108 176);
    --chart-5: oklch(0.42 0.108 176);
 
    --sidebar: #010409;
    --sidebar-foreground: #e6edf3;
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: #161b22;
    --sidebar-accent-foreground: #e6edf3;
    --sidebar-border: #30363d;
    --sidebar-ring: #6e7681;
}
 
:root[data-theme="high-contrast"] {
    --background: #000;
    --background-alt: #0a0a0a;
 
    --foreground: #fff;
    --foreground-alt: #f2f2f2;
 
    --card: #141414;
    --card-foreground: #fff;
 
    --popover: #141414;
    --popover-foreground: #fff;
 
    --primary: oklch(77% 0.108 176);
    --primary-dark: oklch(70% 0.108 176);
    --primary-foreground: oklch(0.145 0.025 176);
 
    --secondary: #262626;
    --secondary-foreground: #fff;
 
    --muted: #1e1e1e;
    --muted-foreground: #e0e0e0;
 
    --accent: #303030;
    --accent-foreground: #fff;
 
    --warning: oklch(0.78 0.18 60);
    --destructive: oklch(0.72 0.22 25);
 
    --border: #757575;
    --input: #8a8a8a;
    --ring: #ffd60a;
 
    --chart-1: oklch(0.82 0.108 176);
    --chart-2: oklch(0.72 0.108 176);
    --chart-3: oklch(0.62 0.108 176);
    --chart-4: oklch(0.52 0.108 176);
    --chart-5: oklch(0.42 0.108 176);
 
    --sidebar: #000;
    --sidebar-foreground: #fff;
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: #1e1e1e;
    --sidebar-accent-foreground: #fff;
    --sidebar-border: #757575;
    --sidebar-ring: #ffd60a;
}
 
:root[data-theme="dim"] {
    --background: hsl(240, 16%, 16%);
    --background-alt: hsl(240, 16%, 19%);
 
    --foreground: oklch(0.955 0 0);
    --foreground-alt: oklch(0.83 0.015 286.067);
 
    --card: hsl(240, 14%, 23%);
    --card-foreground: var(--foreground);
 
    --popover: var(--card);
    --popover-foreground: var(--foreground);
 
    --primary: oklch(77% 0.108 176);
    --primary-dark: oklch(70% 0.108 176);
    --primary-foreground: oklch(0.145 0.025 176);
 
    --secondary: hsl(240, 10%, 28%);
    --secondary-foreground: var(--foreground);
 
    --muted: hsl(240, 10%, 26%);
    --muted-foreground: oklch(0.72 0.015 286.067);
 
    --accent: hsl(240, 10%, 26%);
    --accent-foreground: var(--foreground);
 
    --warning: oklch(0.704 0.18669 47.592);
    --destructive: oklch(0.704 0.191 22.216);
 
    --border: hsla(240, 100%, 95%, 0.12);
    --input: hsla(240, 100%, 97%, 0.16);
    --ring: color-mix(in oklch, var(--foreground) 50%, transparent);
 
    --chart-1: oklch(0.82 0.108 176);
    --chart-2: oklch(0.72 0.108 176);
    --chart-3: oklch(0.62 0.108 176);
    --chart-4: oklch(0.52 0.108 176);
    --chart-5: oklch(0.42 0.108 176);
 
    --sidebar: hsl(240, 16%, 14%);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: hsl(240, 14%, 21%);
    --sidebar-accent-foreground: var(--foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: hsl(240, 10%, 50%);
}

:root[data-theme="increased-scale"] {
    font-size: 112.5%;
}

@font-face {
    font-family: "Figtree";
    src: url('/static/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: var(--background);
    color: var(--foreground);
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

main {
    flex-grow: 1;
}

* {
    box-sizing: border-box;
}

::selection {
    color: inherit;
    background: var(--ring);
}

@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation: none;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-group(header-container) {
    animation-duration: 5ms;
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(header-container) {
        animation-duration: 300ms;
    }
}

::view-transition-old(header-container),
::view-transition-new(header-container) {
    height: 100%;
}

body>header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 56px;
    border-bottom: 1px solid var(--border);
    background: var(--background);
}

body>header .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
    gap: 0.5rem;
    max-width: 1400px;
    margin: 0 auto;
    view-transition-name: header-container;
}

body>header.full-width .container {
    max-width: 100%;
}

body>header .row-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    height: 100%;
}

body>header .row-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    gap: 0.25rem;
    flex-shrink: 0;
    height: 100%;
}

body>header .logo,
footer .logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    color: var(--foreground);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    flex-shrink: 0;
    color: var(--primary);
}

body>header .logo img,
footer .logo img {
    width: 32px;
    height: 32px;
}

body>header .main-nav {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    height: 100%;
    height: 100%;
}

body>header .main-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    margin: 0;
}

.user-dropdown .button {
    padding: 0 0.25rem;
}

.user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem;
    padding-top: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.user-info .avatar {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 1px solid var(--border);
}

.user-info .email {
    font-size: 0.9rem;
    color: var(--muted-foreground);
}

body>header .avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

body>header .avatar i {
    font-size: 0.8rem;
    color: var(--foreground);
    margin: auto auto;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    height: 2.1rem;
    padding: 0 0.65rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    border: none;
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms, background 120ms, opacity 120ms;
    font-family: inherit;
    line-height: 1;
}

.button.ghost {
    background: transparent;
}

.button.border {
    border: 1px solid var(--border);
}

.button.secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.button.primary {
    background: var(--primary-dark);
    color: var(--primary-foreground);
}

.button.destructive {
    color: var(--destructive);
    background: transparent;
}

.button.destructive.border {
    border: 1px solid var(--destructive);
}

.button.full-width {
    width: 100%;
    justify-content: flex-start;
}

.button.icon-only {
    padding: 0;
    width: 2.1rem;
    border-radius: var(--radius);
}

.button.circular {
    border-radius: 9999px;
    padding: 0;
    width: 2.1rem;
}

.button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.button:disabled {
    pointer-events: none;
    opacity: 0.45;
}

.button:hover:not(:disabled) {
    background: var(--accent);
    color: var(--accent-foreground);
}

.button.primary:hover:not(:disabled) {
    background: var(--primary);
    color: var(--primary-foreground);
}

.button.destructive:hover:not(:disabled) {
    background: color-mix(in oklab, var(--destructive) 12%, transparent);
    color: var(--destructive);
}

.button.ghost:hover:not(:disabled) {
    background: var(--accent);
}

.button:active:not(:disabled) {
    opacity: 0.8;
}

.button i {
    pointer-events: none;
    flex-shrink: 0;
}

.input {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.1rem;
    padding: 0 0.65rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    border: 1px solid var(--border);
    background: inherit;
    color: var(--foreground);
    cursor: text;
    text-decoration: none;
    transition: color 120ms, background 120ms, opacity 120ms, border-color 120ms, box-shadow 120ms;
}

.input:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.input:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.input::placeholder {
    color: var(--muted-foreground);
}

.dropdown {
    position: relative;
}

.dropdown > .button {
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    top: 120%;
    right: 0;
    border: 1px solid var(--border);
    background: var(--popover);
    border-radius: 8px;
    padding: 8px;
    min-width: 120px;
    width: fit-content;
    max-height: calc(98vh - 72px);
    overflow-y: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .dropdown-menu {
        transition: opacity 150ms, top 150ms, bottom 150ms;
    }
}

.dropdown-menu label {
    font-weight: 600;
    color: var(--muted-foreground);
    font-size: 0.9rem;
}

.dropdown-menu .button {
    justify-content: flex-start;
    user-select: none;
}

.dropdown > .button:hover,
.dropdown > .button:focus-visible,
.dropdown:has(> .dropdown-menu:hover) > .button,
.dropdown:has(> .dropdown-menu:focus-within) > .button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--popover);
    border: 1px solid var(--border);
    border-bottom: none;
}

.dropdown:has(> .button:hover) > .dropdown-menu,
.dropdown:has(> .button:focus-visible) > .dropdown-menu,
.dropdown:has(> .dropdown-menu:hover) > .dropdown-menu,
.dropdown:has(> .dropdown-menu:focus-within) > .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    top: 100%;
    border-top-right-radius: 0;
}

.dropdown.theme-picker:has(> .button:hover) > .dropdown-menu,
.dropdown.theme-picker:has(> .button:focus-visible) > .dropdown-menu,
.dropdown.theme-picker:has(> .dropdown-menu:hover) > .dropdown-menu,
.dropdown.theme-picker:has(> .dropdown-menu:focus-within) > .dropdown-menu {
    border-top-left-radius: 8px;
}

.dropdown-menu hr {
    border: none;
    height: 1px;
    width: 100%;
    background: var(--border);
    margin: 4px 0;
    padding: 0;
}

footer {
    border-top: 1px solid var(--border);
    width: 100%;
}

footer .container {
    padding: 1rem 2rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 1rem;
}

footer .content {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

footer .left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

footer .socials {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

footer .socials a {
    transition: filter 120ms;
}

footer .socials a:hover {
    filter: brightness(1.2);
}

footer .right {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

footer .links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 200px;
}

footer .links h2 {
    color: var(--foreground);
    font-size: 1rem;
    margin: 0;
}

footer .links a {
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 120ms;
}

footer .links a:hover {
    color: var(--primary);
}

footer .copyright {
    color: var(--muted-foreground);
    font-size: 0.9rem;
    text-align: center;
    margin-top: 2rem;
    line-height: 1.6rem;
}

footer .copyright a {
    color: inherit;
}

footer .copyright .llms {
    text-decoration: none;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
    border-radius: var(--radius);
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklch, var(--foreground) 60%, transparent);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}