/* ===========================================================================
   GameCreatorStudio — design system
   ---------------------------------------------------------------------------
   One stylesheet, layered:
     1. tokens        colour, type, spacing, motion
     2. reset         opinionated normalise
     3. primitives    buttons, chips, cards, fields
     4. chrome        header, footer, nav
     5. sections      marketing page composition
     6. app           dashboard, editor, admin
     7. utilities     the small set worth having
   =========================================================================== */

/* ------------------------------------------------------------- 0. typeface */

/*
 * Science Gothic — self-hosted rather than loaded from Google Fonts.
 *
 * Three reasons this is served from our own origin instead of fonts.gstatic.com:
 *   1. the Content-Security-Policy stays at font-src 'self' — no third-party
 *      host needs to be allow-listed to render the interface
 *   2. no DNS lookup, TLS handshake or round trip to another origin before
 *      first paint, which is what the <link rel="preconnect"> tags exist to
 *      paper over
 *   3. exported games and offline use keep their typography
 *
 * It is a variable font: one file covers the whole 100-900 weight range, so
 * this is a single request rather than one per weight. Only the latin and
 * latin-ext subsets are shipped; Cyrillic and Vietnamese would roughly double
 * the payload for a UI that is currently English-only.
 */

@font-face {
    font-family: "Science Gothic";
    font-style: normal;
    font-weight: 100 900;          /* the full variable range */
    font-stretch: 100%;
    /* swap: show the fallback immediately rather than blocking on the font. */
    font-display: swap;
    src: url("../fonts/science-gothic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Science Gothic";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/science-gothic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Metric-matched fallback.
 *
 * `font-display: swap` means the first paint uses a local font and then
 * re-renders in Science Gothic. If the two have different vertical metrics the
 * whole page jumps at that moment — the layout shift users actually notice.
 *
 * Measured from the shipped file (unitsPerEm 2000):
 *   ascent   2176  ->  108.8%
 *   descent  -776  ->   38.8%
 *   lineGap     0  ->      0%
 *   x-height 1000  ->  0.500 em     cap-height 1400  ->  0.700 em
 *
 * Segoe UI happens to share the 0.500 / 0.700 x-height and cap-height ratios,
 * so no size-adjust is needed on Windows. Overriding the line-box metrics here
 * makes the fallback occupy identical vertical space everywhere else too, which
 * takes the swap from "page reflows" to "letterforms change".
 */
@font-face {
    font-family: "Science Gothic Fallback";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Roboto");
    ascent-override: 108.8%;
    descent-override: 38.8%;
    line-gap-override: 0%;
    size-adjust: 100%;
}

/* ---------------------------------------------------------------- 1. tokens */

:root {
    /* Surfaces — each step is a real elevation, not a tint of the last. */
    --void:        #05060a;
    --bg:          #080a10;
    --surface-1:   #0e1118;
    --surface-2:   #141826;
    --surface-3:   #1b2032;
    --surface-4:   #232a40;

    /* Ink */
    --ink:         #eef1f8;
    --ink-2:       #b9c0d4;
    --ink-3:       #7d8598;
    --ink-4:       #4d5468;

    /* Accents. Indigo leads, cyan supports, magenta punctuates. */
    --brand:       #6366f1;
    --brand-bright:#818cf8;
    --brand-deep:  #4338ca;
    --cyan:        #22d3ee;
    --magenta:     #f472b6;
    --lime:        #a3e635;
    --amber:       #fbbf24;
    --coral:       #fb7185;

    --success:     #34d399;
    --warning:     #fbbf24;
    --danger:      #f87171;
    --info:        #38bdf8;

    /* Lines */
    --line:        rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.13);
    --line-brand:  rgba(99, 102, 241, 0.35);

    /* Signature gradients */
    --grad-brand:  linear-gradient(120deg, #6366f1 0%, #22d3ee 55%, #f472b6 100%);
    --grad-warm:   linear-gradient(120deg, #fbbf24 0%, #fb7185 60%, #f472b6 100%);
    --grad-cool:   linear-gradient(120deg, #22d3ee 0%, #6366f1 100%);
    --grad-surface:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0));

    /* Type */
    --font-sans: "Science Gothic", "Science Gothic Fallback", "Segoe UI Variable Display",
                 "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /*
     * Weight, as a real axis.
     *
     * The shipped file exposes exactly one variable axis — wght, 100 to 900.
     * (The slnt / wdth / CTRS axes exist in the upstream Science Gothic but
     * Google's css2 endpoint serves a weight-only instance, so asking for them
     * would be a no-op. Don't add them back without re-checking the file.)
     *
     * A variable axis means weights are continuous, so these are optical
     * choices rather than the nearest available static cut.
     */
    --w-body:     400;
    --w-medium:   520;
    --w-label:    580;   /* small caps and UI labels need extra weight to hold up */
    --w-heading:  650;
    --w-display:  760;   /* below 800: at 4rem+ a heavy weight closes up the counters */

    /*
     * Fluid scale.
     *
     * Science Gothic's x-height is 0.500 em against Inter's 0.546, so at an
     * identical font-size it reads a little smaller. The body and UI steps
     * carry a small compensation for that, because it is where a reader
     * notices.
     *
     * The display steps do not. Their ceiling is set by how much room the
     * layout gives them, not by the typeface — the hero shares a two-column
     * grid, so sizing it off the font metrics is what pushed it to 96px and
     * one word per line.
     *
     * Each clamp interpolates between a 360px phone and a 1440px desktop:
     *   B = (max - min) / 0.675      A = min - 0.225 * B
     */
    --t-xs:   clamp(0.74rem, 0.72rem + 0.07vw, 0.79rem);
    --t-sm:   clamp(0.84rem, 0.82rem + 0.09vw, 0.90rem);
    --t-base: clamp(0.96rem, 0.93rem + 0.13vw, 1.05rem);
    --t-lg:   clamp(1.10rem, 1.05rem + 0.22vw, 1.25rem);
    --t-xl:   clamp(1.30rem, 1.17rem + 0.59vw, 1.70rem);
    --t-2xl:  clamp(1.60rem, 1.33rem + 1.19vw, 2.40rem);
    --t-3xl:  clamp(2.00rem, 1.60rem + 1.78vw, 3.20rem);
    /* Hero only. Capped at 64px: the headline shares a two-column grid, so it
       has roughly 600px to work with at desktop — past this it breaks to one
       word per line. */
    --t-4xl:  clamp(2.40rem, 1.87rem + 2.37vw, 4.00rem);

    /*
     * Line height, by size band.
     *
     * The font's own line box is 1.476 em (ascent 1.088 + descent 0.388). That
     * ascent is tall, so anything below about 1.06 will collide ascenders with
     * the descenders of the line above on multi-line headings — which is the
     * failure mode of "just set 1.1 on every heading".
     */
    --lh-display: 1.08;   /* t-3xl, t-4xl — usually one or two lines */
    --lh-heading: 1.16;   /* t-xl, t-2xl */
    --lh-title:   1.28;   /* t-lg */
    --lh-body:    1.62;   /* the smaller x-height already gives the line air */
    --lh-ui:      1.35;   /* buttons, chips, single-line controls */

    /*
     * Optical tracking. Type needs progressively tighter spacing as it grows,
     * and slightly looser as it shrinks. Science Gothic is already a fairly
     * tight grotesque, so these are gentler than an Inter-tuned scale.
     */
    --track-display: -0.021em;
    --track-heading: -0.013em;
    --track-title:   -0.007em;
    --track-body:     0;
    /* Uppercase micro-labels at 11-13px. Caps have no ascender/descender
       rhythm to separate them, so they need the extra room to stay legible. */
    --track-label:    0.07em;

    /* Space */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
    --s-9: 6rem;     --s-10: 8rem;

    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-full: 999px;

    /* Depth. Layered shadows read as real light rather than a grey blur. */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 4px 16px -4px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.7), 0 8px 16px -8px rgba(0,0,0,.4);
    --shadow-brand: 0 12px 40px -12px rgba(99,102,241,.55);

    /* Motion */
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --fast: 140ms;
    --mid:  280ms;
    --slow: 560ms;

    --header-h: 68px;
    --max-w: 1240px;
    --max-w-prose: 68ch;
}

/* Light theme. Toggled by [data-theme] on <html>, defaulting to the OS. */
:root[data-theme="light"] {
    --void:      #eef0f6;
    --bg:        #f6f7fb;
    --surface-1: #ffffff;
    --surface-2: #f2f4fa;
    --surface-3: #e8ebf4;
    --surface-4: #dfe3ef;

    --ink:   #0d1220;
    --ink-2: #3c4560;
    --ink-3: #6b7490;
    --ink-4: #98a0b8;

    --line:        rgba(13, 18, 32, 0.09);
    --line-strong: rgba(13, 18, 32, 0.16);

    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.4));
    --shadow:    0 4px 16px -4px rgba(20,26,45,.14), 0 2px 4px rgba(20,26,45,.06);
    --shadow-lg: 0 24px 48px -16px rgba(20,26,45,.20), 0 8px 16px -8px rgba(20,26,45,.10);
}

/* ----------------------------------------------------------------- 2. reset */

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
    font-family: var(--font-sans);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    letter-spacing: var(--track-body);
    font-weight: var(--w-body);
    color: var(--ink-2);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    overflow-x: hidden;

    /* No-op on this file (no opsz axis) but correct if a fuller cut is dropped in. */
    font-optical-sizing: auto;
}

/*
 * Headings pair each size with its own line-height and tracking rather than
 * inheriting one blanket value — the whole reason the tokens are banded.
 */
h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: var(--w-heading);
    text-wrap: balance;
}

h1 {
    font-size: var(--t-3xl);
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
}

h2 {
    font-size: var(--t-2xl);
    line-height: var(--lh-heading);
    letter-spacing: var(--track-heading);
}

h3 {
    font-size: var(--t-xl);
    line-height: var(--lh-heading);
    letter-spacing: var(--track-heading);
}

h4 {
    font-size: var(--t-lg);
    line-height: var(--lh-title);
    letter-spacing: var(--track-title);
}

h5, h6 {
    font-size: var(--t-base);
    line-height: var(--lh-title);
    letter-spacing: var(--track-title);
}

p { text-wrap: pretty; }

a { color: var(--brand-bright); text-decoration: none; transition: color var(--fast) var(--ease-out); }
a:hover { color: var(--cyan); }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

ul, ol { list-style: none; padding: 0; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection { background: rgba(99, 102, 241, .38); color: var(--ink); }

/* Scrollbars, styled to match the surfaces rather than the OS. */
* { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--surface-4);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* Anyone who asked their OS to stop animations gets a static page. Motion here
   is decorative; none of it carries meaning that would be lost. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------ 3. primitives */

.wrap {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.wrap--narrow { max-width: 880px; }
.wrap--prose  { max-width: var(--max-w-prose); }

/* --- buttons --- */

.btn {
    --btn-bg: var(--surface-3);
    --btn-ink: var(--ink);
    --btn-border: var(--line-strong);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0.72em 1.35em;
    font-size: var(--t-sm);
    font-weight: var(--w-label);
    /* Negative tracking on a ~15px label is counter-productive in this
       typeface; it was carried over from the Inter scale. */
    letter-spacing: 0;
    line-height: var(--lh-ui);
    color: var(--btn-ink);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: transform var(--fast) var(--ease-out),
                box-shadow var(--mid) var(--ease-out),
                background var(--fast) var(--ease-out),
                border-color var(--fast) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); color: var(--btn-ink); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn--primary {
    --btn-ink: #fff;
    --btn-border: transparent;
    background: var(--grad-brand);
    background-size: 200% 100%;
    box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
    background-position: 100% 0;
    box-shadow: 0 18px 52px -14px rgba(99,102,241,.75);
}

.btn--ghost { --btn-bg: transparent; --btn-border: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--surface-2); --btn-border: var(--line-brand); }

.btn--quiet { --btn-bg: transparent; --btn-border: transparent; --btn-ink: var(--ink-2); }
.btn--quiet:hover { --btn-ink: var(--ink); --btn-bg: var(--surface-2); }

.btn--danger { --btn-bg: rgba(248,113,113,.12); --btn-ink: var(--danger); --btn-border: rgba(248,113,113,.3); }
.btn--danger:hover { --btn-bg: rgba(248,113,113,.2); }

.btn--lg { padding: 0.9em 1.8em; font-size: var(--t-base); }
.btn--sm { padding: 0.5em 1em; font-size: var(--t-xs); }
.btn--block { width: 100%; }

/* --- chips & badges --- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .32em .8em;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.chip--accent {
    color: var(--accent, var(--brand-bright));
    background: color-mix(in srgb, var(--accent, var(--brand)) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent, var(--brand)) 32%, transparent);
}

.chip--mono { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: -.02em; }

/*
 * A chip carrying a sentence rather than a label.
 *
 * `.chip` is `white-space: nowrap`, which is correct for a one- or two-word
 * tag but makes a full tagline run straight out of its card — which is what
 * the template grid was doing to every kit whose tagline ran past a few words.
 * Corners are squared off a little too, because a fully round pill reads
 * badly once it is two lines tall.
 */
.chip--wrap {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    text-wrap: pretty;
    line-height: var(--lh-snug);
    border-radius: var(--radius);
}

.badge-new {
    padding: .18em .55em;
    font-size: .68rem;
    font-weight: var(--w-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--void);
    background: var(--grad-warm);
    border-radius: var(--radius-sm);
}

/* --- eyebrow: the small label above a section heading --- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cyan);
}

.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
}

/* --- cards --- */

.card {
    position: relative;
    padding: var(--s-5);
    background: var(--surface-1);
    background-image: var(--grad-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform var(--mid) var(--ease-out),
                border-color var(--mid) var(--ease-out),
                box-shadow var(--mid) var(--ease-out);
}

.card--hover:hover {
    transform: translateY(-4px);
    border-color: var(--line-brand);
    box-shadow: var(--shadow-lg);
}

/* A one-pixel gradient hairline along the top edge, revealed on hover. */
.card--lit::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent, var(--brand)), transparent);
    opacity: 0;
    transition: opacity var(--mid) var(--ease-out);
}
.card--lit:hover::before { opacity: 1; }

.card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    background: color-mix(in srgb, var(--accent, var(--brand)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--brand)) 26%, transparent);
    border-radius: var(--radius);
}

.card__title {
    font-size: var(--t-lg);
    line-height: var(--lh-title);
    letter-spacing: var(--track-title);
    margin-block: var(--s-4) var(--s-1);
}
.card__tag   { font-size: var(--t-sm); color: var(--ink-3); }

/* --- form fields --- */

.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }

.field__label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
}

.field__hint { font-size: var(--t-xs); color: var(--ink-3); }

.field__error {
    display: flex;
    align-items: center;
    gap: .4em;
    font-size: var(--t-xs);
    color: var(--danger);
}

.input, .select, .textarea {
    width: 100%;
    padding: 0.72em 0.95em;
    font-size: var(--t-sm);
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    transition: border-color var(--fast) var(--ease-out),
                box-shadow var(--fast) var(--ease-out),
                background var(--fast) var(--ease-out);
}

.input::placeholder, .textarea::placeholder { color: var(--ink-4); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    background: var(--surface-1);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}

.input[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }

.textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }

.select {
    appearance: none;
    padding-right: 2.4em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%237d8598' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95em center;
    background-size: .65em;
}

.checkbox { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.checkbox input { width: 1.1em; height: 1.1em; margin-top: .28em; accent-color: var(--brand); flex-shrink: 0; }
.checkbox span { font-size: var(--t-sm); color: var(--ink-2); }

/* Password strength meter */
.meter { display: flex; gap: 4px; margin-top: var(--s-2); }
.meter__bar {
    flex: 1;
    height: 3px;
    background: var(--surface-4);
    border-radius: var(--radius-full);
    transition: background var(--mid) var(--ease-out);
}
.meter[data-score="0"] .meter__bar:nth-child(-n+1) { background: var(--danger); }
.meter[data-score="1"] .meter__bar:nth-child(-n+2) { background: var(--danger); }
.meter[data-score="2"] .meter__bar:nth-child(-n+3) { background: var(--warning); }
.meter[data-score="3"] .meter__bar:nth-child(-n+4) { background: var(--info); }
.meter[data-score="4"] .meter__bar                { background: var(--success); }

/* --- alerts --- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    font-size: var(--t-sm);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--surface-2);
    margin-bottom: var(--s-4);
}

.alert--success { border-left-color: var(--success); color: var(--success); }
.alert--error   { border-left-color: var(--danger);  color: var(--danger); }
.alert--warning { border-left-color: var(--warning); color: var(--warning); }
.alert--info    { border-left-color: var(--info);    color: var(--info); }

/* ----------------------------------------------------------------- 4. chrome */

.header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--mid) var(--ease-out),
                background var(--mid) var(--ease-out);
}

.header[data-scrolled="true"] {
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    height: 100%;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-weight: var(--w-heading);
    font-size: var(--t-base);
    line-height: var(--lh-ui);
    color: var(--ink);
    letter-spacing: var(--track-heading);
    flex-shrink: 0;
    /* A flex item defaults to min-width:auto, which stops its own children
       shrinking below their content. Required for the truncation below. */
    min-width: 0;
}

.brand:hover { color: var(--ink); }

.brand__mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    /*
     * Never let the logo be the thing that gives.
     *
     * A flex child with a width can still be compressed, and the wordmark next
     * to it is a single unbreakable 17-character word with a fixed min-content
     * width — so in a tight row the mark was the only flexible thing left and
     * got squashed against the edge.
     */
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--grad-brand);
    box-shadow: var(--shadow-brand);
    color: #fff;
    font-weight: var(--w-display);
    font-size: 1.02rem;
    line-height: 1;
    transition: transform var(--mid) var(--ease-spring);
}

.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }

.nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }

.nav__link {
    position: relative;
    padding: .5em .85em;
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-ui);
    color: var(--ink-3);
    border-radius: var(--radius-sm);
    transition: color var(--fast) var(--ease-out);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: .85em; right: .85em; bottom: .18em;
    height: 1.5px;
    background: var(--grad-cool);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--mid) var(--ease-out);
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: var(--s-2); }

.theme-toggle {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }

.burger { display: none; }

@media (max-width: 940px) {
    .nav, .header__actions .btn { display: none; }
    .burger {
        display: grid;
        place-items: center;
        width: 2.5rem; height: 2.5rem;
        margin-left: auto;
        color: var(--ink);
    }
    .header__actions { margin-left: 0; }

    .nav.is-open {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--s-4);
        background: var(--surface-1);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
    }
    .nav.is-open .nav__link { padding: .8em; font-size: var(--t-base); }
}

/* --- footer --- */

.footer {
    margin-top: var(--s-9);
    padding-block: var(--s-7) var(--s-5);
    border-top: 1px solid var(--line);
    background: var(--surface-1);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6) var(--s-5);
}

/*
 * `repeat(auto-fit, minmax(...))` beside an `fr` track cannot resolve its
 * repetition count, so the previous rule silently collapsed to one column.
 * Explicit breakpoints are predictable and this grid only has four children.
 */
@media (min-width: 600px) {
    .footer__grid { grid-template-columns: repeat(3, 1fr); }
    .footer__col:first-child { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
    .footer__grid { grid-template-columns: 2.2fr repeat(3, 1fr); gap: var(--s-7) var(--s-6); }
    .footer__col:first-child { grid-column: auto; }
}

.footer__col h4 {
    font-size: var(--t-xs);
    font-weight: var(--w-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s-3);
}

.footer__col li { margin-bottom: var(--s-1); }

.footer__col a {
    display: inline-block;
    padding-block: 0.15em;
    font-size: var(--t-sm);
    line-height: var(--lh-ui);
    color: var(--ink-2);
}
.footer__col a:hover { color: var(--cyan); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    font-size: var(--t-xs);
    color: var(--ink-4);
}

/* --------------------------------------------------------------- 5. sections */

main { padding-top: var(--header-h); }

.section { padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.section__head { max-width: 720px; margin-bottom: var(--s-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { margin-block: var(--s-3) var(--s-4); }
.section__head p {
    font-size: var(--t-lg);
    line-height: var(--lh-title);
    color: var(--ink-3);
}

/* --- hero --- */

.hero {
    position: relative;
    padding-block: clamp(3rem, 10vw, 8rem) clamp(3rem, 8vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}

/* Aurora: three slow-drifting radial blobs. Cheap, and it gives the page the
   "engine viewport" feel without a canvas. */
.hero__aurora {
    position: absolute;
    inset: -30% -10% auto;
    height: 130%;
    z-index: -2;
    filter: blur(90px);
    opacity: .55;
    pointer-events: none;
}

.hero__aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    animation: drift 22s var(--ease-in-out) infinite alternate;
}

.hero__aurora span:nth-child(1) {
    width: 46vw; height: 46vw; left: 4%; top: 8%;
    background: radial-gradient(circle, rgba(99,102,241,.85), transparent 68%);
}
.hero__aurora span:nth-child(2) {
    width: 38vw; height: 38vw; right: 6%; top: 0%;
    background: radial-gradient(circle, rgba(34,211,238,.7), transparent 68%);
    animation-delay: -8s;
}
.hero__aurora span:nth-child(3) {
    width: 32vw; height: 32vw; left: 38%; top: 42%;
    background: radial-gradient(circle, rgba(244,114,182,.6), transparent 68%);
    animation-delay: -15s;
}

@keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6%, -8%, 0) scale(1.18); }
}

/* Grid floor, fading out toward the horizon. */
.hero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
    pointer-events: none;
}

.hero__inner { position: relative; display: grid; gap: var(--s-8); }

@media (min-width: 1020px) {
    .hero__inner { grid-template-columns: 1.05fr .95fr; align-items: center; }
}

.hero h1 {
    font-size: var(--t-4xl);
    font-weight: var(--w-display);
    line-height: var(--lh-display);
    /* -0.04em was an Inter-era value; it closes Science Gothic's counters up. */
    letter-spacing: var(--track-display);
    margin-block: var(--s-4) var(--s-5);
}

.hero h1 .grad {
    background: var(--grad-brand);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
    to { background-position: 200% center; }
}

.hero__lede {
    font-size: var(--t-lg);
    line-height: var(--lh-title);
    color: var(--ink-2);
    max-width: 54ch;
    margin-bottom: var(--s-6);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.hero__note {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-5);
    font-size: var(--t-xs);
    color: var(--ink-4);
}

/* Stat strip under the hero */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
}

.stat__value {
    font-family: var(--font-mono);
    font-size: var(--t-2xl);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1;
}

.stat__label {
    margin-top: var(--s-2);
    font-size: var(--t-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-4);
}

/* --- hero viewport mock: a fake editor window --- */

.viewport {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: perspective(1600px) rotateY(-7deg) rotateX(3deg);
    transition: transform var(--slow) var(--ease-out);
}

.viewport:hover { transform: perspective(1600px) rotateY(-2deg) rotateX(1deg); }

.viewport__bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.viewport__dots { display: flex; gap: 6px; }
.viewport__dots i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--surface-4);
}
.viewport__dots i:nth-child(1) { background: #fb7185; }
.viewport__dots i:nth-child(2) { background: #fbbf24; }
.viewport__dots i:nth-child(3) { background: #34d399; }

.viewport__title {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-4);
}

.viewport__stage {
    position: relative;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(99,102,241,.22), transparent 62%),
        var(--void);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.viewport__stage canvas { width: 100%; height: 100%; }

/* --- feature grid --- */

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.feature__list { margin-top: var(--s-4); display: grid; gap: var(--s-2); }

.feature__list li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    color: var(--ink-2);
}

.feature__list li::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent, var(--brand));
    flex-shrink: 0;
}

/* --- template cards --- */

.tpl {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-5);
    text-decoration: none;
    /* Grid items default to min-width:auto, so a long unbroken string can
       push the card wider than its track instead of wrapping inside it. */
    min-width: 0;
}

.tpl__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.tpl__icon { font-size: 2rem; line-height: 1; }
.tpl__name {
    font-size: var(--t-lg);
    line-height: var(--lh-title);
    letter-spacing: var(--track-title);
    color: var(--ink);
}
.tpl__tag  { font-size: var(--t-sm); color: var(--ink-3); flex: 1; }
.tpl__feats { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: auto; padding-top: var(--s-3); }

.tpl__dim {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .25em .5em;
    border-radius: var(--radius-sm);
    color: var(--accent, var(--brand));
    background: color-mix(in srgb, var(--accent, var(--brand)) 15%, transparent);
}

/* --- filter tabs --- */

.tabs {
    display: inline-flex;
    gap: var(--s-1);
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
}

.tabs a {
    padding: .45em 1.1em;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-3);
    border-radius: var(--radius-full);
    transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.tabs a.is-active { color: var(--ink); background: var(--surface-4); }
.tabs a:hover { color: var(--ink); }

/* --- pricing --- */

.plan { display: flex; flex-direction: column; padding: var(--s-6); }

.plan--featured {
    border-color: var(--line-brand);
    box-shadow: var(--shadow-brand);
}

.plan--featured::after {
    content: "Most popular";
    position: absolute;
    top: -1px; right: var(--s-5);
    padding: .3em .8em;
    font-size: var(--t-xs);
    font-weight: 600;
    color: #fff;
    background: var(--grad-brand);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.plan__price { display: flex; align-items: baseline; gap: var(--s-2); margin-block: var(--s-4); }
.plan__amount { font-size: var(--t-3xl); font-weight: 800; color: var(--ink); letter-spacing: -.04em; }
.plan__period { font-size: var(--t-sm); color: var(--ink-4); }

.plan__features { display: grid; gap: var(--s-3); margin-block: var(--s-5); flex: 1; }
.plan__features li { display: flex; gap: var(--s-3); font-size: var(--t-sm); }
.plan__features li::before { content: "✓"; color: var(--success); font-weight: 700; flex-shrink: 0; }

/* --- FAQ accordion --- */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    width: 100%;
    padding: var(--s-5) 0;
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--ink);
    text-align: left;
}

.faq__q::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--ink-3);
    transition: transform var(--mid) var(--ease-spring), color var(--fast) var(--ease-out);
    flex-shrink: 0;
}

.faq__item[open] .faq__q::after { transform: rotate(45deg); color: var(--cyan); }
.faq__q::-webkit-details-marker { display: none; }

.faq__a { padding-bottom: var(--s-5); color: var(--ink-2); max-width: var(--max-w-prose); }

/* --- CTA band --- */

.cta-band {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) var(--s-5);
    text-align: center;
    border: 1px solid var(--line-brand);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.22), transparent 62%),
        var(--surface-1);
    overflow: hidden;
}

.cta-band h2 { margin-bottom: var(--s-4); }
.cta-band p { max-width: 50ch; margin: 0 auto var(--s-6); color: var(--ink-2); font-size: var(--t-lg); }

/* --- scroll reveal --- */

.reveal { opacity: 0; transform: translateY(22px); }

/* ------------------------------------------------------------------- 6. app */

.auth-shell {
    display: grid;
    place-items: center;
    min-height: calc(100vh - var(--header-h));
    padding: var(--s-6) var(--s-4) var(--s-9);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--surface-1);
    background-image: var(--grad-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.auth-card__head { text-align: center; margin-bottom: var(--s-6); }
.auth-card__head h1 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.auth-card__head p  { font-size: var(--t-sm); color: var(--ink-3); }

.auth-card__foot {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: var(--t-sm);
    color: var(--ink-3);
}

/* --- dashboard --- */

.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

.project-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.project-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(ellipse at 50% 130%, color-mix(in srgb, var(--accent, var(--brand)) 40%, transparent), transparent 65%),
        var(--surface-3);
    display: grid;
    place-items: center;
    font-size: 2.75rem;
    border-bottom: 1px solid var(--line);
}

.project-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.project-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); }

.project-card__actions {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}

.empty {
    display: grid;
    place-items: center;
    gap: var(--s-4);
    padding: var(--s-9) var(--s-5);
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

.empty__icon { font-size: 3rem; opacity: .6; }

/* --- blog --- */

.post-card__cover {
    aspect-ratio: 16 / 9;
    background: var(--surface-3);
    border-radius: var(--radius) var(--radius) 0 0;
    display: grid;
    place-items: center;
    font-size: 2rem;
}

.prose {
    max-width: var(--max-w-prose);
    color: var(--ink-2);
    font-size: var(--t-lg);
    line-height: 1.7;
    letter-spacing: var(--track-body);
}
.prose > * + * { margin-top: 1.4em; }
.prose h2 { margin-top: 2.2em; font-size: var(--t-xl); }
.prose h3 { margin-top: 1.8em; font-size: var(--t-lg); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul li { list-style: disc; margin-bottom: .5em; }
.prose ol li { list-style: decimal; margin-bottom: .5em; }
.prose img { border-radius: var(--radius); margin-block: 1.8em; }
.prose blockquote {
    padding-left: var(--s-5);
    border-left: 3px solid var(--brand);
    color: var(--ink);
    font-style: italic;
}
.prose pre {
    padding: var(--s-4);
    background: var(--void);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: var(--t-sm);
}
.prose code { padding: .15em .4em; background: var(--surface-3); border-radius: 4px; }
.prose pre code { padding: 0; background: none; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- 7. utilities */

.stack   { display: grid; gap: var(--s-4); }
.stack-2 { display: grid; gap: var(--s-2); }
.row     { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.wrap-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

.center { text-align: center; }
.muted  { color: var(--ink-3); }
.dim    { color: var(--ink-4); }
.small  { font-size: var(--t-sm); }
.tiny   { font-size: var(--t-xs); }
.mono   { font-family: var(--font-mono); }
.bold   { font-weight: var(--w-heading); }

.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }

.grad-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--s-4);
    z-index: 200;
    padding: var(--s-3) var(--s-4);
    background: var(--brand);
    color: #fff;
    border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; color: #fff; }

.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--s-6); }

/* Print: strip the chrome, keep the content. */
@media print {
    .header, .footer, .hero__aurora, .hero__grid, .btn { display: none !important; }
    body { background: #fff; color: #000; }
    main { padding-top: 0; }
}

/* ===========================================================================
   Documentation
   =========================================================================== */

.doc-index__list { display: grid; gap: 1px; margin-top: var(--s-3); }

.doc-index__list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: .55em .7em;
    font-size: var(--t-sm);
    color: var(--ink-2);
    border-radius: var(--radius);
    transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.doc-index__list a:hover { background: var(--surface-2); color: var(--ink); }

/* Article page: contents beside the prose, stacking on narrow screens. */
.doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

@media (max-width: 880px) {
    .doc-layout { grid-template-columns: minmax(0, 1fr); }
    .doc-nav { position: static; max-height: none; order: 2; }
}

.doc-nav {
    position: sticky;
    top: calc(var(--app-header-h, 62px) + var(--s-4));
    max-height: calc(100vh - var(--app-header-h, 62px) - var(--s-8));
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: var(--s-2);
    border-right: 1px solid var(--line);
    min-width: 0;
}

.doc-nav__group {
    margin-top: var(--s-4);
    font-size: var(--t-xs);
    font-weight: var(--w-label, 600);
    letter-spacing: var(--track-label, .06em);
    text-transform: uppercase;
    color: var(--ink-4);
}

.doc-nav__group:first-child { margin-top: 0; }

.doc-nav__list { display: grid; gap: 1px; margin-top: var(--s-2); }

.doc-nav__list a {
    display: block;
    padding: .4em .6em;
    font-size: var(--t-sm);
    color: var(--ink-3);
    border-radius: var(--radius-sm);
    /* Long titles wrap rather than widening the column. */
    overflow-wrap: anywhere;
}

.doc-nav__list a:hover { background: var(--surface-2); color: var(--ink); }

.doc-nav__list a.is-active {
    color: var(--ink);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    box-shadow: inset 2px 0 0 var(--brand);
}

.doc-body { min-width: 0; max-width: 46rem; }

.doc-body__title {
    font-size: var(--t-3xl);
    line-height: var(--lh-tight);
    letter-spacing: -.025em;
}

.doc-body__h2 {
    margin-top: var(--s-8);
    margin-bottom: var(--s-3);
    padding-top: var(--s-4);
    font-size: var(--t-xl);
    letter-spacing: -.02em;
    border-top: 1px solid var(--line);
}

.doc-body p { margin-bottom: var(--s-4); line-height: var(--lh-relaxed, 1.7); }

.doc-body__list { margin: 0 0 var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.doc-body__list li { line-height: var(--lh-relaxed, 1.7); }
ul.doc-body__list { list-style: disc; }
ol.doc-body__list { list-style: decimal; }

.doc-body code {
    padding: .12em .4em;
    font-family: var(--font-mono);
    font-size: .9em;
    color: var(--ink);
    background: var(--surface-3, var(--surface-2));
    border-radius: var(--radius-sm);
}

.doc-code {
    margin-bottom: var(--s-4);
    padding: var(--s-4);
    /* Wide samples scroll inside their own box; the page never does. */
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent, var(--brand));
    border-radius: var(--radius);
}

.doc-code code { padding: 0; background: none; }

/* Numbered walkthroughs get more room than a plain list. */
.doc-steps {
    counter-reset: step;
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    padding: 0;
    list-style: none;
}

.doc-steps li {
    counter-increment: step;
    position: relative;
    padding-left: 2.6rem;
    line-height: var(--lh-relaxed, 1.7);
}

.doc-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -.1em;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--accent, var(--brand));
    background: color-mix(in srgb, var(--accent, var(--brand)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, var(--brand)) 32%, transparent);
    border-radius: 50%;
}

.doc-callout {
    display: flex;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    padding: var(--s-4);
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--info, #38bdf8);
    border-radius: var(--radius);
}

.doc-callout p { margin: 0; }
.doc-callout--warn { border-left-color: var(--warning, #fbbf24); }

.doc-callout__mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--void, #0b0d14);
    background: var(--info, #38bdf8);
    border-radius: 50%;
}

.doc-callout--warn .doc-callout__mark { background: var(--warning, #fbbf24); }

.doc-body .table-wrap { margin-bottom: var(--s-5); }

.doc-pager {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}

.doc-pager__link {
    display: grid;
    gap: 2px;
    padding: var(--s-3) var(--s-4);
    color: var(--ink-2);
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
    min-width: 0;
}

.doc-pager__link:hover { border-color: var(--line-strong); color: var(--ink); }
.doc-pager__link--next { text-align: right; }