/*
 * 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: Anybody (display, a variable width axis used as part of the design) and Atkinson Hyperlegible Next
 * (text). Radius follows hierarchy: pills for actions, a big soft frame for the hero art, nearly square paper.
 */

:root {
	--ic-font-display: "Anybody", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
	--ic-font-text: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ic-font-mono: "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", "Courier New", monospace;
	--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; }
.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; }
.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);
}
body.slr-front .slr-app h1, body.slr-front .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. */
.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, input, select, textarea, button, code, kbd, pre, small) { font-family: var(--ic-font-mono); }
.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-mono); font-stretch: normal; text-transform: uppercase; letter-spacing: -0.03em; }
.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; }
.ic-hero__beat::before { content: "0 1  "; white-space: pre; }
/* 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-bits-toggle { font-family: var(--ic-font-mono); font-size: 0.8rem; font-weight: 800; letter-spacing: 0; }
.ic-bits-toggle[aria-pressed="false"] { text-decoration: line-through; border-style: dashed; }
/* 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; }