:root {
    color-scheme: dark;
    --bg: #000;
    --text: #ededed;
    --muted: #8f8f8f;
    --dim: #5c5c5c;
    --line: #1c1c1c;
    --line-2: #2a2a2a;
    --fill: #0a0a0a;
    --fill-2: #141416;
    --metal: #b9c6da;
    --metal-hi: #e6ecf5;
    --metal-lo: #7f96c8;
    --ok: #86c79e;
    --busy: #9db4d6;
    --err: #e59a86;
    --locked: #cfd8e6;
    --font: "Inter", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; overflow-x: clip; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: rgba(185, 198, 218, 0.3); }
.mono { font-family: var(--mono); }
.is-hidden { display: none !important; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; border-top: 1px solid var(--line); scroll-margin-top: 64px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.04em; }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; }
.h2 .muted { color: var(--muted); }
.lede { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 14px 0 0; max-width: 36rem; }
.muted { color: var(--muted); }
.kbd {
    font-family: var(--mono); font-size: 0.85em; padding: 1px 6px; border-radius: 5px;
    background: var(--fill-2); border: 1px solid var(--line-2); color: var(--text);
}

/* pills */
.pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500;
    white-space: nowrap; transition: background 0.2s, box-shadow 0.15s ease-out, transform 0.2s;
}
.pill:active { transform: translateY(1px); }
.pill.sm { height: 34px; padding: 0 15px; font-size: 13.5px; }
.pill.white { background: var(--text); color: #0a0a0a; }
/* Hover: a soft shadow settles over the top half of the pill, inside it. It doesn't move, no ring, no tint. */
.pill.white:hover { box-shadow: inset 0 18px 16px -10px rgba(0, 0, 0, 0.6); }
.pill.dark { background: #1c1c1c; color: var(--text); border: 1px solid var(--line-2); }
.pill.dark:hover { background: #2c2c2e; border-color: #3a3a3d; box-shadow: 0 0 0 4px rgba(185, 198, 218, 0.07); }
.pill:focus-visible, .switch:focus-visible, summary:focus-visible { outline: 2px solid var(--metal); outline-offset: 3px; }

/* status chips: a small LED plus a label */
.chip {
    display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.4;
    padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2);
    background: var(--fill); color: var(--c, var(--muted)); white-space: nowrap;
    transition: color 0.3s;
}
.chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 6px currentColor;
}
.is-unlocked { --c: var(--ok); }
.is-busy { --c: var(--busy); }
.chip.is-busy::before { animation: blink 0.7s infinite; }
.is-locked { --c: var(--locked); }
.is-warn { --c: var(--err); }
.is-muted { --c: var(--muted); }
@keyframes blink { 50% { opacity: 0.2; } }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background 0.3s, border-color 0.3s; }
.nav.scrolled, html:not(.js) .nav {
    background: rgba(12, 12, 14, 0.42);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-color: rgba(255, 255, 255, 0.07);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.nav-left { display: flex; align-items: center; gap: 16px; }
.nav-left .home { font-size: 14px; color: #a1a1a1; transition: color 0.2s; }
.nav-left .home:hover { color: #fff; }
.nav-sep { width: 1px; height: 16px; background: var(--line-2, rgba(255, 255, 255, 0.16)); }
.nav-links { display: flex; gap: 40px; font-size: 14px; color: #a1a1a1; }
.nav-links a:hover { color: #fff; }

/* footer */
.footer { border-top: 1px solid var(--line); }
.footer-in { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding: 26px 24px; font-size: 13px; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer-links a { white-space: nowrap; }
.footer a:hover { color: #fff; }

/* reveal: hidden only when JS is running */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 760px) {
    .nav-links { display: none; }
    .section { padding: 56px 0; }
}

/* Download icon: the arrow drops into the tray on hover. */
.dl-ic .dl-arrow { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pill:hover .dl-ic .dl-arrow { transform: translateY(2px); }

/* A download link waiting on the blocker check (js/route.js); it takes a moment at most. */
.checking { cursor: progress; opacity: 0.75; }
.footer .ver { margin-left: 2px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.footer .ver:empty { display: none; }