:root {
    color-scheme: light dark;
    --bg: #f5f6fb;
    --panel: #ffffff;
    --panel-border: #e2e4f0;
    --text: #14162a;
    --muted: #5b5f7a;
    --accent-1: #6d5bff;
    --accent-2: #17c3e6;
    --accent-fg: #ffffff;
    --code-bg: #eef0fa;
    --pill-dev-bg: #fff2d6;
    --pill-dev-fg: #8a5a00;
    --pill-stable-bg: #dcf6e6;
    --pill-stable-fg: #106b3f;
    --shadow: 0 20px 50px -25px rgba(20, 22, 42, 0.35);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0c16;
        --panel: #14162a;
        --panel-border: #262a45;
        --text: #f1f2fb;
        --muted: #9a9ec2;
        --accent-1: #8c7bff;
        --accent-2: #3fd8f5;
        --accent-fg: #0b0c16;
        --code-bg: #1c1f38;
        --pill-dev-bg: #3a2c05;
        --pill-dev-fg: #ffcf70;
        --pill-stable-bg: #0e3322;
        --pill-stable-fg: #6be3a6;
        --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); }

.wrap {
    width: min(1080px, calc(100vw - 40px));
    margin: 0 auto;
}

/* --- hero --- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 56px;
    isolation: isolate;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    z-index: -1;
}

.hero::before {
    background: var(--accent-1);
    top: -280px;
    left: -180px;
}

.hero::after {
    background: var(--accent-2);
    top: -220px;
    right: -220px;
    opacity: .28;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}

.hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.03;
    letter-spacing: -.02em;
    background: linear-gradient(120deg, var(--text) 30%, var(--accent-1) 70%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero p.lead {
    max-width: 640px;
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0 0 32px;
}

.stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.stat-strip .stat b {
    display: block;
    font-size: 1.6rem;
    letter-spacing: -.01em;
}

.stat-strip .stat span {
    color: var(--muted);
    font-size: .85rem;
}

/* --- panels / cards --- */
.panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.release {
    padding: 32px;
    margin-bottom: 28px;
}

.release-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.release-head h2 {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: -.01em;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pill-dev { background: var(--pill-dev-bg); color: var(--pill-dev-fg); }
.pill-stable { background: var(--pill-stable-bg); color: var(--pill-stable-fg); }

.release-meta {
    color: var(--muted);
    font-size: .92rem;
    margin: 0 0 24px;
}

.changelog {
    margin: 0 0 26px;
    padding-left: 1.15rem;
}

.changelog li {
    margin-bottom: 6px;
}

.primary-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 14px;
    background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
    color: var(--accent-fg);
    margin-bottom: 22px;
}

.primary-download .info b {
    display: block;
    font-size: 1.05rem;
}

.primary-download .info span {
    font-size: .85rem;
    opacity: .85;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--text);
    color: var(--bg);
    font-weight: 650;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    white-space: nowrap;
}

.btn.on-gradient {
    background: var(--accent-fg);
    color: var(--accent-1);
}

.btn.ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--panel-border);
}

.file-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.file-table th {
    text-align: left;
    color: var(--muted);
    font-weight: 650;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 10px 10px;
}

.file-table td {
    padding: 12px 10px;
    border-top: 1px solid var(--panel-border);
    vertical-align: middle;
}

.file-name {
    font-weight: 600;
}

.file-type {
    color: var(--muted);
    font-size: .8rem;
}

.hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    background: var(--code-bg);
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    color: var(--text);
}

.hash:hover { opacity: .8; }

.section-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin: 0 0 16px;
}

.tech-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    font-size: .85rem;
}

.tech-links code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 5px;
}

footer {
    padding: 40px 0 60px;
    color: var(--muted);
    font-size: .85rem;
}

footer a { color: var(--muted); }

@media (max-width: 640px) {
    .release { padding: 22px; }
    .primary-download { flex-direction: column; align-items: stretch; }
    .file-table thead { display: none; }
    .file-table, .file-table tbody, .file-table tr, .file-table td { display: block; width: 100%; }
    .file-table tr { border-top: 1px solid var(--panel-border); padding: 10px 0; }
    .file-table td { border-top: none; padding: 4px 0; }
}