:root {
    --font-main: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #15151f;
    --surface: #202130;
    --surface-2: #2a2b3e;
    --txt: #f8f8ff;
    --sub: #b7bad4;
    --muted: #8388a7;
    --acc1: #7c5cff;
    --acc2: #36d1dc;
    --acc3: #ff7ab6;
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.18);
    --nav-bg: rgba(21, 21, 31, 0.72);
    --shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    --shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.18);
    --lightbox-bg: rgba(21, 21, 31, 0.94);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.light-mode {
    --bg: #f6f7ff;
    --surface: #ffffff;
    --surface-2: #eef0ff;
    --txt: #191a2b;
    --sub: #565b78;
    --muted: #747995;
    --border: rgba(25, 26, 43, 0.12);
    --border-strong: rgba(25, 26, 43, 0.22);
    --nav-bg: rgba(246, 247, 255, 0.76);
    --shadow: 0 12px 28px rgba(86, 91, 120, 0.09);
    --shadow-hover: 0 16px 34px rgba(86, 91, 120, 0.13);
    --lightbox-bg: rgba(246, 247, 255, 0.94);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    scroll-behavior: smooth;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

html {
    background: var(--bg);
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

html,
body,
a,
button {
    transition: background-color 0.24s var(--ease-smooth), border-color 0.24s var(--ease-smooth), color 0.24s var(--ease-smooth);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(124, 92, 255, 0.18), transparent 32rem),
        radial-gradient(circle at top right, rgba(54, 209, 220, 0.12), transparent 30rem),
        var(--bg);
    color: var(--txt);
    line-height: 1.55;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.026) 42%, transparent 64%),
        radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.1), transparent 34rem);
    opacity: 0;
    transform: translate3d(-2%, -1%, 0);
    transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}

body.is-ready::before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

::selection {
    color: #ffffff;
    background: rgba(124, 92, 255, 0.55);
}

body.light-mode ::selection {
    color: #ffffff;
    background: rgba(124, 92, 255, 0.62);
}

img {
    max-width: 100%;
    -webkit-user-drag: none;
    user-select: none;
}

a {
    color: inherit;
}

button {
    font: inherit;
}

:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--acc2) 78%, white);
    outline-offset: 3px;
}