@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/inter-400-latin.woff2) format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url(fonts/inter-600-latin.woff2) format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/jetbrains-mono-400-latin.woff2) format("woff2");
}

/* The tokens the panel itself is drawn with, so the site and the thing it shows
   read as one piece rather than two. */
:root {
    --void: #06070f;
    --tint: 255, 255, 255;
    --hair: .5px;

    --ink: #eef1ff;
    --ink-dim: #bcc4e8;
    --ink-faint: #8189b3;

    --accent: #63a8ff;
    --accent-2: #7fe3d4;

    --glass: linear-gradient(160deg, rgba(var(--tint), .11), rgba(var(--tint), .05) 62%);
    --edge: rgba(var(--tint), .14);
    --line: rgba(var(--tint), .16);
    --gloss: inset 0 1px 0 rgba(var(--tint), .16);
    --drop: 0 10px 26px rgba(14, 12, 44, .34);

    --neb: radial-gradient(74% 32% at 10% -6%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
        radial-gradient(56% 26% at 106% 2%, rgba(143, 157, 255, .24), transparent 72%),
        radial-gradient(64% 28% at 92% 44%, rgba(90, 110, 220, .18), transparent 74%),
        radial-gradient(86% 32% at 2% 68%, rgba(127, 227, 212, .12), transparent 74%),
        radial-gradient(130% 40% at 50% 108%, rgba(99, 168, 255, .16), transparent 72%);

    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --r: 3px;
    --gut: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--void);
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* The nebula is one fixed layer rather than a background per section: it must not
   scroll with the text, or the page looks like a stack of cards on wallpaper. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--neb);
    pointer-events: none;
    z-index: 0;
}

.wrap {
    position: relative;
    z-index: 1;
    max-width: 1060px;
    margin: 0 auto;
    padding-inline: var(--gut);
}

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

h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0; }

/* ── the top ─────────────────────────────────────────────────────────────── */

header {
    padding-block: clamp(3.5rem, 12vh, 7rem) clamp(2.5rem, 8vh, 5rem);
}

.mark {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 1.4rem;
}

h1 {
    font-size: clamp(2.4rem, 8vw, 4.4rem);
    font-weight: 800;
    margin-bottom: 1.1rem;
}

h1 .dim { color: var(--ink-faint); font-weight: 600; }

.lede {
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    color: var(--ink-dim);
    max-width: 46ch;
    margin-bottom: .9rem;
}

.lede strong { color: var(--ink); font-weight: 600; }

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 2rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    border-radius: var(--r);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    background: var(--glass);
    box-shadow: inset 0 0 0 var(--hair) var(--edge), var(--gloss);
    color: var(--ink);
    transition: background .18s ease, transform .18s ease;
}

.btn:hover { background: linear-gradient(160deg, rgba(var(--tint), .16), rgba(var(--tint), .07) 62%); }
.btn:active { transform: translateY(1px); }

.btn.primary {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--accent) 34%, transparent),
        color-mix(in srgb, var(--accent) 16%, transparent) 62%);
    box-shadow: inset 0 0 0 var(--hair) color-mix(in srgb, var(--accent) 40%, transparent),
        0 0 22px -10px color-mix(in srgb, var(--accent) 60%, transparent);
    color: var(--ink);
}

.btn svg { width: 17px; height: 17px; }

/* ── sections ────────────────────────────────────────────────────────────── */

section { padding-block: clamp(2.5rem, 7vh, 4.5rem); }

.label {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 1rem;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
    margin-bottom: 1rem;
    max-width: 22ch;
}

.say {
    font-size: 1.05rem;
    color: var(--ink-dim);
    max-width: 62ch;
}

.say + .say { margin-top: .9rem; }

.say strong { color: var(--ink); font-weight: 600; }

/* ── the grid of what it does ────────────────────────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: .8rem;
    margin-top: 2rem;
}

.card {
    padding: 1.3rem;
    border-radius: var(--r);
    background: var(--glass);
    box-shadow: inset 0 0 0 var(--hair) var(--edge), var(--gloss);
}

.card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .45rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.card h3 svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.card p { margin: 0; font-size: .92rem; color: var(--ink-dim); }

/* ── how it is built ─────────────────────────────────────────────────────── */

.parts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .8rem;
    margin-top: 2rem;
    counter-reset: part;
}

.part {
    padding: 1.3rem;
    border-radius: var(--r);
    background: var(--glass);
    box-shadow: inset 0 0 0 var(--hair) var(--edge), var(--gloss);
}

.part .n {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-2);
    display: block;
    margin-bottom: .5rem;
}

.part h3 { font-size: .98rem; font-weight: 600; margin-bottom: .4rem; }
.part p { margin: 0; font-size: .9rem; color: var(--ink-dim); }

/* ── screenshots ─────────────────────────────────────────────────────────── */

.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

figure {
    margin: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--glass);
    box-shadow: inset 0 0 0 var(--hair) var(--edge), var(--drop);
}

figure img { display: block; width: 100%; height: auto; }

figcaption {
    padding: .7rem .9rem;
    font-size: .82rem;
    color: var(--ink-faint);
    border-top: var(--hair) solid var(--line);
}

/* ── install ─────────────────────────────────────────────────────────────── */

pre {
    margin: 1.4rem 0 0;
    padding: 1.1rem 1.2rem;
    border-radius: var(--r);
    background: rgba(4, 5, 12, .6);
    box-shadow: inset 0 0 0 var(--hair) var(--edge);
    overflow-x: auto;
    font-family: var(--mono);
    font-size: .85rem;
    line-height: 1.7;
    color: var(--ink-dim);
}

pre .c { color: var(--ink-faint); }
pre .p { color: var(--accent-2); }

.needs {
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.needs li {
    font-family: var(--mono);
    font-size: .78rem;
    padding: .35rem .7rem;
    border-radius: var(--r);
    color: var(--ink-dim);
    background: var(--glass);
    box-shadow: inset 0 0 0 var(--hair) var(--edge);
}

/* ── the bottom ──────────────────────────────────────────────────────────── */

footer {
    padding-block: 3rem 4rem;
    margin-top: 2rem;
    border-top: var(--hair) solid var(--line);
    color: var(--ink-faint);
    font-size: .86rem;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.6rem;
    align-items: baseline;
}

footer .grow { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}