@font-face {
  font-family: Chivo;
  src: url("fonts/chivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* TorbScript design tokens. Generated from the same data as brand/tokens.json; docs/design/BRAND.md. */
/* Themes: light by default, dark by prefers-color-scheme, and data-theme="light" or "dark" on <html> wins. */

:root {
  --torb-red-50: #FFF2F2;
  --torb-red-100: #FFE3E2;
  --torb-red-200: #FFCBC8;
  --torb-red-300: #FFA6A3;
  --torb-red-400: #FE7373;
  --torb-red-500: #F33F49;
  --torb-red-600: #D4002D;
  --torb-red-700: #B00921;
  --torb-red-800: #8E1018;
  --torb-red-900: #6F1414;
  --torb-red-950: #430B0A;
  --torb-neutral-0: #FFFDFC;
  --torb-neutral-50: #F9F6F5;
  --torb-neutral-100: #F2EDEC;
  --torb-neutral-200: #E3DEDD;
  --torb-neutral-300: #CFC9C7;
  --torb-neutral-400: #A9A3A1;
  --torb-neutral-500: #857E7C;
  --torb-neutral-600: #68625F;
  --torb-neutral-700: #4F4947;
  --torb-neutral-800: #37312F;
  --torb-neutral-850: #292422;
  --torb-neutral-900: #1F1B19;
  --torb-neutral-950: #14110F;
  --torb-neutral-1000: #0C0908;
  --torb-font-sans: Chivo, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --torb-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --torb-font-mono-features: "zero" 1, "liga" 0, "calt" 0;
  --torb-font-mono-ligatures: none;
  --torb-weight-regular: 400;
  --torb-weight-medium: 500;
  --torb-weight-semibold: 600;
  --torb-weight-bold: 700;
  --torb-weight-extrabold: 800;
  --torb-weight-black: 900;
  --torb-type-display-family: var(--torb-font-sans);
  --torb-type-display-size: 4rem;
  --torb-type-display-line-height: 1.05;
  --torb-type-display-weight: 800;
  --torb-type-display-tracking: -0.02em;
  --torb-type-heading-1-family: var(--torb-font-sans);
  --torb-type-heading-1-size: 2.75rem;
  --torb-type-heading-1-line-height: 1.1;
  --torb-type-heading-1-weight: 800;
  --torb-type-heading-1-tracking: -0.015em;
  --torb-type-heading-2-family: var(--torb-font-sans);
  --torb-type-heading-2-size: 2rem;
  --torb-type-heading-2-line-height: 1.2;
  --torb-type-heading-2-weight: 700;
  --torb-type-heading-2-tracking: -0.01em;
  --torb-type-heading-3-family: var(--torb-font-sans);
  --torb-type-heading-3-size: 1.5rem;
  --torb-type-heading-3-line-height: 1.3;
  --torb-type-heading-3-weight: 700;
  --torb-type-heading-3-tracking: -0.005em;
  --torb-type-heading-4-family: var(--torb-font-sans);
  --torb-type-heading-4-size: 1.25rem;
  --torb-type-heading-4-line-height: 1.35;
  --torb-type-heading-4-weight: 600;
  --torb-type-heading-4-tracking: 0;
  --torb-type-body-family: var(--torb-font-sans);
  --torb-type-body-size: 1.0625rem;
  --torb-type-body-line-height: 1.6;
  --torb-type-body-weight: 400;
  --torb-type-body-tracking: 0;
  --torb-type-ui-family: var(--torb-font-sans);
  --torb-type-ui-size: 0.9375rem;
  --torb-type-ui-line-height: 1.45;
  --torb-type-ui-weight: 500;
  --torb-type-ui-tracking: 0;
  --torb-type-small-family: var(--torb-font-sans);
  --torb-type-small-size: 0.8125rem;
  --torb-type-small-line-height: 1.45;
  --torb-type-small-weight: 400;
  --torb-type-small-tracking: 0.005em;
  --torb-type-code-family: var(--torb-font-mono);
  --torb-type-code-size: 0.9375rem;
  --torb-type-code-line-height: 1.6;
  --torb-type-code-weight: 400;
  --torb-type-code-tracking: 0;
  --torb-type-code-dense-family: var(--torb-font-mono);
  --torb-type-code-dense-size: 0.875rem;
  --torb-type-code-dense-line-height: 1.5;
  --torb-type-code-dense-weight: 400;
  --torb-type-code-dense-tracking: 0;
  --torb-measure: 72ch;
  --torb-radius-none: 0;
  --torb-radius-small: 2px;
  --torb-radius-medium: 4px;
  --torb-border-hairline: 1px;
  --torb-border-accent: 3px;
  --torb-border-focus: 2px;
  --torb-border-focus-offset: 2px;
  --torb-border-top-rule: 3px;
  --torb-duration-instant: 80ms;
  --torb-duration-quick: 140ms;
  --torb-duration-standard: 200ms;
  --torb-duration-exit: 120ms;
  --torb-duration-layout: 260ms;
  --torb-duration-signature: 480ms;
  --torb-easing-exact: cubic-bezier(0.2, 0, 0, 1);
  --torb-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --torb-easing-linear: linear;
  --torb-gradient-strata: linear-gradient(180deg, #FE7373 0 20%, #F33F49 20% 40%, #D4002D 40% 60%, #B00921 60% 80%, #8E1018 80% 100%);
  --torb-gradient-ink: linear-gradient(180deg, #1F1B19 0%, #0C0908 100%);
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --torb-background: #FFFDFC;
  --torb-surface: #F9F6F5;
  --torb-surface-raised: #FFFFFF;
  --torb-surface-hover: #F2EDEC;
  --torb-surface-active: #E3DEDD;
  --torb-code: #F9F6F5;
  --torb-border: #E3DEDD;
  --torb-border-strong: #CFC9C7;
  --torb-border-control: #857E7C;
  --torb-text: #14110F;
  --torb-text-muted: #68625F;
  --torb-text-subtle: #78716F;
  --torb-brand: #D4002D;
  --torb-link: #14110F;
  --torb-link-underline: #D4002D;
  --torb-link-underline-hover: #B00921;
  --torb-focus: #14110F;
  --torb-selection: #FFE3E2;
  --torb-error-text: #B00921;
  --torb-error-surface: #FFF2F2;
  --torb-error-border: #FFA6A3;
  --torb-error-accent: #B00921;
  --torb-warning-text: #7D5000;
  --torb-warning-surface: #FDF1E4;
  --torb-warning-border: #DDB686;
  --torb-warning-accent: #9F6700;
  --torb-success-text: #006E30;
  --torb-success-surface: #EAF8EC;
  --torb-success-border: #9ACCA3;
  --torb-success-accent: #1D8B44;
  --torb-info-text: #125CA1;
  --torb-info-surface: #EBF5FF;
  --torb-info-border: #99C2EF;
  --torb-info-accent: #2876C5;
  --torb-button-cta-background: #D4002D;
  --torb-button-cta-background-hover: #B00921;
  --torb-button-cta-background-active: #8E1018;
  --torb-button-cta-text: #FFFDFC;
  --torb-button-cta-border: #D4002D;
  --torb-button-primary-background: #14110F;
  --torb-button-primary-background-hover: #37312F;
  --torb-button-primary-background-active: #4F4947;
  --torb-button-primary-text: #FFFDFC;
  --torb-button-primary-border: #14110F;
  --torb-button-secondary-background: transparent;
  --torb-button-secondary-background-hover: #F2EDEC;
  --torb-button-secondary-background-active: #E3DEDD;
  --torb-button-secondary-text: #14110F;
  --torb-button-secondary-border: #857E7C;
  --torb-button-quiet-background: transparent;
  --torb-button-quiet-background-hover: #F2EDEC;
  --torb-button-quiet-background-active: #E3DEDD;
  --torb-button-quiet-text: #14110F;
  --torb-button-quiet-border: transparent;
  --torb-button-disabled-background: #F2EDEC;
  --torb-button-disabled-background-hover: #F2EDEC;
  --torb-button-disabled-background-active: #F2EDEC;
  --torb-button-disabled-text: #A9A3A1;
  --torb-button-disabled-border: #E3DEDD;
  --torb-syntax-keyword: #B00921;
  --torb-syntax-type: #006C6C;
  --torb-syntax-function: #2855AD;
  --torb-syntax-string: #207029;
  --torb-syntax-number: #925000;
  --torb-syntax-case: #7C3990;
  --torb-syntax-parameter: #4F4947;
  --torb-syntax-variable: #14110F;
  --torb-syntax-comment: #756E6C;
  --torb-syntax-punctuation: #68625F;
  --torb-terminal-background: #FFFDFC;
  --torb-terminal-foreground: #14110F;
  --torb-terminal-cursor: #14110F;
  --torb-terminal-selection: #E3DEDD;
  --torb-terminal-black: #14110F;
  --torb-terminal-red: #B00921;
  --torb-terminal-green: #006E30;
  --torb-terminal-yellow: #7D5000;
  --torb-terminal-blue: #125CA1;
  --torb-terminal-magenta: #7C3990;
  --torb-terminal-cyan: #006770;
  --torb-terminal-white: #857E7C;
  --torb-terminal-bright-black: #68625F;
  --torb-terminal-bright-red: #8E1018;
  --torb-terminal-bright-green: #278445;
  --torb-terminal-bright-yellow: #A16800;
  --torb-terminal-bright-blue: #2176C9;
  --torb-terminal-bright-magenta: #A056B6;
  --torb-terminal-bright-cyan: #00808B;
  --torb-terminal-bright-white: #A9A3A1;
  --torb-gradient-mark: linear-gradient(180deg, #F33F49 0%, #8E1018 100%);
  --torb-shadow-raised: 0 1px 2px rgb(20 17 15 / 0.06), 0 1px 1px rgb(20 17 15 / 0.04);
  --torb-shadow-overlay: 0 4px 12px rgb(20 17 15 / 0.10), 0 1px 3px rgb(20 17 15 / 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --torb-background: #14110F;
    --torb-surface: #1F1B19;
    --torb-surface-raised: #292422;
    --torb-surface-hover: #292422;
    --torb-surface-active: #37312F;
    --torb-code: #1F1B19;
    --torb-border: #37312F;
    --torb-border-strong: #4F4947;
    --torb-border-control: #857E7C;
    --torb-text: #F9F6F5;
    --torb-text-muted: #A9A3A1;
    --torb-text-subtle: #857E7C;
    --torb-brand: #D4002D;
    --torb-link: #F9F6F5;
    --torb-link-underline: #F33F49;
    --torb-link-underline-hover: #FFA6A3;
    --torb-focus: #F9F6F5;
    --torb-selection: #5E2120;
    --torb-error-text: #FFA6A3;
    --torb-error-surface: #3A1413;
    --torb-error-border: #8E1018;
    --torb-error-accent: #FE7373;
    --torb-warning-text: #EEB976;
    --torb-warning-surface: #2C1F0E;
    --torb-warning-border: #704D1E;
    --torb-warning-accent: #D6963B;
    --torb-success-text: #92D7A0;
    --torb-success-surface: #152619;
    --torb-success-border: #32613E;
    --torb-success-accent: #62BB78;
    --torb-info-text: #98C8FF;
    --torb-info-surface: #152332;
    --torb-info-border: #33577F;
    --torb-info-accent: #64A9F3;
    --torb-button-cta-background: #D4002D;
    --torb-button-cta-background-hover: #B00921;
    --torb-button-cta-background-active: #8E1018;
    --torb-button-cta-text: #FFFDFC;
    --torb-button-cta-border: #D4002D;
    --torb-button-primary-background: #F9F6F5;
    --torb-button-primary-background-hover: #E3DEDD;
    --torb-button-primary-background-active: #CFC9C7;
    --torb-button-primary-text: #14110F;
    --torb-button-primary-border: #F9F6F5;
    --torb-button-secondary-background: transparent;
    --torb-button-secondary-background-hover: #292422;
    --torb-button-secondary-background-active: #37312F;
    --torb-button-secondary-text: #F9F6F5;
    --torb-button-secondary-border: #857E7C;
    --torb-button-quiet-background: transparent;
    --torb-button-quiet-background-hover: #292422;
    --torb-button-quiet-background-active: #37312F;
    --torb-button-quiet-text: #F9F6F5;
    --torb-button-quiet-border: transparent;
    --torb-button-disabled-background: #1F1B19;
    --torb-button-disabled-background-hover: #1F1B19;
    --torb-button-disabled-background-active: #1F1B19;
    --torb-button-disabled-text: #68625F;
    --torb-button-disabled-border: #37312F;
    --torb-syntax-keyword: #F97676;
    --torb-syntax-type: #67D2CC;
    --torb-syntax-function: #8FBCFF;
    --torb-syntax-string: #8CD384;
    --torb-syntax-number: #F6B669;
    --torb-syntax-case: #D8A4E9;
    --torb-syntax-parameter: #CFC9C7;
    --torb-syntax-variable: #F2EDEC;
    --torb-syntax-comment: #A9A3A1;
    --torb-syntax-punctuation: #A9A3A1;
    --torb-terminal-background: #14110F;
    --torb-terminal-foreground: #F9F6F5;
    --torb-terminal-cursor: #F9F6F5;
    --torb-terminal-selection: #4F4947;
    --torb-terminal-black: #292422;
    --torb-terminal-red: #FE7373;
    --torb-terminal-green: #4FB169;
    --torb-terminal-yellow: #D29135;
    --torb-terminal-blue: #5DA2EC;
    --torb-terminal-magenta: #C786DC;
    --torb-terminal-cyan: #3CADB3;
    --torb-terminal-white: #CFC9C7;
    --torb-terminal-bright-black: #857E7C;
    --torb-terminal-bright-red: #FFA6A3;
    --torb-terminal-bright-green: #92D7A0;
    --torb-terminal-bright-yellow: #EEB976;
    --torb-terminal-bright-blue: #98C8FF;
    --torb-terminal-bright-magenta: #D8A4E9;
    --torb-terminal-bright-cyan: #78D6DB;
    --torb-terminal-bright-white: #F9F6F5;
    --torb-gradient-mark: linear-gradient(180deg, #F33F49 0%, #B00921 100%);
    --torb-shadow-raised: 0 0 0 1px #37312F;
    --torb-shadow-overlay: 0 0 0 1px #4F4947, 0 6px 16px rgb(0 0 0 / 0.40);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --torb-background: #14110F;
  --torb-surface: #1F1B19;
  --torb-surface-raised: #292422;
  --torb-surface-hover: #292422;
  --torb-surface-active: #37312F;
  --torb-code: #1F1B19;
  --torb-border: #37312F;
  --torb-border-strong: #4F4947;
  --torb-border-control: #857E7C;
  --torb-text: #F9F6F5;
  --torb-text-muted: #A9A3A1;
  --torb-text-subtle: #857E7C;
  --torb-brand: #D4002D;
  --torb-link: #F9F6F5;
  --torb-link-underline: #F33F49;
  --torb-link-underline-hover: #FFA6A3;
  --torb-focus: #F9F6F5;
  --torb-selection: #5E2120;
  --torb-error-text: #FFA6A3;
  --torb-error-surface: #3A1413;
  --torb-error-border: #8E1018;
  --torb-error-accent: #FE7373;
  --torb-warning-text: #EEB976;
  --torb-warning-surface: #2C1F0E;
  --torb-warning-border: #704D1E;
  --torb-warning-accent: #D6963B;
  --torb-success-text: #92D7A0;
  --torb-success-surface: #152619;
  --torb-success-border: #32613E;
  --torb-success-accent: #62BB78;
  --torb-info-text: #98C8FF;
  --torb-info-surface: #152332;
  --torb-info-border: #33577F;
  --torb-info-accent: #64A9F3;
  --torb-button-cta-background: #D4002D;
  --torb-button-cta-background-hover: #B00921;
  --torb-button-cta-background-active: #8E1018;
  --torb-button-cta-text: #FFFDFC;
  --torb-button-cta-border: #D4002D;
  --torb-button-primary-background: #F9F6F5;
  --torb-button-primary-background-hover: #E3DEDD;
  --torb-button-primary-background-active: #CFC9C7;
  --torb-button-primary-text: #14110F;
  --torb-button-primary-border: #F9F6F5;
  --torb-button-secondary-background: transparent;
  --torb-button-secondary-background-hover: #292422;
  --torb-button-secondary-background-active: #37312F;
  --torb-button-secondary-text: #F9F6F5;
  --torb-button-secondary-border: #857E7C;
  --torb-button-quiet-background: transparent;
  --torb-button-quiet-background-hover: #292422;
  --torb-button-quiet-background-active: #37312F;
  --torb-button-quiet-text: #F9F6F5;
  --torb-button-quiet-border: transparent;
  --torb-button-disabled-background: #1F1B19;
  --torb-button-disabled-background-hover: #1F1B19;
  --torb-button-disabled-background-active: #1F1B19;
  --torb-button-disabled-text: #68625F;
  --torb-button-disabled-border: #37312F;
  --torb-syntax-keyword: #F97676;
  --torb-syntax-type: #67D2CC;
  --torb-syntax-function: #8FBCFF;
  --torb-syntax-string: #8CD384;
  --torb-syntax-number: #F6B669;
  --torb-syntax-case: #D8A4E9;
  --torb-syntax-parameter: #CFC9C7;
  --torb-syntax-variable: #F2EDEC;
  --torb-syntax-comment: #A9A3A1;
  --torb-syntax-punctuation: #A9A3A1;
  --torb-terminal-background: #14110F;
  --torb-terminal-foreground: #F9F6F5;
  --torb-terminal-cursor: #F9F6F5;
  --torb-terminal-selection: #4F4947;
  --torb-terminal-black: #292422;
  --torb-terminal-red: #FE7373;
  --torb-terminal-green: #4FB169;
  --torb-terminal-yellow: #D29135;
  --torb-terminal-blue: #5DA2EC;
  --torb-terminal-magenta: #C786DC;
  --torb-terminal-cyan: #3CADB3;
  --torb-terminal-white: #CFC9C7;
  --torb-terminal-bright-black: #857E7C;
  --torb-terminal-bright-red: #FFA6A3;
  --torb-terminal-bright-green: #92D7A0;
  --torb-terminal-bright-yellow: #EEB976;
  --torb-terminal-bright-blue: #98C8FF;
  --torb-terminal-bright-magenta: #D8A4E9;
  --torb-terminal-bright-cyan: #78D6DB;
  --torb-terminal-bright-white: #F9F6F5;
  --torb-gradient-mark: linear-gradient(180deg, #F33F49 0%, #B00921 100%);
  --torb-shadow-raised: 0 0 0 1px #37312F;
  --torb-shadow-overlay: 0 0 0 1px #4F4947, 0 6px 16px rgb(0 0 0 / 0.40);
}

/* Reduced motion: movement stops, a fade keeps at most the instant duration. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --torb-duration-instant: 80ms;
    --torb-duration-quick: 0ms;
    --torb-duration-standard: 0ms;
    --torb-duration-exit: 0ms;
    --torb-duration-layout: 0ms;
    --torb-duration-signature: 0ms;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}

/* Smooth only for a jump inside the page: a link that was clicked has the focus, a page that loads has none. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--torb-background);
  color: var(--torb-text);
  font-family: var(--torb-type-body-family);
  font-size: var(--torb-type-body-size);
  font-weight: var(--torb-type-body-weight);
  line-height: var(--torb-type-body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--torb-selection);
  color: var(--torb-text);
}

:focus-visible {
  outline: var(--torb-border-focus) solid var(--torb-focus);
  outline-offset: var(--torb-border-focus-offset);
}

[hidden] {
  display: none !important;
}

a {
  color: var(--torb-link);
  text-decoration-line: underline;
  text-decoration-color: var(--torb-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition:
    text-decoration-color var(--torb-duration-quick) var(--torb-easing-exact),
    text-decoration-thickness var(--torb-duration-quick) var(--torb-easing-exact);
}

a:hover {
  text-decoration-color: var(--torb-link-underline-hover);
  text-decoration-thickness: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--torb-font-sans);
  text-wrap: balance;
}

h1 {
  font-size: var(--torb-type-heading-1-size);
  font-weight: var(--torb-type-heading-1-weight);
  line-height: var(--torb-type-heading-1-line-height);
  letter-spacing: var(--torb-type-heading-1-tracking);
}

h2 {
  font-size: var(--torb-type-heading-2-size);
  font-weight: var(--torb-type-heading-2-weight);
  line-height: var(--torb-type-heading-2-line-height);
  letter-spacing: var(--torb-type-heading-2-tracking);
}

h3 {
  font-size: var(--torb-type-heading-3-size);
  font-weight: var(--torb-type-heading-3-weight);
  line-height: var(--torb-type-heading-3-line-height);
  letter-spacing: var(--torb-type-heading-3-tracking);
}

h4 {
  font-size: var(--torb-type-heading-4-size);
  font-weight: var(--torb-type-heading-4-weight);
  line-height: var(--torb-type-heading-4-line-height);
}

code,
kbd,
pre,
samp {
  font-family: var(--torb-font-mono);
  font-variant-ligatures: var(--torb-font-mono-ligatures);
  font-feature-settings: var(--torb-font-mono-features);
}

:not(pre) > code {
  padding: 0.08em 0.32em;
  font-size: 0.875em;
  background: var(--torb-surface);
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-small);
  overflow-wrap: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a > code {
  text-decoration: inherit;
}

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.35em;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--torb-text-muted);
  border: 1px solid var(--torb-border-strong);
  border-radius: var(--torb-radius-small);
}

hr {
  height: 0;
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--torb-border);
}

/* The shell: the top rule is the header's top edge, so it stays at the top of the window. */

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 40;
  padding: 8px 12px;
  background: var(--torb-surface-raised);
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-small);
}

.skip-link:focus {
  top: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--torb-background);
  border-top: var(--torb-border-top-rule) solid var(--torb-brand);
  border-bottom: 1px solid var(--torb-border);
  transition: box-shadow var(--torb-duration-quick) var(--torb-easing-exact);
}

.site-header.scrolled {
  box-shadow: var(--torb-shadow-raised);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 60px;
  padding: 0 24px;
}

.brand-link {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--torb-text);
}

.brand-link svg {
  display: block;
  width: auto;
  height: 26px;
}

.brand-label {
  margin-left: 12px;
  padding-left: 12px;
  font-family: var(--torb-font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--torb-text-muted);
  border-left: 1px solid var(--torb-border);
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a {
  padding: 8px 10px;
  font-size: var(--torb-type-ui-size);
  font-weight: var(--torb-type-ui-weight);
  line-height: 1;
  color: var(--torb-text-muted);
  text-decoration: none;
  border-radius: var(--torb-radius-small);
  transition:
    color var(--torb-duration-quick) var(--torb-easing-exact),
    background-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.site-nav a:hover {
  color: var(--torb-text);
  background: var(--torb-surface-hover);
}

.site-nav a[aria-current] {
  color: var(--torb-text);
  box-shadow: inset 0 -2px 0 var(--torb-text);
  border-radius: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Buttons (BRAND.md section 8): 36 px, 2 px corners, the background changes and nothing moves. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  font-family: var(--torb-font-sans);
  font-size: var(--torb-type-ui-size);
  font-weight: var(--torb-type-ui-weight);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--torb-radius-small);
  transition:
    background-color var(--torb-duration-quick) var(--torb-easing-exact),
    border-color var(--torb-duration-quick) var(--torb-easing-exact),
    color var(--torb-duration-quick) var(--torb-easing-exact);
}

.button:active {
  transition-duration: var(--torb-duration-instant);
}

.button svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.button-cta {
  color: var(--torb-button-cta-text);
  background: var(--torb-button-cta-background);
  border-color: var(--torb-button-cta-border);
}

.button-cta:hover {
  background: var(--torb-button-cta-background-hover);
  border-color: var(--torb-button-cta-background-hover);
}

.button-cta:active {
  background: var(--torb-button-cta-background-active);
  border-color: var(--torb-button-cta-background-active);
}

.button-primary {
  color: var(--torb-button-primary-text);
  background: var(--torb-button-primary-background);
  border-color: var(--torb-button-primary-border);
}

.button-primary:hover {
  background: var(--torb-button-primary-background-hover);
  border-color: var(--torb-button-primary-background-hover);
}

.button-primary:active {
  background: var(--torb-button-primary-background-active);
  border-color: var(--torb-button-primary-background-active);
}

.button-secondary {
  color: var(--torb-button-secondary-text);
  background: var(--torb-button-secondary-background);
  border-color: var(--torb-button-secondary-border);
}

.button-secondary:hover {
  background: var(--torb-button-secondary-background-hover);
}

.button-secondary:active {
  background: var(--torb-button-secondary-background-active);
}

.button-quiet {
  color: var(--torb-button-quiet-text);
  background: var(--torb-button-quiet-background);
  border-color: var(--torb-button-quiet-border);
}

.button-quiet:hover {
  background: var(--torb-button-quiet-background-hover);
}

.button-quiet:active {
  background: var(--torb-button-quiet-background-active);
}

.button-icon {
  width: 36px;
  padding: 0;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: none;
  }
}

/* Code: the code surface, a hairline, 2 px corners, and the syntax colours of BRAND.md section 9. */

.code-block {
  position: relative;
  margin: 0 0 24px;
}

pre.code {
  margin: 0;
  padding: 14px 18px;
  overflow-x: auto;
  font-size: var(--torb-type-code-dense-size);
  line-height: var(--torb-type-code-dense-line-height);
  color: var(--torb-syntax-variable);
  background: var(--torb-code);
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-small);
  tab-size: 2;
}

pre.code code {
  font-size: inherit;
}

pre.drawing {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-feature-settings: normal;
  line-height: 1.35;
}

.copy-button {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-family: var(--torb-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--torb-text-muted);
  background: var(--torb-surface-raised);
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-small);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--torb-duration-quick) var(--torb-easing-exact),
    color var(--torb-duration-quick) var(--torb-easing-exact),
    border-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.copy-button svg {
  width: 14px;
  height: 14px;
}

.code-block:hover .copy-button,
.copy-button:focus-visible,
.copy-button.copied {
  opacity: 1;
}

.copy-button:hover {
  color: var(--torb-text);
  border-color: var(--torb-border-strong);
}

@media (hover: none) {
  .copy-button {
    opacity: 1;
  }
}

.code-block-error pre.code {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-left: var(--torb-border-accent) solid var(--torb-error-accent);
}

.code-block-error .copy-button {
  top: 43px;
}

.code-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: var(--torb-type-small-size);
  font-weight: 500;
  color: var(--torb-error-text);
  background: var(--torb-error-surface);
  border: 1px solid var(--torb-error-border);
  border-bottom: 0;
  border-left: var(--torb-border-accent) solid var(--torb-error-accent);
  border-radius: var(--torb-radius-small) var(--torb-radius-small) 0 0;
}

.state-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

.t-keyword {
  color: var(--torb-syntax-keyword);
}

.t-type,
.t-interface,
.t-typeParameter,
.t-namespace {
  color: var(--torb-syntax-type);
}

.t-function,
.t-method {
  color: var(--torb-syntax-function);
}

.t-string {
  color: var(--torb-syntax-string);
}

.t-number {
  color: var(--torb-syntax-number);
}

.t-enumMember {
  color: var(--torb-syntax-case);
}

.t-parameter {
  color: var(--torb-syntax-parameter);
}

.t-variable,
.t-property {
  color: var(--torb-syntax-variable);
}

.t-comment {
  color: var(--torb-syntax-comment);
}

.t-punctuation {
  color: var(--torb-syntax-punctuation);
}

.t-mutable {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.language-console .prompt {
  color: var(--torb-text-subtle);
  user-select: none;
}

.language-console .command {
  color: var(--torb-text);
  font-weight: 500;
}

.output-error {
  color: var(--torb-terminal-red);
  font-weight: 700;
}

.output-warning {
  color: var(--torb-terminal-yellow);
  font-weight: 700;
}

.diff-added {
  color: var(--torb-terminal-green);
}

.diff-removed {
  color: var(--torb-terminal-red);
}

.diff-hunk {
  color: var(--torb-terminal-cyan);
}

/* Tables: square, ruled, and scrolling inside their own box instead of the page. */

.table-wrap {
  margin: 0 0 24px;
  overflow-x: auto;
  border: 1px solid var(--torb-border);
}

table {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.5;
  border-collapse: collapse;
}

th,
td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--torb-border);
}

th {
  font-weight: 600;
  background: var(--torb-surface);
  border-bottom-color: var(--torb-border-strong);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

/* The footer stands at the foot of the window on a short page. */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main,
body > .docs {
  flex: 1 0 auto;
}

/* The documentation: the navigation on the surface, the page at a measure, its contents beside it. */

.navigation-toggle {
  display: none;
}

.menu-button {
  display: none;
}

.docs {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr) 240px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 16px 48px;
  background: var(--torb-surface);
  border-right: 1px solid var(--torb-border);
}

.version {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0 10px;
  font-size: var(--torb-type-small-size);
  color: var(--torb-text-muted);
}

.version-label {
  font-family: var(--torb-font-mono);
  font-weight: 500;
  color: var(--torb-text);
}

.version select {
  height: 30px;
  padding: 0 8px;
  font-family: var(--torb-font-mono);
  font-size: var(--torb-type-small-size);
  color: var(--torb-text);
  background: var(--torb-background);
  border: 1px solid var(--torb-border-control);
  border-radius: var(--torb-radius-small);
}

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

.navigation li > ul {
  margin: 2px 0 8px 12px;
  border-left: 1px solid var(--torb-border);
}

.navigation a {
  display: block;
  padding: 5px 10px;
  font-size: 0.90625rem;
  line-height: 1.35;
  color: var(--torb-text-muted);
  text-decoration: none;
  border-radius: 0 var(--torb-radius-small) var(--torb-radius-small) 0;
  transition:
    color var(--torb-duration-quick) var(--torb-easing-exact),
    background-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.navigation li > ul a {
  margin-left: -1px;
}

.navigation a:hover {
  color: var(--torb-text);
  background: var(--torb-surface-hover);
}

.navigation > ul > li > a {
  font-weight: 600;
  color: var(--torb-text);
}

.navigation a[aria-current="page"] {
  font-weight: 600;
  color: var(--torb-text);
  background: var(--torb-surface-hover);
  box-shadow: inset 2px 0 0 var(--torb-text);
}

.navigation-heading {
  margin: 28px 0 6px;
  padding: 0 10px;
  font-size: var(--torb-type-small-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--torb-text-subtle);
}

.content {
  min-width: 0;
  padding: 44px 56px 96px;
}

.article {
  max-width: 760px;
  margin: 0 auto;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  font-size: var(--torb-type-small-size);
  color: var(--torb-text-muted);
  list-style: none;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--torb-border-strong);
}

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

.breadcrumbs a:hover {
  color: var(--torb-text);
  text-decoration: underline;
  text-decoration-color: var(--torb-link-underline);
}

.page-title {
  margin: 0 0 14px;
}

.page-summary {
  max-width: 68ch;
  margin: 0 0 36px;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--torb-text-muted);
}

.prose {
  max-width: 100%;
}

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

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 18px;
}

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

.prose li {
  margin: 5px 0;
}

.prose li > p {
  margin: 0 0 8px;
}

.prose li > ul,
.prose li > ol {
  margin: 6px 0 8px;
}

.prose h2 {
  margin: 56px 0 18px;
  padding-top: 28px;
  border-top: 1px solid var(--torb-border);
}

.prose h3 {
  margin: 36px 0 12px;
}

.prose h4 {
  margin: 28px 0 10px;
}

.prose h1 {
  margin: 0 0 24px;
}

.heading-anchor {
  margin-left: 10px;
  font-weight: 400;
  color: var(--torb-text-subtle);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--torb-duration-quick) var(--torb-easing-exact);
}

h2:hover > .heading-anchor,
h3:hover > .heading-anchor,
h4:hover > .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}

.page-reference {
  padding: 12px 16px;
  font-size: 0.9375rem;
  color: var(--torb-text-muted);
  background: var(--torb-surface);
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-medium);
}

.prose blockquote {
  margin: 0 0 24px;
  padding: 2px 0 2px 18px;
  color: var(--torb-text-muted);
  border-left: var(--torb-border-accent) solid var(--torb-border-strong);
}

.prose blockquote > :last-child {
  margin-bottom: 0;
}

.callout {
  display: flex;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 18px 14px 15px;
  border: 1px solid;
  border-left-width: var(--torb-border-accent);
  border-radius: 0 var(--torb-radius-small) var(--torb-radius-small) 0;
}

.callout .state-icon {
  margin-top: 0.3em;
}

.callout-body > :last-child {
  margin-bottom: 0;
}

.callout-info {
  background: var(--torb-info-surface);
  border-color: var(--torb-info-border);
  border-left-color: var(--torb-info-accent);
}

.callout-info .state-icon,
.callout-info strong:first-child {
  color: var(--torb-info-text);
}

.callout-warning {
  background: var(--torb-warning-surface);
  border-color: var(--torb-warning-border);
  border-left-color: var(--torb-warning-accent);
}

.callout-warning .state-icon,
.callout-warning strong:first-child {
  color: var(--torb-warning-text);
}

.toc {
  position: sticky;
  top: 64px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 48px 24px 48px 0;
  font-size: var(--torb-type-small-size);
  line-height: 1.4;
}

.toc-title {
  margin: 0 0 10px;
  font-size: var(--torb-type-small-size);
  font-weight: 600;
  color: var(--torb-text);
}

.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--torb-border);
}

.toc a {
  display: block;
  margin-left: -1px;
  padding: 4px 12px;
  color: var(--torb-text-muted);
  text-decoration: none;
  transition: color var(--torb-duration-quick) var(--torb-easing-exact);
}

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

.toc code {
  padding: 0;
  background: none;
  border: 0;
}

.toc a.active {
  color: var(--torb-text);
  box-shadow: inset 2px 0 0 var(--torb-text);
}

.toc .level-3 a {
  padding-left: 24px;
}

.page-footer {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--torb-border);
}

.edit-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--torb-type-small-size);
  color: var(--torb-text-muted);
}

.edit-link svg {
  width: 14px;
  height: 14px;
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.pager a {
  display: block;
  padding: 14px 18px;
  color: var(--torb-text);
  text-decoration: none;
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-medium);
  transition:
    border-color var(--torb-duration-quick) var(--torb-easing-exact),
    background-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.pager a:hover {
  background: var(--torb-surface);
  border-color: var(--torb-border-strong);
}

.pager-label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--torb-type-small-size);
  color: var(--torb-text-muted);
}

.pager-title {
  font-weight: 600;
}

.pager-next {
  grid-column: 2;
  text-align: right;
}

/* The search: a dialog over a scrim of ink, without blur. */

.search-button {
  gap: 10px;
  min-width: 180px;
  justify-content: flex-start;
  padding: 0 8px 0 12px;
  color: var(--torb-text-muted);
  background: var(--torb-background);
  border-color: var(--torb-border-strong);
}

.search-button:hover {
  color: var(--torb-text);
  border-color: var(--torb-border-control);
  background: var(--torb-background);
}

.search-button kbd {
  margin-left: auto;
}

.search-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(72vh, 640px);
  margin: 12vh auto auto;
  padding: 0;
  color: var(--torb-text);
  background: var(--torb-surface-raised);
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-medium);
  box-shadow: var(--torb-shadow-overlay);
}

.search-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: rise var(--torb-duration-standard) var(--torb-easing-exact);
}

.search-dialog::backdrop {
  background: rgb(20 17 15 / 0.4);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--torb-border);
}

.search-field svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--torb-text-subtle);
}

.search-input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0;
  font-family: var(--torb-font-sans);
  font-size: 1.0625rem;
  color: var(--torb-text);
  background: transparent;
  border: 0;
  outline: none;
}

.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-results {
  flex: 1;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  list-style: none;
}

.search-results a {
  display: block;
  padding: 10px 12px;
  color: var(--torb-text);
  text-decoration: none;
  border-radius: var(--torb-radius-small);
}

.search-results a:hover,
.search-results [aria-selected="true"] a {
  background: var(--torb-surface-hover);
}

.search-result-title {
  font-weight: 600;
}

.search-result-section {
  margin-left: 8px;
  font-size: 0.75rem;
  color: var(--torb-text-subtle);
}

.search-result-text {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--torb-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-message {
  padding: 28px 12px;
  font-size: 0.9375rem;
  color: var(--torb-text-muted);
  text-align: center;
}

.search-footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  font-size: 0.75rem;
  color: var(--torb-text-subtle);
  border-top: 1px solid var(--torb-border);
}

/* The front page: a band of ink with the mark, the line and the install, then the tour. */

.on-ink {
  color-scheme: dark;
  --torb-text: var(--torb-neutral-50);
  --torb-text-muted: var(--torb-neutral-400);
  --torb-text-subtle: var(--torb-neutral-500);
  --torb-border: var(--torb-neutral-800);
  --torb-border-strong: var(--torb-neutral-700);
  --torb-code: var(--torb-neutral-900);
  --torb-surface-raised: var(--torb-neutral-850);
  --torb-surface-hover: var(--torb-neutral-850);
  --torb-focus: var(--torb-neutral-50);
  --torb-link: var(--torb-neutral-50);
  --torb-link-underline: var(--torb-red-500);
  --torb-link-underline-hover: var(--torb-red-300);
  --torb-selection: var(--torb-red-950);
  --torb-button-secondary-text: var(--torb-neutral-50);
  --torb-button-secondary-background-hover: var(--torb-neutral-850);
  --torb-button-secondary-background-active: var(--torb-neutral-800);
  --torb-button-quiet-text: var(--torb-neutral-50);
  --torb-button-quiet-background-hover: var(--torb-neutral-850);
  --torb-button-quiet-background-active: var(--torb-neutral-800);
  color: var(--torb-text);
}

.hero {
  position: relative;
  background: var(--torb-gradient-ink);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 64px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 24px 72px;
}

.hero-title {
  margin: 0 0 20px;
  font-size: var(--torb-type-display-size);
  font-weight: var(--torb-type-display-weight);
  line-height: var(--torb-type-display-line-height);
  letter-spacing: var(--torb-type-display-tracking);
}

.hero-category {
  max-width: 50ch;
  margin: 0 0 36px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--torb-text-muted);
}

.hero-mark {
  display: block;
  width: 256px;
  height: 256px;
}

.hero-bar,
.hero-stem {
  transform-box: fill-box;
  animation-duration: var(--torb-duration-signature);
  animation-timing-function: var(--torb-easing-exact);
  animation-fill-mode: both;
}

.hero-bar {
  transform-origin: left center;
  animation-name: cut-across;
  animation-delay: 160ms;
}

.hero-stem {
  transform-origin: center top;
  animation-name: cut-down;
  animation-delay: 640ms;
}

.assembled .hero-bar,
.assembled .hero-stem {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bar,
  .hero-stem {
    animation: none;
  }
}

@keyframes cut-across {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes cut-down {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.install {
  max-width: 700px;
  margin: 0 0 28px;
  background: var(--torb-code);
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-small);
}

.install-row {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 50px;
  padding-right: 7px;
}

.install-row + .install-row {
  border-top: 1px solid var(--torb-border);
}

.install-platform {
  padding: 0 16px;
  font-size: var(--torb-type-small-size);
  font-weight: 500;
  color: var(--torb-text-muted);
}

.install-command {
  margin: 0;
  padding: 13px 12px 13px 0;
  overflow-x: auto;
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre;
  color: var(--torb-text);
}

.install-command .prompt {
  color: var(--torb-text-subtle);
  user-select: none;
}

/* The Windows command (installRowHtml's selectOnly): dragging or Ctrl+A anywhere in it selects it whole, the
   prompt still excluded by .prompt above; a click does the same through the select-button's script. */
.install-command-select {
  cursor: text;
  user-select: all;
}

.install .copy-button {
  position: static;
  opacity: 1;
  color: var(--torb-text-muted);
  background: transparent;
}

.install .copy-button:hover {
  color: var(--torb-text);
  background: var(--torb-surface-hover);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.strata {
  height: 15px;
  background: var(--torb-gradient-strata);
}

.tour {
  max-width: 1160px;
  margin: 0 auto;
  padding: 88px 24px 24px;
}

.panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 56px;
  padding: 56px 0;
  border-top: 1px solid var(--torb-border);
}

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

.panel-text h2 {
  margin: 0 0 18px;
  padding-top: 0;
  border-top: 0;
}

.panel-text p {
  margin: 0 0 16px;
}

.panel-text > :last-child {
  margin-bottom: 0;
}

.panel-code .code-block:last-child {
  margin-bottom: 0;
}

.panel-code pre.code {
  font-size: var(--torb-type-code-size);
  line-height: var(--torb-type-code-line-height);
  padding: 18px 20px;
}

/* The three doors on a phone: a row of their own below the header, which scrolls away with the page. */

.level-bar {
  display: none;
}

/* The language: a menu of links in their own names, which opens without a script. */

.language-menu {
  position: relative;
}

.language-button {
  gap: 6px;
  padding: 0 10px;
  list-style: none;
}

.language-button::-webkit-details-marker {
  display: none;
}

.language-code {
  font-size: var(--torb-type-small-size);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.language-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 35;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--torb-surface-raised);
  border: 1px solid var(--torb-border-strong);
  border-radius: var(--torb-radius-medium);
  box-shadow: var(--torb-shadow-overlay);
}

.language-menu[open] .language-list {
  animation: drop-in var(--torb-duration-quick) var(--torb-easing-exact);
}

.language-list a {
  display: block;
  padding: 8px 10px;
  font-size: var(--torb-type-ui-size);
  color: var(--torb-text-muted);
  text-decoration: none;
  border-radius: var(--torb-radius-small);
}

.language-list a:hover {
  color: var(--torb-text);
  background: var(--torb-surface-hover);
}

.language-list a[aria-current] {
  font-weight: 600;
  color: var(--torb-text);
  box-shadow: inset 2px 0 0 var(--torb-text);
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .language-menu[open] .language-list,
  .lesson-menu[open] .lesson-menu-list {
    animation: none;
  }
}

/* The level of a page: a label with a square in the colour of its level - Start, Guide, Reference. */

.level {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 7px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--torb-text);
  border: 1px solid var(--torb-border-strong);
  border-radius: var(--torb-radius-small);
}

.level::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--torb-text);
}

.level-start::before {
  background: var(--torb-success-accent);
}

.level-guide::before {
  background: var(--torb-info-accent);
}

.page-level {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 18px;
}

.page-level .breadcrumbs {
  margin: 0;
}

.notice {
  margin: 0 0 28px;
}

/* A runnable block: code the playground takes over, and without it, code with a way to run it locally. */

.playground {
  margin: 0 0 20px;
}

.playground .code-block {
  margin-bottom: 0;
}

.playground-local {
  margin: 8px 0 0;
  font-size: var(--torb-type-small-size);
  color: var(--torb-text-muted);
}

.playground-expected {
  margin-top: -1px;
  background: var(--torb-surface);
  border: 1px solid var(--torb-border);
  border-radius: 0 0 var(--torb-radius-small) var(--torb-radius-small);
}

.playground-exercise .code-block pre.code {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.playground-expected-label {
  display: block;
  padding: 8px 14px 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--torb-text-subtle);
}

.playground-expected pre.code {
  margin: 0;
  padding: 4px 14px 10px;
  background: transparent;
  border: 0;
}

.playground,
.playground pre,
.playground code,
.playground textarea {
  font-variant-ligatures: var(--torb-font-mono-ligatures);
  font-feature-settings: var(--torb-font-mono-features);
}

/* Folded details - a hint, a solution: a hairline box whose triangle turns quickly. */

.prose details {
  margin: 0 0 12px;
  border: 1px solid var(--torb-border);
  border-radius: var(--torb-radius-small);
  transition: border-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.prose details[open] {
  border-color: var(--torb-border-strong);
}

.prose summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--torb-radius-small);
}

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

.prose summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid var(--torb-text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--torb-duration-quick) var(--torb-easing-exact);
}

.prose details[open] > summary::before {
  transform: rotate(90deg);
}

.prose summary:hover {
  background: var(--torb-surface-hover);
}

.prose details > :not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}

.prose details > :last-child {
  margin-bottom: 14px;
}

/* A lesson of Start: its place in the course above the title, then rows of text beside code. */

.lesson {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 32px 88px;
}

.lesson-head {
  margin-bottom: 36px;
}

.lesson-head .page-title,
.lesson-head .page-summary,
.lesson-head .notice {
  max-width: 760px;
}

.lesson-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.lesson-counter {
  font-size: var(--torb-type-small-size);
  font-weight: 500;
  color: var(--torb-text-muted);
  font-variant-numeric: tabular-nums;
}

.lesson-arrows {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}

.lesson-progress {
  height: 2px;
  margin-bottom: 28px;
  background: var(--torb-border);
}

.lesson-progress span {
  display: block;
  height: 100%;
  background: var(--torb-text);
  transition: width var(--torb-duration-standard) var(--torb-easing-exact);
}

.lesson-menu {
  position: relative;
}

.lesson-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  font-size: var(--torb-type-small-size);
  font-weight: 500;
  color: var(--torb-text);
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--torb-border-control);
  border-radius: var(--torb-radius-small);
  transition: background-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.lesson-menu summary::-webkit-details-marker {
  display: none;
}

.lesson-menu summary::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid var(--torb-text-muted);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: transform var(--torb-duration-quick) var(--torb-easing-exact);
}

.lesson-menu[open] summary::after {
  transform: rotate(180deg);
}

.lesson-menu summary:hover {
  background: var(--torb-surface-hover);
}

.lesson-menu-list {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 25;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--torb-surface-raised);
  border: 1px solid var(--torb-border-strong);
  border-radius: var(--torb-radius-medium);
  box-shadow: var(--torb-shadow-overlay);
}

.lesson-menu[open] .lesson-menu-list {
  animation: drop-in var(--torb-duration-quick) var(--torb-easing-exact);
}

.lesson-menu-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: var(--torb-type-ui-size);
  color: var(--torb-text-muted);
  text-decoration: none;
  border-radius: var(--torb-radius-small);
}

.lesson-menu-list a:hover {
  color: var(--torb-text);
  background: var(--torb-surface-hover);
}

.lesson-menu-list a[aria-current] {
  font-weight: 600;
  color: var(--torb-text);
  box-shadow: inset 2px 0 0 var(--torb-text);
}

.lesson-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--torb-text-muted);
  border: 1px solid var(--torb-border-strong);
  border-radius: 50%;
  transition:
    background-color var(--torb-duration-quick) var(--torb-easing-exact),
    color var(--torb-duration-quick) var(--torb-easing-exact);
}

.seen .lesson-number {
  color: var(--torb-text);
  border-color: var(--torb-text);
}

.solved .lesson-number {
  color: var(--torb-background);
  background: var(--torb-success-accent);
  border-color: var(--torb-success-accent);
}

.lesson-body {
  max-width: none;
}

.lesson-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "text code"
    "folded code";
  align-items: start;
  column-gap: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--torb-border);
}

.lesson-text {
  grid-area: text;
}

.lesson-code {
  grid-area: code;
}

.lesson-folded {
  grid-area: folded;
  margin-top: 8px;
}

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

.lesson-row-text {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "text"
    "folded";
}

.lesson-row-text .lesson-text,
.lesson-row-text .lesson-folded {
  max-width: 760px;
}

.lesson-text > :first-child,
.lesson-code > :first-child {
  margin-top: 0;
}

.lesson-text > :last-child,
.lesson-code > :last-child,
.lesson-folded > :last-child {
  margin-bottom: 0;
}

.lesson-text h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: var(--torb-type-heading-3-size);
}

.lesson-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--torb-border);
}

.lesson-previous {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--torb-type-ui-size);
  color: var(--torb-text-muted);
  text-decoration: none;
}

.lesson-previous:hover {
  color: var(--torb-text);
}

.lesson-previous svg,
.lesson-next svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.lesson-next {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  margin-left: auto;
  padding: 12px 18px 12px 20px;
  color: var(--torb-button-primary-text);
  text-decoration: none;
  background: var(--torb-button-primary-background);
  border: 1px solid var(--torb-button-primary-border);
  border-radius: var(--torb-radius-small);
  transition: background-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.lesson-next:hover {
  background: var(--torb-button-primary-background-hover);
}

.lesson-next svg {
  grid-row: 1 / span 2;
  grid-column: 2;
  transition: transform var(--torb-duration-quick) var(--torb-easing-exact);
}

.lesson-next:hover svg {
  transform: translateX(3px);
}

.lesson-next-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.lesson-next-title {
  font-size: 1.0625rem;
  font-weight: 700;
}

/* The list of lessons: the course's head, its introduction, and every lesson as a numbered line. */

.course {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.course-head {
  margin-bottom: 36px;
}

.course-head .level {
  margin-bottom: 18px;
}

.course-head .page-summary {
  margin-bottom: 28px;
}

.course-intro {
  margin-bottom: 32px;
}

.lesson-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--torb-border);
}

.lesson-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  padding: 14px 12px;
  color: var(--torb-text);
  text-decoration: none;
  border-bottom: 1px solid var(--torb-border);
  transition: background-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.lesson-list a:hover {
  background: var(--torb-surface);
}

.lesson-list .lesson-number {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  font-size: 0.8125rem;
}

.lesson-name {
  font-weight: 700;
}

.lesson-summary {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--torb-text-muted);
}

/* The doors of the front page: one card per level, each with its label and one sentence. */

.doors {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 24px 16px;
}

.doors-title {
  margin: 0 0 24px;
  font-size: var(--torb-type-heading-2-size);
}

.door-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 24px;
  color: var(--torb-text);
  text-decoration: none;
  border: 1px solid var(--torb-border-strong);
  border-radius: var(--torb-radius-medium);
  transition:
    border-color var(--torb-duration-quick) var(--torb-easing-exact),
    background-color var(--torb-duration-quick) var(--torb-easing-exact);
}

.door:hover {
  background: var(--torb-surface);
  border-color: var(--torb-text);
}

.door-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.door-title svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--torb-text-subtle);
  transition:
    transform var(--torb-duration-quick) var(--torb-easing-exact),
    color var(--torb-duration-quick) var(--torb-easing-exact);
}

.door:hover .door-title svg {
  color: var(--torb-text);
  transform: translateX(3px);
}

.door-text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--torb-text-muted);
}

/* A page of the site that is neither documentation nor the front page: the install page, the legal pages, 404. */

.plain {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 104px;
}

.plain .page-title {
  font-size: var(--torb-type-heading-1-size);
}

/* The playground's page: the tool takes the width of the screen, up to 1840 px, and the text around it keeps the
   measure of the other pages and its left edge (docs/tooling/the-playground.md). */

.plain:has([data-playground-page]) {
  width: 100%;
  max-width: 1840px;
}

.plain:has([data-playground-page]) > .page-title,
.plain:has([data-playground-page]) .prose > :not(.playground-page-host) {
  max-width: 712px;
}

.plain:has([data-playground-page]) .playground-page-host {
  min-height: 30em;
  margin-bottom: 36px;
}

/*
 * The benchmarks page (site-benchmarks.trb): two numbers in tiles, a chart of two panels per program, and the tables.
 * A bar is neutral, TorbScript's binary is the carmine of the brand, and every label is in the colours of text.
 */

.benchmark-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 32px;
}

.benchmark-tile {
  padding: 14px 18px 16px;
  background: var(--torb-surface);
  border: 1px solid var(--torb-border);
  border-top: var(--torb-border-accent) solid var(--torb-border-control);
}

.benchmark-tile-torbscript {
  border-top-color: var(--torb-brand);
}

.benchmark-tile p {
  margin: 0;
}

.benchmark-tile-label,
.benchmark-tile-detail,
.benchmark-panel-title,
.benchmark-chart figcaption,
.benchmark-machine {
  font-size: var(--torb-type-small-size);
  color: var(--torb-text-muted);
}

.benchmark-tile-label,
.benchmark-panel-title {
  font-weight: 600;
}

.benchmark-tile-value {
  margin: 2px 0 4px;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--torb-text);
}

.benchmark-chart {
  margin: 0 0 32px;
}

.benchmark-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 28px;
}

.prose .benchmark-panel-title {
  margin: 0 0 6px;
}

.benchmark-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.benchmark-name,
.benchmark-value,
.benchmark-tick {
  font-family: var(--torb-font-sans);
  fill: var(--torb-text);
}

.benchmark-name,
.benchmark-value {
  font-size: 13px;
}

.benchmark-value,
.benchmark-tick {
  font-variant-numeric: tabular-nums;
}

.benchmark-tick {
  font-size: 11px;
  fill: var(--torb-text-subtle);
}

.benchmark-grid {
  stroke: var(--torb-border);
  stroke-width: 1;
}

.benchmark-baseline {
  stroke: var(--torb-border-strong);
  stroke-width: 1;
}

.benchmark-bar {
  fill: var(--torb-border-control);
}

.benchmark-bar-torbscript {
  fill: var(--torb-brand);
}

.benchmark-hit {
  fill: transparent;
}

.benchmark-row:hover .benchmark-hit {
  fill: var(--torb-surface-hover);
}

.prose .benchmark-chart figcaption {
  margin-top: 10px;
}

/*
 * The tables do not wrap their numbers, so they are wider than a phone: they scroll in their box, and `contain`
 * keeps their width from widening the page around them, which a centred page takes from its widest content.
 */
.benchmark-table {
  contain: inline-size;
}

.benchmark-table caption {
  padding: 9px 14px;
  font-size: var(--torb-type-small-size);
  color: var(--torb-text-muted);
  text-align: left;
  caption-side: top;
}

.benchmark-table tbody th {
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  border-bottom-color: var(--torb-border);
}

.benchmark-table th,
.benchmark-table td {
  padding: 8px 10px;
}

.benchmark-table td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.benchmark-range {
  display: block;
  font-size: 0.8125rem;
  color: var(--torb-text-subtle);
}

.benchmark-none,
.benchmark-status {
  color: var(--torb-text-subtle);
}

@media (forced-colors: active) {
  .benchmark-bar {
    fill: CanvasText;
  }

  .benchmark-bar-torbscript {
    fill: Highlight;
  }
}

.site-footer {
  background: var(--torb-surface);
  border-top: 1px solid var(--torb-border);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 28px 24px;
  font-size: var(--torb-type-small-size);
  color: var(--torb-text-muted);
}

.footer-mark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-mark svg {
  width: 20px;
  height: 20px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.footer-links a:hover {
  color: var(--torb-text);
  text-decoration: underline;
  text-decoration-color: var(--torb-link-underline);
}

@media (max-width: 1240px) {
  .docs {
    grid-template-columns: 272px minmax(0, 1fr);
  }

  .toc {
    display: none;
  }
}

@media (max-width: 960px) {
  .site-nav {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }

  .header-inner {
    gap: 12px;
    padding: 0 16px;
  }

  .docs {
    display: block;
  }

  .sidebar {
    display: none;
    position: static;
    height: auto;
    padding: 16px 16px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--torb-border);
  }

  .navigation-toggle:checked ~ .docs .sidebar {
    display: block;
  }

  .content {
    padding: 28px 16px 72px;
  }

  .page-title {
    font-size: 2.125rem;
  }

  .page-summary {
    font-size: 1.0625rem;
  }

  .prose h2 {
    font-size: 1.625rem;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 48px 16px 56px;
  }

  .hero-mark {
    order: -1;
    width: 88px;
    height: 88px;
  }

  .hero-title {
    font-size: 2.75rem;
  }

  .hero-category {
    font-size: 1.0625rem;
    margin-bottom: 28px;
  }

  .tour {
    padding: 56px 16px 8px;
  }

  .panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 40px 0;
  }

  .panel-text h2 {
    font-size: 1.75rem;
  }

  .level-bar {
    display: flex;
    gap: 2px;
    padding: 4px 8px;
    overflow-x: auto;
    background: var(--torb-background);
    border-bottom: 1px solid var(--torb-border);
  }

  .level-bar a {
    flex: none;
    padding: 10px 10px;
    font-size: var(--torb-type-ui-size);
    font-weight: var(--torb-type-ui-weight);
    line-height: 1;
    color: var(--torb-text-muted);
    text-decoration: none;
  }

  .level-bar a[aria-current] {
    color: var(--torb-text);
    box-shadow: inset 0 -2px 0 var(--torb-text);
  }

  .lesson {
    padding: 20px 16px 72px;
  }

  .lesson-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "text"
      "code"
      "folded";
    row-gap: 20px;
    padding: 28px 0;
  }

  .lesson-folded {
    margin-top: 0;
  }

  .lesson-menu-list {
    width: min(320px, calc(100vw - 32px));
  }

  .doors {
    padding: 44px 16px 8px;
  }

  .door-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .door-title {
    font-size: 1.25rem;
  }

  .course {
    padding: 32px 16px 72px;
  }

  .plain {
    padding: 36px 16px 72px;
  }

  .footer-inner {
    padding: 24px 16px;
  }
}

@media (max-width: 600px) {
  .search-button {
    min-width: 0;
    width: 36px;
    padding: 0;
    justify-content: center;
  }

  .search-button .search-label,
  .search-button kbd {
    display: none;
  }

  .brand-label {
    display: none;
  }

  .hero-title {
    font-size: 2.375rem;
  }

  .install-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "platform copy"
      "command command";
    row-gap: 2px;
    padding: 8px 7px 10px 14px;
  }

  .install-platform {
    grid-area: platform;
    padding: 0;
  }

  .install-command {
    grid-area: command;
    padding: 0 7px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .install .copy-button {
    grid-area: copy;
  }

  .language-button {
    padding: 0 8px;
  }

  .lesson-arrows {
    display: none;
  }

  .lesson-next {
    width: 100%;
  }

  .pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .pager-next {
    grid-column: 1;
  }
}