:root {
    color-scheme: dark;
    --night:    #140d1f;
    --night-2:  #1c1230;
    --panel:    #241738;
    --rule:     #3a2a55;
    --ink:      #f6ecdf;
    --ink-soft: #c3b2c9;
    --ink-faint:#8f7f9e;
    --sun:      #ff7a2f;
    --sun-soft: #ffb066;
    --coral:    #ff4d6d;
    --teal:     #2ec4c4;
    --leaf:     #59c46a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--night);
    color: var(--ink);
    font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--sun-soft); }

.menu-toggle { display: none; }
.menu-icon { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.menu-icon span { display: block; height: 2px; width: 100%; background: currentColor; }
.menu-toggle:focus-visible, .site-nav a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ---- chrome ---- */
header.top {
    position: sticky; top: 0; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
    padding: 14px 28px;
    background: rgba(20, 13, 31, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
}
.brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--ink); text-decoration: none;
}
.brand span { color: var(--teal); font-weight: 500; font-size: 15px; }
.brand-icon { display: block; width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
header.top nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14.5px; margin-left: auto; }
header.top nav a { color: var(--ink-soft); text-decoration: none; }
header.top nav a:hover { color: var(--ink); }
header.top nav a.on { color: var(--sun); }

/* ---- shell ---- */
main { max-width: 1060px; margin: 0 auto; padding: 0 24px 90px; }
section { padding-top: 56px; }
h1 {
    font-size: clamp(30px, 5.2vw, 46px); line-height: 1.08;
    letter-spacing: -0.03em; margin: 0 0 14px;
}
h2 {
    font-size: clamp(22px, 3vw, 27px); letter-spacing: -0.02em;
    margin: 0 0 14px;
}
h3 { font-size: 17px; margin: 0 0 6px; letter-spacing: -0.01em; }
p { margin: 0 0 16px; max-width: 68ch; color: var(--ink-soft); }
p.lede { font-size: clamp(17px, 2.2vw, 19px); color: var(--ink); max-width: 60ch; }
ul { color: var(--ink-soft); }
strong { color: var(--ink); }

.platform-eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
.platform-arch { color: var(--ink-faint); font-weight: 600; }
.platform-release { font-size: 13.5px; color: var(--ink-faint); margin-top: 14px; }
.requirement-label { width: 26%; }
.install-steps { color: var(--ink-soft); padding-left: 20px; }
.install-steps li { margin-bottom: 14px; }
.install-steps pre { margin-top: 10px; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em; background: #0f0a1a; border: 1px solid var(--rule);
    border-radius: 4px; padding: 1px 5px; color: var(--sun-soft);
    overflow-wrap: anywhere;
}
pre {
    background: #0f0a1a; border: 1px solid var(--rule); border-radius: 10px;
    padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.6;
}
pre code { background: none; border: none; padding: 0; color: var(--ink); font-size: inherit; }

.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: 999px;
    font-weight: 600; font-size: 15.5px; text-decoration: none;
    background: linear-gradient(135deg, var(--sun) 0%, var(--coral) 100%);
    color: #2a0f00; border: none;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost {
    background: none; color: var(--ink);
    border: 1px solid var(--rule);
}
.btn.ghost:hover { border-color: var(--sun); color: var(--sun-soft); filter: none; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }
.card {
    background: var(--panel); border: 1px solid var(--rule);
    border-radius: 14px; padding: 20px 22px;
}
.card p { margin: 0; font-size: 14.5px; }
.platform-card { display: block; text-decoration: none; }
.platform-card:hover { border-color: var(--sun); }
.platform-card:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.card .tag {
    display: inline-block; font-size: 11px; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--teal); margin-bottom: 9px;
}

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
td { color: var(--ink-soft); }

.note {
    background: rgba(46, 196, 196, 0.08);
    border-left: 3px solid var(--teal);
    border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 22px 0;
}
.note p:last-child { margin-bottom: 0; }

footer {
    border-top: 1px solid var(--rule); margin-top: 40px;
    padding: 26px 24px 46px; text-align: center;
    font-size: 13.5px; color: var(--ink-faint);
}
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--sun-soft); }

@media (max-width: 720px) {
    header.top { padding: 12px 18px; }
    header.top nav { margin-left: 0; width: 100%; gap: 16px; }
    .nav-ready .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        min-height: 44px; margin-left: auto; padding: 8px 12px;
        border: 1px solid var(--rule); border-radius: 8px;
        background: var(--panel); color: var(--ink); font: inherit; cursor: pointer;
    }
    header.nav-ready .site-nav { display: none; }
    header.nav-ready .site-nav.is-open {
        display: flex; flex-direction: column; gap: 0;
        max-height: calc(100dvh - 90px); overflow-y: auto;
        padding-top: 8px; border-top: 1px solid var(--rule);
    }
    header.nav-ready .site-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 4px; }
    main { padding: 0 18px 64px; }
    section { padding-top: 40px; }
}