:root {
    --font-serif: 'Cormorant Garamond', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #9f9fa9;
    --color-zinc-500: #71717b;
    --color-zinc-600: #52525c;
    --color-zinc-700: #3f3f46;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;
    
    --color-black: #000;
    --color-white: #fff;
    
    --spacing: 0.25rem;
    
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-7xl: 4.5rem;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    
    --radius: 0.625rem;
    
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
    --border: #e4e4e7;
    --ring: #707070;
    --muted-foreground: #5f6671;
}

*, ::after, ::before {
    box-sizing: border-box;
    border: 0px solid;
    margin: 0;
    padding: 0;
}

html {
    text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--font-sans);
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #fff;
    color: #0f0f10;
    -webkit-font-smoothing: antialiased;
}

.dark body {
    background-color: #0a0a0a;
    color: #ededed;
}

.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

.font-mono {
    font-family: var(--font-mono);
}

.text-xs {
    font-size: var(--text-xs);
    line-height: calc(1.25 / 0.75);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: calc(1.25 / 0.875);
}

.text-base {
    font-size: var(--text-base);
    line-height: calc(1.5 / 1);
}

.text-lg {
    font-size: var(--text-lg);
    line-height: calc(1.75 / 1.125);
}

.text-xl {
    font-size: var(--text-xl);
    line-height: calc(1.75 / 1.25);
}

.text-2xl {
    font-size: var(--text-2xl);
    line-height: calc(2 / 1.5);
}

.text-3xl {
    font-size: var(--text-3xl);
    line-height: calc(2.25 / 1.875);
}

.text-4xl {
    font-size: var(--text-4xl);
    line-height: calc(2.5 / 2.25);
}

.text-5xl {
    font-size: var(--text-5xl);
    line-height: 1;
}

.text-7xl {
    font-size: var(--text-7xl);
    line-height: 1;
}

.font-light {
    font-weight: var(--font-weight-light);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.tracking-tight {
    letter-spacing: var(--tracking-tight);
}

.tracking-wide {
    letter-spacing: var(--tracking-wide);
}

.tracking-wider {
    letter-spacing: var(--tracking-wider);
}

.tracking-widest {
    letter-spacing: var(--tracking-widest);
}

.tracking-\[0\.32em\] {
    letter-spacing: 0.32em;
}

.tracking-\[0\.3em\] {
    letter-spacing: 0.3em;
}

.tracking-\[0\.15em\] {
    letter-spacing: 0.15em;
}

.tracking-\[0\.2em\] {
    letter-spacing: 0.2em;
}

.leading-relaxed {
    line-height: var(--leading-relaxed);
}

.leading-tight {
    line-height: var(--leading-tight);
}

.leading-\[1\.1\] {
    line-height: 1.1;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.italic {
    font-style: italic;
}

.uppercase {
    text-transform: uppercase;
}

.text-black {
    color: var(--color-black);
}

.text-white {
    color: var(--color-white);
}

.text-zinc-400 {
    color: var(--color-zinc-400);
}

.text-zinc-500 {
    color: var(--color-zinc-500);
}

.text-zinc-600 {
    color: var(--color-zinc-600);
}

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

.bg-white {
    background-color: var(--color-white);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-zinc-50 {
    background-color: var(--color-zinc-50);
}

.bg-zinc-800 {
    background-color: var(--color-zinc-800);
}

.bg-zinc-200 {
    background-color: var(--color-zinc-200);
}

.bg-\[\#050505\] {
    background-color: #050505;
}

.border-black\/20 {
    border-color: rgba(0, 0, 0, 0.2);
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

.border-\[0\.5px\] {
    border-width: 0.5px;
}

.border-t-\[0\.5px\] {
    border-top-width: 0.5px;
}

.border-b-\[0\.5px\] {
    border-bottom-width: 0.5px;
}

.border-t {
    border-top-width: 1px;
}

.rounded-none {
    border-radius: 0;
}

.h-4 {
    height: calc(var(--spacing) * 4);
}

.h-6 {
    height: calc(var(--spacing) * 6);
}

.h-8 {
    height: calc(var(--spacing) * 8);
}

.h-10 {
    height: calc(var(--spacing) * 10);
}

.h-14 {
    height: calc(var(--spacing) * 14);
}

.h-16 {
    height: calc(var(--spacing) * 16);
}

.h-\[0\.5px\] {
    height: 0.5px;
}

.h-full {
    height: 100%;
}

.w-4 {
    width: calc(var(--spacing) * 4);
}

.w-6 {
    width: calc(var(--spacing) * 6);
}

.w-10 {
    width: calc(var(--spacing) * 10);
}

.w-full {
    width: 100%;
}

.w-\[0\.5px\] {
    width: 0.5px;
}

.min-h-svh {
    min-height: 100svh;
}

.min-h-screen {
    min-height: 100vh;
}

.max-w-4xl {
    max-width: var(--container-4xl);
}

.max-w-5xl {
    max-width: var(--container-5xl);
}

.max-w-6xl {
    max-width: var(--container-6xl);
}

.max-w-2xl {
    max-width: var(--container-2xl);
}

.max-w-xl {
    max-width: var(--container-xl);
}

.max-w-full {
    max-width: 100%;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.flex-1 {
    flex: 1 1 0%;
}

.shrink-0 {
    flex-shrink: 0;
}

.gap-1 {
    gap: calc(var(--spacing) * 1);
}

.gap-2 {
    gap: calc(var(--spacing) * 2);
}

.gap-3 {
    gap: calc(var(--spacing) * 3);
}

.gap-4 {
    gap: calc(var(--spacing) * 4);
}

.gap-6 {
    gap: calc(var(--spacing) * 6);
}

.gap-10 {
    gap: calc(var(--spacing) * 10);
}

.gap-x-12 {
    column-gap: calc(var(--spacing) * 12);
}

.gap-y-16 {
    row-gap: calc(var(--spacing) * 16);
}

.space-y-4 > :not(:last-child) {
    margin-bottom: calc(var(--spacing) * 4);
}

.space-y-8 > :not(:last-child) {
    margin-bottom: calc(var(--spacing) * 8);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
}

.mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
}

.mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
}

.mt-8 {
    margin-top: calc(var(--spacing) * 8);
}

.mt-24 {
    margin-top: calc(var(--spacing) * 24);
}

.ml-2 {
    margin-left: calc(var(--spacing) * 2);
}

.mx-2 {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
}

.p-2 {
    padding: calc(var(--spacing) * 2);
}

.p-4 {
    padding: calc(var(--spacing) * 4);
}

.px-4 {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
}

.px-6 {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
}

.px-10 {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
}

.px-12 {
    padding-left: calc(var(--spacing) * 12);
    padding-right: calc(var(--spacing) * 12);
}

.py-8 {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
}

.py-12 {
    padding-top: calc(var(--spacing) * 12);
    padding-bottom: calc(var(--spacing) * 12);
}

.py-16 {
    padding-top: calc(var(--spacing) * 16);
    padding-bottom: calc(var(--spacing) * 16);
}

.py-24 {
    padding-top: calc(var(--spacing) * 24);
    padding-bottom: calc(var(--spacing) * 24);
}

.py-32 {
    padding-top: calc(var(--spacing) * 32);
    padding-bottom: calc(var(--spacing) * 32);
}

.pb-32 {
    padding-bottom: calc(var(--spacing) * 32);
}

.pt-8 {
    padding-top: calc(var(--spacing) * 8);
}

.whitespace-nowrap {
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-100 {
    opacity: 1;
}

.position-static {
    position: static;
}

.position-relative {
    position: relative;
}

.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.cursor-pointer {
    cursor: pointer;
}

.bg-transparent {
    background-color: transparent;
}

#language-select {
    appearance: auto;
    -webkit-appearance: menulist-button;
    padding: 2px 4px;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    color: var(--color-zinc-500);
    background-color: transparent;
}

.dark #language-select {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-zinc-400);
    background-color: transparent;
}

#language-select option {
    color: #000;
    background-color: #fff;
}

.select-none {
    user-select: none;
}

.outline-none {
    outline: none;
}

.decoration-\[0\.5px\] {
    text-decoration-thickness: 0.5px;
}

.underline-offset-4 {
    text-underline-offset: 4px;
}

.transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

.transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

.transition-all {
    transition-property: all;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

.active\:scale-\[0\.98\]:active {
    transform: scale(0.98);
}

.hover\:bg-black\/5:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.hover\:bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.hover\:bg-zinc-800:hover {
    background-color: var(--color-zinc-800);
}

.hover\:bg-zinc-200:hover {
    background-color: var(--color-zinc-200);
}

.hover\:text-black:hover {
    color: var(--color-black);
}

.hover\:text-white:hover {
    color: var(--color-white);
}

.hover\:underline:hover {
    text-decoration: underline;
}

.selection\:bg-zinc-200 ::selection,
.selection\:bg-zinc-200::selection {
    background-color: var(--color-zinc-200);
}

.selection\:bg-zinc-800 ::selection,
.selection\:bg-zinc-800::selection {
    background-color: var(--color-zinc-800);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 48rem) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .md\:py-40 {
        padding-top: calc(var(--spacing) * 40);
        padding-bottom: calc(var(--spacing) * 40);
    }
    
    .md\:text-4xl {
        font-size: var(--text-4xl);
        line-height: calc(2.5 / 2.25);
    }
    
    .md\:text-7xl {
        font-size: var(--text-7xl);
        line-height: 1;
    }
    
    .md\:text-sm {
        font-size: var(--text-sm);
        line-height: calc(1.25 / 0.875);
    }
    
    .md\:text-xl {
        font-size: var(--text-xl);
        line-height: calc(1.75 / 1.25);
    }
    
    .md\:gap-4 {
        gap: calc(var(--spacing) * 4);
    }
    
    .md\:px-0 {
        padding-left: 0;
        padding-right: 0;
    }
    
    .md\:tracking-\[0\.2em\] {
        letter-spacing: 0.2em;
    }
    
    .md\:flex {
        display: flex;
    }
    
    .md\:hidden {
        display: none;
    }
    
    .md\:block {
        display: block;
    }
    
    .md\:flex-row {
        flex-direction: row;
    }
}

@media (min-width: 64rem) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .lg\:text-5xl {
        font-size: var(--text-5xl);
        line-height: 1;
    }
    
    .lg\:text-\[6\.5rem\] {
        font-size: 6.5rem;
    }
}

@media (min-width: 40rem) {
    .sm\:flex-row {
        flex-direction: row;
    }
    
    .sm\:block {
        display: block;
    }
    
    .sm\:hidden {
        display: none;
    }
}

.dark {
    --background: #0a0a0a;
    --foreground: #ededed;
    --border: #222;
    --muted-foreground: #888;
}

.dark .dark\:border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .dark\:bg-black {
    background-color: var(--color-black);
}

.dark .dark\:bg-white {
    background-color: var(--color-white);
}

.dark .dark\:bg-zinc-200 {
    background-color: var(--color-zinc-200);
}

.dark .dark\:bg-zinc-800 {
    background-color: var(--color-zinc-800);
}

.dark .dark\:bg-\[\#050505\] {
    background-color: #050505;
}

.dark .dark\:text-black {
    color: var(--color-black);
}

.dark .dark\:text-white {
    color: var(--color-white);
}

.dark .dark\:text-zinc-400 {
    color: var(--color-zinc-400);
}

.dark .dark\:hover\:bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .dark\:hover\:text-white:hover {
    color: var(--color-white);
}

.dark .dark\:selection\:bg-zinc-800 ::selection,
.dark .dark\:selection\:bg-zinc-800::selection {
    background-color: var(--color-zinc-800);
}