@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------------
   Theme tokens.

   Dark is the default set below. A `@media (prefers-color-scheme: light)`
   block near the bottom of this file overrides every one of them for a light
   OS setting. There are no exceptions: the chrome and the WebGL stage flip
   together, so the page is never light-over-dark.

   That includes the three.js scenes. The `--stage-*`, `--rig-*` and `--bloom-*`
   tokens below are read back out by `js/theme.js` and handed to `sceneKit.js`,
   which is why this file — not the JS — is the single source of truth for
   every colour on the site.

   Consequence: no colour literal below may be hardcoded. Anything that used
   to be a raw `rgba(255,255,255,…)` or `rgba(13,17,20,…)` is a token now, or
   it would not flip.
   --------------------------------------------------------------------------- */

:root {
	color-scheme: dark;

	--bg: #07090b;
	--bg-2: #0a0d10;
	--panel: #0d1114;
	--panel-2: #11171b;
	--panel-raised: #151c21;

	--ink: #dfe6ea;
	--ink-dim: #9aa8b0;
	--ink-dimmer: #6b7880;
	--ink-faint: #46525a;

	--accent: #4ec9b0;
	--accent-soft: rgba(78, 201, 176, 0.14);
	--accent-line: rgba(78, 201, 176, 0.32);
	--accent-line-strong: rgba(78, 201, 176, 0.42);
	--accent-glow: rgba(78, 201, 176, 0.45);
	--signal: #e8a33d;
	--signal-soft: rgba(232, 163, 61, 0.14);
	--signal-line: rgba(232, 163, 61, 0.34);
	--signal-hover: rgba(232, 163, 61, 0.22);
	--info: #6ea8fe;
	--danger: #e5644e;
	--danger-soft: rgba(229, 100, 78, 0.12);
	--danger-line: rgba(229, 100, 78, 0.34);
	--danger-hover: rgba(229, 100, 78, 0.2);
	--ok: #6fcf7f;

	--line: rgba(255, 255, 255, 0.07);
	--line-strong: rgba(255, 255, 255, 0.13);
	--line-hover: rgba(255, 255, 255, 0.22);

	/* Translucent washes over whatever sits behind them. */
	--surface: rgba(255, 255, 255, 0.04);
	--surface-2: rgba(255, 255, 255, 0.05);
	--surface-3: rgba(255, 255, 255, 0.09);
	--surface-4: rgba(255, 255, 255, 0.1);
	--track: rgba(255, 255, 255, 0.11);
	--code-bg: rgba(255, 255, 255, 0.06);
	--scrollbar: rgba(255, 255, 255, 0.12);
	--scrollbar-hover: rgba(255, 255, 255, 0.2);

	/* Glass sitting on the WebGL canvas. Flips with the stage behind it. */
	--glass: rgba(13, 17, 20, 0.86);
	--glass-solid: rgba(13, 17, 20, 0.9);
	--glass-strong: rgba(10, 13, 16, 0.96);
	--label-bg: rgba(7, 9, 11, 0.78);
	--label-bg-dim: rgba(7, 9, 11, 0.6);
	--pre-bg: rgba(0, 0, 0, 0.35);

	/* Stage decoration painted in CSS on top of the canvas. */
	--stage-wash: rgba(78, 201, 176, 0.05);
	--grid-line: rgba(255, 255, 255, 0.018);
	--vignette: rgba(0, 0, 0, 0.5);
	--world-fade: rgba(7, 9, 11, 0.9);
	--world-fade-soft: rgba(7, 9, 11, 0.55);

	/* ---- three.js palette -------------------------------------------------
	   Read at load by `js/theme.js` and copied into `sceneKit.js`'s THEME.
	   The scenes also use --accent / --signal / --info / --danger / --ok
	   directly, so those only exist once. */
	--stage-bg: #07090b;
	--stage-deck: #0c1113;
	--stage-grid: #1c262b;
	--stage-grid-accent: #2c4a48;
	--stage-shell: #1b2329;
	--stage-shell-2: #1b1b26;
	--stage-muted: #38424a;
	--stage-off: #223034;
	--stage-violet: #a78bfa;
	--stage-rose: #ef8f6e;
	--stage-cyan: #4dd0e1;
	--stage-ink: #dfe6ea;
	--stage-edge: #ffffff;

	/* Light rig. Colours are absolute; the *-gain values multiply each
	   scene's own authored intensity, so a theme only expresses the delta. */
	--rig-sky: #8fa6ad;
	--rig-ground: #05070a;
	--rig-key: #f2f7f8;
	--rig-fill: #7f939c;
	--rig-hemi-gain: 1;
	--rig-key-gain: 1;
	--rig-fill-gain: 1;
	--rig-rim-gain: 1;
	--stage-grid-gain: 1;
	/* Multiplies each scene's authored FogExp2 density. */
	--stage-fog-gain: 1;
	/* How far module shells lerp toward their category colour. Dark keeps
	   neutral shells (colour arrives via emissive); light mode tints the
	   diffuse instead, because additive emissive dies on a white stage. */
	--stage-shell-mix: 0;

	/* Additive emissive and bloom read as haze on a light background. */
	--stage-emissive: 1;
	--bloom-gain: 1;
	--bloom-threshold: 0.6;

	/* Image-based lighting (RoomEnvironment PMREM) strength, key-light
	   shadow strength (0 disables shadows entirely) and the hover
	   emissive boost on clickable meshes. */
	--env-intensity: 0.35;
	--stage-shadow-gain: 0.7;
	--hover-boost: 1.9;

	--nav-h: 52px;
	--console-w: 400px;
	--radius: 4px;

	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 14px;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-hover) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

#app {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
}

#stage {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: var(--console-w) 1fr;
}

#viewport {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background:
		radial-gradient(ellipse 90% 70% at 50% 40%, var(--stage-wash), transparent 70%),
		var(--bg);
}

#webgl { position: absolute; inset: 0; }
#webgl canvas { display: block; width: 100%; height: 100%; }

#viewport::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 48px 48px;
}

#viewport::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 55%, var(--vignette) 100%);
}

#nav {
	flex: none;
	height: var(--nav-h);
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 16px;
	background: var(--panel);
	border-bottom: 1px solid var(--line-strong);
	z-index: 30;
}

.nav-brand {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	flex: none;
	width: calc(var(--console-w) - 32px);
}
.nav-brand-a { color: var(--ink-dimmer); }
.nav-brand-slash { color: var(--accent); }
.nav-brand-b { color: var(--ink); font-weight: 600; }
.nav-brand-sub {
	margin-left: 8px; font-size: 9.5px; color: var(--ink-faint);
	letter-spacing: 0.14em; text-transform: uppercase; display: none;
}

.nav-links { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; }
.nav-link {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ink-dimmer);
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.02em;
	padding: 6px 11px;
	border-radius: var(--radius);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.nav-link .nav-index { font-size: 9.5px; color: var(--ink-faint); }
.nav-link:hover { color: var(--ink); background: var(--surface); }
.nav-link.active {
	color: var(--accent);
	background: var(--accent-soft);
	border-color: var(--accent-line);
}
.nav-link.active .nav-index { color: var(--accent); opacity: 0.65; }

.nav-source {
	flex: none;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-dimmer);
	text-decoration: none;
	padding: 6px 8px;
	border-radius: var(--radius);
}
.nav-source:hover { color: var(--ink); background: var(--surface); }

#console {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--panel);
	border-right: 1px solid var(--line-strong);
	font-family: var(--font-mono);
}

.console-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--panel-2);
}
.console-title {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.console-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--ink-dimmer);
	white-space: nowrap;
}
.console-status .dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--ink-faint);
	box-shadow: 0 0 0 0 var(--accent-glow);
}
.console-status[data-state="running"] .dot { background: var(--accent); animation: pulse-dot 1.4s ease-out infinite; }
.console-status[data-state="idle"] .dot { background: var(--ink-faint); }
.console-status[data-state="done"] .dot { background: var(--ok); }
.console-status[data-state="error"] .dot { background: var(--danger); }
@keyframes pulse-dot {
	0% { box-shadow: 0 0 0 0 var(--accent-glow); }
	100% { box-shadow: 0 0 0 7px transparent; }
}

.console-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 12px 14px 16px;
	font-size: 11.5px;
	line-height: 1.62;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.log-line {
	display: flex;
	gap: 8px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	animation: log-in 0.2s ease-out;
}
@keyframes log-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.log-line .gutter {
	flex: none;
	width: 1.2em;
	color: var(--ink-faint);
	user-select: none;
}
.log-line .body { flex: 1; min-width: 0; }

.log-out  { color: var(--ink-dim); }
.log-cmd  { color: var(--ink); }
.log-cmd .gutter { color: var(--accent); }
.log-ok   { color: var(--ok); }
.log-warn { color: var(--signal); }
.log-err  { color: var(--danger); }
.log-dim  { color: var(--ink-faint); }
.log-calc { color: var(--accent); }
.log-note { color: var(--info); }
.log-rule {
	height: 1px; background: var(--line); margin: 8px 0; padding: 0;
	border: 0; animation: none;
}
.log-head {
	color: var(--ink-dimmer);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 10px 0 3px;
}
.log-line b { color: var(--ink); font-weight: 600; }
.log-line em { font-style: normal; color: var(--signal); }

.console-foot {
	flex: none;
	border-top: 1px solid var(--line);
	background: var(--panel-2);
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.console-foot:empty { display: none; }

.console-prompt { display: flex; align-items: center; gap: 8px; }
.console-prompt .ps1 { color: var(--accent); font-size: 12px; white-space: nowrap; }
.console-input {
	flex: 1; min-width: 0;
	background: transparent; border: none; outline: none;
	color: var(--ink); font-family: var(--font-mono); font-size: 12px;
}
.console-input::placeholder { color: var(--ink-faint); }

.world {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
}
.world.is-active { opacity: 1; visibility: visible; }

.world::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 460px;
	pointer-events: none;
	background: linear-gradient(to right, var(--world-fade), var(--world-fade-soft) 55%, transparent);
}

.hud { position: absolute; pointer-events: auto; }
.hud-top-left { top: 18px; left: 20px; max-width: 400px; }
.hud-top-right { top: 18px; right: 20px; max-width: 320px; }
.hud-bottom-left { bottom: 20px; left: 20px; max-width: 400px; }
.hud-bottom-right { bottom: 20px; right: 20px; max-width: 320px; }
.hud-bottom { bottom: 20px; left: 50%; transform: translateX(-50%); }

.eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 8px;
}
.world h1 {
	font-size: 26px;
	line-height: 1.18;
	margin: 0 0 10px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.world h1 em { font-style: normal; color: var(--accent); }
.lede {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-dim);
	margin: 0 0 12px;
	max-width: 46ch;
}
.lede code, .hint code {
	font-family: var(--font-mono);
	font-size: 0.92em;
	color: var(--ink);
	background: var(--code-bg);
	padding: 1px 5px;
	border-radius: 3px;
}
.hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); line-height: 1.5; }

.panel {
	background: var(--glass);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 12px 14px;
	backdrop-filter: blur(12px);
}

.step-card { max-width: 320px; }
.step-card-index {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 6px;
}
.step-card h2 { font-size: 15px; margin: 0 0 7px; font-weight: 600; letter-spacing: -0.01em; }
.step-card p { font-size: 12px; line-height: 1.55; color: var(--ink-dim); margin: 0; }
.step-card pre {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.65;
	color: var(--accent);
	background: var(--pre-bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 8px 10px;
	margin: 9px 0 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.legend { display: flex; flex-direction: column; gap: 5px; }
.legend-item {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim);
}
.legend-dot { width: 7px; height: 7px; border-radius: 1px; flex: none; }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.02em;
	color: var(--ink-dim);
	background: var(--glass);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 6px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 7px;
	backdrop-filter: blur(12px);
	transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.chip:hover { color: var(--ink); border-color: var(--line-hover); }
.chip.active { color: var(--accent); border-color: var(--accent-line-strong); background: var(--accent-soft); }
.chip:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-action {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 8px 12px;
	cursor: pointer;
	transition: background 0.18s, border-color 0.18s;
}
.btn-action:hover:not(:disabled) { background: var(--surface-3); border-color: var(--line-hover); }
.btn-action:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-action.is-warn { color: var(--signal); border-color: var(--signal-line); background: var(--signal-soft); }
.btn-action.is-warn:hover:not(:disabled) { background: var(--signal-hover); }
.btn-action.is-danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.btn-action.is-danger:hover:not(:disabled) { background: var(--danger-hover); }

.scrubber {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(680px, calc(100% - 40px));
	background: var(--glass-solid);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 8px 12px;
	backdrop-filter: blur(12px);
}
.scrubber-btn {
	appearance: none;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink);
	width: 28px; height: 28px;
	border-radius: var(--radius);
	cursor: pointer; flex: none;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.18s;
}
.scrubber-btn:hover { background: var(--surface-4); }
.scrubber-play { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line-strong); }
.scrubber-track { flex: 1; display: flex; gap: 3px; align-items: center; height: 28px; }
.scrubber-node {
	flex: 1; height: 3px; border-radius: 1px;
	background: var(--track);
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
}
.scrubber-node.done { background: var(--accent-line-strong); }
.scrubber-node.active { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

.control-row { display: flex; flex-direction: column; gap: 5px; }
.control-label {
	display: flex; justify-content: space-between; align-items: baseline;
	font-family: var(--font-mono); font-size: 10px;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dimmer);
}
.control-label b { color: var(--accent); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
input[type="range"] {
	appearance: none; -webkit-appearance: none;
	width: 100%; height: 3px; background: var(--track);
	border-radius: 2px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 12px; height: 12px; border-radius: 2px;
	background: var(--accent); cursor: pointer; border: none;
}
input[type="range"]::-moz-range-thumb {
	width: 12px; height: 12px; border-radius: 2px;
	background: var(--accent); cursor: pointer; border: none;
}

.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.data-table th, .data-table td {
	text-align: left; padding: 5px 8px;
	border-bottom: 1px solid var(--line); color: var(--ink-dim);
}
.data-table th {
	color: var(--ink-faint); text-transform: uppercase;
	letter-spacing: 0.1em; font-size: 9.5px; font-weight: 500;
}
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.label2d {
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.03em;
	color: var(--ink);
	background: var(--label-bg);
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	padding: 2px 6px;
	white-space: nowrap;
	transform: translate(-50%, -160%);
}
.label2d-dim { font-size: 9.5px; color: var(--ink-dimmer); background: var(--label-bg-dim); padding: 1px 5px; }
.label2d-key { color: var(--accent); border-color: var(--accent-line); }

.detail-card {
	position: absolute;
	top: 0; bottom: 0; right: 0;
	width: 340px;
	z-index: 40;
	background: var(--glass-strong);
	border-left: 1px solid var(--line-strong);
	backdrop-filter: blur(16px);
	padding: 20px 22px 24px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.36s cubic-bezier(.16,.8,.3,1);
}
.detail-card.open { transform: none; }
.detail-close {
	position: absolute; top: 14px; right: 16px;
	width: 24px; height: 24px; border-radius: var(--radius);
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink-dim); cursor: pointer; font-size: 14px; line-height: 1;
}
.detail-close:hover { color: var(--ink); background: var(--surface-3); }
.detail-category {
	font-family: var(--font-mono); font-size: 9.5px;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent); margin-bottom: 7px;
}
.detail-card h3 { font-size: 19px; margin: 0 0 5px; font-weight: 600; letter-spacing: -0.01em; }
.detail-blurb { color: var(--ink-dim); font-size: 12px; margin: 0 0 14px; }
.detail-card p { font-size: 12.5px; line-height: 1.62; color: var(--ink-dim); }
.detail-block { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.detail-block h4 {
	font-family: var(--font-mono); font-size: 9.5px;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-faint); margin: 0 0 9px;
}
.detail-block ul { margin: 0; padding-left: 16px; font-size: 12px; color: var(--ink-dim); line-height: 1.7; }
.detail-block.hidden { display: none; }
.detail-metric { font-family: var(--font-mono); font-size: 18px; color: var(--accent); margin: 2px 0 0; }
.detail-mono p { color: var(--signal); }
.detail-rpc-name { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-bottom: 3px; }
.detail-rpc-from { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-bottom: 10px; }
.detail-rpc-fields { display: flex; gap: 16px; margin-bottom: 8px; }
.detail-rpc-label {
	font-family: var(--font-mono); font-size: 9.5px;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ink-faint); display: block; margin-bottom: 3px;
}
.detail-rpc-fields ul { padding-left: 14px; font-size: 11px; line-height: 1.55; }

#loading {
	position: fixed; inset: 0; z-index: 100;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; background: var(--bg);
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-mark {
	font-family: var(--font-mono); letter-spacing: 0.42em;
	font-size: 12px; color: var(--ink-dim); padding-left: 0.42em;
}
.loading-bar { width: 180px; height: 2px; background: var(--track); overflow: hidden; }
.loading-bar span {
	display: block; height: 100%; width: 34%;
	background: var(--accent);
	animation: loadsweep 1.05s ease-in-out infinite;
}
@keyframes loadsweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } }
.loading-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }

#foot-credit {
	position: absolute; bottom: 8px; right: 14px; z-index: 15;
	font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint);
}
#foot-credit a { color: var(--ink-faint); }
#foot-credit a:hover { color: var(--ink-dim); }

/* ---------------------------------------------------------------------------
   Light theme — follows the operating system's setting.

   One `:root` block, no exceptions: chrome, stage overlays and the three.js
   palette all flip together. `js/theme.js` re-reads these on load and reloads
   the page if the OS setting changes mid-session, so the canvas can never be
   left disagreeing with the page around it.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {

	:root {
		color-scheme: light;

		--bg: #f2f5f6;
		--bg-2: #e9edef;
		--panel: #ffffff;
		--panel-2: #f4f7f8;
		--panel-raised: #eef2f4;

		--ink: #0e1518;
		--ink-dim: #47555d;
		--ink-dimmer: #6a7880;
		--ink-faint: #78868e;

		/* Darkened so they clear 4.5:1 on a white panel — the neon dark-mode
		   accents are far too light to read as text here. */
		--accent: #0c7a68;
		--accent-soft: rgba(12, 122, 104, 0.1);
		--accent-line: rgba(12, 122, 104, 0.34);
		--accent-line-strong: rgba(12, 122, 104, 0.46);
		--accent-glow: rgba(12, 122, 104, 0.4);
		--signal: #96590a;
		--signal-soft: rgba(150, 89, 10, 0.12);
		--signal-line: rgba(150, 89, 10, 0.34);
		--signal-hover: rgba(150, 89, 10, 0.2);
		--info: #1f5fd0;
		--danger: #bd3a26;
		--danger-soft: rgba(189, 58, 38, 0.1);
		--danger-line: rgba(189, 58, 38, 0.32);
		--danger-hover: rgba(189, 58, 38, 0.18);
		--ok: #2c7a3d;

		--line: rgba(14, 21, 24, 0.1);
		--line-strong: rgba(14, 21, 24, 0.16);
		--line-hover: rgba(14, 21, 24, 0.28);

		--surface: rgba(14, 21, 24, 0.04);
		--surface-2: rgba(14, 21, 24, 0.05);
		--surface-3: rgba(14, 21, 24, 0.09);
		--surface-4: rgba(14, 21, 24, 0.1);
		--track: rgba(14, 21, 24, 0.12);
		--code-bg: rgba(14, 21, 24, 0.06);
		--scrollbar: rgba(14, 21, 24, 0.18);
		--scrollbar-hover: rgba(14, 21, 24, 0.26);

		/* Glass is now light-on-light: white panels over a light stage. */
		--glass: rgba(255, 255, 255, 0.86);
		--glass-solid: rgba(255, 255, 255, 0.92);
		--glass-strong: rgba(250, 252, 252, 0.97);
		--label-bg: rgba(255, 255, 255, 0.86);
		--label-bg-dim: rgba(255, 255, 255, 0.7);
		--pre-bg: rgba(14, 21, 24, 0.05);

		--stage-wash: rgba(12, 122, 104, 0.05);
		--grid-line: rgba(14, 21, 24, 0.05);
		--vignette: rgba(14, 21, 24, 0.13);
		--world-fade: rgba(242, 245, 246, 0.92);
		--world-fade-soft: rgba(242, 245, 246, 0.62);

		/* three.js palette. The near-blacks invert to near-whites so meshes
		   read as light objects lit from above, not silhouettes. The hues are
		   kept dark and saturated — over-lit pastels vanish on this stage. */
		--stage-bg: #f2f5f6;
		--stage-deck: #dfe7ea;
		--stage-grid: #b3c3c9;
		--stage-grid-accent: #78a49b;
		--stage-shell: #c2ced4;
		--stage-shell-2: #bfc5d3;
		--stage-muted: #64737c;
		--stage-off: #b9c5cb;
		--stage-violet: #6d4bd6;
		--stage-rose: #b8532f;
		--stage-cyan: #0f7f92;
		--stage-ink: #0e1518;
		--stage-edge: #0e1518;

		/* Soft, roughly unit-strength daylight. The first light pass here ran
		   the hemisphere at 2.4× — every material clipped toward white and the
		   scenes lost their colour coding entirely. Keep total energy close to
		   the dark rig and let the saturated diffuse colours carry the scene.
		   The accent rim light is dialled back because a coloured glow on
		   white reads as a smudge. */
		--rig-sky: #ffffff;
		--rig-ground: #b7c4ca;
		--rig-key: #ffffff;
		--rig-fill: #d5e0e5;
		--rig-hemi-gain: 1.15;
		--rig-key-gain: 0.75;
		--rig-fill-gain: 0.9;
		--rig-rim-gain: 0.25;
		--stage-grid-gain: 1.8;
		/* Fog toward near-white eats distant geometry much faster than fog
		   toward black reads on a dark stage — halve it. */
		--stage-fog-gain: 0.35;
		--stage-shell-mix: 0.62;

		--stage-emissive: 0.22;
		--bloom-gain: 0.3;
		--bloom-threshold: 0.92;

		/* Daylight leans on IBL instead of emissive; shadows softer on
		   white, and the hover boost is smaller since emissive is dim. */
		--env-intensity: 0.55;
		--stage-shadow-gain: 0.4;
		--hover-boost: 1.45;
	}

}

@media (min-width: 1100px) { .nav-brand-sub { display: inline; } }

@media (max-width: 1180px) {
	:root { --console-w: 340px; }
	.hud-top-right, .hud-bottom-right { max-width: 270px; }
}

@media (max-width: 900px) {
	:root { --console-w: 0px; }
	#stage { grid-template-columns: 1fr; grid-template-rows: 1fr 42vh; }
	#console { order: 2; border-right: none; border-top: 1px solid var(--line-strong); }
	#viewport { order: 1; }
	.nav-brand { width: auto; }
	.nav-brand-sub { display: none; }
	.detail-card { width: 100%; }
	.hud-top-right, .hud-bottom-right { display: none; }
	.hud-top-left, .hud-bottom-left { max-width: calc(100% - 40px); }
	.world h1 { font-size: 20px; }
	.lede { font-size: 12px; }
}