:root {
    color-scheme: dark;

    --background: oklch(0.11 0.018 285);
    --foreground: oklch(0.96 0.012 80);
    --card: oklch(0.15 0.022 282 / 0.82);
    --card-foreground: oklch(0.96 0.012 80);
    --primary: oklch(0.73 0.18 24);
    --primary-foreground: oklch(0.16 0.03 20);
    --brand-dusk: oklch(0.6 0.13 322);
    --secondary: oklch(0.2 0.028 280);
    --muted: oklch(0.2 0.025 280);
    --muted-foreground: oklch(0.67 0.025 275);
    --accent: oklch(0.25 0.045 315);
    --border: oklch(0.28 0.03 280 / 0.78);
    --ring: oklch(0.73 0.18 24);
    --radius: 0.9rem;
}

* { box-sizing: border-box; }

html {
    background: var(--background);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    background:
        radial-gradient(900px 560px at 88% -12%, oklch(0.34 0.12 325 / 0.25), transparent 62%),
        radial-gradient(720px 480px at 12% 12%, oklch(0.28 0.1 25 / 0.12), transparent 58%),
        var(--background);
    color: var(--foreground);
    font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-feature-settings: "cv11" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--primary); }

a, button, [role="button"], summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

::selection { background: oklch(0.73 0.18 24 / 0.35); color: #fff; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; overflow-wrap: anywhere; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), var(--brand-dusk));
    color: var(--primary-foreground);
    box-shadow: 0 10px 24px -12px oklch(0.73 0.18 24 / 0.9);
}

.brand-name { color: var(--primary); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-name {
        background: linear-gradient(90deg, var(--primary), var(--brand-dusk));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}