/* ==============================================================
   Parallax Launcher — the page
   ==============================================================
   The palette, the type and the depth all come from the app's own
   stylesheet. A landing page that invents its own look teaches the
   visitor something they then have to unlearn on first launch, so
   this one is the application's world with the walls taken down.
   ============================================================== */

:root {
    /* Ink, from the app's theme.css */
    --ink-void: #05060A;
    --ink-base: #090B10;
    --ink-raise: #0F1218;
    --ink-lift: #161A22;
    --ink-edge: #212734;

    /* Starlight, likewise. The neutrals lean cold-blue rather than
       grey — a real night sky has no grey in it. */
    --star-hi: #EEF1F6;
    --star: #C4CCD9;
    --star-dim: #8A94A5;
    --star-faint: #59626F;

    --line-faint: rgba(198, 214, 255, 0.06);
    --line: rgba(198, 214, 255, 0.10);
    --line-strong: rgba(198, 214, 255, 0.18);

    /* One accent, spent carefully. */
    --ambient: 60, 110, 180;

    --font-ui: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    --r-sm: 7px;
    --r-md: 11px;
    --r-lg: 16px;

    --t-fast: 0.16s cubic-bezier(0.3, 0, 0.2, 1);
    --t-main: 0.36s cubic-bezier(0.2, 0, 0.1, 1);

    --measure: 62ch;
    --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--ink-void);
    color: var(--star);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---- the sky ------------------------------------------------
   Three layers at three depths. They move against the pointer,
   the near one further than the far one, which is what parallax
   looks like from a moving viewpoint — and the reason the program
   is called what it is.
   -------------------------------------------------------------- */
.sky {
    position: fixed;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
}

.sky__layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.sky__haze {
    background:
        radial-gradient(58% 44% at 50% 0%,
            rgba(var(--ambient), .16) 0%,
            rgba(var(--ambient), .05) 42%,
            transparent 72%);
}

.sky__grain {
    position: absolute;
    inset: 0;
    opacity: .035;
    mix-blend-mode: overlay;
}

/* ---- shell ---------------------------------------------------- */
.page { position: relative; z-index: 1; }

.wrap {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

section { padding-block: clamp(64px, 11vh, 128px); }

/* ---- type ----------------------------------------------------- */
h1, h2, h3 {
    color: var(--star-hi);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
}

h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    margin-bottom: 14px;
}

h3 {
    font-size: 1rem;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--star-hi); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
    outline: 2px solid rgba(var(--ambient), .9);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Every label, every measurement, every version number. The two
   faces never blur roles, which is what makes the mono mean
   something when it appears. */
.label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--star-faint);
    margin-bottom: 18px;
}

.lede {
    font-size: clamp(1.02rem, 1.9vw, 1.18rem);
    color: var(--star-dim);
}

/* ---- header --------------------------------------------------- */
.top {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px) saturate(1.3);
    background: color-mix(in srgb, var(--ink-void) 72%, transparent);
    border-bottom: 1px solid var(--line-faint);
}

.top__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 62px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand svg { width: 22px; height: 22px; flex: none; }
.brand span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--star);
}

.top__links { display: flex; align-items: center; gap: 22px; }
.top__links a {
    font-size: 0.82rem;
    color: var(--star-dim);
    text-decoration: none;
    transition: color var(--t-fast);
}
.top__links a:hover { color: var(--star-hi); }
@media (max-width: 560px) { .top__links a[data-optional] { display: none; } }

/* ---- hero ----------------------------------------------------- */
.hero { padding-block: clamp(56px, 12vh, 116px) clamp(40px, 8vh, 80px); }

.hero__mark { width: 54px; height: 54px; margin-bottom: 26px; }

.hero h1 {
    font-size: clamp(2.1rem, 6.2vw, 3.6rem);
    line-height: 1.08;
    max-width: 17ch;
    margin-bottom: 20px;
}

.hero .lede { max-width: 54ch; }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
}

/* ---- buttons -------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font: 500 0.88rem/1 var(--font-ui);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.btn--primary {
    background: var(--star-hi);
    color: var(--ink-void);
}
.btn--primary:hover { transform: translateY(-2px); background: #fff; }

.btn--ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--star);
}
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--star-dim); color: var(--star-hi); }

.btn__meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    opacity: .62;
    font-variant-numeric: tabular-nums;
}

.hero__note {
    margin-top: 16px;
    font-size: 0.78rem;
    color: var(--star-faint);
}

/* ---- the shot ------------------------------------------------- */
.shot {
    position: relative;
    margin-top: clamp(40px, 7vh, 76px);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--ink-base);
    overflow: hidden;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
}

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

.shot__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-faint);
    background: var(--ink-lift);
}
.shot__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-edge); }

/* A slot waiting for a screenshot. It is drawn rather than left
   broken, so the page reads as finished either way and the shape of
   what belongs there is already correct. */
.shot--empty {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background:
        repeating-linear-gradient(135deg,
            transparent 0 11px,
            rgba(198, 214, 255, .022) 11px 22px),
        var(--ink-base);
    color: var(--star-faint);
    text-align: center;
    padding: 24px;
}

.shot--empty span {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: .1em;
    max-width: 30ch;
    line-height: 1.7;
}

.pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 18px;
    margin-top: 32px;
}

.pair .shot { margin-top: 0; }

/* ---- feature grid --------------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
    gap: 1px;
    background: var(--line-faint);
    border: 1px solid var(--line-faint);
    border-radius: var(--r-md);
    overflow: hidden;
}

.cell {
    background: var(--ink-base);
    padding: 26px 24px;
}

.cell p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--star-dim);
}

.cell__num {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: .14em;
    color: var(--star-faint);
    display: block;
    margin-bottom: 12px;
}

/* ---- two-up table --------------------------------------------- */
.files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 18px;
    margin-top: 30px;
}

/* The three cards hold different amounts of text, and with the button
   simply following the paragraph each one landed at a different height
   — three buttons on three lines, in a row meant to be scanned across.
   A column with the button pushed to the bottom lines them up whatever
   is written above. */
.file {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 24px;
    background: linear-gradient(180deg, var(--ink-raise), var(--ink-base));
}

.file__name {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    color: var(--star-hi);
    margin-bottom: 4px;
}

.file__for {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--star-faint);
    margin-bottom: 16px;
}

.file p { font-size: 0.86rem; color: var(--star-dim); }

.file .btn {
    margin-top: auto;
    padding-top: 13px;
    width: 100%;
    justify-content: center;
}

/* The gap above the button, held here so `margin-top: auto` above is
   free to do the aligning. */
.file p { margin-bottom: 18px; }

/* A chip for the one thing that actually distinguishes the two. */
.chip {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border: 1px solid rgba(var(--ambient), .5);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--ambient), 1);
    vertical-align: 2px;
}

/* ---- the repository block -------------------------------------
   Commands somebody is going to paste into a root shell. They are
   shown in full rather than wrapped in a one-line installer: adding
   a signing key and a package source is exactly the kind of thing a
   person should be able to read first.
   ---------------------------------------------------------------- */
.repo {
    margin-top: 30px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--ink-base);
}

.repo__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.copy {
    flex: none;
    padding: 6px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--star-dim);
    font: 500 0.74rem/1 var(--font-ui);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.copy:hover { color: var(--star-hi); border-color: var(--star-dim); }
.copy.is-done { color: var(--star-hi); border-color: rgba(var(--ambient), .8); }

.repo pre {
    margin: 0;
    padding: 18px;
    border-radius: var(--r-sm);
    background: var(--ink-void);
    border: 1px solid var(--line-faint);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.85;
    color: var(--star);
    tab-size: 2;
}

.repo code { font-family: inherit; }

/* ---- languages ------------------------------------------------ */
.langs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.lang {
    padding: 7px 13px;
    border: 1px solid var(--line-faint);
    border-radius: 100px;
    background: var(--ink-base);
    font-size: 0.82rem;
    color: var(--star-dim);
}

/* ---- footer --------------------------------------------------- */
.foot {
    border-top: 1px solid var(--line-faint);
    padding-block: 44px;
    font-size: 0.8rem;
    color: var(--star-faint);
}

.foot__in {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    justify-content: space-between;
    align-items: baseline;
}

.foot a { color: var(--star-dim); text-decoration: none; }
.foot a:hover { color: var(--star-hi); text-decoration: underline; }

/* ---- entrance -------------------------------------------------
   One short sequence on load, and nothing after it. Movement that
   keeps happening while you read is movement you end up fighting.
   ---------------------------------------------------------------- */
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.rise { animation: rise .7s cubic-bezier(.2, 0, .1, 1) both; }
.rise--1 { animation-delay: .05s; }
.rise--2 { animation-delay: .13s; }
.rise--3 { animation-delay: .21s; }
.rise--4 { animation-delay: .29s; }


/* --- Windows help page -----------------------------------------
   Steps that pair an instruction with the picture of the thing
   being described. Text left, screenshot right, so the eye can
   check the screen against the sentence without scrolling between
   them; stacked below the breakpoint where that stops fitting.
   ---------------------------------------------------------------- */
.steps {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    gap: 26px;
}

.step {
    display: grid;
    grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
    gap: 28px;
    align-items: start;
    padding-top: 26px;
    border-top: 1px solid var(--line-faint);
}

.step:first-child { border-top: 0; padding-top: 0; }

@media (max-width: 720px) {
    .step { grid-template-columns: 1fr; gap: 18px; }
}

.step__body p {
    font-size: 0.88rem;
    color: var(--star-dim);
    margin-bottom: 0;
}

.step__body em {
    font-style: normal;
    color: var(--star-hi);
    font-weight: 500;
}

/* The number is a position in a sequence, which these genuinely are
   — do this, then this. It earns the marker. */
.step__n {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: .14em;
    color: var(--star-faint);
    margin-bottom: 10px;
}

.step .shot { margin-top: 0; }

/* Two asides with different weights: one explains, one is a caution
   somebody needs to have read before acting. The second earns its
   colour; the first would be shouting. */
.note,
.warn {
    padding: 22px 24px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--ink-base);
}

.warn {
    border-color: rgba(224, 162, 71, .38);
    background: linear-gradient(180deg, rgba(224, 162, 71, .05), transparent 60%), var(--ink-base);
}

.warn h3 { color: #E0A247; }
.warn p { color: var(--star); }

/* A button waiting on a download it cannot see. Dimmed rather than
   coloured — nothing has gone wrong, it is only that the browser has
   not said anything yet. */
.btn--retry {
    opacity: .82;
}


/* --- The Windows heads-up --------------------------------------
   Sits directly under the download buttons. Amber rather than red:
   this is the next thing that will happen, not something that has
   gone wrong — and the whole block is the link, so there is no
   small target to find.
   ---------------------------------------------------------------- */
.heads-up {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 22px 24px;
    border: 1px solid rgba(224, 162, 71, .34);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(224, 162, 71, .055), transparent 62%), var(--ink-base);
    text-decoration: none;
    transition: border-color var(--t-fast), transform var(--t-fast);
}

.heads-up:hover {
    border-color: rgba(224, 162, 71, .6);
    transform: translateY(-2px);
}

.heads-up__icon {
    flex: none;
    width: 30px;
    height: 30px;
    color: #E0A247;
    margin-top: 1px;
}

.heads-up__icon svg { width: 100%; height: 100%; }

/* The heading carries the point by itself — somebody who reads only
   this line has still been told the useful thing. */
.heads-up h3 {
    color: var(--star-hi);
    font-size: 1rem;
    margin-bottom: 8px;
}

.heads-up p {
    font-size: 0.86rem;
    color: var(--star-dim);
    margin-bottom: 12px;
    max-width: 68ch;
}

.heads-up__go {
    font-size: 0.82rem;
    color: #E0A247;
}

@media (max-width: 560px) {
    .heads-up { flex-direction: column; gap: 12px; }
}


/* --- Guide index -----------------------------------------------
   Cards that are entirely a link, so the whole area is the target
   rather than four words of it.
   ---------------------------------------------------------------- */
.guides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 18px;
}

.guide {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--ink-raise), var(--ink-base));
    text-decoration: none;
    transition: transform var(--t-fast), border-color var(--t-fast);
}

.guide:hover {
    transform: translateY(-2px);
    border-color: var(--star-faint);
}

.guide__for {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--star-faint);
    margin-bottom: 12px;
}

.guide p {
    font-size: 0.86rem;
    color: var(--star-dim);
    margin-bottom: 16px;
}

.guide__go {
    margin-top: auto;
    font-size: 0.82rem;
    color: var(--star-hi);
}

/* Only one platform's steps are shown at a time. */
.platform-steps.hidden { display: none; }

.platform-steps pre {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--ink-void);
    border: 1px solid var(--line-faint);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--star);
}