/* Design tokens. Dark is the reference theme; light overrides the colors only. */
:root {
    color-scheme: dark;

    --bg: #141518;
    --surface: #1c1e22;
    --surface-2: #25282d;
    --border: #30343a;
    --border-strong: #454a52;
    --text: #ecebe8;
    /* Body text of long content: a step below the headings. */
    --text-body: #c4c7cc;
    --text-muted: #a5aab2;
    --accent: #f29b2c;
    --accent-hover: #ffb14f;
    --accent-text: #f6a740;
    --accent-soft: rgb(242 155 44 / 0.12);
    --on-accent: #1d1406;
    --warning: #f29b2c;
    --free: #5cc98a;
    --free-soft: rgb(92 201 138 / 0.12);
    --danger: #ef6a5f;
    --warning-soft: rgb(242 155 44 / 0.1);
    --code-bg: #0e0f11;
    --code-text: #d8d8d4;
    --shadow: 0 12px 32px rgb(0 0 0 / 0.35);
    --backdrop: rgb(8 9 10 / 0.9);
    --checker-a: #2a313c;
    --checker-b: #1e242d;
    --header-bg: rgb(20 21 24 / 0.85);

    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

    --text-sm: 0.875rem;
    --text-base: 1.0625rem;
    --text-lg: 1.1875rem;
    --h1: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);
    --h2: clamp(1.45rem, 1.2rem + 1vw, 1.75rem);
    --h3: 1.2rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    --container: 72rem;
    --measure: 44rem;
    --header-height: 4.25rem;
    --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
}

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

    --bg: #f7f6f3;
    --surface: #ffffff;
    --surface-2: #efede8;
    --border: #e0ddd6;
    --border-strong: #c9c5bc;
    --text: #1c1d1f;
    --text-body: #3a3d42;
    --text-muted: #585d65;
    /* Blue accent: orange lacks contrast on light backgrounds. */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-text: #1d4ed8;
    --accent-soft: rgb(37 99 235 / 0.1);
    --on-accent: #ffffff;
    --warning: #d97706;
    --free: #1f8a4c;
    --free-soft: rgb(31 138 76 / 0.1);
    --danger: #c62f23;
    --warning-soft: rgb(217 119 6 / 0.1);
    --code-bg: #1b1c1f;
    --code-text: #e2e1dc;
    --shadow: 0 12px 32px rgb(40 30 10 / 0.12);
    --backdrop: rgb(20 20 22 / 0.88);
    --checker-a: #e2e7ed;
    --checker-b: #f6f8fa;
    --header-bg: rgb(247 246 243 / 0.85);
}

/* Self-hosted variable fonts (no third-party requests). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-wght-normal.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: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-ext-wght-normal.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;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-wght-italic.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: 100 800;
    font-display: swap;
    src: url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

/* Reset and element defaults. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.65;
    font-feature-settings: "cv11", "ss01";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

figure {
    margin: 0;
}

/* The hidden attribute wins over the display of components (fields, notices...). */
[hidden] {
    display: none !important;
}

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

h1,
h2,
h3,
h4 {
    margin: 0;
    line-height: 1.2;
    font-weight: 680;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 {
    font-size: var(--h1);
    letter-spacing: -0.025em;
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

p {
    margin: 0;
    text-wrap: pretty;
}

/* Links are told apart by their color; the underline appears on hover. */
a {
    color: var(--accent-text);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.button:hover,
.card--link a:hover,
.site-nav a:hover,
.brand:hover {
    text-decoration: none;
}

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

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

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-7) 0;
}

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

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -10rem;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: var(--space-2);
}

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

/* Section headings: a short thick accent bar over a longer thin accent line.
   Drawn as backgrounds so the ::before/::after of numbered documents stay free. */
.prose h2,
.section__header h2,
.project h2,
.faq-category h2 {
    padding-bottom: var(--space-3);
    background:
        linear-gradient(var(--accent), var(--accent)) left bottom / 3.75rem 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left bottom / min(100%, 22.5rem) 1px no-repeat;
}

/* Page structure: container, sections, grids and page headers. */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-main {
    min-height: 60vh;
    padding-block: var(--space-7) var(--space-8);
}

/* Room for the floating brand of the header at the top of the page. */
@media (min-width: 68rem) {
    .site-main {
        padding-top: calc(var(--space-7) + var(--space-6));
    }
}

.section + .section {
    margin-top: var(--space-8);
}

.section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
}

/* The heading block takes the free width, so the underline of the heading is
   as long as on the other pages. */
.section__header > :first-child {
    flex: 1 1 auto;
}

.section__header a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    text-decoration: none;
}

.section__header p {
    color: var(--text-muted);
    max-width: var(--measure);
}

.page-header {
    margin-bottom: var(--space-7);
}

.page-header__lead {
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    color: var(--text-muted);
}

.page-header__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Terminal-style label above titles, a nod to the original site. */
.eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-text);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.eyebrow::before {
    content: "> ";
}

.eyebrow::after {
    content: "_";
    animation: caret 1.2s steps(1) infinite;
}

@keyframes caret {
    50% {
        opacity: 0;
    }
}

.grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
}

.grid--wide {
    --grid-min: 24rem;
}

.split {
    display: grid;
    gap: var(--space-7);
    align-items: start;
}

@media (min-width: 60rem) {
    .split {
        grid-template-columns: minmax(0, 1fr) 22rem;
    }

    .split--wide-aside {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    }
}

/* Vertical list of blocks, spaced by the gap (not by margins, which the
   blocks may reset). */
.stack {
    display: grid;
    gap: var(--space-4);
}

.stack--loose {
    gap: var(--space-7);
}

/* Sticky site header, main navigation and theme toggle. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--header-height);
}

/* Brand: compact in the sticky bar, larger and floating over the page top
   until the page is scrolled (see modules/header.js). */
.brand {
    --logo-size: 3.25rem;
    --name-size: 1.35rem;
    --tagline-size: 0.9rem;

    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-right: auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--text);
    text-decoration: none;
    transition: padding 0.25s, margin 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

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

.brand__logo {
    width: var(--logo-size);
    height: var(--logo-size);
    transition: width 0.25s, height 0.25s;
}

.brand__name {
    display: block;
    white-space: nowrap;
    font-weight: 700;
    font-size: var(--name-size);
    line-height: 1.15;
    letter-spacing: -0.01em;
    transition: font-size 0.25s;
}

.brand__tagline {
    display: block;
    white-space: nowrap;
    margin-top: 0.1rem;
    font-size: var(--tagline-size);
    color: var(--text-muted);
    transition: font-size 0.25s;
}

@media (min-width: 68rem) {
    .site-header:not(.is-scrolled) .brand {
        --logo-size: 4.5rem;
        --name-size: 1.85rem;
        --tagline-size: 1.05rem;

        align-self: flex-start;
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
        background: var(--surface);
        border-color: var(--border);
        box-shadow: var(--shadow);
    }
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--text-base);
    text-decoration: none;
    cursor: pointer;
}

.site-nav__link:hover,
.site-nav__link[aria-expanded="true"] {
    color: var(--text);
    background: var(--surface-2);
}

.site-nav__link[aria-current="page"],
.site-nav__link.is-active {
    color: var(--accent-text);
}

.site-nav__item--has-menu {
    position: relative;
}

.submenu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 16rem;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.submenu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.submenu a:hover,
.submenu a[aria-current="page"] {
    background: var(--surface-2);
    color: var(--accent-text);
}

.submenu__all {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--border);
}

.chevron {
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 0.15s;
}

[aria-expanded="true"] > .chevron {
    transform: rotate(180deg);
}

.icon-button {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--text);
    cursor: pointer;
}

.icon-button:hover {
    background: var(--surface-2);
    color: var(--accent-text);
}

.icon-button svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* The toggle shows the icon of the theme it switches to. */
.theme-toggle .icon-sun,
:root[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}

.theme-toggle .icon-moon,
:root[data-theme="light"] .theme-toggle .icon-sun {
    display: none;
}

.site-nav__item--mobile {
    display: none;
}

.menu-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    height: 2.75rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.menu-toggle .icon {
    width: 1.3rem;
    height: 1.3rem;
}

.menu-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent-text);
}

@media (max-width: 56rem) {
    .menu-toggle {
        display: inline-flex;
    }

    .search-link {
        display: none;
    }

    .site-nav__item--mobile {
        display: block;
    }

    .site-nav {
        position: fixed;
        /* The header is the containing block (backdrop-filter): size from its bottom edge. */
        inset: var(--header-height) 0 auto 0;
        height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        padding: var(--space-4) var(--gutter) var(--space-6);
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
    }

    .site-nav:not(.is-open) {
        display: none;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
    }

    .site-nav__link {
        width: 100%;
        justify-content: space-between;
        padding: var(--space-4) var(--space-3);
        font-size: 1.15rem;
    }

    /* In the mobile menu the submenu is a framed block under its entry. */
    .submenu {
        position: static;
        min-width: 0;
        margin: var(--space-1) 0 var(--space-2) var(--space-4);
        box-shadow: none;
    }

    .brand__tagline {
        display: none;
    }

    .brand__logo {
        width: 2.75rem;
        height: 2.75rem;
    }

    .brand__name {
        font-size: 1.15rem;
        white-space: nowrap;
    }
}

/* Site footer and build information line. */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-6) var(--space-4);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent-text);
}

.build-info {
    padding-block: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}

.build-info a {
    font-family: var(--font-mono);
    color: var(--accent-text);
}

/* Reusable components: buttons, badges, cards, notices, chips. */
.button {
    --button-bg: var(--surface-2);
    --button-text: var(--text);
    --button-border: var(--border-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.875rem;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--button-border);
    border-radius: var(--radius-sm);
    background: var(--button-bg);
    color: var(--button-text);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.button:hover {
    --button-border: var(--accent);
    color: var(--button-text);
}

.button:active {
    transform: translateY(1px);
}

.button svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
}

.button--primary {
    --button-bg: var(--accent);
    --button-text: var(--on-accent);
    --button-border: var(--accent);
}

.button--primary:hover {
    --button-bg: var(--accent-hover);
    --button-border: var(--accent-hover);
}

.button--ghost {
    --button-bg: transparent;
}

.button--small {
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
}

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.6em;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.badge--shareware {
    color: var(--accent-text);
    background: var(--accent-soft);
}

.badge--free {
    color: var(--free);
    background: var(--free-soft);
}

.page-header__title .badge {
    font-size: 0.85rem;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s, transform 0.15s;
}

.card--link:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: 1.15rem;
}

.card__title a {
    color: var(--text);
    text-decoration: none;
}

/* Stretched link: the whole card is clickable. */
.card--link .card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.card__text {
    color: var(--text-muted);
    font-size: 0.97rem;
}

.card__meta {
    margin-top: auto;
    padding-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.card__media {
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-2);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--surface-2);
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

/* Notices (::: note, ::: info): accent of the theme, orange or blue. */
.notice {
    margin-block: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--accent-soft);
}

.notice > :first-child {
    margin-top: 0;
}

.notice--warning {
    border-left-color: var(--warning);
    background: var(--warning-soft);
}

.notice--tip {
    border-left-color: var(--free);
    background: var(--free-soft);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.chips a {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: var(--text-sm);
    text-decoration: none;
}

.chips a:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

.check-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.check-list li + li {
    margin-top: var(--space-2);
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 0.6em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 2px;
    background: var(--accent);
}

.data-table {
    width: auto;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.data-table th,
.data-table td {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.data-table th {
    color: var(--text-muted);
    font-weight: 600;
}

/* Floating button that scrolls back to the top (assets/js/modules/back-to-top.js). */
.back-to-top {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 40;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent-text);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.25);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s, border-color 0.2s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    border-color: var(--accent);
}

.back-to-top .icon {
    width: 1.25rem;
    height: 1.25rem;
    transform: rotate(180deg);
}

/* Long-form content rendered from Markdown. The body text is one step softer
   than the headings and the bold words, which keep the full text color. */
.prose {
    max-width: var(--measure);
    color: var(--text-body);
}

.prose--wide {
    max-width: none;
}

.prose :is(h2, h3, h4, strong, b) {
    color: var(--text);
}

.prose > * + * {
    margin-top: var(--space-4);
}

.prose h2 {
    margin-top: var(--space-7);
}

.prose h3 {
    margin-top: var(--space-6);
}

.prose h3 + * {
    margin-top: var(--space-4);
}

/* More room under the underline of the section headings. */
.prose h2 + * {
    margin-top: var(--space-5);
}

.prose ul,
.prose ol {
    padding-left: 1.4rem;
}

.prose li + li {
    margin-top: var(--space-2);
}

.prose li::marker {
    color: var(--accent-text);
}

.prose blockquote {
    margin-inline: 0;
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
}

.prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.prose th,
.prose td {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.prose th {
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.prose address {
    font-style: normal;
    color: var(--text-muted);
}

.prose figure {
    margin-inline: 0;
}

/* Inline technical terms: file names, parameters, paths, registry keys. */
.prose :not(pre) > code,
.card :not(pre) > code {
    padding: 0.1em 0.4em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

/* Technical terms all take the accent color. */
.prose code.filename,
.prose code.path,
.prose code.param,
.prose code.regkey,
.prose code.regvalue,
.prose code.hostname,
.prose code.tag {
    color: var(--accent-text);
}

/* Key feature lists: bold title followed by a description line. */
.prose .features {
    padding: 0;
    list-style: none;
}

.prose .features li {
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}

.prose .features li + li {
    margin-top: var(--space-3);
}

.prose .features strong {
    color: var(--text);
    font-size: 1.05em;
}

/* Code blocks: titled figures, copy and expand buttons, Prism token colors. */
.code-block {
    position: relative;
    margin-inline: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--code-bg);
    overflow: hidden;
}

.code-block__title {
    padding: var(--space-2) var(--space-4);
    padding-right: 6rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #b9b9b3;
}

.code-block pre,
.prose pre {
    margin: 0;
    padding: var(--space-4);
    overflow-x: auto;
    background: var(--code-bg);
    color: var(--code-text);
    font-size: 0.84rem;
    line-height: 1.55;
    tab-size: 4;
}

.code-block.is-collapsed pre {
    max-height: 20rem;
    overflow: hidden;
    mask-image: linear-gradient(#000 70%, transparent);
}

.code-block__actions {
    position: absolute;
    top: var(--space-1);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
}

.code-block__button {
    padding: 0.2rem 0.6rem;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: var(--radius-sm);
    background: #1d1f23;
    color: #d0d0cb;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.code-block__button:hover {
    border-color: var(--accent);
    color: #fff;
}

.code-block__expand {
    display: block;
    width: 100%;
    padding: var(--space-2);
    border: 0;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    background: #17181b;
    color: #d0d0cb;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.code-block__expand:hover {
    color: var(--accent);
}

/* Prism tokens (dark palette in both themes, code blocks stay dark). */
.token.comment,
.token.prolog {
    color: #7f8a7f;
    font-style: italic;
}

.token.keyword,
.token.boolean,
.token.important {
    color: #f29b2c;
}

.token.string,
.token.char {
    color: #a8d48a;
}

.token.number,
.token.constant {
    color: #d9a3f0;
}

.token.function,
.token.class-name {
    color: #7cc0f5;
}

.token.directive,
.token.macro,
.token.property {
    color: #e6c07b;
}

.token.operator,
.token.punctuation {
    color: #a9aaa5;
}

/* Page-specific layouts: home, product, document, FAQ, gallery, search. */

/* Home hero */
.hero {
    position: relative;
    display: grid;
    gap: var(--space-6);
    align-items: center;
    padding-block: var(--space-4) var(--space-7);
}

.hero__text {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: clamp(2rem, 1.3rem + 2.2vw, 2.6rem);
}

.hero__break {
    display: none;
}

.hero__lead {
    margin-top: var(--space-5);
    max-width: 36rem;
    font-size: var(--text-lg);
    color: var(--text-muted);
}

.hero .button-row {
    margin-top: var(--space-6);
}

.hero__media {
    position: relative;
    width: 100%;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hero__media img {
    width: 100%;
}

/* Photo, desktop: wide on the right, its faded left part runs under the text. */
@media (min-width: 60rem) {
    .hero {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 0;
    }

    .hero__break {
        display: inline;
    }

    /* Two lines on desktop; the second one may run over the faded photo. */
    .hero h1 {
        white-space: nowrap;
    }

    .hero__media--photo {
        width: 125%;
        margin-left: -25%;
        overflow: visible;
    }

    .hero__media--photo::before {
        content: "";
        position: absolute;
        inset: 10% -4% -8% 30%;
        z-index: -1;
        background: radial-gradient(closest-side, var(--accent-soft), transparent);
        filter: blur(28px);
    }

    .hero__media--photo img {
        border-radius: var(--radius-lg);
        -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 50%), linear-gradient(to top, transparent, #000 16%, #000 92%, transparent);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, transparent 8%, #000 50%), linear-gradient(to top, transparent, #000 16%, #000 92%, transparent);
        mask-composite: intersect;
    }
}

/* Photo, mobile: a watermark behind the text. */
@media (max-width: 59.99rem) {
    .hero__media--photo {
        position: absolute;
        inset: 0 calc(-1 * var(--gutter));
        width: auto;
        border-radius: 0;
        opacity: 0.18;
        pointer-events: none;
    }

    .hero__media--photo img {
        height: 100%;
        object-fit: cover;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 45%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 45%, transparent);
    }
}

/* Placeholder when no photo is set: a board of signal icons. */
.hero__media--icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--border);
    background: radial-gradient(circle at 30% 20%, var(--surface-2), var(--surface));
}

.hero__media--icons img {
    aspect-ratio: 1;
    object-fit: contain;
}

/* Home page: first row of a composition sheet. */
.composition-strip {
    display: block;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.composition-strip:hover {
    border-color: var(--accent);
}

.composition-strip img {
    width: 100%;
    aspect-ratio: 3.5;
    object-fit: cover;
    object-position: top;
}

.screenshot.infographic {
    max-width: 52rem;
    margin: 0 auto var(--space-8);
}

/* The infographic opens the list of projects: same separator as between them. */
.infographic + .project {
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
}

/* Images drawn in two versions, one per theme. */
:root[data-theme="light"] .theme-dark,
:root[data-theme="dark"] .theme-light {
    display: none;
}

.portrait {
    width: clamp(9rem, 20vw, 13rem);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 8px var(--accent-soft);
    overflow: hidden;
    background: var(--surface-2);
}

.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.card__media--icons {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5);
}

.card__media--icons img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
}

/* Product page */
.product-hero {
    display: grid;
    gap: var(--space-6);
    align-items: start;
    margin-bottom: var(--space-7);
}

@media (min-width: 60rem) {
    .product-hero {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

.product-hero .page-header {
    margin-bottom: var(--space-5);
}

.product-actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    max-width: 34rem;
}

.product-actions__version {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.product-actions__version strong {
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 600;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.consent input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.15rem 0 0;
    accent-color: var(--accent);
}

.product-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.screenshot {
    margin: 0;
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s, transform 0.15s;
}

/* Images that open full screen react like the cards of the home page. */
.screenshot[data-lightbox]:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.screenshot img {
    border-radius: var(--radius-sm);
    margin-inline: auto;
}

.screenshot figcaption {
    padding-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
}

.aside-card {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
}

.aside-card h2 {
    font-size: 1.05rem;
    padding: 0;
    background: none;
}

.aside-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aside-card li + li {
    margin-top: var(--space-2);
}

/* Legal documents: numbered sections and sticky table of contents. */
.document {
    counter-reset: section;
}

.document h2 {
    counter-increment: section;
    counter-reset: subsection;
}

.document h2::before {
    content: counter(section) ". ";
    color: var(--accent-text);
}

.document h3::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
    color: var(--text-muted);
    font-weight: 600;
}

.document .legal-caps {
    text-transform: uppercase;
    font-size: 0.92em;
}

.toc {
    font-size: var(--text-sm);
}

.toc ol {
    margin: var(--space-3) 0 0;
    padding-left: 1.4rem;
}

.toc li + li {
    margin-top: var(--space-2);
}

.toc a {
    color: var(--text-muted);
    text-decoration: none;
}

.toc a:hover {
    color: var(--accent-text);
}

.last-updated {
    margin-top: var(--space-7);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* FAQ */
.faq-category + .faq-category {
    margin-top: var(--space-7);
}

.faq-category h2 {
    margin-bottom: var(--space-5);
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.faq-item + .faq-item {
    margin-top: var(--space-3);
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    flex: none;
    font-family: var(--font-mono);
    color: var(--accent-text);
}

.faq-item[open] summary::after {
    content: "-";
}

.faq-item[open] summary {
    border-bottom: 1px solid var(--border);
}

.faq-item__answer {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.faq-toolbar {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Icon gallery */
.gallery {
    --grid-min: 7rem;
    gap: var(--space-3);
}

.gallery__item {
    margin: 0;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: zoom-in;
}

.gallery__item:hover {
    border-color: var(--accent);
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Project sections on the railway page */
.project {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 60rem) {
    .project--with-media {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
}

.project + .project {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
}

.project__body > * + * {
    margin-top: var(--space-4);
}

.project__body > h2 + * {
    margin-top: var(--space-5);
}

.project__body p {
    color: var(--text-muted);
}

/* Search (Pagefind UI) */
.search-page {
    --pagefind-ui-scale: 0.9;
    --pagefind-ui-primary: var(--accent-text);
    --pagefind-ui-text: var(--text);
    --pagefind-ui-background: var(--surface);
    --pagefind-ui-border: var(--border-strong);
    --pagefind-ui-tag: var(--surface-2);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 6px;
    --pagefind-ui-font: var(--font-sans);
    max-width: var(--measure);
}

.search-page mark {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 600;
}

.not-found {
    text-align: center;
    padding-block: var(--space-8);
}

.not-found .button-row {
    justify-content: center;
    margin-top: var(--space-6);
}

/* Checkout page: one message at a time, shown by assets/js/modules/checkout.js */
.checkout {
    max-width: var(--measure);
    padding-block: var(--space-8);
}

.checkout .button-row {
    margin-top: var(--space-6);
}

/* About card */
.about-card {
    align-items: center;
    text-align: center;
}

.about-card .portrait {
    width: 9rem;
}

.about-card .button-row {
    justify-content: center;
}

.about-card__qr {
    margin: var(--space-3) 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.about-card__qr img {
    margin-inline: auto;
    padding: var(--space-2);
    background: #fff;
    border-radius: var(--radius-sm);
}

/* Featured product: full-width card with a thumbnail of the interface. */
.card--featured {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-5);
    align-items: center;
}

@media (min-width: 52rem) {
    .card--featured {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

.card--featured .card__body {
    height: auto;
}

.card--featured .card__title {
    font-size: 1.4rem;
}

.card__thumbnail {
    position: relative;
    margin: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}

.card__thumbnail figcaption {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 0.65);
    color: #e8e6e1;
    font-size: 0.72rem;
    font-style: italic;
}

/* Icon catalogue */
.catalog-toolbar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-3));
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.catalog-toolbar input,
.catalog-toolbar select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
}

.catalog-toolbar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 16rem;
}

.catalog-toolbar__search .icon {
    position: absolute;
    left: var(--space-3);
    color: var(--text-muted);
}

.catalog-toolbar__search input {
    width: 100%;
    padding-left: 2.2rem;
}

.catalog-toolbar__count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--space-3);
}

.catalog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 13rem;
}

.catalog-card:hover {
    border-color: var(--accent);
}

/* Checkerboard showing the transparent areas, in the colors of the theme. */
.catalog-card__thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: var(--space-3);
    background-color: var(--checker-b);
    background-image:
        linear-gradient(45deg, var(--checker-a) 25%, transparent 25%),
        linear-gradient(-45deg, var(--checker-a) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--checker-a) 75%),
        linear-gradient(-45deg, transparent 75%, var(--checker-a) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.catalog-card__thumb svg {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.catalog-card figcaption {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.35;
}

.catalog-card__path {
    overflow-wrap: anywhere;
}

.catalog-card__meta {
    color: var(--text-muted);
}

/* The sprite is hidden by size, not by display:none, so gradients still render. */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Narrow screens: the table of contents comes first, before the document. */
@media (max-width: 59.99rem) {
    .split > .toc {
        order: -1;
    }
}

/* Full-screen image viewer built on the native dialog element. */
[data-lightbox] {
    cursor: zoom-in;
}

.lightbox {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: var(--space-7) var(--space-4) var(--space-5);
    border: 0;
    background: transparent;
    color: #f2f1ed;
}

.lightbox::backdrop {
    background: var(--backdrop);
    backdrop-filter: blur(4px);
}

.lightbox[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: var(--space-3);
}

.lightbox__stage {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.lightbox__stage picture {
    display: contents;
}

.lightbox__stage img {
    max-width: min(100%, 1600px);
    max-height: calc(100dvh - 8rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* SVG icons are tiny by nature: give them a visible size and a light tile. */
.lightbox__stage img[src$=".svg"] {
    width: min(70vmin, 36rem);
    padding: var(--space-6);
    background: #f4f3ef;
}

.lightbox__caption {
    max-width: 60rem;
    font-size: var(--text-sm);
    text-align: center;
    color: #cfcdc7;
}

.lightbox__close {
    position: fixed;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 999px;
    background: rgb(20 20 22 / 0.7);
    color: #fff;
    cursor: pointer;
}

.lightbox__close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.lightbox__close svg {
    width: 1.35rem;
    height: 1.35rem;
}

.lightbox__icon {
    width: min(70vmin, 36rem);
    height: min(70vmin, 36rem);
    padding: var(--space-6);
    background: var(--checker-b);
    border-radius: var(--radius-sm);
}

/* Contact form. */
.form {
    display: grid;
    gap: var(--space-5);
    max-width: var(--measure);
    margin-top: var(--space-6);
}

.form__row {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 40rem) {
    .form__row {
        grid-template-columns: 1fr 1fr;
    }
}

.field {
    display: grid;
    gap: var(--space-2);
}

.field label {
    font-weight: 600;
    font-size: 0.95rem;
}

.field__required {
    color: var(--accent-text);
}

.field__hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.field textarea {
    min-height: 10rem;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
    border-color: var(--danger);
}

/* Honeypot field, hidden from people but visible to naive bots. */
.field--trap {
    position: absolute;
    left: -9999px;
}

.form__status {
    min-height: 1.5em;
    font-size: 0.95rem;
}

.form__status.is-error {
    color: var(--danger);
}

.form__status.is-success {
    color: var(--free);
}

/* A notice inside a form is spaced by the grid gap of the form. */
.form .notice {
    margin: 0;
}