/*
 * IAMB.AI. Dark first, a light mode, and two values only: black and white, with bits falling behind the page.
 *
 * Tokens (--ic-*) per mode on :root[data-mode]; every component reads them. The site layer's markup (gts-*),
 * the plugins (--gtm-*, --gtc-*, --gtchat-*, --gtb-*, --gtl-*) and the app on the public site (--slr-*) take
 * their colours from the same tokens at the end of this file.
 *
 * Type: ICAI Block everywhere (PD-453, the owner's option B: the wordmark's blocks as the site's one face), but for the
 * running text of the theme's pages and of tickets, in ICAI Text (--ic-font-body: Light's capitals with a lowercase; the
 * owner, 2026-10-22, "ICAI Text: SHIP"), and the small labels over a heading, in ICAI Block Light. Kept in
 * other faces, where one case would get in the way: code and the code and LaTeX editors (Cascadia Mono, --ic-font-code),
 * and what people type and what papers say (Atkinson Hyperlegible Next, --ic-font-read): text boxes, the manuscript's
 * editor, a record's abstract, a paper's name. In the app (2026-10-29, PD-590) what changes is ICAI Text: messages,
 * comments, records, descriptions and every box text is typed in. Radius follows hierarchy: pills for actions, a big soft frame for the
 * hero art, nearly square paper. Since 2026-11-02 the faces are chosen under Appearance, Fonts (inc/fonts.php), which
 * prints the --ic-font-* variables after this file: as the site comes, headings, the logo, the menus and tabs in ICAI
 * Block, the labels over a heading in ICAI Block Light, and everything else, the buttons, labels, badges, counts, the
 * reading text and the boxes, in Atkinson Hyperlegible Next (a night on Tiny5, the Google pixel font, "not working
 * out"; the owner asked me to pick).
 */

:root {
	--ic-font-display: "ICAI Block", "Anybody", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
	--ic-font-text: "ICAI Block", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ic-font-mono: "ICAI Block", "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", "Courier New", monospace;
	--ic-font-read: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ic-font-body: "ICAI Text", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ic-font-light: "ICAI Block Light", "ICAI Block", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
	--ic-font-code: "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", "Courier New", monospace;
	--ic-font-menu: "ICAI Block", "Anybody", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif; /* menus and tabs (inc/fonts.php) */
	--ic-wrap: 1200px;
	--ic-gutter: clamp(16px, 4vw, 40px);
	--ic-header-h: 68px;
	--ic-section-y: clamp(72px, 9vw, 136px);
	--ic-radius-sm: 10px;
	--ic-radius: 16px;
	--ic-radius-lg: 28px;
	--ic-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Dark, the default: white on black, and nothing between the two (no grey, no tint). It is the app's theme Zero. */
	--ic-bg: #000000;
	--ic-bg-2: #000000;
	--ic-surface: #000000;
	--ic-surface-2: #000000;
	--ic-line: #ffffff;
	--ic-line-soft: #ffffff;
	--ic-text: #ffffff;
	--ic-muted: #ffffff;
	--ic-faint: #ffffff;
	--ic-pink: #ffffff;
	--ic-pink-soft: #000000;
	--ic-on-pink: #000000;
	--ic-mint: #ffffff;
	--ic-mint-soft: #000000;
	--ic-peach: #ffffff;
	--ic-danger: #ffffff;
	--ic-focus: #ffffff;
	--ic-paper: #ffffff;
	--ic-paper-ink: #000000;
	--ic-glow: 5px 5px 0 #000000, 5px 5px 0 1px #ffffff; /* A hard step, never a glow. */
	color-scheme: dark;
}

:root[data-mode="light"] {
	/* Light: black on white, the same two values swapped. It is the app's theme One. */
	--ic-bg: #ffffff;
	--ic-bg-2: #ffffff;
	--ic-surface: #ffffff;
	--ic-surface-2: #ffffff;
	--ic-line: #000000;
	--ic-line-soft: #000000;
	--ic-text: #000000;
	--ic-muted: #000000;
	--ic-faint: #000000;
	--ic-pink: #000000;
	--ic-pink-soft: #ffffff;
	--ic-on-pink: #ffffff;
	--ic-mint: #000000;
	--ic-mint-soft: #ffffff;
	--ic-peach: #000000;
	--ic-danger: #000000;
	--ic-focus: #000000;
	--ic-paper: #ffffff;
	--ic-paper-ink: #000000;
	--ic-glow: 5px 5px 0 #ffffff, 5px 5px 0 1px #000000;
	color-scheme: light;
}

/* ------------------------------------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ic-header-h) + 16px); }
body {
	margin: 0;
	background: var(--ic-bg);
	color: var(--ic-text);
	font-family: var(--ic-font-text);
	font-size: 1.0625rem;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--ic-focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ic-font-display); font-weight: 760; line-height: 1.05; letter-spacing: -0.01em; }
.ic-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ic-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ic-pink); color: var(--ic-on-pink); font-weight: 700; text-decoration: none; transition: top 0.2s var(--ic-ease); }
.ic-skip:focus { top: 12px; }
.ic-wrap { width: min(100% - 2 * var(--ic-gutter), var(--ic-wrap)); margin-inline: auto; }
.ic-main { min-height: calc(100dvh - var(--ic-header-h)); }

.ic-h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); font-stretch: 112%; font-weight: 800; margin-bottom: 0.4em; }
.ic-h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); font-stretch: 118%; font-weight: 800; }
.ic-h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-stretch: 104%; font-weight: 700; line-height: 1.2; }
.ic-lead { max-width: 62ch; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; color: var(--ic-muted); }
.ic-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.ic-head .ic-lead { margin: 0; }

/* Buttons: pills. The loud one is pink; the quiet one is a line. */
.ic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.7em 1.35em; border: 2px solid transparent; border-radius: 999px; font-family: var(--ic-font-text); font-size: 1rem; font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer; transition: transform 0.15s var(--ic-ease), box-shadow 0.2s var(--ic-ease), background-color 0.2s, color 0.2s, border-color 0.2s; }
.ic-btn--primary { background: var(--ic-pink); color: var(--ic-on-pink); }
.ic-btn--primary:hover { box-shadow: var(--ic-glow); transform: translateY(-1px); }
.ic-btn--ghost { border-color: var(--ic-line); color: var(--ic-text); background: transparent; }
.ic-btn--ghost:hover { border-color: var(--ic-text); }
.ic-btn--quiet { color: var(--ic-muted); padding-inline: 0.6em; }
.ic-btn--sm { min-height: 40px; padding: 0.5em 1em; font-size: 0.95rem; }
.ic-btn:active { transform: translateY(1px); }
.ic-btn .ic-icon { width: 1.05em; height: 1.05em; }
.ic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }

/* ---------------------------------------------------------------------------------------------- header */

.ic-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ic-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.ic-header.is-scrolled, .ic-app-page .ic-header { border-bottom-color: var(--ic-line-soft); }
.ic-header__bar { display: flex; align-items: center; gap: 24px; height: var(--ic-header-h); }
.ic-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ic-text); text-decoration: none; }
.ic-mark { width: 30px; height: 30px; color: var(--ic-text); flex: none; }
.ic-brand__name { font-family: var(--ic-font-display); font-size: 1.45rem; font-weight: 850; font-stretch: 132%; letter-spacing: 0.01em; line-height: 1; }
/* The wordmark (PD-453): the mark's scale, 30px for 32 units, so its blocks line up with the mark's letters. */
.ic-brand__name--mark { display: inline-flex; align-items: center; }
.ic-wordmark { display: block; width: 60px; height: 24px; color: inherit; } /* 55 x 22 units: the wordmark alone, as tall as the mark it stood beside */
.ic-nav { margin-inline: auto; }
.ic-nav ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ic-nav a { display: inline-block; padding: 8px 12px; border-radius: 999px; color: var(--ic-muted); font-weight: 600; font-size: 0.98rem; text-decoration: none; transition: color 0.15s, background-color 0.15s; }
.ic-nav a:hover { color: var(--ic-text); background: var(--ic-surface); }
.ic-header__actions { display: flex; align-items: center; gap: 10px; }
.ic-mode, .ic-menu { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ic-line); border-radius: 999px; background: transparent; color: var(--ic-text); cursor: pointer; }
.ic-mode:hover, .ic-menu:hover { border-color: var(--ic-text); }
.ic-mode .ic-icon--sun, :root[data-mode="light"] .ic-mode .ic-icon--moon { display: none; }
:root[data-mode="light"] .ic-mode .ic-icon--sun { display: block; }
.ic-menu { display: none; }
.ic-menu .ic-icon--close, .ic-menu[aria-expanded="true"] .ic-icon--menu { display: none; }
.ic-menu[aria-expanded="true"] .ic-icon--close { display: block; }
.ic-drawer { border-top: 1px solid var(--ic-line-soft); background: var(--ic-bg); padding: 12px 0 24px; }
.ic-drawer__list { margin: 0 0 16px; padding: 0; list-style: none; }
.ic-drawer__list a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--ic-line-soft); font-family: var(--ic-font-display); font-size: 1.5rem; font-weight: 750; font-stretch: 110%; text-decoration: none; }
.ic-drawer__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

@media (max-width: 960px) {
	.ic-nav, .ic-header__btn { display: none; }
	.ic-menu { display: inline-grid; }
	.ic-header__actions { margin-left: auto; }
}

/* ------------------------------------------------------------------------------------------------ hero */

.ic-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 112px); }
.ic-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ic-hero__title { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5rem); font-weight: 860; font-stretch: 122%; line-height: 0.92; letter-spacing: -0.025em; margin-bottom: 0.32em; text-wrap: balance; }
.ic-hero__lead { max-width: 52ch; margin-bottom: 1.8em; font-size: clamp(1.1rem, 0.98rem + 0.45vw, 1.32rem); line-height: 1.6; color: var(--ic-muted); }
.ic-hero__note { margin: 18px 0 0; font-size: 0.95rem; color: var(--ic-faint); }
/* What the platform is, in its exact words, over the claim (icai_definition()). */
.ic-hero__kicker { max-width: 48ch; margin: 0 0 18px; font-size: 0.98rem; font-weight: 700; line-height: 1.45; color: var(--ic-pink); text-wrap: balance; }
.ic-funnel { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 640px; width: 100%; border-radius: var(--ic-radius-lg); background: radial-gradient(120% 80% at 50% 0%, var(--ic-surface-2), var(--ic-bg-2) 70%); border: 1px solid var(--ic-line-soft); overflow: hidden; }
.ic-funnel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (max-width: 860px) {
	.ic-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-funnel { aspect-ratio: 5 / 4; max-height: 420px; }
}

/* ------------------------------------------------------------------------------------------- sections */

.ic-section { padding: var(--ic-section-y) 0; }
.ic-section + .ic-section { border-top: 1px solid var(--ic-line-soft); }

/* The paper: a drawn first page, then the citation. */
.ic-paper__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ic-sheet { position: relative; margin: 0 14px 14px 0; isolation: isolate; }
.ic-sheet::before { content: ""; position: absolute; inset: 18px -14px -14px 14px; z-index: 0; border-radius: 6px; background: var(--ic-pink); transform: rotate(1.4deg); }
.ic-sheet__page { position: relative; z-index: 1; aspect-ratio: 8.5 / 11; padding: 9% 8%; border-radius: 6px; background: var(--ic-paper); color: var(--ic-paper-ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.06); transform: rotate(-2.2deg); }
.ic-sheet__venue { margin: 0 0 6%; font-size: clamp(0.6rem, 0.5rem + 0.3vw, 0.75rem); font-weight: 700; color: #e63a0b; }
.ic-sheet__title { margin: 0 0 5%; font-family: var(--ic-font-display); font-size: clamp(0.95rem, 0.6rem + 1vw, 1.35rem); font-weight: 800; font-stretch: 96%; line-height: 1.12; }
.ic-sheet__authors { display: flex; gap: 6px; margin: 0 0 8%; }
.ic-sheet__authors span { height: 6px; flex: 1; border-radius: 3px; background: #ffc4b0; }
.ic-sheet__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-content: start; }
.ic-sheet__cols span { height: 5px; border-radius: 3px; background: #ffd2c2; }
.ic-sheet__cols span:nth-child(3n) { width: 78%; }
.ic-sheet__flow { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 8px 0; padding: 10px; border: 1.5px solid #ffc4b0; border-radius: 4px; font-style: normal; }
.ic-sheet__flow b { display: block; height: 9px; border-radius: 3px; background: #ff9a7a; }
.ic-sheet__flow b:nth-child(1) { width: 86%; }
.ic-sheet__flow b:nth-child(2) { width: 66%; }
.ic-sheet__flow b:nth-child(3) { width: 44%; }
.ic-sheet__flow b:nth-child(4) { width: 22%; background: #ff4d1a; }
.ic-paper__name { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.3rem); font-stretch: 100%; font-weight: 780; line-height: 1.12; margin-bottom: 14px; text-wrap: balance; }
.ic-paper__venue { margin: 0 0 4px; font-weight: 700; color: var(--ic-pink); }
.ic-paper__with { margin: 0 0 4px; color: var(--ic-muted); }
.ic-paper__doi { margin: 0 0 24px; color: var(--ic-muted); font-variant-numeric: tabular-nums; }
.ic-paper__doi span { color: var(--ic-faint); }
.ic-paper__text > p { max-width: 60ch; }
.ic-paper__tool { color: var(--ic-text); font-weight: 600; }
.ic-paper .ic-actions { margin-top: 28px; }
.ic-paper__name, .ic-sheet__title { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 860px) {
	.ic-paper__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-sheet { max-width: 320px; }
}

/* How it works: the road, then three pillars. */
.ic-road { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(48px, 6vw, 80px); padding: 0; list-style: none; counter-reset: none; }
.ic-road__stop { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 10px 0 0; }
.ic-road__stop::before { content: ""; position: absolute; top: 21px; left: 44px; right: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ic-line), var(--ic-line)); }
.ic-road__stop.is-last::before { display: none; }
.ic-road__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ic-line); background: var(--ic-bg); font-family: var(--ic-font-display); font-weight: 800; font-size: 1.05rem; color: var(--ic-muted); }
.ic-road__stop.is-last .ic-road__dot { border-color: var(--ic-pink); background: var(--ic-pink); color: var(--ic-on-pink); }
.ic-road__label { margin-top: 10px; font-family: var(--ic-font-display); font-weight: 780; font-stretch: 108%; font-size: 1.12rem; line-height: 1.15; }
.ic-road__text { font-size: 0.92rem; line-height: 1.45; color: var(--ic-muted); padding-right: 6px; }
.ic-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.ic-pillar { padding-top: 22px; border-top: 3px solid var(--ic-line); }
.ic-pillar--ai { border-top-color: var(--ic-mint); }
.ic-pillar .ic-h3 { margin-bottom: 10px; }
.ic-pillar p { margin: 0; color: var(--ic-muted); }

@media (max-width: 1020px) {
	.ic-road { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 36px; }
	.ic-road__stop:nth-child(4)::before { display: none; }
}
@media (max-width: 640px) {
	.ic-road { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.ic-road__stop { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 0 0 22px; }
	.ic-road__stop::before, .ic-road__stop:nth-child(4)::before { display: block; top: 44px; bottom: 0; left: 20.5px; right: auto; width: 3px; height: auto; }
	.ic-road__stop.is-last::before { display: none; }
	.ic-road__dot { grid-row: 1 / span 2; }
	.ic-road__label { margin-top: 8px; }
	.ic-pillars { grid-template-columns: minmax(0, 1fr); }
}

/* BabySLR: the small review before the big one. The claim beside a drawn matrix (one tone, light to dark with the
   count; a dashed cell is a gap), its seven steps, the site's example when one is named, and the honest limits. */
.ic-baby__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-bottom: clamp(44px, 6vw, 76px); }
.ic-baby__kicker { margin: 0 0 12px; font-size: 0.98rem; font-weight: 700; color: var(--ic-pink); }
.ic-baby__tagline { margin: 14px 0 16px; font-family: var(--ic-font-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); font-weight: 760; font-stretch: 100%; line-height: 1.15; text-wrap: balance; }
.ic-baby .ic-lead { margin: 0 0 28px; }
/* The owner's pitch (PD-308): a quote in its own case, after the lead and before the button. */
.ic-baby__pitch { max-width: 62ch; margin: 0 0 28px; padding: 4px 0 4px 18px; border-left: 3px solid var(--ic-pink); font-style: italic; line-height: 1.55; }
.ic-baby__pitch p { margin: 0; }
.ic-baby__pitch a { color: inherit; text-decoration: underline; text-decoration-color: var(--ic-pink); text-underline-offset: 3px; }
.ic-matrix { margin: 0; padding: clamp(16px, 2.4vw, 28px); border: 1px solid var(--ic-line-soft); border-radius: var(--ic-radius-lg); background: var(--ic-surface); }
.ic-matrix__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 0.9vw, 10px); }
.ic-matrix__grid span { aspect-ratio: 5 / 4; border-radius: var(--ic-radius-sm); background: var(--ic-pink); }
.ic-matrix__grid .is-1 { opacity: 0.2; }
.ic-matrix__grid .is-2 { opacity: 0.42; }
.ic-matrix__grid .is-3 { opacity: 0.68; }
.ic-matrix__grid .is-4 { opacity: 1; }
.ic-matrix__grid .is-gap, .ic-matrix__key { background: none; border: 2px dashed var(--ic-faint); }
.ic-matrix__note { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 0.92rem; line-height: 1.4; color: var(--ic-muted); }
.ic-matrix__key { flex: none; width: 22px; height: 18px; border-radius: 5px; }
.ic-baby__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 40px); margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; list-style: none; }
.ic-baby__step { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; align-content: start; padding-top: 18px; border-top: 3px solid var(--ic-line); }
.ic-baby__step.is-last { border-top-color: var(--ic-pink); }
.ic-baby__n { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ic-line); font-family: var(--ic-font-display); font-weight: 800; font-size: 0.95rem; color: var(--ic-muted); }
.ic-baby__step.is-last .ic-baby__n { border-color: var(--ic-pink); background: var(--ic-pink); color: var(--ic-on-pink); }
.ic-baby__label { align-self: center; min-height: 34px; display: flex; align-items: center; font-family: var(--ic-font-display); font-weight: 780; font-stretch: 108%; font-size: 1.12rem; line-height: 1.15; }
.ic-baby__step-text { font-size: 0.95rem; line-height: 1.45; color: var(--ic-muted); }
.ic-baby__show { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin: 0 0 clamp(28px, 4vw, 44px); padding: clamp(20px, 3vw, 32px); border: 1px solid var(--ic-line); border-radius: var(--ic-radius-lg); background: var(--ic-surface); }
.ic-baby__show-text { min-width: 0; flex: 1 1 320px; }
.ic-baby__show .ic-baby__kicker { margin-bottom: 6px; }
.ic-baby__show .ic-h3 { margin: 0 0 6px; overflow-wrap: anywhere; }
.ic-baby__show-counts { margin: 0; color: var(--ic-muted); font-variant-numeric: tabular-nums; }
.ic-baby__honest { max-width: 72ch; margin: 0; padding-left: 16px; border-left: 3px solid var(--ic-mint); color: var(--ic-muted); }
@media (max-width: 1020px) {
	.ic-baby__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.ic-baby__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-matrix { max-width: 440px; }
}
@media (max-width: 640px) {
	.ic-baby__steps { grid-template-columns: minmax(0, 1fr); }
}

/* The plan: the one place the type gets loud. */
.ic-plan { background: var(--ic-bg-2); }
.ic-plan__list { margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.ic-plan__step { display: flex; align-items: baseline; gap: 0.32em; padding: clamp(10px, 1.6vw, 18px) 0; border-bottom: 1px solid var(--ic-line-soft); font-family: var(--ic-font-display); font-size: clamp(1.75rem, 0.9rem + 4.4vw, 5rem); font-weight: 800; font-stretch: 62%; line-height: 1.02; letter-spacing: -0.01em; }
.ic-plan__n { flex: none; color: var(--ic-pink); font-stretch: 100%; font-variant-numeric: tabular-nums; }
.ic-plan__text { text-wrap: balance; }
.ic-plan__step:last-child { border-bottom: 0; }
.ic-plan__step:last-child .ic-plan__text { font-stretch: 150%; font-weight: 900; }
.ic-plan__note { margin: 24px 0 0; color: var(--ic-faint); }

/* Research on research: a line from assisted to autonomous. */
.ic-dial { margin: 0 0 clamp(40px, 5vw, 64px); }
.ic-dial__track { position: relative; height: 10px; margin: 44px 0 28px; border-radius: 999px; background: var(--ic-line-soft); }
.ic-dial__fill { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 999px; background: linear-gradient(90deg, var(--ic-mint), var(--ic-pink)); }
.ic-dial__mark { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ic-bg); border: 3px solid var(--ic-pink); }
.ic-dial__mark b { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); font-size: 0.85rem; font-weight: 700; white-space: nowrap; color: var(--ic-text); }
.ic-dial__mark--today { left: 30%; }
.ic-dial__mark--next { left: 92%; border-style: dashed; border-color: var(--ic-faint); }
.ic-dial__mark--next b { color: var(--ic-faint); }
.ic-dial__ends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); }
.ic-dial__end p { margin: 10px 0 0; color: var(--ic-muted); max-width: 46ch; }
.ic-dial__end--far { text-align: right; justify-self: end; }
.ic-dial__end--far p { margin-left: auto; }
.ic-research__words { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.ic-research__big { font-family: var(--ic-font-display); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); font-weight: 700; font-stretch: 100%; line-height: 1.25; margin: 0; }
.ic-research__words p:last-child { margin: 0; color: var(--ic-muted); }

@media (max-width: 760px) {
	.ic-dial__ends, .ic-research__words { grid-template-columns: minmax(0, 1fr); }
	.ic-dial__end--far { text-align: left; justify-self: start; }
	.ic-dial__end--far p { margin-left: 0; }
	.ic-dial__mark--next { left: 88%; }
}

/* About me. */
.ic-about__grid { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ic-about__portrait { position: relative; aspect-ratio: 1; max-width: 340px; }
.ic-about__monogram, .ic-about__photo { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; object-fit: cover; }
.ic-about__monogram { background: var(--ic-pink); color: var(--ic-on-pink); font-family: var(--ic-font-display); font-size: clamp(4rem, 3rem + 5vw, 7.5rem); font-weight: 900; font-stretch: 140%; line-height: 1; letter-spacing: -0.02em; }
.ic-about__portrait::after { content: ""; position: absolute; inset: 8% -6% -6% 8%; z-index: -1; border-radius: 55% 45% 48% 52% / 52% 58% 42% 48%; border: 2px solid var(--ic-mint); }
.ic-about__text .ic-h2 { margin-bottom: 18px; }
.ic-about__bio { max-width: 64ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.7; }
.ic-about__text .ic-h3 { margin: 28px 0 8px; }
.ic-about .ic-actions { margin-top: 8px; }

@media (max-width: 760px) {
	.ic-about__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-about__portrait { max-width: 200px; }
}

/* Get access. */
.ic-access { background: var(--ic-pink); color: var(--ic-on-pink); border-top: 0 !important; }
.ic-access__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ic-access .ic-h2 { font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); font-stretch: 130%; }
.ic-access .ic-lead { color: inherit; opacity: 0.86; margin: 0; }
.ic-access .ic-btn--primary { background: var(--ic-on-pink); color: var(--ic-pink); }
.ic-access .ic-btn--primary:hover { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); }
.ic-access .ic-btn--ghost { border-color: currentColor; color: inherit; }
.ic-access .ic-actions { margin-top: 10px; }
.ic-access :focus-visible { outline-color: var(--ic-on-pink); }

/* ---------------------------------------------------------------------------------------------- footer */

.ic-footer { padding: 48px 0 40px; border-top: 1px solid var(--ic-line-soft); }
.ic-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; }
.ic-footer__tagline { margin: 12px 0 0; color: var(--ic-faint); font-size: 0.95rem; }
.ic-footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.ic-footer__links a { color: var(--ic-muted); text-decoration: none; font-weight: 600; }
.ic-footer__links a:hover { color: var(--ic-text); }
.ic-footer__copy { grid-column: 1 / -1; margin: 12px 0 0; color: var(--ic-faint); font-size: 0.9rem; }
@media (max-width: 700px) {
	.ic-footer__inner { grid-template-columns: minmax(0, 1fr); }
	.ic-footer__links { justify-content: flex-start; }
}

/* The site map: every public page in small type, a column per heading (two on a phone). */
.ic-footer__inner--map { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ic-sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 30px 28px; }
.ic-sitemap__col { min-width: 0; }
.ic-sitemap__title { margin: 0 0 12px; font-family: var(--ic-font-display); font-size: 0.78rem; font-weight: 800; font-stretch: 108%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-text); }
.ic-sitemap ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; line-height: 1.35; }
.ic-sitemap a { color: var(--ic-muted); font-size: 0.86rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.ic-sitemap a:hover, .ic-sitemap a:focus-visible { color: var(--ic-text); text-decoration: underline; text-decoration-color: var(--ic-pink); text-underline-offset: 3px; }
.ic-sitemap .ic-icon { display: inline; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; opacity: 0.75; }
/* The same words under the name, at the foot of every page. */
.ic-footer__definition { max-width: 54ch; margin: 12px 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ic-muted); }
.ic-footer__inner--map .ic-footer__copy { margin: 4px 0 0; padding-top: 20px; border-top: 1px solid var(--ic-line-soft); }
@media (max-width: 560px) {
	.ic-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
}

/* ------------------------------------------------------------------------------------------- pages */

.ic-page { padding: clamp(40px, 6vw, 80px) 0; max-width: 760px; }
.ic-page .ic-h1 { margin-bottom: 0.5em; }
.ic-prose { font-size: 1.08rem; }
.ic-prose > * { max-width: 70ch; }
.ic-prose h2 { font-size: 1.8rem; margin: 1.6em 0 0.5em; }
.ic-prose h3 { font-size: 1.35rem; margin: 1.4em 0 0.4em; }
/* A link in a page's text has the link colour. Not a button that is a link (a plan's "Start free"): it keeps its
   own words' colour, or they are the colour of its ground. */
.ic-prose a:where(:not(.gts-btn, .ic-btn)) { color: var(--ic-pink); }
.ic-prose img { border-radius: var(--ic-radius); }
.ic-post__date { margin: 0 0 8px; color: var(--ic-faint); font-size: 0.95rem; }
.ic-posts { padding: clamp(40px, 6vw, 80px) 0; }
.ic-posts__list { margin: 24px 0 0; padding: 0; list-style: none; }
.ic-post { padding: 26px 0; border-top: 1px solid var(--ic-line-soft); }
.ic-post__title a { text-decoration: none; }
.ic-post__title a:hover { color: var(--ic-pink); }
.ic-post__excerpt { margin: 8px 0 0; color: var(--ic-muted); max-width: 70ch; }
.ic-pager { display: flex; gap: 16px; margin-top: 24px; }
.ic-pager a { color: var(--ic-pink); font-weight: 700; }
.ic-comments { padding-top: 0; }
.ic-comments__list { padding-left: 1.2em; }

/* 404 */
.ic-404 { padding: clamp(56px, 10vw, 140px) 0; }
.ic-404__code { margin: 0 0 8px; font-family: var(--ic-font-display); font-size: clamp(5rem, 3rem + 10vw, 12rem); font-weight: 900; font-stretch: 150%; line-height: 0.85; color: var(--ic-pink); letter-spacing: -0.03em; }
.ic-404 .ic-h1 { max-width: 18ch; }
.ic-404 .ic-lead { margin-bottom: 28px; }

/* The site layer's pages: log in, join, forgot, reset, log out beside a panel of the brand. */
.ic-auth__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 8vw, 104px); }
.ic-auth__side { position: sticky; top: calc(var(--ic-header-h) + 32px); display: flex; flex-direction: column; gap: 18px; min-height: 420px; padding: clamp(28px, 4vw, 48px); border-radius: var(--ic-radius-lg); background: var(--ic-pink); color: var(--ic-on-pink); overflow: hidden; }
.ic-auth__mark { width: 64px; height: 64px; color: var(--ic-on-pink); }
.ic-auth__mark circle { fill: var(--ic-on-pink); }
.ic-auth__title { margin: auto 0 0; font-family: var(--ic-font-display); font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); font-weight: 850; font-stretch: 125%; line-height: 0.95; letter-spacing: -0.02em; }
.ic-auth__text { margin: 0; max-width: 32ch; opacity: 0.85; font-size: 1.05rem; }
.ic-auth__main { min-width: 0; }
.ic-auth__h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
.ic-auth .gts-page { align-items: stretch; }
.ic-auth .gts-card--auth { max-width: none; }
.ic-auth .gts-page > .gts-notice { max-width: none; }

@media (max-width: 860px) {
	.ic-auth__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-auth__side { position: static; min-height: 0; flex-direction: row; align-items: center; padding: 18px 20px; border-radius: var(--ic-radius); }
	.ic-auth__mark { width: 40px; height: 40px; flex: none; }
	.ic-auth__title { margin: 0; font-size: 1.5rem; }
	.ic-auth__text { display: none; }
}

/* The account page: wide. */
.ic-account__wrap { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 104px); }

/* The app on the public site: the whole window, with no site header above it (header-app.php). */
body.slr-front { --slr-front-offset: 0px; }
.ic-app-page .ic-main { min-height: 0; }
.ic-app { min-height: 100dvh; }

/* --------------------------------------------------------------------------- the site layer (gts-*) */

.gts, .gts-auth, .gts-notice, .gts-sections, .gts-card, .gts-mention, .gts-person, .gts-people {
	--gts-fg: var(--ic-text);
	--gts-muted: var(--ic-muted);
	--gts-surface: var(--ic-surface);
	--gts-surface-2: var(--ic-surface-2);
	--gts-line: var(--ic-line);
	--gts-accent: var(--ic-pink);
	--gts-on-accent: var(--ic-on-pink);
	--gts-accent-2: var(--ic-text);
	--gts-on-accent-2: var(--ic-bg);
	--gts-link: var(--ic-pink);
	--gts-success: var(--ic-mint);
	--gts-warning: var(--ic-peach);
	--gts-danger: var(--ic-danger);
	--gts-info: var(--ic-mint);
	--gts-focus: var(--ic-focus);
	--gts-border-width: 1px;
	--gts-radius: var(--ic-radius);
	--gts-radius-sm: var(--ic-radius-sm);
	--gts-shadow: none;
	--gts-font-display: var(--ic-font-display);
}
.gts-card { border-color: var(--ic-line-soft); }
.gts-card__title, .gts-section__title, .gts-profile-card__name { font-stretch: 112%; font-weight: 800; }
/* The plans, two by two in this theme's column: three across left the fourth alone on a row of its own. */
.gts-plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.gts-btn { border-radius: 999px; min-height: 46px; padding-inline: 1.3em; }
.gts-btn--primary:hover { box-shadow: var(--ic-glow); }
.gts-btn--secondary { background: var(--ic-text); border-color: var(--ic-text); color: var(--ic-bg); }
.gts-input, .gts-form select { border-radius: 12px; background: var(--ic-bg); border-color: var(--ic-line); }
.gts-input:focus, .gts-form select:focus { border-color: var(--ic-focus); }
.gts-settings__nav a { border-color: var(--ic-line-soft); }
.gts-chip--live { border-color: var(--ic-mint); color: var(--ic-mint); }
.gts-notice { background: var(--ic-surface); }

/* ------------------------------------------------------------------------- the plugins' design tokens */

:root:root {
	--gtm-bg: transparent; --gtm-surface: var(--ic-surface); --gtm-surface-2: var(--ic-surface-2); --gtm-text: var(--ic-text); --gtm-muted: var(--ic-muted); --gtm-border: var(--ic-line-soft); --gtm-border-width: 1px; --gtm-radius: var(--ic-radius); --gtm-radius-sm: var(--ic-radius-sm); --gtm-shadow: none; --gtm-shadow-sm: none; --gtm-primary: var(--ic-pink); --gtm-on-primary: var(--ic-on-pink); --gtm-accent: var(--ic-pink); --gtm-on-accent: var(--ic-on-pink); --gtm-success: var(--ic-mint); --gtm-warning: var(--ic-peach); --gtm-danger: var(--ic-danger); --gtm-font: var(--ic-font-text); --gtm-font-display: var(--ic-font-display); --gtm-input-bg: var(--ic-bg); --gtm-input-border: var(--ic-line); --gtm-focus: var(--ic-focus);
	--gtc-font: var(--ic-font-text); --gtc-font-display: var(--ic-font-display); --gtc-bg: transparent; --gtc-surface: var(--ic-surface); --gtc-surface-2: var(--ic-surface-2); --gtc-text: var(--ic-text); --gtc-text-soft: var(--ic-muted); --gtc-muted: var(--ic-faint); --gtc-border: var(--ic-line-soft); --gtc-control-border: var(--ic-line); --gtc-primary: var(--ic-pink); --gtc-on-primary: var(--ic-on-pink); --gtc-accent: var(--ic-pink); --gtc-on-accent: var(--ic-on-pink); --gtc-accent-soft: var(--ic-pink-soft); --gtc-link: var(--ic-pink); --gtc-success: var(--ic-mint); --gtc-warning: var(--ic-peach); --gtc-danger: var(--ic-danger); --gtc-focus: var(--ic-focus); --gtc-radius: var(--ic-radius); --gtc-radius-sm: var(--ic-radius-sm); --gtc-radius-lg: var(--ic-radius-lg); --gtc-radius-pill: 999px; --gtc-border-width: 1px; --gtc-shadow: none; --gtc-shadow-sm: none; --gtc-shadow-raised: none;
	--gtb-bg: var(--ic-bg); --gtb-lane-bg: var(--ic-bg-2); --gtb-lane-border: var(--ic-line-soft); --gtb-lane-radius: var(--ic-radius); --gtb-card-bg: var(--ic-surface); --gtb-card-fg: var(--ic-text); --gtb-card-muted: var(--ic-muted); --gtb-card-border: var(--ic-line-soft); --gtb-card-radius: var(--ic-radius-sm); --gtb-accent: var(--ic-pink); --gtb-on-accent: var(--ic-on-pink); --gtb-focus: var(--ic-focus); --gtb-font: var(--ic-font-text); --gtb-font-display: var(--ic-font-display);
	--gtchat-font: var(--ic-font-text); --gtchat-font-display: var(--ic-font-display); --gtchat-bubble-bg: var(--ic-pink); --gtchat-bubble-fg: var(--ic-on-pink); --gtchat-bubble-radius: 999px; --gtchat-border-width: 1px; --gtchat-border-color: var(--ic-line); --gtchat-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6); --gtchat-panel-radius: var(--ic-radius-lg); --gtchat-panel-bg: var(--ic-surface); --gtchat-panel-fg: var(--ic-text); --gtchat-panel-muted: var(--ic-muted); --gtchat-muted-fg: var(--ic-muted); --gtchat-header-bg: var(--ic-bg-2); --gtchat-header-fg: var(--ic-text); --gtchat-bot-bg: var(--ic-surface-2); --gtchat-bot-fg: var(--ic-text); --gtchat-user-bg: var(--ic-pink); --gtchat-user-fg: var(--ic-on-pink); --gtchat-accent: var(--ic-mint); --gtchat-input-bg: var(--ic-bg); --gtchat-focus: var(--ic-focus); --gtchat-radius: var(--ic-radius-sm);
	--gtchat-on-accent: var(--ic-on-pink); --gtchat-shadow-color: rgba(0, 0, 0, 0.45); --gtchat-log-bg: var(--ic-bg); --gtchat-soft-bg: var(--ic-surface-2); --gtchat-person-bg: var(--ic-mint-soft); --gtchat-person-fg: var(--ic-text); --gtchat-link: var(--ic-pink); --gtchat-danger: var(--ic-danger); --gtchat-success: var(--ic-mint); --gtchat-warning: var(--ic-peach);
	--gtl-text: var(--ic-text); --gtl-text-soft: var(--ic-muted); --gtl-muted: var(--ic-faint); --gtl-line: var(--ic-line-soft); --gtl-surface: var(--ic-surface); --gtl-surface-2: var(--ic-surface-2); --gtl-primary: var(--ic-pink); --gtl-primary-soft: var(--ic-pink-soft); --gtl-link: var(--ic-pink); --gtl-ai: var(--ic-mint); --gtl-radius: var(--ic-radius); --gtl-radius-sm: var(--ic-radius-sm); --gtl-border-width: 1px;
}

/* ------------------------------------------------------------------- the app on the public site (--slr-*) */

/* The app's two black and white themes, Zero and One, are the site's two modes above. Its older themes keep the
   site colours they were drawn for, so Dark, Light and Matrix look as they did to whoever chose them: the
   red-orange on black, and on white, for everything on the app's page that reads these tokens (the plugins'
   tokens above are worked out on this same element, so they follow). */
html:has(> body.slr-front:is(.slr-theme-dark, .slr-theme-matrix):not(.slr-theme-zero, .slr-theme-one)) {
	--ic-bg: #000000; --ic-bg-2: #0d0402; --ic-surface: #140603; --ic-surface-2: #1c0904; --ic-line: #5a1c09; --ic-line-soft: #2e0e05;
	--ic-text: #ffffff; --ic-muted: #ffc9b5; --ic-faint: #ff9f80; --ic-pink: #ff4d1a; --ic-pink-soft: rgba(255, 77, 26, 0.16); --ic-on-pink: #000000;
	--ic-mint: #ff8a4d; --ic-mint-soft: rgba(255, 138, 77, 0.14); --ic-peach: #ffb38f; --ic-danger: #ff3d2e; --ic-focus: #ffffff;
	--ic-paper: #ffffff; --ic-paper-ink: #000000; --ic-glow: 0 0 0 1px rgba(255, 77, 26, 0.5), 0 10px 40px -10px rgba(255, 77, 26, 0.65);
}
html:has(> body.slr-front.slr-theme-light) {
	--ic-bg: #ffffff; --ic-bg-2: #fff3ee; --ic-surface: #ffffff; --ic-surface-2: #fff0e9; --ic-line: #000000; --ic-line-soft: #ffd2c2;
	--ic-text: #000000; --ic-muted: #5a1a08; --ic-faint: #8a2a10; --ic-pink: #e63a0b; --ic-pink-soft: rgba(230, 58, 11, 0.1); --ic-on-pink: #ffffff;
	--ic-mint: #b83208; --ic-mint-soft: rgba(184, 50, 8, 0.1); --ic-peach: #b83208; --ic-danger: #c40000; --ic-focus: #000000;
	--ic-paper: #ffffff; --ic-paper-ink: #000000; --ic-glow: 0 0 0 1px rgba(230, 58, 11, 0.4), 0 12px 30px -14px rgba(230, 58, 11, 0.5);
}

/* The Matrix theme keeps its own look (the app puts a dark sheet behind its sections), and so do its black and white
   children, Zero and One (gatechy-slr, assets/css/bits.css); Dark and Light take the colours below. */
body.slr-front.slr-theme-dark .slr-app {
	--slr-bg: #000000; --slr-panel: #0f0503; --slr-panel-2: #0a0302; --slr-hover: #1f0a05; --slr-input: #000000; --slr-input-disabled: #140603; --slr-segment: #000000; --slr-code: #1c0904;
	--slr-border: #3d1307; --slr-border-strong: #6b200c; --slr-text: #ffffff; --slr-muted: #ffc9b5;
	--slr-accent: #ff4d1a; --slr-accent-hover: #ff6a3d; --slr-accent-soft: rgba(255, 77, 26, 0.16); --slr-accent-border: rgba(255, 77, 26, 0.5); --slr-link: #ff8a5c; --slr-info-bg: #140603;
	--slr-ai: #ff8a4d; --slr-ai-soft: rgba(255, 138, 77, 0.14); --slr-ai-bg: #1a0a04; --slr-ai-border: rgba(255, 138, 77, 0.35);
	--slr-strong-bg: #ffffff; --slr-strong-text: #000000; --slr-pop: #1c0904; --slr-sticky: rgba(0, 0, 0, 0.92);
	--slr-radius: 12px; --slr-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	--slr-road-car: #ff4d1a;
	font-family: var(--ic-font-text);
}
body.slr-front.slr-theme-light .slr-app {
	--slr-bg: #ffffff; --slr-panel: #ffffff; --slr-panel-2: #fff7f3; --slr-hover: #fff0e9; --slr-input: #ffffff; --slr-input-disabled: #fff3ee; --slr-segment: #ffe6dc; --slr-code: #fff0e9;
	--slr-border: #ffc4b0; --slr-border-strong: #000000; --slr-text: #000000; --slr-muted: #5a1a08;
	--slr-accent: #e63a0b; --slr-accent-hover: #c42f06; --slr-accent-soft: #ffe6dc; --slr-accent-border: #ffb39a; --slr-link: #c42f06; --slr-info-bg: #fff3ee;
	--slr-ai: #b83208; --slr-ai-soft: #ffe6dc; --slr-ai-bg: #fff7f3; --slr-ai-border: #ffc4b0;
	--slr-strong-bg: #000000; --slr-strong-text: #ffffff; --slr-pop: #000000; --slr-sticky: rgba(255, 255, 255, 0.92);
	--slr-radius: 12px;
	--slr-road-car: #e63a0b;
	font-family: var(--ic-font-text);
}
/* Dark and Light only: Neo, Zero and One head their pages in the app's own display face (matrix.css). */
body.slr-front:not(.slr-theme-matrix) .slr-app h1, body.slr-front:not(.slr-theme-matrix) .slr-app h2 { font-family: var(--ic-font-display); font-stretch: 108%; }
html:has(> body.slr-front.slr-theme-dark), body.slr-front.slr-theme-dark { background: #000000; }
html:has(> body.slr-front.slr-theme-light), body.slr-front.slr-theme-light { background: #ffffff; }

/* The review's road in the app, in this theme's colours (the markup is the app's). */
body.slr-front .slr-road { border-radius: var(--ic-radius); }
body.slr-front .slr-road-stop.is-done::before { background: linear-gradient(90deg, var(--slr-ai), var(--slr-accent)); }
body.slr-front .slr-road-dot { font-family: var(--ic-font-display); font-weight: 800; }
/* The tick on a finished stop stands on the accent: the colour the app works out for words on it (--slr-on-accent;
   white on this theme's orange was 4.22 to 1 in the light theme). */
body.slr-front .slr-road-stop.is-done .slr-road-dot { color: var(--slr-on-accent, var(--slr-strong-text)); }
body.slr-front .slr-road-stop.is-current .slr-road-dot { box-shadow: 0 0 0 5px var(--slr-accent-soft); }
body.slr-front .slr-road-label { font-family: var(--ic-font-display); font-stretch: 104%; font-weight: 750; }
body.slr-front .slr-road-target { color: var(--slr-road-car); }
body.slr-front .slr-road-next { border-radius: var(--ic-radius-sm); }
body.slr-front .slr-road-next .slr-btn { border-radius: 999px; }

/* --------------------------------------------------------------------------------------- motion */

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

@media print {
	.ic-header, .ic-footer, .ic-funnel, .ic-access { display: none; }
	body { background: #fff; color: #000; }
}

/* A bare branded page (a plugin's page for people without an account). */
.ic-bare__bar .ic-header__actions { margin-left: auto; }
.ic-bare__main { padding: clamp(28px, 5vw, 64px) 0; min-height: calc(100dvh - var(--ic-header-h) - 80px); }
.ic-bare__foot { padding: 24px 0; }
.ic-bare__foot .ic-footer__copy { margin: 0; }

/* How we work: the culture, as a numbered list of principles. */
.ic-culture__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 2vw, 22px); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
.ic-culture__item { display: flex; gap: 14px; align-items: flex-start; padding: clamp(16px, 2vw, 22px); border: 1px solid var(--ic-line-soft); border-radius: 18px; background: var(--ic-bg-2); }
/* Rule one says the most and stood three times as long as its neighbours: where the list has columns it takes two of
   them, and the list keeps to three across, so eight rules and that one's second cell fill three rows. */
@media (min-width: 620px) { .ic-culture__item:first-child { grid-column: span 2; } }
@media (min-width: 940px) { .ic-culture__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ic-culture__item p { margin: 0; line-height: 1.55; }
.ic-culture__item strong { display: block; margin-bottom: 4px; font-family: var(--ic-font-display); font-size: 1.12rem; }
.ic-culture__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ic-pink); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------- two values, and the bits */
/* Black and white and nothing between them: the tokens above carry the two values, and what follows takes out what
   a token cannot (a blur, a gradient, a see-through line) and gives the page its voice: a terminal's face for the
   small words, hard steps for shadows, and the bits of assets/js/bits.js falling behind everything. The page lets
   them through at its sides and between its sections; whatever is read stands on solid ground. */
html { background: var(--ic-bg); }
body:not(.ic-app-page) { background: none; }
.ic-bits { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; pointer-events: none; }
/* Solid by default, whatever a template or a plugin puts in the page; a section that keeps its words in a column
   (.ic-wrap) lets the bits through around that column, and the column is the solid thing, with a line around it.
   Never on the app's page: the app draws its own ground, and its own rain. */
body:not(.ic-app-page) .ic-main > * { background: var(--ic-bg); }
body:not(.ic-app-page) .ic-main > section:has(> .ic-wrap), .ic-footer { background: none !important; }
.ic-main > section > .ic-wrap, body:not(.ic-app-page) .ic-main > .ic-wrap, .ic-footer .ic-wrap { background: var(--ic-bg); box-shadow: 0 0 0 1px var(--ic-line); }
.ic-main > section > .ic-wrap, .ic-footer .ic-wrap { padding: clamp(18px, 3vw, 36px); }
body:not(.ic-app-page) .ic-main > .ic-wrap { margin-block: clamp(24px, 4vw, 56px); padding-inline: clamp(18px, 3vw, 36px); }
/* Square shoulders: a terminal has no soft corners. What is a circle stays one (the round buttons, a step's disc). */
:root { --ic-radius-sm: 0px; --ic-radius: 0px; --ic-radius-lg: 0px; }
.gts-btn, .gts-input, .gts-form select, .gts-card, .gts-notice, .gts-chip { border-radius: 0; }
.gts-btn { text-transform: uppercase; letter-spacing: 0.04em; }
.gts-btn--primary:hover { background: var(--ic-bg); color: var(--ic-text); border-color: var(--ic-text); }
/* A button that cannot be pressed (a plan not on sale yet): no grey in the two values, so it is an outline of
   dashes with its words in ink, and nothing happens under the pointer. */
.gts-btn[disabled], .gts-btn[disabled]:hover { opacity: 1; background: var(--ic-bg); color: var(--ic-text); border: 2px dashed var(--ic-text); box-shadow: none; }
/* The mark's three bars were three strengths of one colour: here they are one value. */
.ic-mark rect, .ic-auth__mark rect { opacity: 1; }
/* A picture of a person is the two values too, cut hard at the middle. */
.ic-about__photo { filter: grayscale(1) contrast(100); }
.ic-prose img { filter: grayscale(1); }
.ic-header { background: var(--ic-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--ic-line); }
/* Plain element rules hold only inside what this theme lays out (its header, its main, its footer), and never on the
   app's page (body.ic-app-page): the app has themes of its own, and so has a page a plugin prints by itself. */
body:not(.ic-app-page) :is(.ic-header, .ic-drawer, .ic-main, .ic-footer) a { text-decoration-color: currentColor; text-decoration-style: dotted; }
body:not(.ic-app-page) :is(.ic-header, .ic-drawer, .ic-main, .ic-footer) a:hover { text-decoration-style: solid; }
body:not(.ic-app-page) :is(.ic-header, .ic-drawer, .ic-main, .ic-footer) ::selection { background: var(--ic-text); color: var(--ic-bg); }
/* The small words speak like a terminal; the big ones keep the display face. A plan card of the join page is a label
   only for its radio, and reads like the cards of the pricing page (PD-368). */
.ic-nav a, .ic-btn, .ic-hero__kicker, .ic-hero__note, .ic-kicker, .ic-footer, .gts-label, .gts-chip, body:not(.ic-app-page) :is(.ic-header, .ic-drawer, .ic-main, .ic-footer) :is(label:not(.gtm-plan-card), input, select, textarea, button, code, kbd, pre, small) { font-family: var(--ic-font-mono); }
.ic-nav a, .ic-drawer__list a { font-family: var(--ic-font-menu); letter-spacing: 0; } /* the navigation in the menu face: ICAI Block as the site comes (PD-453; Appearance, Fonts) */
.ic-hero__kicker::before { content: "> "; }
.ic-hero__title::after, .ic-typed__now::after { content: ""; display: inline-block; width: 0.5em; height: 0.82em; margin-left: 0.08em; background: currentColor; vertical-align: -0.04em; animation: ic-bits-blink 1.2s steps(1) infinite; }
/* The headline while it types itself (assets/js/icai.js): the cursor belongs to what is typed, stands still while the
   keys go and blinks at rest. One line at every width, sized to its column, so no word jumps to a second line as the
   letters come and go. */
.ic-hero__title.is-typing::after { content: none; }
.ic-hero__title.is-busy .ic-typed__now::after { animation: none; }
@supports (font-size: 1cqw) {
	.ic-hero__text { container-type: inline-size; }
	.ic-hero__text > .ic-hero__title { font-size: min(5.6rem, 11.4cqw); white-space: nowrap; text-wrap: nowrap; }
}
@keyframes ic-bits-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ic-hero__title::after { animation: none; } }
/* Buttons: square-shouldered, and pressed is the two values swapped. */
.ic-btn { border-radius: 0; border: 2px solid var(--ic-text); text-transform: uppercase; letter-spacing: 0.04em; }
.ic-btn--primary:hover { background: var(--ic-bg); color: var(--ic-text); transform: translate(-2px, -2px); }
.ic-btn--ghost:hover { background: var(--ic-text); color: var(--ic-bg); }
/* What was a gradient is a pattern of hard stripes or a plain fill. */
.ic-funnel { background: var(--ic-bg); box-shadow: 0 0 0 2px var(--ic-line), 8px 8px 0 var(--ic-bg), 8px 8px 0 2px var(--ic-line); border-radius: 0; }
.ic-road__stop::before { background: repeating-linear-gradient(90deg, var(--ic-text) 0 6px, var(--ic-bg) 6px 10px); }
.ic-dial__fill { background: repeating-linear-gradient(135deg, var(--ic-text) 0 3px, var(--ic-bg) 3px 6px); }
/* Between two sections the bits fall: no rule is drawn across them. */
.ic-section + .ic-section, .ic-footer { border-top: 0; }
/* Nothing is dimmed: a quieter line is a smaller one, not a paler one. */
.ic-access .ic-lead, .ic-sitemap .ic-icon, .ic-auth__text { opacity: 1; }
/* The call to action is the two values swapped, as a block. */
.ic-main > .ic-access > .ic-wrap { background: var(--ic-text); color: var(--ic-bg); box-shadow: 8px 8px 0 var(--ic-bg), 8px 8px 0 2px var(--ic-text); }
.ic-access .ic-btn { border-color: var(--ic-bg); }
.ic-access .ic-btn--primary { background: var(--ic-bg); color: var(--ic-text); }
.ic-access .ic-btn--primary:hover { background: var(--ic-text); color: var(--ic-bg); box-shadow: none; }
.ic-access .ic-btn--ghost:hover { background: var(--ic-bg); color: var(--ic-text); }
.ic-access :focus-visible { outline-color: var(--ic-bg); }
/* The numbers in their discs, and the monogram, read in the other value. */
.ic-culture__n { color: var(--ic-on-pink); }
.ic-about__portrait::after { border-style: dashed; }
/* The paper on the page is black on white in both modes; its lines of text are dashes, its figure hard bars. */
.ic-sheet::before { background: var(--ic-bg); box-shadow: 0 0 0 2px var(--ic-text); }
.ic-sheet__page { box-shadow: 0 0 0 2px var(--ic-paper-ink), 0 0 0 4px var(--ic-paper); }
.ic-sheet__venue { color: var(--ic-paper-ink); }
.ic-sheet__authors span, .ic-sheet__cols span { border-radius: 0; background: repeating-linear-gradient(90deg, var(--ic-paper-ink) 0 5px, var(--ic-paper) 5px 7px); }
.ic-sheet__flow { border: 2px solid var(--ic-paper-ink); border-radius: 0; }
.ic-sheet__flow b, .ic-sheet__flow b:nth-child(4) { border-radius: 0; background: var(--ic-paper-ink); }
.ic-sheet__flow b:nth-child(4) { background: repeating-linear-gradient(90deg, var(--ic-paper-ink) 0 3px, var(--ic-paper) 3px 5px); box-shadow: 0 0 0 1px var(--ic-paper-ink); }
/* The grid of methods by outcomes: how much a cell holds is how much of it is inked, in bars. */
.ic-matrix__grid span { opacity: 1 !important; border-radius: 0; background: var(--ic-text); box-shadow: inset 0 0 0 1px var(--ic-text); }
.ic-matrix__grid .is-1 { background: repeating-linear-gradient(0deg, var(--ic-text) 0 1px, var(--ic-bg) 1px 6px); }
.ic-matrix__grid .is-2 { background: repeating-linear-gradient(0deg, var(--ic-text) 0 2px, var(--ic-bg) 2px 5px); }
.ic-matrix__grid .is-3 { background: repeating-linear-gradient(0deg, var(--ic-text) 0 4px, var(--ic-bg) 4px 6px); }
.ic-matrix__grid .is-gap, .ic-matrix__key { background: none; box-shadow: none; border-radius: 0; }
.ic-matrix { border-radius: 0; }

/* --------------------------------------------------------------------------------------- the motif */
/* An iamb is two beats, a soft one then a strong one: 0, then 1. The page says it in a terminal's voice: every
   heading in the one fixed-width face, upper case; each section numbered in binary; the motif running across the
   page under the hero; the name of the thing a person presses in square brackets. */
/* The theme's own headings only: a heading a plugin draws on a page of its own (a paper's title in the reader) keeps
   its face and its case, and so does a paper's title here. */
.ic-h1, .ic-h2, .ic-h3, .ic-hero__title, .ic-sitemap__title, .ic-brand__name, .ic-auth__title { font-family: var(--ic-font-display); font-stretch: normal; text-transform: uppercase; letter-spacing: 0; } /* ICAI Block (PD-453): its gaps are the wordmark's, so no letter-spacing */
.ic-paper__name { font-family: var(--ic-font-mono); font-stretch: normal; letter-spacing: -0.02em; }
.ic-hero__title { font-size: clamp(2.5rem, 1rem + 5.4vw, 5.6rem); line-height: 0.95; letter-spacing: -0.05em; }
.ic-h2 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); }
.ic-hero__beat { margin: 0 0 18px; padding: 8px 12px; width: fit-content; max-width: 100%; border: 1px dashed var(--ic-text); font-family: var(--ic-font-mono); font-size: 0.95rem; font-weight: 700; }
/* Over a few headings, as an accent, a number: the owner's own, and a way out to somewhere (icai_egg()). It looks like
   a decoration and says nothing of where it leads. */
.ic-egg { display: block; width: fit-content; margin-bottom: 10px; color: inherit; font-family: var(--ic-font-mono); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; }
.ic-head > .ic-egg { margin-bottom: -4px; }
.ic-access__inner > .ic-egg { margin-bottom: -8px; }
.ic-egg:hover, .ic-egg:focus-visible { text-decoration: underline; }
/* The motif runs across the whole window, the two values swapped, between the hero and what follows. */
body:not(.ic-app-page) .ic-main > .ic-motif { overflow: hidden; margin-block: clamp(8px, 2vw, 24px); border-block: 2px solid var(--ic-bg); background: var(--ic-text); color: var(--ic-bg); }
.ic-motif__run { display: flex; width: max-content; gap: 0; animation: ic-motif 48s linear infinite; }
.ic-motif__run span { padding: 10px 22px; font-family: var(--ic-font-mono); font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.3rem); font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.ic-motif__run span::after { content: "//"; margin-left: 44px; }
@keyframes ic-motif { to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .ic-motif__run { animation: none; } }
/* The round 01 beside the sun and the moon: the bits off or on, for this browser. Off, it is struck through. */
.ic-look { position: relative; }
.ic-look__bits { display: none; position: absolute; right: -5px; bottom: -4px; padding: 0 3px; border: 1px solid var(--ic-line); border-radius: 6px; background: var(--ic-bg); color: var(--ic-text); font-family: var(--ic-font-mono); font-size: 0.6rem; font-weight: 800; line-height: 13px; letter-spacing: 0; }
:root[data-rain="on"] .ic-look__bits { display: block; }
/* Body copy stays in the reading face; everything that names, counts or acts speaks in the terminal's. */
.ic-lead, .ic-hero__lead { color: var(--ic-text); }
.ic-road__label, .ic-baby__label, .ic-plan__n, .ic-culture__n, .ic-matrix__note, .ic-paper__venue, .ic-paper__doi { font-family: var(--ic-font-mono); }

/* ------------------------------------------------------------------------------------------ a video */
/* A still with a play mark until it is pressed, then the player (icai_video(), assets/js/icai.js). The still is cut to
   the two values like every picture here; so are the frame, the mark and the name. What plays is the video's own. */
/* It closes the About page (page-templates/about.php), in a column of its own width. */
.ic-outro .ic-video { max-width: 880px; margin-inline: auto; }
.ic-video { margin: 0; }
.ic-video__play, .ic-video__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--ic-text); background: var(--ic-bg); color: var(--ic-text); }
.ic-video__play { text-decoration: none; box-shadow: 8px 8px 0 var(--ic-bg), 8px 8px 0 2px var(--ic-text); }
.ic-video__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(100); }
.ic-video__mark { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border: 2px solid var(--ic-text); background: var(--ic-bg); }
.ic-video__mark::before { content: ""; position: absolute; inset: 24px 22px 24px 30px; background: var(--ic-text); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ic-video__play:hover .ic-video__mark, .ic-video__play:focus-visible .ic-video__mark { background: var(--ic-text); }
.ic-video__play:hover .ic-video__mark::before, .ic-video__play:focus-visible .ic-video__mark::before { background: var(--ic-bg); }
.ic-video__title { position: absolute; left: 0; bottom: 0; max-width: 100%; padding: 8px 14px; background: var(--ic-text); color: var(--ic-bg); font-family: var(--ic-font-mono); font-size: clamp(1rem, 0.85rem + 0.8vw, 1.5rem); font-weight: 800; letter-spacing: 0.04em; }
.ic-video__note { margin-top: 18px; font-family: var(--ic-font-mono); font-size: 0.85rem; }
@media (max-width: 600px) {
	.ic-video__mark { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
	.ic-video__mark::before { inset: 14px 12px 14px 18px; }
	.ic-video__play { box-shadow: 5px 5px 0 var(--ic-bg), 5px 5px 0 2px var(--ic-text); }
}
/* A name that keeps its own capitals inside text the theme writes in capitals (icai.js keepCase). */
.ic-keepcase { text-transform: none; }

/* Tap targets (PD-441): every control in the header and footer, and the log-in form's, is at least 44px. */
.ic-mode, .ic-menu { width: 44px; height: 44px; }
.ic-header .ic-brand, .ic-footer .ic-brand { min-height: 44px; }
.gts-reveal { width: 44px; height: 44px; }
.gts-check label { min-height: 44px; align-items: center; }
.gts-check input { margin: 0; }
@media (max-width: 860px) {
	.ic-sitemap ul { gap: 0; }
	.ic-sitemap a, .ic-footer__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
	.ic-footer__links { gap: 0 18px; }
}

/* ICAI Block everywhere (PD-453, the owner's option B, 2026-10-20). The app's own looks (Neo, Zero, One, Dark, Light)
   take it too: their two faces are the same block face here. */
html body.slr-front .slr-app { --slr-mx-font: var(--ic-font-text); --slr-mx-display: var(--ic-font-display); --slr-mono: var(--ic-font-mono); }
/* The plugins' terminal faces (keys, counts, timers, the rooms' head bar) are ICAI Block too. */
html body.slr-front .gtb-app { --gtb-font-mono: var(--ic-font-mono); }
html body.slr-front .gtr-app { --gtr-mono: var(--ic-font-mono); --war-mono: var(--ic-font-mono); }
html:root { --gtchat-font-mono: var(--ic-font-mono); }
html body.slr-front .gtr-main > .gtr-head .gtr-head-title h2 { font-family: var(--ic-font-display) !important; }
html body.slr-front .gtr-main > .gtr-head :is(.slr-btn, .gtr-icon-btn, .gtr-menu-wrap > button, .slr-help) { font-family: var(--ic-font-mono); }
html body.slr-front:not(.slr-theme-matrix) .slr-app :is(button, input, select) { font-family: var(--ic-font-text); }
html body.slr-front .slr-app textarea:is(.gtb-panel-title, .gtp-th-title) { font-family: var(--ic-font-body); font-weight: 700; font-size-adjust: none; letter-spacing: 0; text-transform: none; } /* A ticket's or a proposal's title is its own words: the reading face, bold (the owner, 2026-11-02: titles unreadable as ICAI Block). */
/* Kept in other faces, where one case gets in the way: where people write long text (a comment, a description, a
   message: one case would hide whether a letter is a capital), what a paper says (its abstract, its sections, its
   name keep their case), and code. One-line boxes (a title, a search, a label) are ICAI Block like the rest, also a
   title that is a text area so it can wrap (a ticket's, a thesis's; PD-467). Outside the app only since 2026-10-29: the
   app's boxes and a paper's words are ICAI Text, which has its lowercase (PD-590, below). */
:where(body:not(.ic-app-page)) :is(textarea:not(.gtb-panel-title, .gtp-th-title), [contenteditable="true"], .slr-abstract, .slr-conflict-abstract, .slr-ms-editor, .ic-paper__name) { font-family: var(--ic-font-read) !important; font-size-adjust: none !important; }
/* The theme's own drawings (the hero's funnel) label themselves in ICAI Block too; a paper's figure keeps its own. */
.ic-main svg text { font-family: var(--ic-font-display); }
:is(code, kbd, pre, samp, .slr-log, .slr-latex, .slr-latex-view, .slr-latex-page, .cm-editor, .CodeMirror) { font-family: var(--ic-font-code) !important; }
/* A search string's box (textarea.is-mono) is code too: in the code face, never scaled (PD-590). */
textarea.is-mono { font-family: var(--ic-font-code) !important; font-size-adjust: none !important; }
/* Running text in ICAI Block (the app's): one case and square letters read best a size smaller than the old face, with
   more room between the lines and the words, and a little between the letters (the owner's option B, PD-453). */
body { font-size: 1rem; line-height: 1.8; }
.ic-app-page :is(p, li, dd, blockquote, .ic-prose, .gtb-md, .gtr-md, .gtl-prose, .gtmsg-bubble) { letter-spacing: 0.02em; word-spacing: 0.14em; }
.ic-app-page :is(p, li, dd, blockquote, .ic-prose, .gtb-md, .gtr-md, .gtl-prose, .gtmsg-bubble) :is(code, kbd, pre, input, textarea) { letter-spacing: normal; word-spacing: normal; }

/* ICAI Text, the running text of the theme's pages (PD-453; the owner, 2026-10-22: "ICAI Text: SHIP"). Headings, the
   logo, the navigation, buttons and the small terminal words keep ICAI Block (their own rules above); so does the app's
   chrome, while its changing words are ICAI Text (PD-590, below) and a ticket's text follows Board settings (Ticket
   text: ICAI Text as the site comes). ICAI Text is drawn on
   a square grid with one weight: never thickened, slanted or scaled by the browser, never spaced out (its spacing and
   kerning are its own), and set at sizes where its strokes land on whole pixels or near (16px; 20.8px, a stroke of two
   pixels, for the bigger leads). Bold words take ICAI Block's heavier capitals, its own bold. */
body:not(.ic-app-page) { font-family: var(--ic-font-body); font-synthesis: none; font-size-adjust: none; }
:where(body:not(.ic-app-page)) :is(strong, b):not(:is(textarea, [contenteditable="true"], .slr-abstract, .slr-conflict-abstract, .slr-ms-editor, .ic-paper__name, code, pre) *) { font-family: var(--ic-font-text); }
.ic-lead, .ic-hero__lead { font-size: 1rem; }
@media (min-width: 720px) { .ic-lead, .ic-hero__lead { font-size: 1.3rem; } }
.ic-prose { font-size: 1rem; }
/* ICAI Block Light: the small labels over a heading, a lighter stroke than the heading under them, at 16px. */
.ic-hero__kicker, .ic-kicker, .ic-baby__kicker { font-family: var(--ic-font-light); font-size: 1rem; font-synthesis: none; }
/* A ticket's text in the site's reading font (Board settings, Ticket text, "ICAI Text"), its bold words in ICAI Block;
   and the second choice, the site's font, in ICAI Block. */
:root { --gtb-text-font: var(--ic-font-body); --gtb-site-font: var(--ic-font-text); }
html[data-gtb-ticket-font="text"] :is(.gtb-md :is(p, li, td, figcaption), .gtb-checklist .slr-check > span) :is(strong, b),
.gtb-tfont-sample.is-text :is(strong, b) { font-family: var(--ic-font-text); }
/* Private chats in ICAI Text (the owner, 2026-10-23: "ICAI PRIVATE CHAT TEXT SHOULD BE ICAI-TEXT WHY IS IT STILL BLOCK?"):
   the words of each message and the box they are typed in, on ICAI Text's square grid (16px on 24px lines, never
   scaled or thickened by the browser); bold words in ICAI Block, as in tickets; code keeps its own face. */
.gtmsg .gtmsg-bubble, .gtmsg :is(.gtmsg-compose, .gtmsg-edit) textarea {
	font-family: var(--ic-font-body); font-size: 16px; line-height: 24px; font-weight: 400; font-synthesis: none; letter-spacing: 0;
}
.gtmsg .gtmsg-bubble :is(strong, b) { font-family: var(--ic-font-text); }
.gtmsg .gtmsg-bubble.is-deleted { font-size: 16px; font-style: normal; }
/* The app's changing words in ICAI Text (2026-10-29, PD-590; the owner: "in the signed in app, chats and things should
   all be icai-text except headers and menu items etc just the more ornamental stuff that static text like a menu item
   not the more dynamic expected content text that changes all the time"). ICAI Text: what people and the AI write (room
   messages, chat lines and their previews, a quoted reply, a notification's excerpt, a library's articles and search
   snippets, a voice note's transcript), what a record says (its authors, citation, abstract, a reviewer's reason),
   paragraphs, descriptions and hints, table cells, and every box text is typed in. ICAI Block: headings and titles, the
   logo, menus, tabs, buttons, labels, badges, chips, column heads, counts, times, a page head's line and the keyboard hints
   under a box, and bold words
   inside the text, as in tickets. On ICAI Text's grid as on the public pages: 16px on 24px lines, never scaled (the
   Matrix looks' font-size-adjust too), thickened, slanted or spaced out. A ticket's own text keeps following Board
   settings (Ticket text); code, pre and kbd keep their own face. */
body.ic-app-page :is(p, dd, blockquote, figcaption, td, .slr-field-hint):not(.gtr-composer-hint, :is(.gtb-md, .gtb-checklist, header, nav, .slr-page-head, .slr-shortcuts, .slr-btn-row, button, .slr-btn, .slr-latex-page, .cm-editor, .CodeMirror) *),
body.ic-app-page :is(.gtr-md, .gtr-md li, .gtl-prose li, .gtmsg-bubble, .gtmsg-row-line, .gtr-reply-quote, .gtr-replying-text, .gtb-bell-excerpt, .gtl-result__snippet, .gtl-libtile__desc, .slr-voice-transcript, .slr-abstract, .slr-conflict-abstract, .slr-other > :is(.slr-muted, .slr-small), .gtchat-msg) {
	font-family: var(--ic-font-body); font-size: 16px; line-height: 24px; font-weight: 400; font-style: normal; font-stretch: normal;
	font-synthesis: none; font-size-adjust: none; letter-spacing: 0; word-spacing: normal;
}
/* More of the app's words in ICAI Text (the owner, 2026-11-02: "a lot of the info text still shows title-capital ICAI
   Block and it should be more normal text capitalization and using ICAI Text"): a field's label and help, a chosen value
   in a select, a card's title and lines on the board and in the rooms, list items of content, the small notes (muted,
   small, meta, empty states). The chrome keeps ICAI Block: headings, the logo, menus, tabs, buttons, badges, chips, counts. */
body.ic-app-page :is(label, .slr-label, dt, select, option, .slr-muted, .slr-small, .slr-meta, .slr-note, .slr-empty, .slr-field-help, .gtb-card__title, .gtb-card-title, .gtb-card-text, .gtb-card-desc, .gtr-ticket-title, .gtr-side-title, .gtr-room-card p, .gtr-room-card__meta, .gtr-room-card__topic, .gtl-libtile__title, .gtl-result__title, .gtmsg-chat-preview, .gtmsg-chat-name, .gtr-meeting-card, .gtr-meeting-when, .gtr-agenda-item, .gtr-agenda-list li, .gtr-rec-body, .gtr-rec-decisions, .gtr-rec-tickets, .gtr-attendance, .gtr-record-banner, .gtr-rec-card p, .gtr-rec-card li, .gtr-journal, .gtr-wrapup, .gtr-minutes):not(:is(header, nav, .slr-topbar, .slr-topnav, .slr-tabs, .slr-nav-sheet, button, .slr-btn, .gtb-chip, .gtb-lane-chip, .slr-badge, .cm-editor, .CodeMirror, .slr-latex-page, .slr-latex-view) *):not(.gtb-chip, .gtb-lane-chip, .slr-badge, .slr-btn) {
	font-family: var(--ic-font-body) !important; font-size: 16px; line-height: 24px; font-weight: 400; font-style: normal; font-stretch: normal;
	font-synthesis: none; font-size-adjust: none; letter-spacing: 0; word-spacing: normal; text-transform: none;
}
/* A board card's title is the ticket's own words (the owner, 2026-11-02: "unreadable as ICAI Block"): ICAI Text, even
   though it sits inside the card's open button. */
body.ic-app-page .gtb-card__open, body.ic-app-page .gtb-card__title { font-family: var(--ic-font-body) !important; font-size: 16px; line-height: 24px; font-weight: 400; font-style: normal; font-stretch: normal; font-synthesis: none; font-size-adjust: none; letter-spacing: 0; text-transform: none; }
/* The boxes text is typed in (a title that is a text area is a heading, and keeps ICAI Block). */
body.ic-app-page :is(input:is(:not([type]), [type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]), textarea:not(.gtb-panel-title, .gtp-th-title, .is-mono, .slr-latex), [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]):not(:is(.cm-editor, .CodeMirror, .slr-latex-page, .slr-latex-view) *) {
	font-family: var(--ic-font-body) !important; font-size: 16px !important; font-weight: 400; font-style: normal; font-stretch: normal;
	font-synthesis: none; font-size-adjust: none !important; letter-spacing: 0; word-spacing: normal;
}
body.ic-app-page :is(textarea:not(.gtb-panel-title, .gtp-th-title, .is-mono, .slr-latex), [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]):not(:is(.cm-editor, .CodeMirror, .slr-latex-page, .slr-latex-view) *) { line-height: 24px; }
/* Inside those words, the chrome keeps ICAI Block and its own size: bold words, buttons, labels, badges, chips, counts,
   times, people's marks; inline code keeps its face at 14px, as in tickets. */
body.ic-app-page :is(p, dd, blockquote, figcaption, td, .slr-field-hint, .gtr-md, .gtl-prose li, .gtmsg-bubble, .gtmsg-row-line, .gtr-reply-quote, .gtb-bell-excerpt, .gtl-result__snippet, .gtl-libtile__desc, .slr-voice-transcript, .slr-abstract, .slr-conflict-abstract, .gtchat-msg):not(:is(.gtb-md, .gtb-checklist) *) :is(strong, b, button, .slr-btn, label, .slr-small, small, time, .slr-chip, .slr-badge, .slr-tag, .slr-count, .slr-ai-badge, .gatechy-god, .slr-avatar, .gtb-avatar, .gtr-avatar, .gtchat-msg__who, h1, h2, h3, h4, h5, h6) {
	font-family: var(--ic-font-text);
}
body.ic-app-page :is(p, dd, blockquote, figcaption, td, .gtr-md, .gtl-prose li, .gtmsg-bubble, .gtmsg-row-line, .slr-abstract):not(:is(.gtb-md, .gtb-checklist) *) :is(code, kbd, samp):not(pre *) { font-size: 14px; line-height: 1; }
/* ICAI Block is wider than the old faces: the app's top row and tab rows keep each word whole and scroll sideways
   (they shrank to 44 px each on a phone and the words ran into each other), and the rooms' one-line titles take two. */
html body.slr-front :is(.slr-topnav, .slr-tabs) > a { flex-shrink: 0; }
html body.slr-front :is(.gtr-side-title, .gtr-ticket-title) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

/* ------------------------------------------------------------------------- the web app on the Home Screen */

/* The templates ask for the whole screen (viewport-fit=cover, PD-487), so on an iPhone the page reaches under the notch
   in landscape and under the home bar: the content keeps to the safe area (env() is 0 on every other screen). */
.ic-wrap { width: min(100% - 2 * max(var(--ic-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), var(--ic-wrap)); }
.ic-header { padding-top: env(safe-area-inset-top, 0px); }
.ic-footer { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
/* Pulled past its end, a page shows its own colour, never a white band; opened from the Home Screen it does not bounce. */
html { background: var(--ic-bg); }
html.ic-standalone, html.ic-standalone body, body.ic-app-page { overscroll-behavior: none; }

/* Menus and tabs wear the menu face (Appearance, Fonts; ICAI Block as the site comes), whatever the buttons wear: the
   app's top tabs and their overflow, the sections' tabs, the full-screen navigation, the profile menu, a room's tabs and
   its menu sheet, the board's dock. */
html body.slr-front .slr-app :is(.slr-topnav, .slr-tabs, .slr-tabs-more-menu, .slr-nav-sheet, .slr-me-panel, .gtr-tabs, .gtr-menu, .gtb-dock-bar) :is(a, button) { font-family: var(--ic-font-menu) !important; }

/* Bold words keep a real bold whatever face the buttons and text wear (Appearance, Fonts): ICAI Block was bold by its
   shape alone, so no rule above says a weight; a face with weights (Atkinson, the device's) needs one. */
body :is(strong, b):not(:is(code, pre, .cm-editor, .CodeMirror) *) { font-weight: 700; }

/* The site layer's hidden pieces on the theme's pages (its own stylesheet does not load here): the honeypot of the join
   form was a visible "Website" box (QA, 2026-11-02; a person who filled it was dropped as a robot), and the
   screen-reader-only text. */
.gts-hp, .gts-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }