/* FastIPC site. Layout: a schematic datasheet; one column of sections, each opened by a ruled head
   with a mono eyebrow naming the spec or doc it comes from. Diagrams sit on a faint engineering grid.
   Colours: the logo's orange as the accent (darker on light, so text keeps 4.5:1), a steel blue for shared memory
   (orange and blue stay apart for colour-blind readers), warm neutral greys, and a crimson for errors. */
:root {
  --bg: #f3f2ef; --panel: #fcfbf9; --fg: #1f2023; --muted: #5a5c61; --line: #9a9b9f; --grid: #e5e4e0;
  --accent: #a64b0c; --accent-soft: #faeadb; --on-accent: #fcfbf9;
  --shm: #36597a; --shm-soft: #dce5ee; --warn: #9f1239; --good: #15803d; --close: #c2410c;
  --s-linux: #4f7ca6; --s-win: #d0691c; --s-mac: #5f6166; --s-arm: #2a8a74;
  --display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141413; --panel: #1c1b1a; --fg: #ecebe9; --muted: #a4a3a1; --line: #5c5b59; --grid: #2b2a28;
  --accent: #eba02f; --accent-soft: #3b2913; --on-accent: #141413;
  --shm: #8db2d6; --shm-soft: #1d2a37; --warn: #ff6b81; --good: #4ade80; --close: #fb923c;
  --s-linux: #6b9ac6; --s-win: #d97a2a; --s-mac: #b3b2af; --s-arm: #3cb398; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #141413; --panel: #1c1b1a; --fg: #ecebe9; --muted: #a4a3a1; --line: #5c5b59; --grid: #2b2a28;
  --accent: #eba02f; --accent-soft: #3b2913; --on-accent: #141413;
  --shm: #8db2d6; --shm-soft: #1d2a37; --warn: #ff6b81; --good: #4ade80; --close: #fb923c;
  --s-linux: #6b9ac6; --s-win: #d97a2a; --s-mac: #b3b2af; --s-arm: #3cb398; color-scheme: dark }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15.5px; line-height: 1.6;
  -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 20px; }

/* ---- top bar ---- */
.topbar { border-bottom: 2px solid var(--fg); }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: .01em; }
.brand img { display: block; height: 44px; width: auto; flex: none; margin-block: -4px; } /* the artwork has its own margin */
/* The logo in the theme's variant: dark lettering on light, light lettering on dark */
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: block; } }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
.brand .ver { font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--muted); letter-spacing: 0; }
nav.site { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--mono); font-size: .82rem; }
nav.site a { color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent; padding-block: 2px; }
nav.site a:hover { border-bottom-color: var(--line); }
nav.site a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- type ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 4.1rem); line-height: 1; letter-spacing: .005em; }
h2 { font-size: 1.75rem; line-height: 1.15; }
h3 { font-size: 1.2rem; line-height: 1.25; }
p { margin: 0; max-width: 90ch; }
.lede { font-size: 1.13rem; max-width: 60ch; }
.muted { color: var(--muted); }
.eyebrow { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
code, kbd { font-family: var(--mono); font-size: .86em; background: var(--grid); padding: .05em .32em; border-radius: 3px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack > * { min-width: 0; }

/* ---- sections ---- */
main { padding-block: 0 72px; }
section.plate { margin-top: 64px; }
.plate-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; border-top: 1px solid var(--line);
  padding-top: 12px; margin-bottom: 18px; }
.plate-head .eyebrow { order: 2; margin-left: auto; text-transform: none; letter-spacing: .02em; color: var(--muted); }
.plate-head .eyebrow a { color: inherit; }
.intro { margin-bottom: 22px; }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: start;
  padding-top: 52px; }
.hero > * { min-width: 0; }
.hero .stack { gap: 18px; }
.hero h1 { font-style: italic; }
.hero h1 .acc { color: var(--accent); }
.tagline { font-family: var(--display); font-weight: 500; font-size: 1.55rem; line-height: 1.25; max-width: 30ch; text-wrap: balance; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: .74rem; }
.badge { border: 1px solid var(--line); border-radius: 3px; padding: 1px 7px; color: var(--muted); background: var(--panel); }
.badge.acc { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .86rem; font-weight: 500;
  padding: 9px 16px; border-radius: 3px; text-decoration: none; border: 1.5px solid var(--accent); color: var(--accent);
  background: transparent; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn svg { width: 16px; height: 16px; }

.installs { display: grid; gap: 8px; }
.install { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 3px; padding: 7px 8px 7px 12px; font-family: var(--mono); font-size: .86rem; min-width: 0; }
.install .lang { color: var(--muted); font-size: .72rem; width: 4.2em; flex: none; text-transform: uppercase; letter-spacing: .06em; }
.install code { background: none; padding: 0; font-size: 1em; flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.install code::before { content: "$ "; color: var(--muted); }
.install code.coords::before { content: none; } /* a dependency line, not a command */
.copy { font-family: var(--mono); font-size: .72rem; color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 3px; padding: 2px 8px; cursor: pointer; flex: none; }
.copy:hover { color: var(--accent); border-color: var(--accent); }

/* datasheet panel */
.sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.sheet-head b { color: var(--fg); font-weight: 500; letter-spacing: .06em; }
.sheet-scroll { overflow-x: auto; }
.sheet table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sheet th, .sheet td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--grid); vertical-align: baseline; }
.sheet thead th { font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sheet td.n, .sheet th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet thead th.n { white-space: normal; }
.sheet td.n { font-size: .95rem; }
.sheet tr:last-child td { border-bottom: 0; }
.sheet .foot { padding: 9px 14px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); }
/* The head-to-head: FastIPC's figure over the fastest other's, that library's name under it */
.sheet td.n b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.15; }
.sheet td.n small { display: block; font-size: .7rem; color: var(--muted); }
.sheet td.case small { display: block; font-size: .7rem; color: var(--muted); }
.sheet td.muted { color: var(--muted); }
.sheet .faster { color: var(--good); }
.sheet .slower { color: var(--warn); }
.sheet .slower.close { color: var(--close); }
/* The datasheet's machines: a head over each machine's columns, and a rule between the two machines */
.sheet thead tr.hw th { text-align: center; color: var(--fg); font-weight: 500; white-space: normal;
  border-bottom: 2px solid var(--accent); }
.sheet thead tr.hw td { border-bottom: 0; }
.sheet thead tr.hw th:nth-child(3), .sheet tr:not(.hw) > :nth-child(4) { border-left: 1px solid var(--line); }

/* ---- grids ---- */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 28px; }
.cols > * { min-width: 0; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.cols-2 > * { min-width: 0; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 30px; }
.feature { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--fg); padding-top: 12px; min-width: 0; }
.feature .tag { font-family: var(--mono); font-size: .74rem; color: var(--accent); }
.feature p { font-size: .95rem; }

/* ---- figures ---- */
figure { margin: 0; }
.fig { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px; }
.fig svg { display: block; min-width: 720px; width: 100%; max-width: none; height: auto; color: var(--fg); }
.fig-hint { display: none; font-size: .78rem; color: var(--muted); margin: 6px 0 0; font-family: var(--mono); }
figcaption { font-size: .86rem; color: var(--muted); margin-top: 8px; max-width: 90ch; }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .78rem; color: var(--muted); margin-top: 8px; font-family: var(--mono); }
.sw { display: inline-block; width: 22px; height: 10px; vertical-align: middle; margin-right: 6px; border: 1.5px solid var(--line); background: var(--panel); }
.sw.acc { border-color: var(--accent); background: var(--accent-soft); }
.sw.shm { border-color: var(--shm); background: var(--shm-soft); }

svg text { font-family: var(--mono); font-size: 11px; fill: currentColor; }
svg .h { font-family: var(--body); font-weight: 600; font-size: 13px; }
svg .t { font-family: var(--body); font-size: 12px; }
svg .s { font-size: 10.5px; fill: var(--muted); }
svg .acc-t { fill: var(--accent); }
svg .shm-t { fill: var(--shm); }
svg .warn-t { fill: var(--warn); }
svg .b { fill: var(--panel); stroke: var(--line); stroke-width: 1.2; }
svg .bg { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
svg .ba { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; }
svg .bs { fill: var(--shm-soft); stroke: var(--shm); stroke-width: 1.4; }
svg .proc { fill: none; stroke: var(--fg); stroke-width: 1.6; }
svg .ln { stroke: currentColor; stroke-width: 1.3; fill: none; }
svg .la { stroke: var(--accent); stroke-width: 1.6; fill: none; }
svg .ls { stroke: var(--shm); stroke-width: 1.6; fill: none; }
svg .lw { stroke: var(--warn); stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
svg .dash { stroke-dasharray: 4 3; }
svg .mk { fill: currentColor; }
svg .mk-a { fill: var(--accent); }
svg .mk-s { fill: var(--shm); }
svg .mk-w { fill: var(--warn); }

ol.steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
ol.steps li { counter-increment: step; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
ol.steps li::before { content: "step " counter(step); font-family: var(--mono); font-size: .74rem; color: var(--accent);
  letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
ol.steps p { font-size: .94rem; }

/* ---- code ---- */
.code { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.code .label { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px 6px 12px;
  border-bottom: 1px solid var(--grid); font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.code pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: .8rem; line-height: 1.55; tab-size: 4; }
.code pre code { background: none; padding: 0; font-size: 1em; border-radius: 0; }
.hljs-keyword, .hljs-built_in, .hljs-type, .hljs-meta .hljs-keyword { color: var(--accent); }
.hljs-meta { color: var(--accent); }
.hljs-string, .hljs-meta .hljs-string, .hljs-number, .hljs-literal { color: var(--shm); }
.hljs-comment { color: var(--muted); font-style: italic; }
.hljs-title.function_, .hljs-title.class_ { font-weight: 500; }

.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs button { font-family: var(--mono); font-size: .86rem; background: transparent; color: var(--muted); border: 0;
  border-bottom: 2px solid transparent; padding: 8px 16px; margin-bottom: -1px; cursor: pointer; }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.tabpanel { display: flex; flex-direction: column; gap: 14px; }
.note { font-size: .88rem; color: var(--muted); }
.hwnote { font-size: .9rem; color: var(--fg); background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 8px 12px; margin: 0; }
.sheet .hwnote { font-size: .8rem; border-top: 1px solid var(--line); }

/* ---- bar charts ---- */
.chart { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px 12px; }
.chart-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; margin-bottom: 10px; }
.chart-title h3 { font-size: 1.05rem; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 22px; font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.legend span { white-space: nowrap; }
.legend .mach { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.legend .mach b { color: var(--fg); font-weight: 500; }
/* The two machines' series: a gap between each pair of bars */
.bar.mc { margin-top: 6px; }
.legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.bars { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: 0 10px; position: relative; }
.bars .grp { display: contents; }
.bars .lbl { font-size: .84rem; padding-block: 7px; border-top: 1px solid var(--grid); align-self: stretch; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.bars .lbl small { font-family: var(--mono); color: var(--muted); font-size: .72rem; }
.bars .track { border-top: 1px solid var(--grid); padding-block: 7px; display: flex; flex-direction: column; gap: 2px;
  background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: calc((100% - 4.5em) / 6) 100%; }
.bar { display: flex; align-items: center; gap: 6px; height: 13px; }
.bar span.fill { height: 10px; border-radius: 0 3px 3px 0; min-width: 2px; }
.bar.lx span.fill { background: var(--s-linux); }
.bar.wn span.fill { background: var(--s-win); }
.bar.mc span.fill { background: var(--s-mac); }
.bar.la span.fill { background: var(--s-arm); }
.bar b { font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar:hover b, .bar:focus b { color: var(--fg); }
.tip { position: absolute; z-index: 10; pointer-events: none; background: var(--fg); color: var(--bg); font-family: var(--mono);
  font-size: .74rem; padding: 4px 8px; border-radius: 3px; white-space: nowrap; }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.data thead th { font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th.grp { text-align: center; }
table.data col.g { border-left: 1px solid var(--grid); }
table.data td.n, table.data th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td code { white-space: nowrap; }
table.data tr.sep td { border-top: 1px solid var(--line); }

/* ---- the interop grid: servers in rows, clients in columns; a language with itself on the diagonal ---- */
.interop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: start; }
.interop > * { min-width: 0; }
.interop figure { width: min-content; max-width: 100%; } /* the caption wraps to the grid's width */
table.matrix { width: auto; font-size: .84rem; }
table.matrix th, table.matrix td { padding: 6px 9px; text-align: center; vertical-align: middle; }
table.matrix thead th { letter-spacing: .03em; }
table.matrix thead th.corner { text-align: left; text-transform: none; letter-spacing: 0; font-size: .66rem; line-height: 1.3; }
table.matrix tbody th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; border-right: 1px solid var(--line); }
table.matrix td { color: var(--accent); font-family: var(--mono); }
table.matrix td.same { background: var(--accent-soft); }

/* The formula: an image of it on wide screens (one per theme), the typeset text (MathML) on phones and for screen
   readers everywhere */
.formula { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px;
  padding: 18px 24px; margin-bottom: 18px; }
.formula .formula-img { display: block; width: 100%; max-width: 854px; height: auto; }
.formula .img-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .formula .img-light { display: none; }
  :root:not([data-theme="light"]) .formula .img-dark { display: block; } }
:root[data-theme="dark"] .formula .img-light { display: none; }
:root[data-theme="dark"] .formula .img-dark { display: block; }
.formula .math-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 40px; align-items: center; }
.formula math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math; font-size: 1.9rem; margin: 0; }
.formula .vars { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 1.02rem; }
.formula .vars dt { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", Georgia, serif; font-size: 1.2rem; text-align: right; }
.formula .vars dd { margin: 0; align-self: center; }
@media (min-width: 761px) {
  .formula .math-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 760px) {
  .formula { padding: 14px 16px; }
  .formula .formula-img { display: none !important; }
  .formula .math-text { grid-template-columns: minmax(0, 1fr); }
  .formula math { font-size: 1.5rem; }
}
/* ---- the scaling chart (python.html, assets/scaling.js): one hue and one marker shape per transport ---- */
.scaling { --v1: #a64b0c; --v2: #2a78d6; --v3: #138a60; --v4: #4a3aa7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scaling { --v1: #c96a1e; --v2: #3987e5; --v3: #199e70; --v4: #9085e9; } }
:root[data-theme="dark"] .scaling { --v1: #c96a1e; --v2: #3987e5; --v3: #199e70; --v4: #9085e9; }
.scaling .controls { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: end; margin-bottom: 14px; }
.scaling .control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scaling .control > span { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.scaling .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.scaling .seg button, .scaling .toggles button { font-family: var(--mono); font-size: .8rem; background: var(--panel); color: var(--muted);
  border: 0; padding: 5px 11px; cursor: pointer; }
.scaling .seg button + button { border-left: 1px solid var(--line); }
.scaling .seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.scaling .range { display: flex; align-items: center; gap: 10px; }
.scaling input[type=range] { width: 220px; max-width: 52vw; accent-color: var(--accent); }
.scaling output { font-family: var(--mono); font-size: .86rem; min-width: 4.5em; }
.scaling .toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.scaling .toggles button { border: 1px solid var(--line); border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.scaling .toggles button[aria-pressed="false"] { color: var(--muted); opacity: .6; text-decoration: line-through; }
.scaling .toggles svg, .scaling .key-mark { width: 14px; height: 14px; flex: none; }
.scaling .key-mark { vertical-align: -2px; margin-right: 6px; }
.scaling .plot { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 6px 4px; }
.scaling .plot svg { display: block; width: 100%; height: auto; color: var(--fg); touch-action: pan-y; }
.scaling svg .grid { stroke: var(--grid); stroke-width: 1; }
.scaling svg .axis-line { stroke: var(--line); stroke-width: 1; }
.scaling svg .one { stroke: var(--muted); stroke-width: 1; }
.scaling svg .ideal { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.scaling svg .meas { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.scaling svg .dot { stroke: var(--panel); stroke-width: 2; }
.scaling svg .guide { stroke: var(--line); stroke-width: 1; }
.scaling .c1 { stroke: var(--v1); } .scaling .dot.c1 { fill: var(--v1); }
.scaling .c2 { stroke: var(--v2); } .scaling .dot.c2 { fill: var(--v2); }
.scaling .c3 { stroke: var(--v3); } .scaling .dot.c3 { fill: var(--v3); }
.scaling .c4 { stroke: var(--v4); } .scaling .dot.c4 { fill: var(--v4); }
.scaling svg .dot.c1, .scaling svg .dot.c2, .scaling svg .dot.c3, .scaling svg .dot.c4 { stroke: var(--panel); }
.scaling .key-mark .dot, .scaling .toggles .dot { stroke: none; }
.scaling .scaling-summary { font-size: .95rem; margin: 12px 0 0; }
.scaling .scaling-meta { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.scaling table.data td small { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.tip-lines { white-space: pre; line-height: 1.5; }
@media (max-width: 640px) { .scaling .controls { gap: 10px 18px; } .scaling .plot { padding: 4px 2px 2px; } }

/* ---- binding cards ---- */
.bindings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bcard { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 16px; color: var(--fg); text-decoration: none; min-width: 0; }
.bcard:hover { border-color: var(--accent); text-decoration: none; }
.bcard.wide { grid-column: 1 / -1; }
.bcard .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bcard .pkg { font-family: var(--mono); font-size: .8rem; color: var(--accent); overflow-wrap: anywhere; }
.bcard p { font-size: .92rem; }
.bcard .more { font-family: var(--mono); font-size: .8rem; color: var(--accent); margin-top: auto; }

/* ---- sub pages ---- */
.pagehead { padding-top: 44px; display: flex; flex-direction: column; gap: 14px; }
.pagehead h1 { font-size: clamp(2.3rem, 5vw, 3.2rem); }
.toc { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono); font-size: .8rem; }
.toc a { text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.toc a:hover { border-bottom-color: var(--accent); }
ul.plain { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; max-width: 90ch; }

/* ---- the architecture page: numbered subsections, "where in the code" boxes, the source tree ---- */
.sub { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.sub > * { min-width: 0; }
.sub > h3 .num, .stack > h3 .num { font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--accent); margin-right: 10px; }
.stack > h3 { margin-top: 18px; }
ol.num { margin: 0; padding-left: 1.5em; display: flex; flex-direction: column; gap: 6px; max-width: 90ch; }
dfn { font-style: normal; font-weight: 600; }
.where { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--shm); border-radius: 4px;
  padding: 10px 14px 12px; font-size: .88rem; max-width: 90ch; }
.where > b { display: block; font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--shm); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 4px; }
.where ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 3px; }
.where code { overflow-wrap: anywhere; }
.code pre.tree { line-height: 1.5; }
.code pre.tree a { color: var(--accent); text-decoration: none; }
.code pre.tree a:hover { text-decoration: underline; }
.tag-shm { font-family: var(--mono); font-size: .8em; color: var(--shm); background: var(--shm-soft); border: 1px solid var(--shm);
  border-radius: 3px; padding: 0 5px; }
table.data.prose td code { white-space: normal; overflow-wrap: anywhere; }
table.data.prose td:first-child code { white-space: nowrap; overflow-wrap: normal; }

/* ---- the comparison page: a group per library, FastIPC's label in the accent; wider labels and values ---- */
.compare-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.compare-charts > * { min-width: 0; }
.compare-charts .bars { grid-template-columns: 9.6em minmax(0, 1fr); }
.compare-charts .bars .track { background-image: none; }
.bars .lbl.self { color: var(--accent); font-weight: 600; }
.bar.none b { color: var(--muted); }
.chart-note { margin: 10px 0 0; }
/* A footnote's mark, bold, and its note (the note on Aeron's lead under the scoreboard). */
a.fn { color: inherit; font-weight: 700; text-decoration: none; }
a.fn:hover { text-decoration: underline; }
.fn-note { margin: 12px 0 0; }
.paragraphs > p + p { margin-top: 1em; }
table.data.compare td small { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-left: 4px; }
/* A rate with its bandwidth under it (performance.html, By language) */
table.data.rates td small { display: block; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
table.data.compare td.muted { color: var(--muted); }
/* The scoreboard: the fastest other library on a line of its own under FastIPC's figure. */
table.data.compare.scoreboard td small { display: block; margin-left: 0; margin-top: 2px; white-space: normal; }
table.data.compare.scoreboard td:first-child { min-width: 12em; }
/* FastIPC's lead or lag against that library: green "faster", red "slower", orange "slower" within the runs' spread
   (page.py CLOSE). */
table.data.compare.scoreboard .faster { color: var(--good); font-weight: 600; }
table.data.compare.scoreboard .slower { color: var(--warn); font-weight: 600; }
table.data.compare.scoreboard .slower.close { color: var(--close); }
table.matrix-lib td { font-size: .86rem; }
table.matrix-lib td.y { color: var(--fg); }
table.matrix-lib td.no { color: var(--muted); }
.faq dt { font-weight: 600; margin-top: 22px; }
.faq dd { margin: 4px 0 0; max-width: 90ch; }
.faq dd p + p { margin-top: 1em; }
@media (max-width: 900px) { .compare-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .compare-charts .bars { grid-template-columns: 7.4em minmax(0, 1fr); } }

/* ---- footer ---- */
footer.site { border-top: 2px solid var(--fg); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px 28px;
  font-family: var(--mono); font-size: .78rem; color: var(--muted); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--accent); }

/* The hero's datasheet needs about 450px beside the text: one column below that */
@media (max-width: 1080px) { .hero { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) {
  .hero, .interop { grid-template-columns: minmax(0, 1fr); }
  .features, .bindings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ol.steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap { padding-inline: 16px; }
  .features, .bindings, .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 32px; }
  section.plate { margin-top: 48px; }
  .plate-head .eyebrow { order: 0; margin-left: 0; flex-basis: 100%; }
  .bars { grid-template-columns: 6.6em minmax(0, 1fr); }
  /* The datasheet's five columns: tighter cells and two-line heads, so the figures fit beside the cases */
  .sheet th, .sheet td { padding: 7px 3px; }
  .sheet th:first-child, .sheet td:first-child { padding-left: 12px; }
  .sheet th:last-child, .sheet td:last-child { padding-right: 12px; }
  .sheet td.n b { font-size: .95rem; }
  .sheet td.n small { font-size: .62rem; }
  .legend .mach b { flex-basis: 100%; }
  .install { font-size: .8rem; gap: 8px; padding-left: 10px; }
  .install .lang { width: auto; min-width: 2.4em; }
  table.data th, table.data td { padding: 7px 8px; }
  table.data td.case { white-space: nowrap; }
  table.matrix th, table.matrix td { padding: 5px 4px; }
  table.matrix thead th { letter-spacing: 0; font-size: .64rem; }
  table.data .calls { display: none; }
  /* Two-column reference tables: each row becomes a block, the call over its description */
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm tr { border-bottom: 1px solid var(--grid); padding-block: 6px; }
  table.stack-sm tbody tr:last-child { border-bottom: 0; }
  table.stack-sm td { border-bottom: 0; padding-block: 2px; }
  table.stack-sm tr.sep { border-top: 1px solid var(--line); }
  table.stack-sm tr.sep td { border-top: 0; }
}
@media (max-width: 760px) { .fig-hint { display: block; } }
@media (max-width: 360px) {
  .sheet th, .sheet td { padding-inline: 3px; }
  .sheet th:first-child, .sheet td:first-child { padding-left: 8px; }
  .sheet th:last-child, .sheet td:last-child { padding-right: 8px; }
  .sheet td.n b { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
/* A stacked table's cells that need their column's name once the head is hidden (architecture.html) */
@media (max-width: 640px) {
  table.stack-sm td[data-k]::before { content: attr(data-k) ": "; font-family: var(--mono); font-size: .72rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em; }
}