/* goframework.io: the look. Light by default, dark with the system or the
   switch; Titillium Web for text, Lato for the trail after the logo
   (matched to its wordmark), JetBrains Mono for code, output and
   samples (all in assets/fonts, each under the SIL Open Font License, its
   OFL-*.txt there); nothing loaded from elsewhere. --text-font, --sans,
   --mono and --code-size below choose them. */

/* Titillium Web: regular, italic, semibold and bold, one file per script each */
@font-face {
	font-family: "Titillium Web";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/titillium-web-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Titillium Web";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/titillium-web-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Titillium Web";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/titillium-web-400-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Titillium Web";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/titillium-web-400-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Titillium Web";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/titillium-web-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Titillium Web";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/titillium-web-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Titillium Web";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/titillium-web-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Titillium Web";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/titillium-web-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato: regular, italic and bold, one file per script each */
@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/lato-400-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/lato-400-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/lato-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/lato-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/lato-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/lato-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono, a variable font: every weight in one file per script */
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bg: #f5f6fa; --surface: #ffffff; --surface-2: #f0f1f6; --text: #1d2130; --muted: #5d6478; --faint: #8a90a3;
	--line: #dde0ea; --line-strong: #c4c9da; --accent: #4f55c9; --accent-soft: #e9eafb; --accent-text: #3a3fae;
	--hot: #e46b2d; --hot-soft: #fdeee4; --ok: #1f8a4c; --ok-soft: #e4f4ea; --error: #c63a3a; --error-soft: #fbe8e8;
	--busy: #3d6fd6; --busy-soft: #e6eefc; --usual: #8a6d3b; --usual-soft: #f7f1e6;
	--card-outside: #eceef3; --card-decision: #eeefff; --card-state: #f3f0ff; --card-effect: #ffffff;
	--border-decision: #a9ade8; --border-state: #b9a9e8; --border-effect: #c4c9da; --border-outside: #c9ccd6;
	--code-bg: #f6f7fa; --mark: #ffe58f;
	--shadow: 0 1px 2px rgb(20 24 40 / 6%), 0 4px 14px rgb(20 24 40 / 6%);
	--radius: 6px;
	--text-font: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--code-size: 12.5px; /* code, output and samples */
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0e1016; --surface: #161922; --surface-2: #1c2030; --text: #e6e8f0; --muted: #a2a8bb; --faint: #7a8096;
		--line: #2a2f40; --line-strong: #3a4058; --accent: #8f94ff; --accent-soft: #23264a; --accent-text: #b7baff;
		--hot: #ff8a4c; --hot-soft: #3a2418; --ok: #4cc27f; --ok-soft: #16301f; --error: #ff6b6b; --error-soft: #3a1c1c;
		--busy: #6f9bff; --busy-soft: #1a2747; --usual: #d2b07a; --usual-soft: #2c2416;
		--card-outside: #1b1e27; --card-decision: #1d2040; --card-state: #231d3d; --card-effect: #171a24;
		--border-decision: #4d52a8; --border-state: #6450a8; --border-effect: #3a4058; --border-outside: #3a3f50;
		--code-bg: #11131b; --mark: #6b5a12; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 30%);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--bg: #0e1016; --surface: #161922; --surface-2: #1c2030; --text: #e6e8f0; --muted: #a2a8bb; --faint: #7a8096;
	--line: #2a2f40; --line-strong: #3a4058; --accent: #8f94ff; --accent-soft: #23264a; --accent-text: #b7baff;
	--hot: #ff8a4c; --hot-soft: #3a2418; --ok: #4cc27f; --ok-soft: #16301f; --error: #ff6b6b; --error-soft: #3a1c1c;
	--busy: #6f9bff; --busy-soft: #1a2747; --usual: #d2b07a; --usual-soft: #2c2416;
	--card-outside: #1b1e27; --card-decision: #1d2040; --card-state: #231d3d; --card-effect: #171a24;
	--border-decision: #4d52a8; --border-state: #6450a8; --border-effect: #3a4058; --border-outside: #3a3f50;
	--code-bg: #11131b; --mark: #6b5a12; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 30%);
	color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--text-font); -webkit-text-size-adjust: 100%; }
a { color: var(--accent-text); text-underline-offset: 2px; }
code, pre, kbd { font-family: var(--mono); font-size: 0.88em; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; } /* code shows the characters typed: != stays !=, not a ligature */
code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; }
pre { margin: 0; tab-size: 4; }
pre code { background: none; padding: 0; font-size: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin: 4px 0 8px; }
h2 { font-size: 20px; letter-spacing: -0.01em; margin: 0 0 8px; }

/* header */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 14px;
	background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
/* the brand and the trail after it, one style: goframework/config* */
/* the trail continues the logo's wordmark: the same lowercase height
   (92/464 of the logo's 40px; Lato's is 0.506 of its size), regular */
.top .crumbs-bar .crumb, .top .crumbs-bar .crumb-sep { font-family: var(--sans); font-size: 15.7px; font-weight: 400; color: var(--text);
	text-decoration: none; white-space: nowrap; letter-spacing: 0; }
.top .crumbs-bar a.crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the logo, in the variant for the page's theme */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand .logo { display: block; height: 40px; width: auto; }
.brand .logo.dark, .brand .logo.icon { display: none; }
:root[data-theme="dark"] .brand .logo.light { display: none; }
:root[data-theme="dark"] .brand .logo.dark { display: block; }
@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; }
}
.menu-button { display: none; }
.top .crumbs-bar { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0; margin-left: -11px; white-space: nowrap; overflow: hidden; }
.top .crumbs-bar .crumb.current { overflow: hidden; text-overflow: ellipsis; }
/* the trail's last part, in Details: a button opening the list to switch to
   another module of the group, or another group */
.top .crumbs-bar button.crumb { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; border: 0; background: none; padding: 0; cursor: pointer; }
.top .crumbs-bar button.crumb .crumb-label { overflow: hidden; text-overflow: ellipsis; }
.top .crumbs-bar button.crumb .crumb-caret { flex: none; font-size: 0.7em; color: var(--muted); }
.top .crumbs-bar button.crumb:hover .crumb-label, .top .crumbs-bar button.crumb[aria-expanded="true"] .crumb-label { text-decoration: underline; text-underline-offset: 3px; }
.crumb-menu { position: fixed; z-index: 60; top: 54px; width: min(400px, calc(100vw - 16px)); max-height: calc(100vh - 70px); overflow-y: auto;
	background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; box-shadow: var(--shadow); padding: 4px; }
.crumb-menu[hidden] { display: none; }
.crumb-filter { width: 100%; height: 30px; margin: 0 0 4px; border: 1px solid var(--line-strong); background: var(--bg); border-radius: 4px; padding: 0 8px; font-size: 13.5px; }
.crumb-list { display: grid; gap: 1px; }
.crumb-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 8px; border-radius: 4px; text-decoration: none; color: var(--text); }
.crumb-choice[hidden] { display: none; }
.crumb-choice code { background: none; padding: 0; font-size: 13px; }
.crumb-choice span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb-choice:hover, .crumb-choice:focus { background: var(--surface-2); outline: none; }
.crumb-choice.current { background: var(--accent-soft); }
.crumb-choice.current code { color: var(--accent-text); font-weight: 650; }
.top nav { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; white-space: nowrap; }
.top nav a:hover, .top nav a.current { color: var(--text); }
.icon-button { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; width: 36px; height: 34px; cursor: pointer; font-size: 17px; flex: none; }
/* three blocks: this site's pages; the links out; the feed and the theme */
.header-links { display: flex; gap: 14px; }
/* the current release, before Home */
.header-pages .release { align-self: center; font: 600 12.5px/1 var(--mono); color: var(--muted); border: 1px solid var(--line);
	border-radius: 999px; padding: 6px 9px; white-space: nowrap; }
.header-pages, .header-out, .header-end { display: flex; gap: 6px; }
.icon-button { display: inline-grid; place-items: center; padding: 0; }
a.icon-button, .header-links button.icon-button { color: var(--muted); text-decoration: none; }
a.icon-button:hover, .header-links button.icon-button:hover { color: var(--text); border-color: var(--line-strong); }
/* the page the reader is on, its button lit */
.top nav a.icon-button.current { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent); }

/* the two panes */
.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 58px); }
.side { position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto; border-right: 1px solid var(--line); background: var(--surface);
	padding: 8px 6px 16px; scrollbar-width: thin; }
.side-nav { display: grid; gap: 1px; }
.side-group, .side-module { display: grid; text-decoration: none; color: var(--text); border-radius: 4px; }
.side-heading { margin: 4px 8px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.side-search { position: relative; margin: 2px 2px 6px; }
.side-filter { width: 100%; height: 30px; border: 1px solid var(--line-strong); background: var(--bg); border-radius: 4px; padding: 0 28px 0 8px; font-size: 13.5px; }
.side-search kbd { position: absolute; right: 7px; top: 6px; border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 4px; font-size: 11px; color: var(--faint); pointer-events: none; }
.side-filter:focus + kbd, .side-filter:not(:placeholder-shown) + kbd { display: none; }
.side-list { display: grid; gap: 1px; }
.side-empty { margin: 6px 8px; font-size: 13px; color: var(--muted); }
.side-all { display: block; margin: 8px 8px 0; font-size: 13px; }
.side-group { grid-template-columns: 1fr auto; column-gap: 8px; padding: 3px 8px; position: relative; }
.side-group code { background: none; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.side-title { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.side-count { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; align-self: center; }
.side-group:hover, .side-module:hover { background: var(--surface-2); }
.side-group.current { background: var(--accent-soft); }
.side-group.current code { color: var(--accent-text); }
.side-group.current::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: var(--accent); }
.side-modules { display: grid; gap: 0; margin: 1px 0 4px 12px; padding-left: 8px; border-left: 1px solid var(--line); }
.side-module { padding: 1px 6px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.side-module.current { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }
.detail { min-width: 0; padding: 14px clamp(12px, 2vw, 24px) 0; max-width: 1240px; }
.detail.flush { padding-top: 0; }
/* the introduction, Performance and the server's page: one pane, centred */
body.no-side .shell { grid-template-columns: minmax(0, 1fr); }
body.no-side .side, body.no-side .menu-button { display: none; }
body.no-side .detail { width: 100%; margin: 0 auto; padding-top: 18px; }
.g-body > .g-head { padding-top: 10px; }
@media (max-width: 960px) {
	.shell { grid-template-columns: minmax(0, 1fr); }
	.menu-button { display: inline-block; }
	.side { position: fixed; z-index: 35; top: 58px; left: 0; width: min(320px, 86vw); box-shadow: var(--shadow); transform: translateX(-102%); transition: transform 0.2s; }
	body.side-open .side { transform: none; }
	body.side-open::after { content: ""; position: fixed; inset: 58px 0 0 0; background: rgb(0 0 0 / 25%); z-index: 34; }
}
@media (max-width: 700px) {
	.top { padding: 0 12px; gap: 8px; }
	.top nav { gap: 6px; }
	.header-links { gap: 8px; }
	.header-pages, .header-out, .header-end { gap: 4px; }
	/* no room for the feed's button on phones */
	.top nav a.rss { display: none; }
	.icon-button { width: 32px; height: 32px; }
	body:not(.no-side) .top nav a[data-section="details"] { display: none; }
	/* and the bugs found upstream beside a trail, which keeps its room: the
	   button is on every page without one */
	body:not(.no-side) .top nav a[data-section="upstream"] { display: none; }
	/* the logo is the way home on phones */
	.top nav a[data-section="home"] { display: none; }
	.brand .logo { height: 32px; }
	/* on phones, beside a trail: the cube alone, then the name */
	body.has-crumbs .brand .logo.light, body.has-crumbs .brand .logo.dark { display: none !important; }
	body.has-crumbs .brand .logo.icon { display: block; height: 30px; }
	.crumbs-bar > .crumb-sep:first-child { display: none; }
	body.has-crumbs .top .crumbs-bar { margin-left: 0; }
	.detail { padding: 12px 12px 0; }
	body.no-side .detail { padding-top: 12px; }
}
/* narrow phones: the cube alone, so the header's buttons fit */
@media (max-width: 420px) {
	.top { gap: 6px; }
	.header-pages .release { display: none; }
	.header-links { gap: 6px; }
	.header-pages, .header-out, .header-end { gap: 3px; }
	.icon-button { width: 30px; }
	.brand .logo.light, .brand .logo.dark { display: none !important; }
	.brand .logo.icon { display: block; height: 30px; }
	.top .crumbs-bar { margin-left: 0; }
	.crumbs-bar > .crumb-sep:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* home */
.hero { padding: 0; }
.hero h1 { font-size: clamp(26px, 3.2vw, 38px); max-width: 22em; margin-bottom: 8px; }
.lead { font-size: 17px; color: var(--muted); max-width: 48em; margin: 0 0 10px; }
/* the headline's lines, alternating sides */
.lead-lines { display: grid; gap: 4px; margin: 4px 0 14px; }
.lead-line { margin: 0; font-size: 18px; line-height: 1.4; max-width: 70%; justify-self: start; padding: 2px 0 2px 12px; border-left: 3px solid var(--accent); color: var(--text); }
/* a block's paragraphs, a thin line under each but the last, as wide as
   its text, as in the intro */
.lead-line p { margin: 0 0 6px; width: fit-content; }
.lead-line p:not(:last-child) { border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; }
@media (max-width: 600px) { .lead-line { font-size: 16px; max-width: 95%; } .lead-line br { display: none; } }
.intro { max-width: 46em; color: var(--text); }
.intro p { margin: 0 0 6px; }
/* a thin line under each of the intro's blocks but the last, as wide as
   the block's text */
.intro p:not(:last-child) { border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; }
/* the home page's intro, on the right, opposite the lead */
.hero .intro { margin-left: auto; text-align: right; padding: 2px 12px 2px 0; border-right: 3px solid var(--accent); }
.hero .intro p { width: fit-content; margin-left: auto; }
/* the intro's own line breaks are for wide screens; a phone wraps it */
@media (max-width: 600px) { .intro br { display: none; } }
.runs-on { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; margin: 8px 0 12px; font-size: 14px; color: var(--muted); }
.runs-on .system { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 4px; padding: 0 8px; color: var(--text); }
.runs-on .system svg { color: var(--ok); flex: none; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 6px 0; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.fact b { font-size: 20px; letter-spacing: -0.01em; }
.fact span { color: var(--muted); font-size: 14px; }
.fact small { color: var(--faint); font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 10px 0 4px; }
.stat { display: grid; align-content: start; gap: 1px; padding: 8px 12px; background: var(--surface); text-decoration: none; color: var(--text); min-width: 0; }
.stat b { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat span { font-size: 13px; color: var(--muted); line-height: 1.35; }
a.stat:hover { background: var(--surface-2); }
.section-title { margin: 18px 0 8px; }
.section-title h2 { margin: 0 0 2px; font-size: 20px; }
.section-title p { margin: 0; color: var(--muted); max-width: 54em; }
.g-body > .section-title:first-child { margin-top: 6px; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.group-tile { display: grid; gap: 2px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 9px 12px; text-decoration: none; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.group-tile:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tile-head code { background: none; padding: 0; color: var(--accent-text); font-weight: 650; font-size: 14px; }
.group-tile b { font-size: 15.5px; }
.group-tile p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.home-groups { margin-top: 14px; }
/* the owner's sections of groups on the home page: a title over its tiles */
.home-section h2 { margin: 22px 0 -4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
/* a home tile: its pattern and title along the top, the count of modules in
   the bottom right corner, level across a row; a group's modules as tiles too */
.home-groups .group-tile, .tiles .group-tile { display: flex; flex-direction: column; gap: 4px; }
.home-groups .tile-head b { text-align: right; }
.home-groups .tile-foot { margin-top: auto; justify-content: flex-end; }
/* a module opened: a page of its own */
.module-page { margin-top: 8px; }
.module-head { padding: 8px 12px 6px; }
.module-head h2 { margin: 0; font-size: 19px; }
.module-head h2 code { background: none; padding: 0; color: var(--accent-text); font-weight: 650; }
.module-head p { margin: 2px 0 0; color: var(--muted); }
/* the code and what it printed, on their own above the summary's boxes */
.code-output.in-code { margin: 0 0 8px; }
.code-output.in-code .code-pane, .code-output.in-code .code-pane pre, .code-output.in-code .code-pane .pane-label { background: var(--surface); }
.tile-foot { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--faint); margin-top: 4px; }
.tile-foot .has { color: var(--accent-text); background: var(--accent-soft); border-radius: 4px; padding: 0 8px; }
.get { display: flex; align-items: center; gap: 8px; min-width: 0; }
.get code { overflow-x: auto; white-space: nowrap; flex: 1; min-width: 0; }

/* a group */
.g-head { padding: 0; }
.g-pattern { font-family: var(--mono); font-size: 14px; font-weight: 650; color: var(--accent-text); background: var(--accent-soft); display: inline-block; padding: 1px 8px; border-radius: 3px; }
.g-head h1 { margin: 6px 0 2px; font-size: clamp(24px, 2.8vw, 32px); }
.g-purpose { font-size: 16.5px; color: var(--muted); max-width: 52em; margin: 0; }
.g-tabs { position: sticky; top: 58px; z-index: 20; display: flex; gap: 2px; overflow-x: auto; margin: 0; border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); scrollbar-width: none; }
.g-tabs a { display: flex; align-items: center; gap: 6px; padding: 8px 12px 7px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px;
	border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.g-tabs a:hover { color: var(--text); }
.g-tabs a.current { color: var(--accent-text); border-bottom-color: var(--accent); }
.g-tabs .count { font-size: 11.5px; font-weight: 650; color: var(--accent-text); background: var(--accent-soft); border-radius: 4px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.g-tabs .count.zero { color: var(--faint); background: var(--surface-2); }
.g-body { padding-top: 2px; min-height: 50vh; }
.empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 10px 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; min-width: 0; }
.card-title { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.problem { margin: 0 0 8px; color: var(--muted); max-width: 60em; }
.notice { margin: 8px 0 0; padding: 7px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 4px 4px 0; }
.side-by-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (max-width: 1100px) { .side-by-side { grid-template-columns: minmax(0, 1fr); } }
.code-pane, .snippet, .output-pane { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; min-width: 0; }
.code-pane pre, .snippet pre, .tab-pane > pre { padding: 8px 10px; overflow-x: auto; font-size: var(--code-size); line-height: 1.55; background: var(--code-bg); }
.pane-label { padding: 4px 10px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pane-label.dark { background: #1d2029; color: #b9bfd0; border-bottom-color: #2a2f3d; }
.code-pane.usual .pane-label { background: var(--usual-soft); color: var(--usual); }
.code-pane.with .pane-label { background: var(--accent-soft); color: var(--accent-text); }
.output-pane { background: #14161d; border-color: #2a2f3d; }
.output-pane pre.output { border-radius: 0; max-height: 520px; }
.code-output { align-items: start; }
.code-output .code-pane pre { max-height: 520px; overflow: auto; }
.tab-pane > pre { border: 1px solid var(--line); border-radius: 5px; }
.output-title { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
pre.output { padding: 8px 10px; overflow: auto; max-height: 460px; font-size: var(--code-size); line-height: 1.5; background: #14161d; color: #e3e6ee; border-radius: 5px; }
pre.output .out-head { color: #ffd28a; }
.output-pane .pills button { background: #1d2029; border-color: #2a2f3d; color: #b9bfd0; }
.output-pane .pills { padding: 6px 10px 0; margin: 0; }
.output-pane .choose-label { color: #8a90a3; }
.run-meta { font-size: 12.8px; color: var(--faint); margin: 6px 0 0; }
.choose-label { font-size: 13px; color: var(--faint); margin: 8px 0 4px; }
.tabs, .pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; align-items: center; }
.tabs button, .pills button { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 2px 10px; font-size: 13.5px; cursor: pointer; color: var(--muted); }
.tabs button[aria-selected="true"], .pills button[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

/* where a group sits */
.neighbours { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.neighbours h5 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); }
.neighbours .centre code { display: inline-block; padding: 6px 12px; border-radius: 5px; border: 1.5px solid var(--hot); background: var(--hot-soft); font-weight: 700; font-size: 14px; }
.neighbours p { margin: 0; }
@media (max-width: 760px) { .neighbours { grid-template-columns: minmax(0, 1fr); } }
.group-chip { display: inline-flex; gap: 6px; align-items: baseline; }
.group-chip code { background: none; padding: 0; font-weight: 650; }
.group-chip span { font-size: 11.5px; color: var(--faint); font-family: var(--text-font); }
.chip.plain { font-family: var(--text-font); font-size: 13.5px; color: var(--text); background: var(--surface-2); }

/* what a module was checked against */
.checked { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.checked li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; }
.kind { font-size: 11.5px; font-weight: 650; border-radius: 3px; padding: 2px 7px; text-align: center; white-space: nowrap; border: 1px solid; }
.kind-suite { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.kind-servers, .kind-systems { color: var(--busy); border-color: var(--busy); background: var(--busy-soft); }
.kind-libraries, .kind-measured { color: var(--hot); border-color: var(--hot); background: var(--hot-soft); }
.kind-reference { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.kind-fuzzed, .kind-model, .kind-tests { color: var(--muted); border-color: var(--line-strong); background: var(--surface-2); }
.fact-module { font-family: var(--mono); font-size: 12.5px; margin-right: 6px; }
.quote { margin-top: 2px; }
.quote summary { cursor: pointer; font-family: var(--mono); font-size: 11.5px; color: var(--faint); list-style: none; }
.quote summary::-webkit-details-marker { display: none; }
.quote summary::before { content: "▸ "; }
.quote[open] summary::before { content: "▾ "; }
.quote blockquote { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--line-strong); color: var(--muted); font-size: 13px; background: var(--surface-2); border-radius: 0 3px 3px 0; }
@media (max-width: 600px) { .checked li { grid-template-columns: minmax(0, 1fr); gap: 3px; } .kind { justify-self: start; } }

/* comparison sections */
.prose { max-width: 70em; min-width: 0; }
.prose pre { overflow-x: auto; padding: 10px 12px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px; font-size: var(--code-size); margin: 8px 0; }
.prose p { margin: 6px 0; }
.prose h4 { margin: 12px 0 4px; font-size: 15.5px; }
.prose h5 { margin: 10px 0 2px; font-size: 14.5px; }
.prose ul, .prose ol { margin: 4px 0 6px; padding-left: 20px; }
.prose li { margin: 1px 0; }
.prose table { font-size: 13.5px; }
.prose table.matrix th:first-child { white-space: nowrap; }
.compared .source { margin-bottom: 8px; }

/* measurements */
.bars { display: grid; grid-template-columns: minmax(90px, 230px) minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; margin: 6px 0; font-size: 14px; }
.bar-row { display: contents; }
.bar-name { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; color: var(--muted); }
.bar-track { background: var(--surface-2); border-radius: 3px; height: 18px; overflow: hidden; }
.bar { display: block; height: 100%; background: var(--line-strong); border-radius: 3px; }
.bar-row.ours .bar { background: var(--accent); }
.bar-row.ours .bar-name { color: var(--accent-text); font-weight: 700; }
.bar-value { font-variant-numeric: tabular-nums; min-width: 64px; max-width: 16em; text-align: right; overflow-wrap: anywhere; font-size: 13.5px; }
.bar-note { font-size: 12.8px; color: var(--faint); margin: 4px 0 0; }
.caption { font-size: 14px; color: var(--muted); margin: 6px 0 2px; }
.measured-how, .source { font-size: 12.8px; color: var(--faint); margin: 2px 0; overflow-wrap: anywhere; }
.numbers summary { cursor: pointer; font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.table-wrap { overflow-x: auto; margin-top: 6px; }
table { border-collapse: collapse; font-size: 13.5px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
thead th { background: var(--surface-2); font-weight: 600; }
table.matrix td.cell-yes { color: var(--ok); font-weight: 600; }
table.matrix td.cell-no { color: var(--faint); }
.measured-group { margin: 16px 0 -2px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.measured-section { margin-top: 16px; }
.measured-section > h2 { margin-bottom: 0; }
.measured-module .card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.module-link { font-family: var(--mono); font-size: 17px; text-decoration: none; }
.card-sub { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.measure-tabs { margin-top: 8px; }
.against { margin: 4px 0 6px; color: var(--muted); font-size: 14.5px; }
.choices { display: grid; gap: 0; margin-bottom: 4px; }
.choices .pills { margin: 2px 0; }
.bar-row.missing .bar-text { grid-column: 2 / 4; font-size: 13px; color: var(--faint); }
/* what is not measured yet (a measurement's pending), marked "in progress":
   a library's bar drawn empty, its outline dashed, the words where its value
   would be; a scenario's pill dashed and marked; a scenario chosen shows one
   such empty bar where the chart would be. The dashes are --faint, the words
   --muted: dashes in --muted stood out above the measured bars in dark */
.bar-row.pending .bar-track { background: none; }
.bar-row.pending .bar { width: 100%; background: none; border: 1px dashed var(--faint); }
.bar-row.pending .bar-value { color: var(--muted); font-size: 13px; }
.pills button.pending { border-style: dashed; border-color: var(--faint); }
.pills button.pending[aria-selected="true"] { border-color: var(--accent); }
.pending-mark { margin-left: 2px; font-size: 11.5px; font-weight: 400; color: var(--faint); }
.pills button.pending[aria-selected="true"] .pending-mark { color: var(--accent-text); }
.pending-scenario { margin: 6px 0; padding: 4px 10px; border: 1px dashed var(--faint); border-radius: 3px; color: var(--muted); font-size: 13.5px; }
.in-progress { font-size: 12.8px; color: var(--muted); margin: 4px 0 0; }
.in-progress::before { content: ""; display: inline-block; width: 18px; height: 9px; margin-right: 6px; border: 1px dashed var(--faint); border-radius: 2px; }
table.matrix tr.ours th, table.matrix tr.ours td { background: var(--accent-soft); }
table.matrix tr.ours th { color: var(--accent-text); }

/* stages */
.stages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.stage-button { display: grid; gap: 1px; text-align: left; border: 1.5px solid var(--border-decision); background: var(--card-decision); border-radius: 5px; padding: 5px 10px; cursor: pointer; }
.stage-button small { color: var(--faint); font-size: 12px; }
.stage-button[aria-selected="true"] { border-color: var(--hot); box-shadow: 0 0 0 3px var(--hot-soft); }
.stage-arrow { color: var(--faint); font-size: 18px; }
.stage-panel { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
.stage-panel h4 { margin: 0 0 4px; }
.stage-panel p { margin: 0 0 8px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: 12.8px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 10px; text-decoration: none; color: var(--text); background: var(--surface); }
.chip:hover { border-color: var(--accent); }

/* recorded flows */
.flow-intro, .flow-summary { color: var(--muted); margin: 0 0 8px; }
.scenario { border: 1px solid var(--line); border-radius: 4px; margin: 6px 0 10px; }
.scenario summary { cursor: pointer; padding: 6px 12px; font-size: 14px; color: var(--muted); }
.scenario pre { padding: 4px 14px 12px; font-size: var(--code-size); overflow-x: auto; }
.chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px; margin: 2px 0 8px; }
.chapter { display: flex; gap: 8px; align-items: flex-start; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 7px 10px; cursor: pointer; font-size: 13.5px; color: var(--muted); }
.chapter-number { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 4px; background: var(--surface-2); font-weight: 700; font-size: 12px; }
.chapter.current { border-color: var(--hot); color: var(--text); background: var(--hot-soft); }
.chapter.current .chapter-number { background: var(--hot); color: #fff; }
.stage-frame { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface);
	background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.edge path { fill: none; }
.edge path.line { stroke: var(--line-strong); stroke-width: 1.6; }
.edge.taken path.line { stroke: var(--faint); }
.edge.active path.line { stroke: var(--hot); stroke-width: 3; }
.edge .hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: help; }
.edge .badge { pointer-events: all; cursor: help; }
.edge .badge circle { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.4; }
.edge .badge text { fill: var(--muted); font: 600 11.5px var(--text-font); text-anchor: middle; dominant-baseline: central; }
.edge.active .badge circle { fill: var(--hot); stroke: var(--hot); }
.edge.active .badge text { fill: #fff; }
.pulse { fill: var(--hot); }
.node { position: absolute; border-radius: 5px; border: 1.5px solid var(--border-effect); background: var(--card-effect); padding: 8px 11px; overflow: hidden; cursor: help;
	transition: border-color 0.25s, box-shadow 0.25s; }
.node.kind-outside { background: var(--card-outside); border-color: var(--border-outside); border-style: dashed; }
.node.kind-decision { background: var(--card-decision); border-color: var(--border-decision); }
.node.kind-state { background: var(--card-state); border-color: var(--border-state); }
.node .title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.node .module { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.node .module.outside { font-family: var(--text-font); font-style: italic; }
.node .lines { display: grid; gap: 1px; font-size: 12.5px; }
.node .lines div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.node .lines b { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .lines b.changed { animation: flash 1.2s ease-out; border-radius: 2px; }
@keyframes flash { 0% { background: var(--hot-soft); color: var(--hot); } 100% { background: transparent; } }
.node.status-busy { border-color: var(--busy); box-shadow: 0 0 0 3px var(--busy-soft); }
.node.status-ok { border-color: var(--ok); border-style: solid; }
.node.status-error { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-soft); border-style: solid; }
.node.status-off { opacity: 0.75; border-style: dashed; }
.node.active { border-color: var(--hot); border-style: solid; box-shadow: 0 0 0 4px var(--hot-soft), var(--shadow); }
.cells { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--faint); }
.cells[hidden] { display: none; }
.cells .cell { min-width: 30px; height: 22px; padding: 0 4px; border-radius: 3px; border: 1px dashed var(--line-strong); display: inline-grid; place-items: center; font-weight: 600; font-size: 11.5px; }
.cells .cell.full { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .node, .node .lines b.changed { transition: none; animation: none; } }
.controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.controls .ctl { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; height: 34px; min-width: 36px; padding: 0 10px; cursor: pointer; }
.controls .ctl.play { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.controls input[type="range"] { flex: 1 1 180px; accent-color: var(--accent); }
.controls .where { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; white-space: nowrap; }
.step-box { margin-top: 8px; border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; background: var(--surface-2); }
.step-text { font-size: 17px; margin: 0 0 4px; }
.step-meta { font-size: 13px; color: var(--faint); margin: 0 0 8px; }
.tab-panel p { margin: 0 0 8px; }
.code-ref { border: 1px solid var(--line); border-radius: 4px; margin-top: 8px; overflow: hidden; background: var(--surface); }
.code-ref header { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); font-family: var(--mono); flex-wrap: wrap; }
.code-ref pre { padding: 8px 10px; font-size: var(--code-size); overflow: auto; max-height: 280px; }
.asker { display: flex; gap: 6px; }
.asker input { flex: 1; min-width: 0; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 4px; padding: 6px 10px; }
.asker button { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; padding: 0 14px; cursor: pointer; font-weight: 600; }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.suggestions button { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 3px 10px; font-size: 13px; cursor: pointer; color: var(--muted); }
.results { display: grid; gap: 6px; margin-top: 8px; }
.result { border: 1px solid var(--line); border-radius: 4px; padding: 9px 11px; background: var(--surface); overflow-wrap: anywhere; min-width: 0; }
.result h4 { margin: 0 0 4px; font-size: 14.5px; }
.result p { margin: 0 0 6px; font-size: 14.5px; }
.ai-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13.5px; }
.timeline { max-height: 320px; overflow: auto; margin: 0; padding: 0; list-style: none; font-size: 13.5px; position: relative; }
.timeline li { display: grid; grid-template-columns: 48px 24px 1fr; gap: 6px; padding: 4px 6px; border-radius: 3px; cursor: pointer; }
.timeline li:hover { background: var(--surface); }
.timeline li.current { background: var(--hot-soft); }
.timeline li.future { color: var(--faint); }
.timeline .t, .timeline .e { color: var(--faint); font-variant-numeric: tabular-nums; }
.recorded { font-size: 12.5px; color: var(--faint); margin: 8px 0 0; }
.tooltip { position: fixed; z-index: 60; max-width: 320px; background: var(--text); color: var(--bg); border-radius: 4px; padding: 7px 10px; font-size: 13px; pointer-events: none; }
.tooltip[hidden] { display: none; }

/* modules */
.modules { display: grid; gap: 4px; }
.module { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; scroll-margin-top: 100px; }
.card, .measured-module { scroll-margin-top: 100px; }
.card .module { background: var(--bg); }
.module[open] { border-color: var(--line-strong); }
.module > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 5px 10px; }
.module > summary::-webkit-details-marker { display: none; }
.module .name { font-family: var(--mono); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.module .line { color: var(--muted); font-size: 14.5px; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: end; }
@media (max-width: 760px) { .module > summary { grid-template-columns: minmax(0, 1fr); gap: 3px; } .tags { justify-content: start; } }
.badge, .tag { font-size: 11.5px; border-radius: 4px; padding: 1px 8px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.badge.verified { border-color: var(--ok); color: var(--ok); }
.badge.new { border-color: var(--hot); color: var(--hot); }
.tag.role { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.tag.third { border-color: var(--hot); color: var(--hot); }
.tag.warn { border-color: var(--error); color: var(--error); }
.tag.measured { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.tag.checks { border-color: var(--busy); color: var(--busy); }
.module-summary { font-size: 15.5px; }
.module-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 4px; }
.module-grid.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .module-grid { grid-template-columns: minmax(0, 1fr); } }
.checked-box h5, .module-measures h5 { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); }
.module-measures { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px; }
.module-body { padding: 4px 10px 10px; border-top: 1px dashed var(--line); display: grid; gap: 6px; }
.module-body p { margin: 4px 0 0; }
.replaces { font-size: 14.5px; }
.deps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 0.8fr) minmax(0, 1fr); gap: 10px; align-items: center; }
@media (max-width: 640px) { .deps { grid-template-columns: minmax(0, 1fr); } }
.deps .col { display: grid; gap: 5px; }
.deps h5 { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.mini { border: 1.3px solid var(--border-effect); background: var(--card-effect); border-radius: 4px; padding: 3px 8px; font-family: var(--mono); font-size: 12.5px; text-decoration: none; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
a.mini:hover { border-color: var(--accent); }
.mini.center { border-color: var(--hot); background: var(--hot-soft); font-weight: 700; text-align: center; padding: 6px; }
.mini.none { font-family: var(--text-font); color: var(--faint); border-style: dashed; }
.more { font-size: 12.5px; color: var(--faint); }
.copy { border: 1px solid var(--line); background: var(--surface-2); border-radius: 3px; padding: 3px 10px; cursor: pointer; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.copy.done { color: var(--ok); border-color: var(--ok); }
.tok-k { color: #a2378f; } .tok-s { color: #1f7a45; } .tok-c { color: var(--faint); font-style: italic; } .tok-f { color: #3555c0; } .tok-n { color: #b45c0c; }
:root[data-theme="dark"] .tok-k { color: #e48bd3; } :root[data-theme="dark"] .tok-s { color: #7fd8a3; } :root[data-theme="dark"] .tok-f { color: #93abff; } :root[data-theme="dark"] .tok-n { color: #f5b06b; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .tok-k { color: #e48bd3; } :root:not([data-theme="light"]) .tok-s { color: #7fd8a3; }
	:root:not([data-theme="light"]) .tok-f { color: #93abff; } :root:not([data-theme="light"]) .tok-n { color: #f5b06b; }
}
footer.bottom { border-top: 1px solid var(--line); margin-top: 24px; padding: 12px 0 18px; color: var(--muted); font-size: 13.5px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 28px; text-align: right; }
@media (max-width: 600px) {
	.bars { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
	.bar-row .bar-name { grid-column: 1 / -1; margin-top: 4px; }
	.bar-row.missing .bar-text { grid-column: 1 / -1; }
}

/* the source viewer's widget */
.source-frame { display: block; width: 100%; border: 0; background: transparent; }
.source-none { margin: 4px 2px; }
.source-card { padding: 8px 10px; }
.module-tabs { margin: 2px 0 0; }
.module-about { display: grid; gap: 6px; }
.module-source { display: grid; gap: 6px; }
.module-source .browse { font-size: 14px; }

/* how this server runs: #/server-how-it-works */
.server-head h1 { display: flex; align-items: center; gap: 12px; }
.server-head h1 svg { width: 0.8em; height: 0.8em; color: var(--accent); flex: none; }
.server-head .lead { max-width: 60em; }
/* the programs built with goframework: #/apps-build-on */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; align-items: start; margin-top: 6px; }
.app-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px 14px; display: grid; gap: 8px; }
.app-head { display: flex; align-items: center; gap: 12px; }
.app-logo { width: 44px; height: 44px; flex: none; border-radius: 8px; }
.app-logo.letter { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font: 700 22px var(--mono); text-transform: uppercase; }
.app-name { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--accent-text); text-decoration: none; overflow-wrap: anywhere; }
.app-name::after { content: " ↗"; font-weight: 400; font-size: 0.85em; }
.app-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-about { margin: 0; color: var(--muted); }
.app-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }

/* the projects the server runs on, wherever the page names them */
a.project { font-family: var(--mono); font-size: 0.86em; font-weight: 600; color: var(--accent-text); background: var(--accent-soft);
	padding: 1px 6px; border-radius: 3px; text-decoration: none; white-space: nowrap; }
a.project::after { content: " ↗"; font-weight: 400; }
a.project:hover { text-decoration: underline; text-underline-offset: 3px; }
.server-diagram .node-link .node-label { fill: var(--accent-text); }
.server-diagram .node-link .node-out { font-weight: 400; }
.server-diagram .node-link:hover rect { stroke: var(--accent); stroke-width: 2; }
.server-diagram .node-link:hover .node-label { text-decoration: underline; }
.diagram-wrap { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); }
.server-diagram { display: block; width: 100%; height: auto; font-family: var(--text-font); }
.server-diagram .node-box rect { fill: var(--card-decision); stroke: var(--border-decision); stroke-width: 1.4; }
.server-diagram .node-box.outside rect { fill: var(--card-outside); stroke: var(--border-outside); stroke-dasharray: 5 4; }
.server-diagram .node-box.store rect { fill: var(--card-state); stroke: var(--border-state); }
.server-diagram .node-label { font-size: 13.5px; font-weight: 700; fill: var(--text); }
.server-diagram .node-note { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.server-diagram .edge-line { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.server-diagram .edge-head { fill: var(--faint); }
.server-diagram .edge-label { font-family: var(--mono); font-size: 11px; fill: var(--accent-text); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.config .source { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.config .source code { overflow-wrap: anywhere; }
/* the files at full length, long lines wrapped: the page scrolls, not they */
pre.config-text { margin: 0; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--code-size); line-height: 1.5; background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px; }

/* pictures (a group's atlas and pictures blocks): every picture at its own
   pixels, never wider than its column; one opens alone in a new tab */
.picture-link { display: block; width: fit-content; max-width: 100%; line-height: 0; }
.picture-link img { display: block; max-width: 100%; height: auto; }
.picture-link:focus-visible { outline-offset: 3px; }
/* the atlas: the chosen look's picture beside what it is, the tiles under
   both, filtered by decade; the tiles scroll within their box */
.atlas { display: grid; gap: 10px; margin-top: 4px; }
.atlas-view { display: grid; grid-template-columns: minmax(0, auto) minmax(220px, 1fr); gap: 6px 18px; align-items: start; margin: 0; scroll-margin-top: 110px; }
.atlas-caption { display: grid; gap: 6px; align-content: start; padding-top: 2px; }
.atlas-label { font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; }
.atlas-line { color: var(--muted); font-size: 14.5px; }
.atlas-line .chip { font-size: 12.5px; padding: 1px 7px; white-space: nowrap; }
.atlas-summary { font-size: 15px; }
@media (max-width: 1100px) { .atlas-view { grid-template-columns: minmax(0, 1fr); } }
.atlas-decades .pills { margin: 0; }
.pill-count { font-size: 11.5px; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
.pills button[aria-selected="true"] .pill-count { color: var(--accent-text); }
.atlas-tiles { display: grid; grid-template-columns: repeat(auto-fill, 246px); justify-content: start; gap: 8px; max-height: 550px; overflow-y: auto;
	padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); scrollbar-width: thin; overscroll-behavior: contain; }
.atlas-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: baseline; padding: 6px 6px 5px; text-align: left; cursor: pointer;
	border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--text); font-size: 13.5px; line-height: 1.3; }
.atlas-tile img { grid-column: 1 / -1; display: block; width: 232px; max-width: 100%; height: auto; margin-bottom: 4px; }
.atlas-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-year { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.atlas-tile:hover { border-color: var(--line-strong); }
.atlas-tile[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.atlas-tile[aria-checked="true"] .atlas-name { color: var(--accent-text); }
.atlas-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
	.atlas-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 380px; padding: 6px; }
	.atlas-tile img { width: 100%; }
}
/* the screenshots, chosen by system, look and light or dark */
.shots .picture-link { margin: 6px 0 2px; }


/* the bugs found in other projects: #/found-upstream */
.bug-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; color: var(--muted); }
.bug-tally b { color: var(--text); font-weight: 600; }
.bug-count { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.bug-list { display: grid; gap: 10px; max-width: 64em; }
.bug-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 16px 14px; min-width: 0; }
.bug-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bug-project { font-size: 15px; }
.bug-part { color: var(--muted); }
.bug-part::before { content: " · "; color: var(--faint); }
.bug-date { margin-left: auto; color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.badge.status-reported { border-color: var(--busy); color: var(--busy); background: var(--busy-soft); }
.badge.status-fixed { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.badge.status-to-report { border-color: var(--hot); color: var(--hot); background: var(--hot-soft); }
.bug-title { font-size: 18.5px; line-height: 1.3; margin: 8px 0 4px; }
.bug-versions { margin: 0 0 6px; color: var(--muted); font-size: 14.5px; }
.bug-versions b { color: var(--text); font-weight: 600; }
.bug-what { margin: 0 0 10px; }
.bug-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px; margin: 0 0 8px; }
.bug-facts > div { background: var(--surface-2); border-radius: 4px; padding: 8px 11px; }
.bug-facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); }
.bug-facts dd { margin: 3px 0 0; font-size: 15px; }
.bug-link { margin: 0; font-size: 14.5px; }
.bug-host { font-family: var(--mono); font-size: 0.88em; color: var(--muted); }