/* Hypersphere public site: components (docs/site.md, "Look"). Tokens are in site-tokens.css.
   The page is built from the workstation's own parts: the title bar, pill tabs, glass panels with
   their heads, status chips, zebra tables and the Objects tree. Parts that are the website and not
   the app are cut, not rounded: chamfered buttons, corner-ticked Scene viewports, square marks. */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--site-topbar) + 16px);
	background: var(--site-canvas);
}

body {
	margin: 0;
	min-width: 320px;
	background: var(--site-canvas) url("../assets/starfield.png") 0 0 / 700px 700px repeat;
	color: var(--site-text-2);
	font: 400 17px/1.6 var(--site-font-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 {
	margin: 0;
	color: var(--site-text);
	font-family: var(--site-font-display);
	font-weight: 600;
	letter-spacing: -.005em;
	text-wrap: balance;
}
code, kbd, samp, pre { font-family: var(--site-font-mono); }
strong { color: var(--site-text); font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }

.site-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.site-nowrap { white-space: nowrap; }
.site-num, .site-mono { font-family: var(--site-font-mono); font-variant-numeric: tabular-nums; }

.site-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 14px;
	background: var(--site-accent);
	color: var(--site-accent-ink);
	font: 600 15px/1 var(--site-font-display);
	text-decoration: none;
}
.site-skip:focus { top: 10px; }

:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }

.site-wrap {
	width: 100%;
	max-width: var(--site-max);
	margin: 0 auto;
	padding-left: max(var(--site-gutter), env(safe-area-inset-left));
	padding-right: max(var(--site-gutter), env(safe-area-inset-right));
}

/* ----- glass panel: the workstation's card ----------------------------------------------------- */

.site-panel {
	position: relative;
	min-width: 0;
	background: linear-gradient(180deg, var(--site-glass-top), var(--site-glass-bottom));
	-webkit-backdrop-filter: blur(10px) saturate(1.45);
	backdrop-filter: blur(10px) saturate(1.45);
	border: 1px solid var(--site-hair);
	border-radius: var(--site-r-panel);
	box-shadow: var(--site-shadow);
}
.site-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--site-hair-soft);
}
.site-ph-icon {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--c, var(--site-text-2));
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.site-ph-title {
	color: var(--site-text);
	font: 600 16px/1.2 var(--site-font-display);
	letter-spacing: 0;
	white-space: nowrap;
}
.site-ph-sub { color: var(--site-text-3); font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-ph-meta {
	min-width: 0;
	margin-left: auto;
	overflow: hidden;
	color: var(--site-text-4);
	font: 500 12px/1.2 var(--site-font-mono);
	letter-spacing: .02em;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.site-count {
	padding: 4px 7px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	color: var(--site-text-3);
	font: 500 12px/1 var(--site-font-mono);
}

/* Status chip, quoted from the app: text with a ring, never a control. */
.site-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	border: 1px solid rgba(76, 214, 138, .32);
	border-radius: 999px;
	background: rgba(76, 214, 138, .10);
	color: var(--c-link);
	font: 500 12.5px/1 var(--site-font-text);
	white-space: nowrap;
}
.site-chip::before {
	content: "";
	width: 9px;
	height: 9px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: radial-gradient(circle, currentColor 0 1.5px, transparent 2px);
}

/* Type chip: an analysis type id in its key colour. */
.site-type {
	display: inline-block;
	padding: 3px 7px;
	border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
	border-radius: 4px;
	background: color-mix(in srgb, var(--c) 10%, transparent);
	color: var(--c);
	font: 500 12.5px/1.3 var(--site-font-mono);
	white-space: nowrap;
}

/* Marks: round dots are the app's objects, squares are the website's categories. */
.site-dot {
	display: inline-block;
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 8px color-mix(in srgb, var(--c) 50%, transparent);
}
.site-square { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--c); }

/* ----- buttons and links ------------------------------------------------------------------------- */

.site-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.site-button {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px 0 18px;
	color: var(--site-text);
	font: 600 15px/1 var(--site-font-display);
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s var(--site-ease);
}
.site-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: background-color .18s var(--site-ease), border-color .18s var(--site-ease);
}
/* The primary button's fill is cut at its top right corner; the cut is drawn on ::before so the
   focus ring around the element itself stays whole. */
.site-button.is-primary { color: var(--site-accent-ink); }
.site-button.is-primary::before {
	background: var(--site-accent);
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.site-button.is-primary:hover::before { background: var(--site-accent-hover); }
.site-button.is-secondary::before {
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 2px;
	background: rgba(255, 255, 255, .04);
}
.site-button.is-secondary:hover::before { border-color: rgba(255, 255, 255, .5); }
.site-button.is-small { min-height: 36px; padding: 0 18px 0 14px; font-size: 14px; }

.site-link {
	color: var(--site-accent);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(86, 211, 218, .35);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-color .12s var(--site-ease);
}
.site-link:hover { text-decoration-color: var(--site-accent); }
.site-link.has-arrow { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.site-link.has-arrow::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("../assets/arrow.svg") center / 14px 14px no-repeat;
	mask: url("../assets/arrow.svg") center / 14px 14px no-repeat;
}

/* ----- top bar: the workstation's title bar -------------------------------------------------------- */

.site-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--site-topbar);
	background: var(--site-titlebar);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	border-bottom: 1px solid var(--site-hair-soft);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .4);
}
.site-topbar nav {
	display: flex;
	align-items: center;
	gap: 28px;
	height: 100%;
	padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
.site-brand {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 10px;
	color: var(--site-text);
	font: 600 19px/1 var(--site-font-display);
	letter-spacing: .01em;
	text-decoration: none;
}
.site-brand img { width: 28px; height: 28px; }
.site-tabs { display: flex; flex: 1; align-items: center; gap: 4px; list-style: none; }
.site-tabs a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--site-text-2);
	font: 500 14.5px/1 var(--site-font-text);
	text-decoration: none;
	transition: background-color .12s var(--site-ease), color .12s var(--site-ease);
}
.site-tabs svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.site-tabs a:hover { background: rgba(255, 255, 255, .05); color: var(--site-text); }
.site-tabs a[aria-current="page"] {
	border-color: rgba(255, 255, 255, .12);
	background: linear-gradient(180deg, #223752, #12273f);
	color: var(--site-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(86, 211, 218, .6);
}
.site-tabs .site-nav-cta { margin-left: auto; }
.site-tabs .site-nav-cta a {
	border-color: rgba(86, 211, 218, .42);
	background: linear-gradient(180deg, rgba(86, 211, 218, .20), rgba(86, 211, 218, .08));
	color: #c9f7f9;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(86, 211, 218, .75);
}
.site-tabs .site-nav-cta a:hover { background: linear-gradient(180deg, rgba(86, 211, 218, .28), rgba(86, 211, 218, .12)); }

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

.site-section { padding-top: var(--site-section); }
.site-head { max-width: 880px; margin-bottom: 24px; }
.site-head h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.008em; }
.site-head p { max-width: 68ch; margin-top: 12px; color: var(--site-text-3); font-size: 18px; line-height: 1.6; }
.site-head.has-aside { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.site-head.has-aside > div { max-width: 880px; }

/* ----- image frames ---------------------------------------------------------------------------------- */

/* A UI capture inside a panel: a sunken well, the image cropped by a per-slot class. */
.site-shot { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--site-hair-soft); border-radius: var(--site-r-tile); background: var(--site-well); }
.site-shot picture, .site-shot img { width: 100%; height: 100%; }
.site-shot img { object-fit: cover; }
.site-shot-caption { color: var(--site-text-3); font-size: 15px; line-height: 1.5; }
.pos-top-left { object-position: 0 0; }
.pos-top { object-position: 50% 0; }
.pos-bottom { object-position: 50% 100%; }
.pos-left { object-position: 0 50%; }

/* A Scene render: no border on the image, four corner ticks and the central body's chip. */
.site-viewport { position: relative; overflow: hidden; background: #000; }
.site-viewport picture, .site-viewport img { width: 100%; height: 100%; }
.site-viewport img { object-fit: cover; }
.site-viewport::after {
	content: "";
	position: absolute;
	inset: 10px;
	pointer-events: none;
	--tick: rgba(242, 245, 250, .75);
	background:
		linear-gradient(var(--tick), var(--tick)) 0 0 / 12px 1px,
		linear-gradient(var(--tick), var(--tick)) 0 0 / 1px 12px,
		linear-gradient(var(--tick), var(--tick)) 100% 0 / 12px 1px,
		linear-gradient(var(--tick), var(--tick)) 100% 0 / 1px 12px,
		linear-gradient(var(--tick), var(--tick)) 0 100% / 12px 1px,
		linear-gradient(var(--tick), var(--tick)) 0 100% / 1px 12px,
		linear-gradient(var(--tick), var(--tick)) 100% 100% / 12px 1px,
		linear-gradient(var(--tick), var(--tick)) 100% 100% / 1px 12px;
	background-repeat: no-repeat;
}
.site-body-chip {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 1;
	padding: 5px 8px;
	border: 1px solid var(--site-hair);
	border-radius: 4px;
	background: rgba(10, 18, 30, .72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--site-text-2);
	font: 500 11.5px/1 var(--site-font-mono);
}

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

.site-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: min(calc(100vh - var(--site-topbar)), 860px);
	padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
	overflow: hidden;
}
/* --site-hero-shift moves the Scene clear of the copy panel. The capture is framed with its subject (EO-Sat, its
   link to Svalbard) in the middle 40 % (docs/site.md, "Screenshots"), so it stays at 0 and the cover crop keeps
   the middle. */
.site-hero { --site-hero-shift: 0px; }
.site-hero-scene { position: absolute; inset: 0 0 0 var(--site-hero-shift); }
.site-hero-scene picture, .site-hero-scene img { width: 100%; height: 100%; }
.site-hero-scene img {
	object-fit: cover;
	object-position: 50% 42%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 220px);
	mask-image: linear-gradient(90deg, transparent 0, #000 220px);
}
.site-hero-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 7, 13, 0) 72%, var(--site-canvas) 100%);
}
.site-hero-grid {
	position: relative;
	display: grid;
	flex: 1;
	grid-template-columns: minmax(380px, 500px) minmax(0, 1fr) minmax(300px, 360px);
	gap: 16px;
	align-items: start;
}
.site-hero-copy { grid-column: 1; display: flex; flex-direction: column; gap: 22px; padding: 30px 30px 26px; }
.site-hero-copy h1 { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.06; letter-spacing: -.012em; }
.site-lede { color: var(--site-text-2); font-size: 18px; line-height: 1.6; }
.site-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding-top: 16px; border-top: 1px solid var(--site-hair-soft); }
.site-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.site-facts dt { color: var(--site-text-4); font-size: 13.5px; line-height: 1.3; }
.site-facts dd { margin: 0; color: var(--site-text); font: 600 21px/1.15 var(--site-font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.site-hero-side { grid-column: 3; display: flex; flex-direction: column; gap: 12px; }
.site-hero-side .site-panel { cursor: default; }
.site-hero-side .site-ph-meta, .site-hero-side .site-kpi-sub { color: var(--site-text-3); }
.site-progress { height: 4px; margin: 14px 16px 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.site-progress span { display: block; width: 100%; height: 100%; background: var(--c-link); box-shadow: 0 0 10px rgba(76, 214, 138, .6); }
.site-status-list { padding: 4px 16px 10px; list-style: none; }
.site-status-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--site-hair-soft);
	color: var(--site-text-2);
	font-size: 14.5px;
	line-height: 1.3;
}
.site-status-list li:last-child { border-bottom: 0; }

/* KPI tiles, as the app's Overview. */
.site-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; list-style: none; }
.site-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 11px 12px 12px; border: 1px solid var(--site-hair-soft); border-radius: var(--site-r-tile); background: rgba(0, 0, 0, .26); }
.site-kpi-value { display: flex; align-items: center; gap: 8px; color: var(--site-text); font: 600 21px/1.15 var(--site-font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-kpi-value small { margin-left: 1px; color: var(--site-text-3); font: 500 12px/1 var(--site-font-mono); letter-spacing: 0; }
.site-kpi-label { margin-top: 2px; color: var(--site-text-2); font-size: 13.5px; line-height: 1.3; }
.site-kpi-sub { color: var(--site-text-4); font-size: 12px; line-height: 1.35; }
.site-meter { display: block; width: 100%; height: 9px; margin-top: 6px; overflow: visible; }
.site-meter .track { fill: rgba(255, 255, 255, .08); }
.site-meter .fill { fill: var(--c); }
.site-meter .fill-2 { fill: var(--c-iss); }
.site-meter .tick { fill: var(--site-text-3); }

.site-scene-label {
	position: relative;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	margin-top: 16px;
	padding: 8px 14px;
	border: 1px solid var(--site-hair);
	border-radius: 999px;
	background: var(--site-hud);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	color: var(--site-text-3);
	font: 500 12px/1.3 var(--site-font-mono);
}

/* ----- the assistant --------------------------------------------------------------------------------- */

.site-assistant-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 16px; }
.site-assistant-media { display: flex; flex-direction: column; gap: 12px; }
.site-assistant-text { display: flex; flex-direction: column; gap: 14px; padding: 8px 8px 6px 0; }
.site-assistant-text h2 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; }
.site-assistant-text > p { color: var(--site-text-3); font-size: 16px; line-height: 1.6; }
.site-assistant-text h3 { margin-top: 4px; font-size: 15px; line-height: 1.2; }
.site-prompts { display: grid; gap: 8px; list-style: none; }
.site-prompts li {
	padding: 10px 12px;
	border-left: 2px solid var(--site-accent);
	border-radius: 0 var(--site-r-ctl) var(--site-r-ctl) 0;
	background: var(--site-sunken);
	color: var(--site-text-2);
	font: 400 13.5px/1.5 var(--site-font-mono);
}
.site-models { color: var(--site-text-4); font-size: 14px; line-height: 1.5; }
.site-models strong { color: var(--site-text-2); font-weight: 500; }

/* ----- videos (markup from tools/site/videos.py, behaviour from scripts/video.js) ----------------------- */

.site-video { margin: 0; }
.site-video-media {
	position: relative;
	display: grid;
	overflow: hidden;
	border: 1px solid var(--site-hair-soft);
	border-radius: var(--site-r-tile);
	background: var(--site-sunken);
}
.site-video-media > * { grid-area: 1 / 1; }
.site-video-poster, .site-video-poster img, .site-video-player { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.site-video-poster img { object-fit: cover; }
.site-video-player { position: relative; background: transparent; }
.site-video-toggle {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(10, 18, 30, .62);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 24px rgba(0, 0, 0, .5);
	color: var(--site-text);
	cursor: pointer;
	transition: border-color .12s var(--site-ease), opacity .18s var(--site-ease);
}
.site-video-toggle svg { fill: currentColor; }
.site-video-toggle:hover { border-color: var(--site-accent); }
/* Paused for good: a large play button in the middle. Playing or waiting: a small one in the corner. */
.site-video-media[data-video="paused"] .site-video-toggle { left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.site-video-media[data-video="paused"] .site-video-toggle svg { width: 30px; height: 30px; margin-left: 3px; }
.site-video-media[data-video="playing"] .site-video-toggle,
.site-video-media[data-video="waiting"] .site-video-toggle { right: 12px; bottom: 12px; width: 40px; height: 40px; }
.site-video-media[data-video="playing"] .site-video-toggle svg,
.site-video-media[data-video="waiting"] .site-video-toggle svg { width: 16px; height: 16px; }
.site-video-media[data-video="playing"] .site-video-toggle { opacity: .55; }
.site-video-media[data-video="playing"]:hover .site-video-toggle,
.site-video-media[data-video="playing"] .site-video-toggle:focus-visible { opacity: 1; }

/* ----- questions (an Events-style table) ----------------------------------------------------------------- */

.site-qtable { width: 100%; padding: 4px 8px 8px; border-collapse: separate; border-spacing: 0; }
.site-qtable caption { text-align: left; }
.site-qtable th, .site-qtable td { padding: 14px 12px; text-align: left; vertical-align: middle; }
.site-qtable thead th { padding: 12px 12px 8px; color: var(--site-text-4); font: 500 13.5px/1 var(--site-font-text); }
.site-qtable tbody tr:nth-child(odd) > * { background: rgba(0, 0, 0, .22); }
.site-qtable tbody tr > :first-child { border-radius: 8px 0 0 8px; }
.site-qtable tbody tr > :last-child { border-radius: 0 8px 8px 0; }
.site-qtable .site-q {
	position: relative;
	width: 30%;
	padding-left: 28px;
	color: var(--site-text);
	font: 600 17px/1.35 var(--site-font-display);
}
.site-qtable .site-q::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 16px;
	bottom: 16px;
	width: 4px;
	background: var(--c);
	box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent);
}
.site-qtable .site-a { width: 34%; color: var(--site-text-2); font-size: 15.5px; line-height: 1.5; }
.site-qtable .site-qx { width: 22%; color: var(--site-text-2); font-size: 14.5px; line-height: 1.35; }
.site-qx-name { display: flex; align-items: center; gap: 8px; }
.site-qx-figure { display: block; margin-top: 4px; padding-left: 17px; color: var(--site-text-3); font: 400 13px/1.4 var(--site-font-text); }
.site-qx-figure b { color: var(--site-text); font: 500 15px/1 var(--site-font-mono); font-variant-numeric: tabular-nums; }

/* ----- communications ---------------------------------------------------------------------------------------- */

.site-comms-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; padding: 22px; }
.site-comms-text, .site-comms-data { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.site-comms-text h3 { font-size: 24px; line-height: 1.18; }
.site-comms-text > p { color: var(--site-text-3); font-size: 16px; line-height: 1.6; }
.site-volumes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; }
.site-volumes li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--site-hair-soft);
	border-top: 2px solid var(--c);
	border-radius: 4px 4px var(--site-r-tile) var(--site-r-tile);
	background: rgba(0, 0, 0, .26);
}
.site-volumes b { color: var(--site-text); font: 600 21px/1.1 var(--site-font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-volumes b small { color: var(--site-text-3); font: 500 12px/1 var(--site-font-mono); letter-spacing: 0; }
.site-volumes li > span { color: var(--site-text-4); font-size: 13px; line-height: 1.35; }
.site-comms-shot { grid-column: 1 / -1; margin: 0; }
.site-comms-shot .site-shot { aspect-ratio: 3296 / 1080; }
.site-comms-shot figcaption { margin-top: 10px; }

.site-chart { margin: 0; }
.site-chart figcaption { margin-bottom: 12px; color: var(--site-text); font: 600 15px/1.25 var(--site-font-display); }
.site-chart-note { margin-top: 10px; color: var(--site-text-4); font-size: 13px; line-height: 1.45; }

/* The rate ladder: one row per DVB-S2 rate the day uses, bars to scale. */
.site-ladder { display: grid; gap: 6px; list-style: none; }
.site-ladder li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 92px; gap: 12px; align-items: center; }
.site-ladder-name { color: var(--site-text-2); font: 500 13px/1.25 var(--site-font-mono); }
.site-ladder-name small { display: block; color: var(--site-text-4); font: 400 11px/1.3 var(--site-font-mono); }
.site-ladder svg { width: 100%; height: 14px; }
.site-ladder .grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.site-ladder .bar { fill: var(--c); }
.site-ladder .is-fixed .bar { fill: none; stroke: var(--c-neutral); stroke-width: 1; }
.site-ladder-rate { color: var(--site-text); font: 500 13px/1 var(--site-font-mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-ladder-rate small { color: var(--site-text-4); font-size: 11px; }

/* Time at each rate over a station's day: one stacked bar and its legend. */
.site-stack { width: 100%; height: 14px; }
.site-stack rect { fill: var(--c); }
.site-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; list-style: none; color: var(--site-text-3); font: 400 12.5px/1.3 var(--site-font-mono); }
.site-legend li { display: inline-flex; align-items: center; gap: 7px; }
.site-legend .site-square { width: 10px; height: 10px; }

/* Data returned in one day: three bars to one scale. */
.site-bars { display: grid; gap: 8px; list-style: none; }
.site-bars li { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 84px; gap: 12px; align-items: center; }
.site-bars-label { color: var(--site-text-2); font-size: 14.5px; line-height: 1.3; }
.site-bars svg { width: 100%; height: 16px; }
.site-bars .bar { fill: var(--c); }
.site-bars .is-bound .bar { fill: none; stroke: var(--site-text-3); stroke-width: 1; stroke-dasharray: 4 3; }
.site-bars-value { color: var(--site-text); font: 500 15px/1 var(--site-font-mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The readout strip: label, value and unit, ruled cells, square marks. */
.site-readouts {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin: 16px 0 0;
	border-top: 1px solid var(--site-hair-soft);
	border-bottom: 1px solid var(--site-hair-soft);
}
.site-readouts div { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; padding: 16px 18px; border-left: 1px solid var(--site-hair-soft); }
.site-readouts div:first-child { border-left: 0; padding-left: 4px; }
.site-readouts dt { display: flex; align-items: center; gap: 8px; color: var(--site-text-4); font: 600 12px/1.25 var(--site-font-display); letter-spacing: .12em; text-transform: uppercase; }
.site-readouts dd { margin: 0; color: var(--site-text); font: 500 28px/1 var(--site-font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-readouts dd small { margin-left: 4px; color: var(--site-text-3); font: 500 13px/1 var(--site-font-mono); letter-spacing: 0; }
.site-readouts p { color: var(--site-text-4); font-size: 13px; line-height: 1.4; }

/* ----- the analysis list ("New Analysis") ----------------------------------------------------------------- */

.site-analyses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 6px 14px 10px; list-style: none; cursor: default; }
.site-analyses li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: start;
	padding: 12px 10px;
	border-bottom: 1px solid var(--site-hair-soft);
}
.site-analyses li:nth-last-child(-n+2) { border-bottom: 0; }
.site-analyses svg {
	width: 24px;
	height: 24px;
	margin-top: 1px;
	fill: none;
	stroke: var(--c);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 45%, transparent));
}
.site-analyses svg .solid { fill: var(--c); stroke: none; }
.site-analyses h4 { font-size: 16.5px; line-height: 1.25; }
.site-analyses p { margin-top: 3px; color: var(--site-text-3); font-size: 15px; line-height: 1.45; }
.site-analyses code { padding-top: 4px; color: var(--site-text-4); font-size: 11.5px; }

/* ----- the views mosaic -------------------------------------------------------------------------------------- */

.site-views { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--site-gap); }
.site-view { display: flex; flex-direction: column; }
.site-view .site-shot { margin: 10px 10px 0; }
.site-view-text { padding: 12px 16px 16px; color: var(--site-text-3); font-size: 15px; line-height: 1.5; }
.site-view.is-mode { grid-column: span 12; }
.site-view-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; }
.site-view-row .site-shot, .site-view-row .site-video { margin: 0; }
.site-view-row .site-view-text { padding: 8px 12px 8px 4px; }
.site-view-row .site-view-text p + p { margin-top: 12px; }
.site-view.is-scene { grid-column: span 7; }
.site-view.is-scene .site-shot { aspect-ratio: 1.69; }
.site-view.is-access { grid-column: span 5; }
.site-view.is-access .site-shot { flex: 1; min-height: 240px; }
.site-view.is-access .site-shot picture { position: absolute; inset: 0; }
.site-view.is-timeline { grid-column: span 12; }
.site-view.is-timeline .site-view-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.site-view.is-timeline .site-shot { aspect-ratio: 1767 / 454; }
.site-view.is-plots, .site-view.is-report { grid-column: span 6; }
.site-view.is-plots .site-shot, .site-view.is-report .site-shot { aspect-ratio: 1.45; }

/* ----- example missions ---------------------------------------------------------------------------------------- */

.site-stat-tiles { display: flex; flex: none; gap: 10px; margin: 0; }
.site-stat-tiles div { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 170px; padding: 14px 16px; border: 1px solid var(--site-hair); border-radius: var(--site-r-tile); background: rgba(0, 0, 0, .3); }
.site-stat-tiles dd { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--site-text); font: 600 34px/1 var(--site-font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.site-stat-tiles dd::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.site-stat-tiles dt { color: var(--site-text-4); font-size: 13px; }

/* The regime strip: six regimes, each with its examples. */
.site-regimes {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0 16px;
	margin-bottom: 24px;
	list-style: none;
	border-top: 1px solid var(--site-hair-soft);
}
.site-regimes > li { position: relative; padding: 14px 0 4px; }
.site-regimes > li::before { content: ""; position: absolute; left: 0; top: -5px; width: 1px; height: 9px; background: var(--site-text-3); }
.site-regimes strong { display: block; font: 600 17px/1.2 var(--site-font-display); }
.site-regimes p { margin-top: 2px; color: var(--site-text-3); font-size: 14px; line-height: 1.4; }
.site-regimes ul { display: grid; gap: 3px; margin-top: 10px; list-style: none; }
.site-regimes ul li { display: flex; align-items: center; gap: 8px; color: var(--site-text-2); font: 400 12.5px/1.35 var(--site-font-mono); }
.site-regimes ul li.is-more { padding-left: 16px; color: var(--site-text-4); }

/* Plates: two full Scene renders with a glass caption card. */
.site-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-gap); margin-bottom: var(--site-gap); list-style: none; }
.site-plate {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--site-hair);
	border-radius: var(--site-r-panel);
	background: #000;
	box-shadow: var(--site-shadow);
}
.site-plate > .site-viewport { position: absolute; inset: 0; }
.site-plate-card {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: min(62%, 440px);
	padding: 16px 18px;
	border: 1px solid var(--site-hair);
	border-radius: var(--site-r-tile);
	background: rgba(12, 20, 32, .74);
	-webkit-backdrop-filter: blur(12px) saturate(1.3);
	backdrop-filter: blur(12px) saturate(1.3);
}
.site-plate-card strong { color: var(--site-text); font: 600 22px/1.2 var(--site-font-display); }
.site-plate-line { color: var(--site-text-2); font-size: 15px; line-height: 1.5; }
.site-plate-card .site-legend { margin-top: 2px; }
.site-plate-figures { color: var(--site-text-3); font: 400 12.5px/1.45 var(--site-font-mono); }
.site-kicker { color: var(--site-text-4); font: 600 12px/1.2 var(--site-font-display); letter-spacing: .12em; text-transform: uppercase; }
.site-legend .site-dash { display: inline-block; width: 14px; height: 0; border-top: 2px dashed var(--c); }

/* The grid of tiles. */
.site-examples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; list-style: none; }
.site-example {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--site-hair);
	border-radius: var(--site-r-tile);
	background: linear-gradient(180deg, var(--site-glass-top), var(--site-glass-bottom));
	box-shadow: var(--site-shadow);
}
.site-example > .site-viewport { order: -1; aspect-ratio: 16 / 10; }
.site-example > strong { padding: 12px 14px 0; color: var(--site-text); font: 600 16.5px/1.25 var(--site-font-display); }
.site-example > strong + span { padding: 4px 14px 0; color: var(--site-text-3); font-size: 14.5px; line-height: 1.45; }
.site-example-meta { margin-top: auto; padding: 10px 14px 14px; color: var(--site-text-4); font: 500 11.5px/1.3 var(--site-font-mono); letter-spacing: .02em; }
.site-plate .site-example-meta { padding: 0; }
.site-example.is-wide { grid-column: span 2; grid-row: span 2; }
.site-example.is-wide > .site-viewport { flex: 1; min-height: 300px; aspect-ratio: auto; }
.site-example.is-wide > strong { padding-top: 14px; font-size: 20px; }
.site-example.is-wide > strong + span { max-width: 60ch; font-size: 15.5px; }
.site-example.is-wide > .site-example-meta { margin-top: 0; }
.site-example-showcase {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	grid-column: 1 / -1;
	padding: 22px 26px;
	border: 1px dashed rgba(255, 255, 255, .22);
	border-radius: var(--site-r-tile);
}
.site-example-showcase p { color: var(--site-text); font: 600 19px/1.3 var(--site-font-display); }
.site-example-showcase .site-link { margin-left: auto; }

.site-tour { margin-top: var(--site-gap); }
.site-tour .site-view-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 16px; gap: 28px; }
.site-tour h3 { font-size: 21px; line-height: 1.2; }
.site-tour p { margin-top: 12px; color: var(--site-text-3); font-size: 15.5px; line-height: 1.55; }

/* ----- how it works ------------------------------------------------------------------------------------------- */

.site-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-gap); list-style: none; }
.site-step { display: flex; flex-direction: column; }
.site-step-badge {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: var(--c);
	color: var(--site-canvas);
	font: 600 13px/1 var(--site-font-mono);
}
.site-step h3 { font: 600 16px/1.2 var(--site-font-display); }
.site-step .site-shot { margin: 10px 10px 0; aspect-ratio: 1.9; }
.site-step > p { max-width: 62ch; padding: 14px 18px 0; color: var(--site-text-3); font-size: 15.5px; line-height: 1.55; }
.site-step > p:last-child { padding-bottom: 18px; }
.site-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 18px; list-style: none; }
.site-tags li { padding: 5px 8px; border: 1px solid var(--site-hair-soft); border-radius: 4px; background: rgba(255, 255, 255, .05); color: var(--site-text-2); font-size: 12.5px; line-height: 1.3; }

/* ----- validation ----------------------------------------------------------------------------------------------- */

.site-validation-body { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: 40px; padding: 28px 30px; }
.site-validation-total { display: flex; flex-direction: column; gap: 10px; }
.site-validation-total > b { color: var(--site-text); font: 600 112px/.9 var(--site-font-display); letter-spacing: -.03em; }
.site-validation-total > p { max-width: 30ch; color: var(--site-text-3); font-size: 17px; line-height: 1.5; }
.site-validation-total dl { display: flex; gap: 28px; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--site-hair-soft); }
.site-validation-total dl div { display: flex; flex-direction: column-reverse; gap: 4px; }
.site-validation-total dt { color: var(--site-text-4); font-size: 13px; }
.site-validation-total dd { margin: 0; color: var(--site-text); font: 600 21px/1 var(--site-font-mono); font-variant-numeric: tabular-nums; }
.site-vbars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; align-content: start; list-style: none; }
.site-vbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; }
.site-vbars span { overflow: hidden; color: var(--site-text-2); font-size: 14.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.site-vbars b { color: var(--site-text); font: 500 14px/1 var(--site-font-mono); font-variant-numeric: tabular-nums; }
.site-vbars svg { grid-column: 1 / -1; width: 100%; height: 3px; }
.site-vbars .track { fill: rgba(255, 255, 255, .06); }
.site-vbars .bar { fill: var(--c); }
.site-facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--site-hair-soft); list-style: none; }
.site-facts-row li { padding: 20px 24px 24px; border-left: 1px solid var(--site-hair-soft); }
.site-facts-row li:first-child { border-left: 0; padding-left: 30px; }
.site-facts-row h3 { font-size: 16.5px; line-height: 1.25; }
.site-facts-row p { margin-top: 6px; color: var(--site-text-3); font-size: 15px; line-height: 1.5; }

/* ----- the close ------------------------------------------------------------------------------------------------- */

.site-closing { padding-bottom: 72px; }
.site-close-main { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 30px; }
.site-close-main h2 { font-size: 30px; line-height: 1.15; }
.site-close-main p { max-width: 62ch; margin-top: 8px; color: var(--site-text-3); font-size: 17px; line-height: 1.55; }
.site-close-main .site-actions { flex: none; }
.site-dev-note { padding: 16px 30px 20px; border-top: 1px solid var(--site-hair-soft); color: var(--site-text-3); font-size: 15px; line-height: 1.6; }
.site-dev-note strong { font-family: var(--site-font-display); }
.site-dev-note .site-num { color: var(--site-text); font-weight: 600; }

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

.site-footer { padding: 36px 0 44px; border-top: 1px solid var(--site-hair-soft); background: rgba(10, 15, 26, .7); color: var(--site-text-4); font-size: 13.5px; line-height: 1.5; }
.site-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--site-hair-soft); }
.site-footer .site-brand { font-size: 17px; }
.site-footer .site-brand img { width: 24px; height: 24px; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; }
.site-footer-links a { color: var(--site-text-2); text-decoration: none; }
.site-footer-links a:hover { color: var(--site-text); text-decoration: underline; text-underline-offset: 4px; }
.site-footer h2 { margin-bottom: 12px; color: var(--site-text-2); font: 600 15px/1.2 var(--site-font-display); }
.site-credits { columns: 3; column-gap: 28px; margin-bottom: 20px; list-style: none; }
.site-credits li { margin-bottom: 12px; break-inside: avoid; }
.site-credits strong { display: block; color: var(--site-text-3); font-weight: 500; }
.site-credits a, .site-footer-note a { color: var(--site-text-3); text-underline-offset: 3px; }
.site-footer-note + .site-footer-note { margin-top: 6px; }

/* ----- guide ----------------------------------------------------------------------------------------------------------- */

.guide-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--site-gap);
	align-items: start;
	max-width: 1340px;
	margin: 0 auto;
	padding: 16px max(16px, env(safe-area-inset-right)) 72px max(16px, env(safe-area-inset-left));
}
.guide-toc { position: sticky; top: calc(var(--site-topbar) + 16px); display: flex; flex-direction: column; max-height: calc(100vh - var(--site-topbar) - 32px); }
.guide-toc-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px; }
.guide-toc details > summary { display: none; }
.guide-toc ol { list-style: none; }
.guide-toc a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--site-text-2);
	font-size: 14.5px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .12s var(--site-ease);
}
.guide-toc-scroll > details > ol > li > a::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin: 0 4px 0 2px;
	border-right: 1.5px solid var(--site-text-4);
	border-bottom: 1.5px solid var(--site-text-4);
	transform: rotate(-45deg);
	transition: transform .18s var(--site-ease);
}
.guide-toc-scroll > details > ol > li.is-open > a::before { transform: rotate(45deg) translate(-2px, -2px); }
.guide-toc ol ol { margin: 2px 0 6px 15px; padding-left: 12px; border-left: 1px solid var(--site-hair-soft); }
.guide-toc ol ol a { min-height: 30px; color: var(--site-text-3); font-size: 14px; }
.guide-toc a:hover { background: rgba(255, 255, 255, .05); color: var(--site-text); }
.guide-toc a[aria-current="true"] { background: rgba(255, 255, 255, .08); color: var(--site-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.guide-toc.has-js li:not(.is-open) > ol { display: none; }

.guide-main { min-width: 0; }
.guide-article { max-width: 980px; padding: 32px 40px 40px; counter-reset: guide-section; }
.guide-article > header h1 { font-size: clamp(32px, 3vw, 42px); line-height: 1.08; }
.guide-article > header p { max-width: 70ch; margin-top: 14px; color: var(--site-text-3); font-size: 18px; line-height: 1.6; }
.guide-article section { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--site-hair-soft); }
.guide-article h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; font-size: 32px; line-height: 1.12; counter-increment: guide-section; }
.guide-article h2::before { content: counter(guide-section, decimal-leading-zero); color: var(--site-text-4); font: 500 15px/1 var(--site-font-mono); letter-spacing: .04em; }
.guide-article h3 { margin: 34px 0 12px; font-size: 21px; line-height: 1.25; }
.guide-article p, .guide-article li { max-width: 76ch; color: var(--site-text-2); font-size: 16.5px; line-height: 1.65; }
.guide-article p { margin-bottom: 14px; }
.guide-article section > ul { margin: 0 0 14px; padding-left: 20px; }
.guide-article li + li { margin-top: 4px; }
.guide-article a:not(.site-button) { color: var(--site-accent); text-decoration: underline; text-decoration-color: rgba(86, 211, 218, .35); text-underline-offset: 3px; }
.guide-article a:not(.site-button):hover { text-decoration-color: var(--site-accent); }
.guide-article code:not(pre code) {
	padding: 1px 5px;
	border: 1px solid var(--site-hair-soft);
	border-radius: 5px;
	background: rgba(255, 255, 255, .06);
	color: #c9d4e3;
	font-size: .86em;
	overflow-wrap: anywhere;
}
.guide-article code.site-type {
	border-color: color-mix(in srgb, var(--c) 34%, transparent);
	background: color-mix(in srgb, var(--c) 10%, transparent);
	color: var(--c);
	font-size: 12.5px;
}
.guide-article kbd {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--site-hair);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .05);
	color: var(--site-text);
	font: 500 .82em/1.4 var(--site-font-mono);
	white-space: nowrap;
}
.guide-article .site-shot { margin: 18px 0 8px; }
.guide-article figure.site-figure { margin: 18px 0 22px; }
.guide-article figure.site-figure figcaption { margin-top: 10px; color: var(--site-text-3); font-size: 14.5px; line-height: 1.5; }

.site-code { position: relative; margin: 16px 0 18px; overflow: hidden; border: 1px solid var(--site-hair); border-radius: var(--site-r-ctl); background: var(--site-sunken); }
.site-code-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 4px 6px 4px 14px; border-bottom: 1px solid var(--site-hair-soft); color: var(--site-text-4); font: 500 12px/1 var(--site-font-mono); letter-spacing: .02em; }
.site-code pre { margin: 0; padding: 14px 16px 16px; overflow-x: auto; color: #d6e0ee; font-size: 14px; line-height: 1.6; tab-size: 4; }
.site-code pre:focus-visible { outline-offset: -2px; }
.site-copy {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--site-text-3);
	cursor: pointer;
	transition: background-color .12s var(--site-ease), color .12s var(--site-ease);
}
.site-copy:hover { border-color: var(--site-hair-soft); background: rgba(255, 255, 255, .05); color: var(--site-text); }
.site-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.site-copy.is-done { color: var(--c-link); }

.site-table-wrap { margin: 16px 0 20px; overflow-x: auto; border: 1px solid var(--site-hair-soft); border-radius: var(--site-r-tile); background: rgba(0, 0, 0, .25); }
.site-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.site-table th { padding: 11px 16px; border-bottom: 1px solid var(--site-hair-soft); background: rgba(255, 255, 255, .025); color: var(--site-text-4); font: 500 13.5px/1.3 var(--site-font-text); text-align: left; vertical-align: bottom; }
.site-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .04); color: var(--site-text-2); vertical-align: top; }
.site-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }
.site-table tbody tr:last-child td { border-bottom: 0; }
.site-table td:first-child { width: 1%; white-space: nowrap; }
.site-table code { overflow-wrap: normal; }
.site-table code.site-type::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.site-table code.site-type { padding: 3px 7px; border-color: color-mix(in srgb, var(--c) 30%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--c); font-size: 13px; }
.site-table.is-num td { font-family: var(--site-font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.site-table.is-num td:not(:first-child), .site-table.is-num th:not(:first-child) { text-align: right; }

.site-example-box { margin: 18px 0 20px; padding-bottom: 14px; border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-radius: var(--site-r-tile); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, transparent), rgba(0, 0, 0, .18)); }
.site-example-box-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--site-hair-soft); color: var(--site-text); font: 600 14px/1.2 var(--site-font-display); }
.site-example-box > p { padding: 12px 16px 0; color: var(--site-text-3); font-size: 15px; }
.site-example-box .site-table-wrap { margin: 12px 16px 0; }
.site-callout { margin: 16px 0 20px; padding: 14px 18px; border: 1px solid var(--site-hair-soft); border-left: 3px solid var(--c-medium); border-radius: 0 var(--site-r-ctl) var(--site-r-ctl) 0; background: rgba(255, 255, 255, .025); }
.site-callout p { margin: 0; font-size: 15px; line-height: 1.6; }

/* ----- 404 ---------------------------------------------------------------------------------------------------------------- */

.site-notfound { display: grid; place-items: center; min-height: calc(100vh - var(--site-topbar)); padding: 40px 16px; }
.site-notfound .site-panel { width: 100%; max-width: 560px; padding: 32px 30px; }
.site-notfound h1 { font-size: 34px; line-height: 1.1; }
.site-notfound p { margin: 12px 0 24px; color: var(--site-text-3); }

/* ----- responsive ------------------------------------------------------------------------------------------------------------ */

@media (max-width: 1179px) {
	:root { --site-gutter: 24px; --site-section: 72px; }
	.site-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.site-hero-copy { grid-column: 1; max-width: 520px; }
	.site-hero-side { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: end; align-items: start; margin-top: 96px; }
	.site-hero-scene { bottom: auto; height: min(780px, 100%); }
	/* The copy panel covers the left half here: the crop keeps more of the picture's left, which moves the subject right. */
	.site-hero-scene img { object-position: 15% 40%; }
	.site-assistant-body { grid-template-columns: 1fr; }
	.site-assistant-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 32px; padding: 0 6px 6px; }
	.site-assistant-text h2 { grid-column: 1 / -1; }
	.site-assistant-text > p { grid-column: 1; }
	.site-assistant-text h3, .site-assistant-text .site-prompts { grid-column: 2; }
	.site-assistant-text h3 { grid-row: 2; margin-top: 0; }
	.site-assistant-text .site-prompts { grid-row: 3 / span 2; }
	/* The first paragraph spans the heading's row too, so the requests follow their heading without a gap. */
	.site-assistant-text > p:first-of-type { grid-row: 2 / span 2; }
	.site-assistant-text > p:nth-of-type(2) { grid-row: 4; }
	.site-qtable .site-q { width: 34%; }
	.site-comms-body { grid-template-columns: 1fr; }
	.site-readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.site-readouts div:nth-child(3n + 1) { border-left: 0; padding-left: 4px; }
	.site-readouts div:nth-child(n + 4) { border-top: 1px solid var(--site-hair-soft); }
	.site-regimes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.site-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.site-example.is-wide { grid-column: span 3; grid-row: auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto 1fr; }
	.site-example.is-wide > .site-viewport { grid-row: 1 / span 3; grid-column: 1; min-height: 0; aspect-ratio: 16 / 10; }
	.site-example.is-wide > strong { grid-column: 2; padding: 18px 18px 0; }
	.site-example.is-wide > strong + span { grid-column: 2; padding: 6px 18px 0; }
	.site-example.is-wide > .site-example-meta { grid-column: 2; padding: 12px 18px 18px; align-self: end; }
	.site-validation-body { grid-template-columns: 1fr; gap: 28px; }
	.site-facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-facts-row li:nth-child(3) { border-left: 0; padding-left: 30px; }
	.site-facts-row li:nth-child(n + 3) { border-top: 1px solid var(--site-hair-soft); }
	.site-credits { columns: 2; }
	.site-plate { aspect-ratio: auto; overflow: visible; background: linear-gradient(180deg, var(--site-glass-top), var(--site-glass-bottom)); }
	.site-plate > .site-viewport { position: relative; inset: auto; aspect-ratio: 16 / 10; border-radius: var(--site-r-panel) var(--site-r-panel) 0 0; }
	.site-plate-card { position: static; flex: 1; width: auto; border: 0; border-top: 1px solid var(--site-hair-soft); border-radius: 0 0 var(--site-r-panel) var(--site-r-panel); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (max-width: 899px) {
	.site-hero { min-height: 0; padding: 0 0 8px; }
	.site-hero-scene { position: relative; inset: auto; height: clamp(260px, 62vw, 420px); }
	.site-hero-scene img { object-position: 50% 40%; -webkit-mask-image: none; mask-image: none; }
	.site-hero-grid { grid-template-columns: 1fr; margin-top: -40px; padding: 0 var(--site-gutter); }
	.site-hero-copy { max-width: none; }
	.site-hero-side { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; margin-top: 0; }
	.site-scene-label { position: absolute; left: 16px; right: 16px; top: 12px; display: flex; margin: 0; font-size: 11px; }
	.site-scene-label > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.site-head.has-aside { flex-direction: column; align-items: flex-start; gap: 20px; }
	.site-assistant-text { grid-template-columns: 1fr; grid-template-rows: none; }
	.site-assistant-text h3, .site-assistant-text .site-prompts, .site-assistant-text > p, .site-assistant-text > p:first-of-type, .site-assistant-text > p:nth-of-type(2) { grid-column: 1; grid-row: auto; }
	.site-qtable thead { display: none; }
	.site-qtable, .site-qtable tbody, .site-qtable tr { display: block; }
	.site-qtable tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; padding: 14px 12px; border-radius: 8px; }
	.site-qtable tbody tr:nth-child(odd) { background: rgba(0, 0, 0, .22); }
	.site-qtable tbody tr > * { display: block; width: auto !important; padding: 0; background: none !important; border-radius: 0 !important; }
	.site-qtable .site-q, .site-qtable .site-a { grid-column: 1 / -1; }
	.site-qtable .site-q { padding-left: 16px; }
	.site-qtable .site-q::before { left: 0; top: 3px; bottom: 3px; }
	.site-qtable .site-qx-figure { padding-left: 0; }
	.site-analyses { grid-template-columns: 1fr; }
	.site-analyses li:nth-last-child(2) { border-bottom: 1px solid var(--site-hair-soft); }
	.site-views > * { grid-column: 1 / -1 !important; }
	.site-view-row, .site-view.is-timeline .site-view-row, .site-tour .site-view-row { grid-template-columns: 1fr; gap: 6px; }
	.site-view-row .site-view-text { padding: 8px 6px 6px; }
	.site-view.is-access .site-shot { aspect-ratio: 1.2; flex: none; }
	.site-plates { grid-template-columns: 1fr; }
	.site-steps { grid-template-columns: 1fr; }
	.site-close-main { flex-direction: column; align-items: flex-start; }
	.guide-layout { grid-template-columns: 1fr; padding-top: 12px; }
	.guide-toc { position: static; max-height: none; }
	.guide-toc .site-panel-head { display: none; }
	.guide-toc details > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		padding: 0 8px;
		color: var(--site-text);
		font: 600 16px/1 var(--site-font-display);
		cursor: pointer;
		list-style: none;
	}
	.guide-toc details > summary::-webkit-details-marker { display: none; }
	.guide-toc details > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--site-text-3); border-bottom: 1.5px solid var(--site-text-3); transform: rotate(45deg); transition: transform .26s var(--site-ease); }
	.guide-toc details[open] > summary::after { transform: rotate(-135deg); }
	.guide-article { padding: 22px 18px 26px; }
	.guide-article h2 { font-size: 27px; }
	.site-table:not(.is-num, .is-keep) thead { display: none; }
	.site-table:not(.is-num, .is-keep), .site-table:not(.is-num, .is-keep) tbody, .site-table:not(.is-num, .is-keep) tr, .site-table:not(.is-num, .is-keep) td { display: block; width: auto; }
	.site-table:not(.is-num, .is-keep) td:first-child { padding-bottom: 2px; border-bottom: 0; white-space: normal; }
	.site-table:not(.is-num, .is-keep) td:not(:first-child) { padding-top: 4px; }
	.site-table:not(.is-num, .is-keep) tbody tr:nth-child(even) td { background: transparent; }
	.site-table:not(.is-num, .is-keep) tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
	.site-table.is-num th, .site-table.is-num td, .site-table.is-keep th, .site-table.is-keep td { padding: 9px 10px; }
	.site-table.is-num th, .site-table.is-keep td:first-child { white-space: normal; }
	.site-table.is-keep kbd { white-space: normal; }
}

@media (max-width: 640px) {
	:root { --site-gutter: 16px; --site-topbar: 54px; --site-section: 56px; }
	body { font-size: 16px; }
	.site-topbar nav { gap: 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
	.site-brand { font-size: 17px; gap: 8px; }
	.site-brand img { width: 26px; height: 26px; }
	.site-tabs .site-nav-section { display: none; }
	.site-tabs { justify-content: flex-end; }
	.site-tabs .site-nav-cta { margin-left: 0; }
	.site-tabs a { height: 36px; padding: 0 12px; font-size: 14px; }
	.site-tabs svg { display: none; }
	.site-panel-head { padding: 10px 14px; }
	.site-ph-sub, .site-ph-meta.is-wide-only { display: none; }
	.site-head h2 { font-size: 26px; }
	.site-head p { font-size: 16.5px; }
	.site-hero-copy { gap: 18px; padding: 22px 20px 20px; }
	.site-hero-copy h1 { font-size: 32px; }
	.site-lede { font-size: 16.5px; }
	.site-hero-copy .site-button { flex: 1 1 100%; }
	.site-facts { gap: 0 14px; }
	.site-facts dd { font-size: 18px; }
	.site-facts dt { font-size: 12.5px; }
	.site-hero-side .site-analyses-panel { display: none; }
	.site-kpis { padding: 10px; }
	.site-kpi-value { font-size: 18px; }
	.site-assistant-body { gap: 16px; padding: 10px; }
	.site-qtable { padding: 4px; }
	.site-qtable .site-q { font-size: 16.5px; }
	.site-comms-body { padding: 16px 14px; }
	.site-volumes { grid-template-columns: 1fr; }
	.site-volumes li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; border-top-width: 1px; border-left: 3px solid var(--c); border-radius: 0 var(--site-r-tile) var(--site-r-tile) 0; }
	.site-volumes b { font-size: 18px; }
	.site-volumes li > span { text-align: right; }
	.site-ladder { gap: 10px; }
	.site-ladder li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
	.site-ladder-name small { display: inline; margin-left: 8px; }
	.site-ladder svg { grid-column: 1 / -1; grid-row: 2; }
	.site-comms-shot .site-shot, .site-view.is-timeline .site-shot { aspect-ratio: 2.2; }
	.site-comms-shot img, .site-view.is-timeline .site-shot img { object-position: 0 50%; }
	.site-bars li { grid-template-columns: minmax(0, 1fr) 72px; }
	.site-bars-label { grid-column: 1 / -1; }
	.site-bars svg { grid-column: 1; }
	.site-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-readouts div { padding: 14px 12px; }
	.site-readouts div:nth-child(3n + 1) { border-left: 1px solid var(--site-hair-soft); padding-left: 12px; }
	.site-readouts div:nth-child(odd) { border-left: 0; padding-left: 4px; }
	.site-readouts div:nth-child(n + 3) { border-top: 1px solid var(--site-hair-soft); }
	.site-readouts dd { font-size: 22px; }
	.site-analyses { padding: 4px 6px 6px; }
	.site-analyses li { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
	.site-analyses code { display: none; }
	.site-stat-tiles { width: 100%; }
	.site-stat-tiles div { flex: 1; min-width: 0; }
	.site-stat-tiles dd { font-size: 26px; }
	.site-regimes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.site-example.is-wide { grid-column: span 2; display: flex; }
	.site-example.is-wide > strong, .site-example.is-wide > strong + span, .site-example.is-wide > .site-example-meta { padding-left: 14px; padding-right: 14px; }
	.site-example.is-wide > .site-example-meta { align-self: stretch; }
	.site-example > strong + span { display: none; }
	.site-example.is-wide > strong + span { display: block; }
	.site-example > strong { font-size: 15px; }
	.site-example-showcase { flex-direction: column; align-items: flex-start; padding: 20px; }
	.site-example-showcase .site-link { margin-left: 0; }
	.site-validation-body { padding: 22px 18px; }
	.site-validation-total > b { font-size: 72px; }
	.site-vbars { grid-template-columns: 1fr; }
	.site-facts-row { grid-template-columns: 1fr; }
	.site-facts-row li, .site-facts-row li:first-child, .site-facts-row li:nth-child(3) { padding: 16px 18px; border-left: 0; }
	.site-facts-row li + li { border-top: 1px solid var(--site-hair-soft); }
	.site-close-main { padding: 22px 20px; }
	.site-close-main h2 { font-size: 25px; }
	.site-close-main .site-actions { width: 100%; }
	.site-close-main .site-button { flex: 1 1 100%; }
	.site-dev-note { padding: 14px 20px 18px; }
	.site-credits { columns: 1; }
	.site-code pre { font-size: 13px; }
	.site-example-box .site-table-wrap { margin: 10px 8px 0; }
	.site-example-box > p { padding: 12px 12px 0; }
	.site-table.is-num th, .site-table.is-num td { padding: 8px 6px; }
	.site-table.is-num td { font-size: 12.5px; }
	.site-table.is-num th { font-size: 12px; }
}

@media (max-width: 400px) {
	.guide-layout { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
	.guide-article { padding: 20px 12px 24px; }
	.site-example-box .site-table-wrap { margin: 10px 4px 0; }
	.site-table.is-num td:first-child { white-space: normal; }
	.site-table.is-keep thead { display: none; }
	.site-table.is-keep, .site-table.is-keep tbody, .site-table.is-keep tr, .site-table.is-keep td { display: block; width: auto; }
	.site-table.is-keep td { padding: 2px 12px; border-bottom: 0; }
	.site-table.is-keep td:first-child { padding-top: 10px; color: var(--site-text); }
	.site-table.is-keep td:last-child { padding-bottom: 10px; }
	.site-table.is-keep tbody tr:nth-child(even) td { background: transparent; }
	.site-table.is-keep tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
	.site-table.is-keep td:nth-child(2)::before { content: "macOS: "; color: var(--site-text-4); }
	.site-table.is-keep td:nth-child(3)::before { content: "Windows and Linux: "; color: var(--site-text-4); }
}

@media (max-width: 359px) {
	.site-topbar nav { gap: 6px; }
	.site-brand { gap: 7px; font-size: 16px; }
	.site-tabs { gap: 2px; }
	.site-tabs a { padding: 0 10px; font-size: 13.5px; }
}

/* ----- preferences ---------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

@media (prefers-reduced-transparency: reduce) {
	.site-panel, .site-example, .site-plate-card, .site-topbar, .site-scene-label, .site-body-chip, .site-video-toggle {
		background: var(--site-glass-solid);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-panel, .site-plate-card, .site-topbar, .site-scene-label { background: var(--site-glass-solid); }
}

@media (forced-colors: active) {
	.site-panel, .site-example, .site-plate, .site-plate-card, .site-shot, .site-video-media, .site-code, .site-table-wrap { border: 1px solid CanvasText; }
	.site-button { border: 1px solid ButtonText; }
	.site-button::before { forced-color-adjust: none; }
	.site-button.is-primary::before { background: ButtonText; }
	.site-button.is-primary { color: ButtonFace; forced-color-adjust: none; }
	.site-hero-copy h1, h1, h2, h3, h4 { -webkit-text-fill-color: CanvasText; color: CanvasText; }
	.site-dot, .site-square, .site-step-badge, .site-qtable .site-q::before { forced-color-adjust: none; }
	.site-video-toggle { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; forced-color-adjust: none; }
	.site-chip, .site-type { border: 1px solid CanvasText; }
	.site-tabs a[aria-current="page"], .site-tabs .site-nav-cta a { border: 1px solid Highlight; }
}