/* gorc.dev */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-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: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/jetbrains-mono-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;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

img,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* ---------- Tokens ---------- */
:root {
    color-scheme: dark;

    /* Nord: Polar Night bases, Frost for accent, Aurora for state. */
    --bg: #2e3440;
    --bg-1: #3b4252;
    --bg-2: #434c5e;
    --bg-3: #4c566a;
    --text: #eceff4;
    --text-2: #d8dee9;
    --muted: #a9b4c7;
    --border: #3b4252;
    --border-2: #4c566a;

    --accent: #88c0d0;
    --accent-hi: #99ccdb;
    --accent-ink: #2e3440;
    --accent-soft: rgba(136, 192, 208, 0.14);
    --accent-glow: rgba(136, 192, 208, 0.34);

    --green: #a3be8c;
    --amber: #ebcb8b;
    --red: #bf616a;

    --term-bg: #292f3a;
    --term-bar: #343b48;

    --code-verb: #88c0d0;
    --code-key: #93b1ce;
    --code-str: #a3be8c;
    --code-var: #ebcb8b;
    --code-com: #a5b0c6;

    --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.3);
    --grid-line: rgba(236, 239, 244, 0.05);
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;

        /* Nord: Snow Storm bases, darkened Frost so text clears contrast. */
        --bg: #ffffff;
        --bg-1: #f7f9fc;
        --bg-2: #eceff4;
        --bg-3: #e5e9f0;
        --text: #2e3440;
        --text-2: #3b4252;
        --muted: #4c566a;
        --border: #d8dee9;
        --border-2: #c3ccdb;

        --accent: #4c6e96;
        --accent-hi: #3d5d80;
        --accent-ink: #ffffff;
        --accent-soft: rgba(76, 110, 150, 0.10);
        --accent-glow: rgba(94, 129, 172, 0.26);

        --green: #4a7a35;
        --amber: #8a6420;
        --red: #b34049;

        --term-bg: #292f3a;
        --term-bar: #343b48;

        --code-verb: #2b6e8f;
        --code-key: #3b5f87;
        --code-str: #4a7a35;
        --code-var: #8a6420;
        --code-com: #5d6779;

        --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.9);
        --shadow: 0 1px 2px rgba(46, 52, 64, 0.06),
            0 12px 32px rgba(46, 52, 64, 0.09);
        --grid-line: rgba(46, 52, 64, 0.05);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Nord: Polar Night bases, Frost for accent, Aurora for state. */
    --bg: #2e3440;
    --bg-1: #3b4252;
    --bg-2: #434c5e;
    --bg-3: #4c566a;
    --text: #eceff4;
    --text-2: #d8dee9;
    --muted: #a9b4c7;
    --border: #3b4252;
    --border-2: #4c566a;

    --accent: #88c0d0;
    --accent-hi: #99ccdb;
    --accent-ink: #2e3440;
    --accent-soft: rgba(136, 192, 208, 0.14);
    --accent-glow: rgba(136, 192, 208, 0.34);

    --green: #a3be8c;
    --amber: #ebcb8b;
    --red: #bf616a;

    --term-bg: #292f3a;
    --term-bar: #343b48;

    --code-verb: #88c0d0;
    --code-key: #93b1ce;
    --code-str: #a3be8c;
    --code-var: #ebcb8b;
    --code-com: #a5b0c6;

    --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.3);
    --grid-line: rgba(236, 239, 244, 0.05);
}

:root[data-theme="light"] {
    color-scheme: light;

    /* Nord: Snow Storm bases, darkened Frost so text clears contrast. */
    --bg: #ffffff;
    --bg-1: #f7f9fc;
    --bg-2: #eceff4;
    --bg-3: #e5e9f0;
    --text: #2e3440;
    --text-2: #3b4252;
    --muted: #4c566a;
    --border: #d8dee9;
    --border-2: #c3ccdb;

    --accent: #4c6e96;
    --accent-hi: #3d5d80;
    --accent-ink: #ffffff;
    --accent-soft: rgba(76, 110, 150, 0.10);
    --accent-glow: rgba(94, 129, 172, 0.26);

    --green: #4a7a35;
    --amber: #8a6420;
    --red: #b34049;

    --term-bg: #292f3a;
    --term-bar: #343b48;

    --code-verb: #2b6e8f;
    --code-key: #3b5f87;
    --code-str: #4a7a35;
    --code-var: #8a6420;
    --code-com: #5d6779;

    --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --shadow: 0 1px 2px rgba(46, 52, 64, 0.06),
        0 12px 32px rgba(46, 52, 64, 0.09);
    --grid-line: rgba(46, 52, 64, 0.05);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- Base ---------- */
body {
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

code,
pre,
kbd,
.term,
.mono {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
        Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-ligatures: none;
}

a {
    color: var(--accent-hi);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

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

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    padding: 0.6rem 1rem;
}

.skip-link:focus {
    left: 0.75rem;
    top: 0.75rem;
}

/* ---------- Layout ---------- */
.wrap {
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.prose {
    max-width: 46rem;
}

section {
    padding: 5.5rem 0;
    position: relative;
}

section + section {
    border-top: 1px solid var(--border);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-hi);
    margin-bottom: 1rem;
}

.eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

h1,
h2,
h3 {
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
}

h2 {
    font-size: clamp(1.875rem, 3.6vw, 2.5rem);
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
}

p {
    margin-bottom: 1.05rem;
    color: var(--text-2);
}

.lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    color: var(--muted);
    max-width: 44rem;
}

section > .wrap > p:last-child,
.prose > p:last-child {
    margin-bottom: 0;
}

strong {
    color: var(--text);
    font-weight: 650;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 3.875rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-right: auto;
}

.brand:hover {
    text-decoration: none;
}

.brand svg {
    width: 1.5rem;
    height: 1.5rem;
}

.brand em {
    font-style: normal;
    color: var(--muted);
    font-weight: 600;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav a {
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
}

.site-nav a:hover {
    color: var(--text);
    text-decoration: none;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border: 1px solid var(--border-2);
    border-radius: 9px;
    background: var(--bg-1);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.icon-btn:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.icon-btn svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

.icon-btn .t-dark,
.icon-btn .t-light {
    display: none;
}

:root[data-theme="dark"] .icon-btn .t-dark,
:root[data-theme="light"] .icon-btn .t-light {
    display: block;
}

:root:not([data-theme]) .icon-btn .t-system {
    display: block;
}

:root[data-theme] .icon-btn .t-system {
    display: none;
}

@media (max-width: 46rem) {
    .site-nav .hide-sm {
        display: none;
    }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.875rem;
    padding: 0 1.375rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, background 0.15s,
        border-color 0.15s;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 8px 24px -8px var(--accent-glow);
}

.btn-primary:hover {
    background: var(--accent-hi);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 12px 30px -8px var(--accent-glow);
}

.btn-ghost {
    background: var(--bg-1);
    border-color: var(--border-2);
    color: var(--text);
}

.btn-ghost:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.btn svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 5.5rem 0 4.5rem;
    border-top: none;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: -14rem 0 auto;
    height: 46rem;
    z-index: -2;
    background:
        radial-gradient(
            48rem 26rem at 50% 8rem,
            var(--accent-glow),
            transparent 70%
        );
    opacity: 0.55;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 40rem;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: radial-gradient(38rem 22rem at 50% 6rem, #000, transparent 75%);
    -webkit-mask-image:
        radial-gradient(38rem 22rem at 50% 6rem, #000, transparent 75%);
    pointer-events: none;
}

.hero-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 1.875rem;
    padding: 0 0.75rem 0 0.5rem;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--bg-1);
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 1.75rem;
    box-shadow: var(--sheen);
}

.pill:hover {
    text-decoration: none;
    border-color: var(--accent);
}

.pill b {
    display: inline-flex;
    align-items: center;
    height: 1.25rem;
    padding: 0 0.4375rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(2.5rem, 7.2vw, 4.5rem);
    letter-spacing: -0.045em;
    font-weight: 800;
    max-width: 18ch;
    background: linear-gradient(
        180deg,
        var(--text) 30%,
        color-mix(in srgb, var(--text) 62%, var(--accent))
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero .lead {
    margin-top: 1.375rem;
    font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
    line-height: 1.55;
    color: var(--muted);
    max-width: 40rem;
}

/* The lede is display type; boxed code chips break its rhythm. */
.hero .lead code,
.cta-band .lead code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text);
    font-size: 0.9em;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.25rem;
}

.hero-note {
    margin-top: 1.125rem;
    font-size: 0.875rem;
    color: var(--muted);
}

/* ---------- Copy command ---------- */
.cmd {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: var(--bg-1);
    box-shadow: var(--sheen);
    overflow: hidden;
    text-align: left;
}

.cmd > code {
    display: block;
    padding: 0.8125rem 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
    color: var(--text-2);
}

.cmd > code .p {
    color: var(--accent-hi);
    user-select: none;
}

.cmd .copy {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.cmd .copy:hover {
    color: var(--text);
    background: var(--bg-2);
}

.cmd .copy svg {
    width: 1rem;
    height: 1rem;
}

.cmd .copy .check {
    display: none;
    color: var(--green);
}

.cmd .copy[data-copied] .check {
    display: block;
}

.cmd .copy[data-copied] .clip {
    display: none;
}

.hero .cmd {
    margin-top: 2.25rem;
}

.hero .term {
    margin-top: 2.5rem;
}

/* The hero pairs the file with the run it produces, so both share the
   terminal's measure and sit directly above it. */
.hero-rc {
    width: 100%;
    min-width: 0;
    max-width: 54rem;
    margin: 3.25rem auto 0.875rem;
    text-align: left;
}

.hero-rc pre {
    font-size: 0.8125rem;
}

/* ---------- Terminal ---------- */
/* The demo box is sized up front for the longest line and the tallest
   frame of the animation, so it never reflows while typing. --term-lines
   must match the transcript length in app.js. */
.term {
    --term-lines: 16;
    /* The shell is dark in both themes, so its foreground colours are fixed
       here rather than taken from the theme. Light mode's accent and green
       are dark by design and were unreadable against it. */
    --sh-text: #d8dee9;
    --sh-dim: #8b96ad;
    --sh-accent: #88c0d0;
    --sh-ok: #a3be8c;
    --sh-warn: #ebcb8b;
    --sh-err: #d68b91;
    --sh-chrome: #9aa5ba;
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    max-width: 54rem;
    background: var(--term-bg);
    border: 1px solid #454d5e;
    border-radius: 12px;
    /* Stacked shadows plus a lit top edge: the box should sit on the page
       rather than be printed onto it. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 14px 28px -10px rgba(0, 0, 0, 0.5),
        0 44px 80px -28px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    text-align: left;
}

.term-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.625rem;
    padding: 0 0.9375rem;
    background: linear-gradient(180deg, #3d4553, var(--term-bar));
    border-bottom: 1px solid #24243200;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.term-bar i {
    width: 0.6875rem;
    height: 0.6875rem;
    border-radius: 50%;
    background: #4c566a;
}

.term-bar i:nth-child(1) { background: #bf616a; }
.term-bar i:nth-child(2) { background: #ebcb8b; }
.term-bar i:nth-child(3) { background: #a3be8c; }

.term-bar span {
    margin-left: auto;
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    color: var(--sh-chrome);
}

.term-body {
    padding: 1.25rem 1.5rem 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--sh-text);
    /* No wrapping: the line count stays constant at every width, which is
       what lets the height below be exact. Long lines scroll, as in a real
       terminal. */
    white-space: pre;
    overflow-x: auto;
    overflow-y: hidden;
    height: calc(var(--term-lines) * 1.75em + 2.75rem);
}

/* Blank transcript lines are empty elements; without this they collapse
   and the spacing between commands disappears. */
.term-body > div {
    min-height: 1.75em;
}

.term-body .p {
    color: var(--sh-accent);
}

/* The dim, italic notice is what gorc prints as each command starts. */
.term-body .notice {
    color: var(--sh-dim);
    font-style: italic;
}

.term-body .ok { color: var(--sh-ok); }
.term-body .warn { color: var(--sh-warn); }
.term-body .err { color: var(--sh-err); }

.term-body .cursor {
    display: inline-block;
    width: 0.5rem;
    height: 1.05em;
    background: var(--sh-accent);
    vertical-align: text-bottom;
    animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
    to { visibility: hidden; }
}

.term-replay {
    position: absolute;
    right: 0.6875rem;
    bottom: 0.6875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.875rem;
    padding: 0 0.6875rem;
    border: 1px solid #4c566a;
    border-radius: 999px;
    background: rgba(41, 47, 58, 0.9);
    color: var(--sh-chrome);
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, color 0.15s, border-color 0.15s;
}

.term:hover .term-replay,
.term-replay:focus-visible {
    opacity: 1;
}

.term-replay:hover {
    color: var(--sh-text);
    border-color: var(--sh-accent);
}

.term-replay svg {
    width: 0.8125rem;
    height: 0.8125rem;
}

.term-caption {
    width: 100%;
    max-width: 54rem;
    margin: 1.125rem auto 0;
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
}

/* ---------- Inline code ---------- */
:not(pre) > code {
    font-size: 0.875em;
    padding: 0.14em 0.38em;
    border-radius: 5px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}

/* Syntax classes */
.c { color: var(--code-com); font-style: italic; }
.s { color: var(--code-str); }
.d { color: var(--code-var); }
.e { color: var(--code-key); }
.v { color: var(--code-verb); font-weight: 700; }

/* ---------- Cards ---------- */
.cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
}

/* Four cards read better as a 2x2 block than as a row of three
   plus an orphan. */
@media (min-width: 48rem) {
    .cards-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-1);
    box-shadow: var(--sheen);
    padding: 1.375rem 1.375rem 1.5rem;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.card:hover {
    border-color: var(--border-2);
    transform: translateY(-2px);
    box-shadow: var(--sheen), 0 10px 30px -12px rgba(0, 0, 0, 0.5);
}

.card h3 {
    margin-bottom: 0.4375rem;
}

.card p {
    font-size: 0.9375rem;
    color: var(--muted);
    margin-bottom: 0;
}

.card p + p {
    margin-top: 0.625rem;
}

.card .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-hi);
    margin-bottom: 0.875rem;
}

.card .ico svg {
    width: 1.125rem;
    height: 1.125rem;
}

.card code {
    white-space: nowrap;
}

/* ---------- Recipes gallery ---------- */
/* One recipe at a time, at a size where the code is the thing being read.
   The viewport is a scroll-snap strip, so swipe and trackpad gestures work
   without any script; the script adds auto-advance, arrows, and dots. */
#recipes {
    isolation: isolate;
}

#recipes::before {
    content: "";
    position: absolute;
    inset: 18% 0 auto;
    height: 30rem;
    z-index: -1;
    background: radial-gradient(
        48rem 20rem at 50% 50%,
        var(--accent-glow),
        transparent 70%
    );
    opacity: 0.26;
    pointer-events: none;
}

.g-viewport {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* The lit card should not be clipped by the scroll box. */
    padding: 1rem 0 1.5rem;
    margin: -1rem 0 -1.5rem;
}

.g-viewport::-webkit-scrollbar {
    display: none;
}

.g-viewport:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
    border-radius: 16px;
}

.g-slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 0 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.g-slide h3 {
    width: 100%;
    max-width: 46rem;
    font-size: clamp(1.125rem, 2.2vw, 1.4375rem);
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.g-slide .rc {
    width: 100%;
    max-width: 46rem;
}

/* The inactive neighbours recede, so the selected file reads as selected. */
.g-slide:not([data-active]) h3,
.g-slide:not([data-active]) .rc {
    opacity: 0.42;
}

.g-slide[data-active] .rc {
    transform: translateY(-2px);
}

.rc {
    padding: 1px;
    border-radius: 14px;
    background: linear-gradient(
        150deg,
        color-mix(in srgb, var(--accent) 42%, var(--border)),
        var(--border) 42%
    );
    box-shadow: var(--shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease,
        background 0.35s ease, opacity 0.35s ease;
    min-width: 0;
}

.g-slide[data-active] .rc,
.rc:not(.g-slide .rc):hover {
    background: linear-gradient(
        150deg,
        var(--accent),
        color-mix(in srgb, var(--accent) 30%, var(--border)) 58%
    );
    box-shadow: var(--shadow), 0 16px 40px -18px var(--accent-glow);
}

.rc-inner {
    border-radius: 13px;
    background: var(--bg-1);
    overflow: hidden;
    min-width: 0;
}

.rc-head {
    display: flex;
    align-items: stretch;
    height: 2.5rem;
    padding-right: 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}

.rc-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--accent-hi);
    background: var(--bg-1);
}

/* Sits over the head's bottom rule, the way an active editor tab does. */
.rc-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
}

.rc-head .copy {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0 0.375rem;
    opacity: 0;
    transition: opacity 0.18s, color 0.15s;
}

.rc:hover .rc-head .copy,
.rc-head .copy:focus-visible,
.rc-head .copy[data-copied] {
    opacity: 1;
}

.rc-head .copy:hover { color: var(--text); }
.rc-head .copy svg { width: 0.9375rem; height: 0.9375rem; }
.rc-head .copy .check { display: none; color: var(--green); }
.rc-head .copy[data-copied] .check { display: block; }
.rc-head .copy[data-copied] .clip { display: none; }

.rc pre {
    padding: 1.375rem 1.5rem 1.5rem;
    overflow-x: auto;
    font-size: 0.9375rem;
    line-height: 1.9;
    tab-size: 4;
    color: var(--text-2);
}

/* ---------- Gallery controls ---------- */
.g-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.g-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    flex: none;
    border: 1px solid var(--border-2);
    border-radius: 50%;
    background: var(--bg-1);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.g-arrow:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.g-arrow svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

#g-prev svg {
    transform: rotate(180deg);
}

.g-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.g-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border-2);
    cursor: pointer;
    transition: background 0.25s, width 0.25s;
}

.g-dot:hover {
    background: var(--muted);
}

.g-dot[data-active] {
    width: 1.5rem;
    border-radius: 999px;
    background: var(--accent);
}

@media (max-width: 40rem) {
    .rc pre {
        font-size: 0.8125rem;
        padding: 1.125rem 1.25rem;
    }

    .g-slide h3 {
        min-height: 2.75rem;
    }
}

/* ---------- Extension points ---------- */
.where {
    list-style: none;
    margin: 0;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.where li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem 1.125rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-1);
    box-shadow: var(--sheen);
}

.where .ico {
    display: inline-flex;
    color: var(--muted);
}

.where .ico svg {
    width: 1.25rem;
    height: 1.25rem;
}

.where b {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.where code {
    font-size: 0.75rem;
    white-space: nowrap;
    max-width: 100%;
    overflow-x: auto;
    background: var(--bg-2);
}

/* The last card is the point the row is making. */
.where .here {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: linear-gradient(180deg, var(--accent-soft), transparent 70%),
        var(--bg-1);
}

.where .here .ico {
    color: var(--accent-hi);
}

.where .here .ico svg {
    border-radius: 5px;
}

.where .here code {
    color: var(--accent-hi);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ---------- gofmt pairing ---------- */
/* The file and the run it produces, side by side once there is room. */
.fmt-pair {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 62rem) {
    .fmt-pair {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    }
}

.fmt-pair .code {
    margin-bottom: 0;
    min-width: 0;
}

/* A still, not the animated demo: sized by its own content. */
.term-static .term-body {
    height: auto;
    font-size: 0.8125rem;
}

/* ---------- CTA band ---------- */
.cta-band {
    position: relative;
    text-align: center;
    isolation: isolate;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        40rem 18rem at 50% 60%,
        var(--accent-glow),
        transparent 70%
    );
    opacity: 0.4;
    pointer-events: none;
}

.cta-band h2 {
    margin-bottom: 0.875rem;
}

.cta-band p {
    max-width: 34rem;
    margin: 0 auto 2rem;
}

.cta-band .hero-actions {
    margin-top: 0;
}

/* ---------- Footer ---------- */
footer {
    border-top: 1px solid var(--border);
    padding: 2.5rem 0 3rem;
}

footer .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
}

footer .brand {
    margin-right: 0;
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.foot-links a {
    color: var(--muted);
    font-size: 0.875rem;
}

.foot-links a:hover {
    color: var(--text);
    text-decoration: none;
}

/* ---------- Section header helper ---------- */
.sec-head {
    max-width: 44rem;
    margin-bottom: 2.75rem;
}

/* When body copy follows immediately, the header should not also carry a
   section-sized gap under it. */
.sec-head.tight {
    margin-bottom: 1.5rem;
}

.after-prose {
    margin-top: 2.75rem;
}

.sec-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sec-head p:last-child {
    margin-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 48rem) {
    section {
        padding: 4rem 0;
    }

    .hero {
        padding: 3.5rem 0 3rem;
    }

    body {
        font-size: 1rem;
    }

    .term-body {
        font-size: 0.78125rem;
    }

    .hero-actions .btn {
        flex: 1 1 12rem;
    }
}

@media (max-width: 30rem) {
    .term-body {
        font-size: 0.6875rem;
    }
}

/* ---------- Brand mark ---------- */
.mark {
    border-radius: 6px;
}