:root {
	--bg: #0d1112;
	--bg-deep: #090c0d;
	--panel: #131819;
	--panel-2: #181e1f;
	--panel-3: #1d2425;
	--line: #293233;
	--line-soft: #202829;
	--text: #e6e5dd;
	--muted: #9a9d98;
	--quiet: #656d6a;
	--amber: #d8b66c;
	--amber-soft: rgba(216, 182, 108, 0.16);
	--cyan: #73b8b5;
	--danger: #d37b6c;
	--success: #91bd8a;
	--focus: #f0d18c;
	--shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
	--topbar-h: 72px;
	--statusbar-h: 32px;
	--nav-w: 308px;
	--drawer-w: 430px;
	--radius: 3px;
	--mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", "IBM Plex Mono", Consolas, monospace;
	--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.evidence-select { display: grid; gap: 8px; margin: 18px 0; font: 12px var(--mono); color: var(--muted); }
.evidence-select select { width: 100%; background: var(--panel-2); color: var(--text); padding: 9px; border: 1px solid var(--line); font: 14px var(--sans); }
.confidence-dot.primary-text { background: var(--success); }

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 14px;
	overscroll-behavior: none;
}

body {
	overflow: hidden;
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
select {
	color: inherit;
}

button {
	-webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 1px solid var(--focus);
	outline-offset: 2px;
}

button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

[hidden] {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	z-index: 1000;
	top: 8px;
	left: 8px;
	transform: translateY(-160%);
	background: var(--focus);
	color: var(--bg-deep);
	padding: 8px 12px;
	text-decoration: none;
	font-weight: 700;
}

.skip-link:focus {
	transform: none;
}

.eyebrow,
.control-kicker,
.compact-select > span,
.hud-heading,
.cursor-kicker {
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--quiet);
}

.app-shell {
	display: grid;
	grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--statusbar-h);
	width: 100vw;
	height: 100dvh;
	background:
		radial-gradient(circle at 68% 20%, rgba(76, 106, 103, 0.08), transparent 35%),
		linear-gradient(180deg, #111617 0%, #0b0f10 100%);
}

.topbar {
	position: relative;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 9px 14px 9px 18px;
	background: rgba(16, 21, 22, 0.96);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
}

.brand-block {
	min-width: 194px;
	line-height: 1.1;
}

.brand-title {
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 15px;
	letter-spacing: 0.055em;
	color: #f0eee4;
}

.topbar-divider {
	width: 1px;
	height: 34px;
	margin: 0 2px;
	background: var(--line);
}

.topbar-spacer {
	flex: 1;
	min-width: 4px;
}

.control-button,
.icon-button,
.segmented-control button,
.compact-select,
.search-prompt,
.secondary-button,
.primary-button,
.status-actions button,
.panel-heading button,
.story-player-actions button {
	border: 1px solid var(--line);
	background: var(--panel-2);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.control-button:hover,
.icon-button:hover,
.segmented-control button:hover,
.search-prompt:hover,
.secondary-button:hover,
.status-actions button:hover,
.panel-heading button:hover,
.story-player-actions button:hover {
	background: var(--panel-3);
	border-color: #465353;
}

.icon-button {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	font-family: var(--mono);
	font-size: 16px;
	line-height: 1;
}

.icon-button[aria-pressed="true"] {
	border-color: var(--amber);
	background: var(--amber-soft);
	color: var(--focus);
}

.control-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	padding: 0 12px;
}

.control-button.compact {
	height: 34px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
}

.horizon-button {
	display: grid;
	align-content: center;
	justify-items: start;
	min-width: 156px;
	gap: 2px;
}

.horizon-button #horizon-label {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--text);
}

.segmented-control {
	display: flex;
	height: 34px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.segmented-control button {
	min-width: 72px;
	padding: 0 10px;
	border: 0;
	border-right: 1px solid var(--line);
	border-radius: 0;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--quiet);
}

.segmented-control button:last-child {
	border-right: 0;
}

.segmented-control button.active {
	background: var(--amber-soft);
	color: var(--focus);
}

.compact-select {
	display: grid;
	align-content: center;
	height: 38px;
	padding: 3px 9px 3px 10px;
	cursor: default;
}

.compact-select select {
	min-width: 93px;
	padding: 0 18px 0 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--text);
	cursor: pointer;
}

kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 19px;
	padding: 0 5px;
	border: 1px solid #3b4646;
	border-bottom-color: #222929;
	border-radius: 3px;
	background: #0e1213;
	font-family: var(--mono);
	font-size: 9px;
	color: var(--quiet);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.workspace {
	position: relative;
	display: grid;
	grid-template-columns: var(--nav-w) minmax(0, 1fr);
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.nav-panel {
	position: relative;
	z-index: 30;
	display: grid;
	grid-template-rows: 42px minmax(0, 1fr) auto;
	min-width: 0;
	min-height: 0;
	background: rgba(16, 21, 22, 0.96);
	border-right: 1px solid var(--line);
	box-shadow: 12px 0 32px rgba(0, 0, 0, 0.2);
}

.nav-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--line);
}

.nav-tabs button {
	position: relative;
	border: 0;
	background: transparent;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--quiet);
	cursor: pointer;
}

.nav-tabs button::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -1px;
	height: 1px;
	background: transparent;
}

.nav-tabs button.active {
	color: var(--text);
}

.nav-tabs button.active::after {
	background: var(--amber);
}

.nav-content {
	min-height: 0;
	overflow: hidden;
}

.nav-tab {
	display: none;
	height: 100%;
	padding: 14px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #344040 transparent;
}

.nav-tab.active {
	display: block;
}

.nav-intro {
	margin: 0 0 17px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted);
}

.search-prompt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 39px;
	padding: 0 10px 0 12px;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--quiet);
}

.nav-section {
	margin-top: 20px;
}

.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--quiet);
}

.section-heading button {
	padding: 2px 0;
	border: 0;
	background: transparent;
	font-family: var(--mono);
	font-size: 9px;
	color: var(--quiet);
	cursor: pointer;
}

.section-heading button:hover {
	color: var(--focus);
}

.book-layer-list {
	display: grid;
	gap: 4px;
}

.book-layer {
	display: grid;
	grid-template-columns: 15px 1fr auto;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 5px 7px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
}

.book-layer:hover {
	background: rgba(255, 255, 255, 0.025);
	border-color: var(--line-soft);
}

.book-layer input {
	accent-color: var(--amber);
}

.book-layer-copy {
	min-width: 0;
}

.book-layer-copy strong,
.book-layer-copy span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.book-layer-copy strong {
	font-size: 11px;
	font-weight: 600;
}

.book-layer-copy span {
	margin-top: 2px;
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.book-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	box-shadow: 0 0 10px currentColor;
}

.book-layer.locked {
	opacity: 0.34;
	cursor: not-allowed;
}

.chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.filter-chip {
	padding: 5px 7px;
	border: 1px solid var(--line-soft);
	border-radius: 999px;
	background: transparent;
	font-family: var(--mono);
	font-size: 9px;
	color: var(--quiet);
	cursor: pointer;
}

.filter-chip.active {
	border-color: #65716e;
	background: rgba(115, 184, 181, 0.09);
	color: #bbd8d4;
}

.compact-list,
.era-list {
	display: grid;
	gap: 3px;
}

.compact-list button,
.era-list button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 32px;
	padding: 5px 7px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	text-align: left;
	font-size: 11px;
	color: var(--muted);
	cursor: pointer;
}

.compact-list button:hover,
.era-list button:hover {
	border-color: var(--line-soft);
	background: rgba(255, 255, 255, 0.025);
	color: var(--text);
}

.compact-list button small,
.era-list button small {
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.empty-state {
	padding: 9px 6px;
	font-size: 11px;
	font-style: italic;
	color: var(--quiet);
}

.story-list,
.source-list {
	display: grid;
	gap: 8px;
}

.story-card,
.source-card {
	padding: 11px;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.018);
}

.story-card button {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.story-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.story-card strong,
.source-card strong {
	font-size: 12px;
	font-weight: 650;
}

.story-card small,
.source-card small {
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.story-card p,
.source-card p {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--muted);
}

.source-card a {
	display: inline-block;
	margin-top: 7px;
	font-family: var(--mono);
	font-size: 9px;
	color: #98c5c2;
	text-decoration: none;
}

.source-card a:hover {
	text-decoration: underline;
}

.nav-footer {
	display: grid;
	gap: 3px;
	padding: 10px 14px 11px;
	border-top: 1px solid var(--line-soft);
	font-family: var(--mono);
	font-size: 8px;
	color: #555f5d;
}

.atlas-stage {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.009) 1px, transparent 1px),
		#0d1112;
	background-size: 80px 100%, 100% 44px, auto;
}

.atlas-stage::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.016), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.13));
}

.timeline-scroll {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #445150 #111617;
	cursor: grab;
}

.timeline-scroll.dragging {
	cursor: grabbing;
	user-select: none;
}

.timeline-scroll::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.timeline-scroll::-webkit-scrollbar-track {
	background: #0d1213;
}

.timeline-scroll::-webkit-scrollbar-thumb {
	border: 2px solid #0d1213;
	border-radius: 6px;
	background: #35403f;
}

#timeline-svg {
	display: block;
	overflow: visible;
	font-family: var(--mono);
	shape-rendering: geometricPrecision;
}

/* Timeline SVG styling */
.svg-grid-line {
	stroke: rgba(170, 183, 180, 0.075);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.svg-grid-line.major {
	stroke: rgba(170, 183, 180, 0.13);
}

.svg-axis-line {
	stroke: #67716e;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.svg-axis-tick {
	stroke: #555f5d;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.svg-axis-label {
	fill: #7f8986;
	font-size: 10px;
	letter-spacing: 0.05em;
}

.svg-axis-label.major {
	fill: #c3c4bd;
	font-size: 12px;
}

.svg-axis-break {
	fill: none;
	stroke: var(--amber);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.svg-window-band {
	fill: rgba(255, 255, 255, 0.018);
	stroke: rgba(255, 255, 255, 0.065);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.svg-window-band.schematic {
	fill: rgba(216, 182, 108, 0.024);
	stroke-dasharray: 4 5;
}

.svg-window-label {
	fill: #596361;
	font-size: 9px;
	letter-spacing: 0.12em;
}

.svg-book-ribbon {
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: opacity 120ms ease;
}

.svg-book-ribbon:hover {
	opacity: 1 !important;
}

.svg-book-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	pointer-events: none;
}

.svg-branch-link {
	fill: none;
	stroke: rgba(152, 168, 165, 0.25);
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
}

.svg-bob-path {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: opacity 140ms ease, stroke-width 140ms ease, filter 140ms ease;
}

.svg-bob-path.cluster {
	stroke-dasharray: 3 4;
	stroke-width: 1.5;
}

.svg-bob-path.uncertain {
	stroke-dasharray: 8 5;
}

.svg-bob-path:hover,
.svg-bob-path.selected {
	stroke-width: 4;
	filter: drop-shadow(0 0 5px currentColor);
}

.svg-bob-path.dimmed,
.svg-bob-label-group.dimmed,
.svg-event-group.dimmed {
	opacity: 0.11;
}

.svg-bob-label-group {
	cursor: pointer;
	transition: opacity 140ms ease;
}

.svg-bob-glyph-ring {
	fill: #111718;
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}

.svg-bob-glyph-text {
	font-size: 8px;
	font-weight: 800;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.svg-bob-label {
	fill: #d4d3cc;
	font-size: 10px;
	font-weight: 650;
	pointer-events: none;
}

.svg-bob-meta {
	fill: #606a68;
	font-size: 8px;
	pointer-events: none;
}

.svg-loss-marker {
	stroke: var(--danger);
	stroke-width: 1.7;
	vector-effect: non-scaling-stroke;
}

.svg-event-rail {
	stroke: rgba(200, 204, 196, 0.16);
	stroke-width: 1;
	stroke-dasharray: 2 5;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

.svg-event-participant {
	stroke: #0e1314;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

.svg-event-group {
	cursor: pointer;
	transition: opacity 140ms ease, filter 140ms ease;
}

.svg-event-group:hover,
.svg-event-group.selected {
	filter: drop-shadow(0 0 5px rgba(230, 229, 221, 0.36));
}

.svg-event-stem {
	stroke: rgba(196, 202, 195, 0.34);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.svg-event-node {
	stroke: #111617;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.svg-event-card {
	fill: rgba(18, 24, 25, 0.96);
	stroke: #36403f;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.svg-event-group:hover .svg-event-card,
.svg-event-group.selected .svg-event-card {
	stroke: #89938f;
}

.svg-event-title {
	fill: #deddd5;
	font-size: 10px;
	font-weight: 650;
	pointer-events: none;
}

.svg-event-meta {
	fill: #747d7a;
	font-size: 8px;
	letter-spacing: 0.04em;
	pointer-events: none;
}

.svg-event-bookmark {
	font-size: 7px;
	font-weight: 800;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.svg-event-compact-label {
	fill: #9fa49f;
	font-size: 9px;
	pointer-events: none;
}

.svg-section-label {
	fill: #4f5957;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
}

.svg-group-separator {
	stroke: rgba(255, 255, 255, 0.06);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.svg-book-hidden {
	opacity: 0.08;
}

.time-cursor {
	position: absolute;
	z-index: 12;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	pointer-events: none;
}

.cursor-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent 5%, rgba(216, 182, 108, 0.4) 16%, rgba(216, 182, 108, 0.75) 76%, transparent 96%);
	box-shadow: 0 0 8px rgba(216, 182, 108, 0.1);
}

.cursor-head {
	position: absolute;
	top: 12px;
	left: 0;
	display: grid;
	gap: 2px;
	min-width: 92px;
	padding: 6px 9px;
	transform: translateX(-50%);
	border: 1px solid rgba(216, 182, 108, 0.35);
	background: rgba(14, 19, 20, 0.94);
	box-shadow: var(--shadow);
}

.cursor-head strong {
	font-family: var(--mono);
	font-size: 14px;
	font-weight: 650;
	color: var(--focus);
	white-space: nowrap;
}

.status-hud {
	position: absolute;
	z-index: 15;
	left: 18px;
	bottom: 17px;
	width: 248px;
	padding: 10px 12px 9px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(14, 19, 20, 0.92);
	box-shadow: var(--shadow);
	backdrop-filter: blur(8px);
}

.hud-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 7px;
}

.hud-metrics div {
	display: grid;
	gap: 1px;
	padding-right: 5px;
	border-right: 1px solid var(--line-soft);
}

.hud-metrics div:last-child {
	border-right: 0;
}

.hud-metrics strong {
	font-family: var(--mono);
	font-size: 16px;
	font-weight: 650;
}

.hud-metrics span {
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.hud-note {
	margin-top: 7px;
	font-size: 9px;
	line-height: 1.35;
	color: #5e6765;
}

.galaxy-panel {
	position: absolute;
	z-index: 15;
	top: 14px;
	right: 16px;
	width: 272px;
	height: 236px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(13, 18, 19, 0.93);
	box-shadow: var(--shadow);
	backdrop-filter: blur(8px);
	overflow: hidden;
	transition: height 180ms ease;
}

.galaxy-panel.collapsed {
	height: 38px;
}

.panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 38px;
	padding: 0 8px 0 11px;
	border-bottom: 1px solid var(--line-soft);
}

.panel-heading > div {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.panel-heading span {
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--muted);
}

.panel-heading small {
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.panel-heading button {
	width: 24px;
	height: 22px;
	padding: 0;
	font-family: var(--mono);
	font-size: 13px;
}

#galaxy-svg {
	display: block;
	width: 100%;
	height: 168px;
	background:
		radial-gradient(circle at 50% 50%, rgba(115, 184, 181, 0.055), transparent 48%),
		linear-gradient(90deg, transparent 49.7%, rgba(255, 255, 255, 0.04) 50%, transparent 50.3%),
		linear-gradient(0deg, transparent 49.7%, rgba(255, 255, 255, 0.04) 50%, transparent 50.3%);
}

.map-orbit {
	fill: none;
	stroke: rgba(255, 255, 255, 0.06);
	stroke-width: 0.35;
}

.map-route {
	fill: none;
	stroke: rgba(115, 184, 181, 0.22);
	stroke-width: 0.45;
	stroke-dasharray: 1.3 1.4;
}

.map-system {
	fill: #586563;
	stroke: #101617;
	stroke-width: 0.8;
	transition: r 120ms ease, fill 120ms ease, opacity 120ms ease;
}

.map-system.relevant {
	fill: #9dbab5;
}

.map-system.active {
	fill: var(--focus);
	filter: drop-shadow(0 0 3px rgba(240, 209, 140, 0.9));
}

.map-system.hidden-book {
	opacity: 0.08;
}

.map-label {
	fill: #687370;
	font-family: var(--mono);
	font-size: 3.2px;
}

.map-label.active {
	fill: #d8d7cf;
}

.map-caption {
	height: 29px;
	padding: 7px 10px;
	border-top: 1px solid var(--line-soft);
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.navigation-hint {
	position: absolute;
	z-index: 13;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	padding: 6px 9px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(13, 18, 19, 0.77);
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.04em;
	color: #596260;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 500ms ease;
}

.navigation-hint.dismissed {
	opacity: 0;
}

.attract-badge {
	position: absolute;
	z-index: 18;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px 7px 10px;
	border: 1px solid rgba(115, 184, 181, 0.34);
	background: rgba(13, 20, 20, 0.92);
	font-family: var(--mono);
	font-size: 9px;
	color: #9ec8c4;
	box-shadow: var(--shadow);
}

.attract-badge button {
	padding: 4px 7px;
	border: 1px solid var(--line);
	background: var(--panel-2);
	font-family: var(--mono);
	font-size: 8px;
	color: var(--text);
	cursor: pointer;
}

.pulse-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 0 0 rgba(115, 184, 181, 0.7);
	animation: pulse 1.8s infinite;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(115, 184, 181, 0.65); }
	70% { box-shadow: 0 0 0 7px rgba(115, 184, 181, 0); }
	100% { box-shadow: 0 0 0 0 rgba(115, 184, 181, 0); }
}

.detail-drawer {
	position: fixed;
	z-index: 70;
	top: calc(var(--topbar-h) + 14px);
	right: 18px;
	bottom: calc(var(--statusbar-h) + 14px);
	width: min(var(--drawer-w), calc(100vw - 36px));
	border: 1px solid #3b4645;
	border-radius: var(--radius);
	background: rgba(18, 24, 25, 0.98);
	box-shadow: -20px 24px 90px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(14px);
	overflow: hidden;
	animation: drawer-in 180ms ease-out;
}

@keyframes drawer-in {
	from { opacity: 0; transform: translateX(12px); }
	to { opacity: 1; transform: none; }
}

.drawer-toolbar {
	position: absolute;
	z-index: 2;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 5px;
}

.drawer-toolbar .icon-button {
	width: 30px;
	height: 30px;
	background: rgba(13, 18, 19, 0.85);
}

.drawer-content {
	height: 100%;
	padding: 26px 26px 30px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #3b4745 transparent;
}

.drawer-hero {
	padding: 32px 0 20px;
	border-bottom: 1px solid var(--line);
}

.drawer-hero .drawer-kicker {
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
	color: var(--quiet);
}

.drawer-hero h2 {
	margin: 8px 0 8px;
	font-size: 29px;
	font-weight: 560;
	line-height: 1.12;
	letter-spacing: -0.035em;
}

.drawer-hero .drawer-date {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--focus);
}

.drawer-hero p {
	margin: 15px 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: #c2c3bc;
}

.drawer-section {
	padding: 17px 0;
	border-bottom: 1px solid var(--line-soft);
}

.drawer-section:last-child {
	border-bottom: 0;
}

.drawer-section h3 {
	margin: 0 0 9px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--quiet);
}

.drawer-section p {
	margin: 0;
	font-size: 13px;
	line-height: 1.62;
	color: var(--muted);
}

.drawer-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	border: 1px solid var(--line-soft);
	background: var(--line-soft);
}

.drawer-fact {
	min-height: 59px;
	padding: 10px;
	background: #141a1b;
}

.drawer-fact span,
.drawer-fact strong {
	display: block;
}

.drawer-fact span {
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--quiet);
}

.drawer-fact strong {
	margin-top: 5px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
}

.tag-list,
.related-list,
.source-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.tag,
.related-button,
.source-badge {
	padding: 5px 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	font-family: var(--mono);
	font-size: 8px;
	color: var(--muted);
}

.related-button {
	cursor: pointer;
}

.related-button:hover {
	border-color: #65716e;
	color: var(--text);
}

.source-badge {
	border-radius: var(--radius);
	color: var(--quiet);
}

.confidence-row {
	display: grid;
	grid-template-columns: 8px 1fr;
	gap: 8px;
	align-items: start;
}

.confidence-dot {
	width: 7px;
	height: 7px;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--success);
}

.confidence-dot.approximate,
.confidence-dot.schematic,
.confidence-dot.publisher-described-arc {
	background: var(--amber);
}

.drawer-event-list {
	display: grid;
	gap: 5px;
}

.drawer-event-list button {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 8px;
	width: 100%;
	padding: 7px;
	border: 1px solid transparent;
	background: transparent;
	text-align: left;
	color: var(--muted);
	cursor: pointer;
}

.drawer-event-list button:hover {
	border-color: var(--line-soft);
	background: rgba(255, 255, 255, 0.02);
	color: var(--text);
}

.drawer-event-list button span:first-child {
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.drawer-event-list button span:last-child {
	font-size: 11px;
	line-height: 1.35;
}

.statusbar {
	position: relative;
	z-index: 51;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 0 12px;
	border-top: 1px solid var(--line);
	background: #101516;
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.045em;
	color: #596260;
}

.legend-inline,
.status-actions {
	display: flex;
	align-items: center;
	gap: 13px;
}

.legend-inline span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.legend-line {
	display: inline-block;
	width: 18px;
	height: 0;
	border-top: 2px solid #8aa7a3;
}

.legend-line.dashed {
	border-top-style: dashed;
}

.legend-node {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--amber);
}

.legend-loss {
	font-style: normal;
	font-size: 11px;
	color: var(--danger);
}

.status-actions {
	justify-self: end;
	gap: 5px;
}

.status-actions button {
	height: 22px;
	padding: 0 8px;
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.modal-layer {
	position: fixed;
	z-index: 200;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(5, 8, 8, 0.82);
	backdrop-filter: blur(12px);
	animation: fade-in 150ms ease-out;
}

@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.modal-card,
.search-card {
	width: min(680px, 100%);
	max-height: calc(100dvh - 40px);
	padding: 27px;
	border: 1px solid #414c4b;
	border-radius: var(--radius);
	background:
		linear-gradient(135deg, rgba(115, 184, 181, 0.035), transparent 42%),
		#141a1b;
	box-shadow: 0 35px 120px rgba(0, 0, 0, 0.62);
	overflow-y: auto;
}

.first-run-card {
	width: min(780px, 100%);
	padding: 40px;
}

.first-run-card h1 {
	margin: 8px 0 12px;
	font-family: var(--mono);
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 500;
	letter-spacing: -0.05em;
}

.lede {
	max-width: 570px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted);
}

.first-run-books {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	margin: 24px 0 17px;
}

.first-run-book,
.horizon-option {
	position: relative;
	display: grid;
	align-content: space-between;
	min-height: 92px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #171d1e;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.first-run-book:hover,
.horizon-option:hover {
	border-color: #5b6866;
	background: #1b2223;
}

.first-run-book.selected,
.horizon-option.selected {
	border-color: var(--amber);
	background: var(--amber-soft);
}

.first-run-book span,
.horizon-option span {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--quiet);
}

.first-run-book strong,
.horizon-option strong {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.check-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 11px;
	color: var(--muted);
}

.check-row input {
	accent-color: var(--amber);
}

.primary-button,
.secondary-button {
	min-height: 38px;
	padding: 0 15px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
}

.primary-button {
	border-color: #8c7748;
	background: #c3a460;
	color: #111514;
	font-weight: 750;
}

.primary-button:hover {
	background: #d8b66c;
	transform: translateY(-1px);
}

.secondary-button {
	color: var(--muted);
}

.full-width {
	width: 100%;
	margin-top: 14px;
}

.fine-print {
	margin: 13px 0 0;
	font-size: 9px;
	line-height: 1.5;
	color: #626b69;
}

.modal-toolbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

.modal-toolbar h2 {
	margin: 5px 0 0;
	font-size: 24px;
	font-weight: 560;
	letter-spacing: -0.025em;
}

.horizon-card > p,
.about-card p {
	color: var(--muted);
	line-height: 1.6;
}

.horizon-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	margin-top: 18px;
}

.horizon-option {
	min-height: 73px;
}

.search-card {
	align-self: start;
	width: min(760px, 100%);
	margin-top: 8vh;
	padding: 0;
	overflow: hidden;
}

.search-input-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 11px;
	height: 62px;
	padding: 0 16px;
	border-bottom: 1px solid var(--line);
}

.search-input-row > span {
	font-family: var(--mono);
	font-size: 20px;
	color: var(--amber);
}

.search-input-row input {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 15px;
	color: var(--text);
}

.search-input-row input::placeholder {
	color: #626b69;
}

.search-results {
	max-height: min(62vh, 560px);
	padding: 8px;
	overflow-y: auto;
}

.search-result {
	display: grid;
	grid-template-columns: 46px 1fr auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	padding: 7px 9px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.search-result:hover,
.search-result.active {
	border-color: var(--line);
	background: rgba(255, 255, 255, 0.025);
}

.search-result-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: 50%;
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
}

.search-result-copy strong,
.search-result-copy span {
	display: block;
}

.search-result-copy strong {
	font-size: 12px;
	font-weight: 600;
}

.search-result-copy span {
	margin-top: 3px;
	font-size: 10px;
	color: var(--quiet);
}

.search-result-book {
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.no-results {
	padding: 30px;
	text-align: center;
	color: var(--quiet);
}

.about-card {
	width: min(850px, 100%);
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	border: 1px solid var(--line-soft);
	background: var(--line-soft);
}

.about-grid > div {
	padding: 17px;
	background: #151b1c;
}

.about-grid h3 {
	margin: 0 0 8px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.about-grid p {
	margin: 0;
	font-size: 12px;
}

.about-actions,
.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

.correction-card {
	width: min(620px, 100%);
}

.correction-card label {
	display: grid;
	gap: 6px;
	margin-top: 13px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--quiet);
}

.correction-card input,
.correction-card textarea {
	width: 100%;
	padding: 10px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	outline: 0;
	background: #0f1415;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
	color: var(--text);
	resize: vertical;
}

.correction-card input:focus,
.correction-card textarea:focus {
	border-color: #6b7774;
}

.keys-card {
	width: min(520px, 100%);
}

.key-grid {
	display: grid;
	grid-template-columns: 120px 1fr;
	align-items: center;
	gap: 1px;
	border: 1px solid var(--line-soft);
	background: var(--line-soft);
}

.key-grid > span,
.key-grid > p {
	min-height: 45px;
	margin: 0;
	padding: 12px;
	background: #151b1c;
}

.key-grid > p {
	font-size: 12px;
	color: var(--muted);
}

.story-player {
	position: fixed;
	z-index: 120;
	left: 50%;
	bottom: calc(var(--statusbar-h) + 16px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	width: min(720px, calc(100vw - 40px));
	min-height: 92px;
	transform: translateX(-50%);
	border: 1px solid #465250;
	background: rgba(17, 23, 24, 0.97);
	box-shadow: var(--shadow);
	backdrop-filter: blur(12px);
}

.story-progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: #283130;
}

#story-progress-bar {
	height: 100%;
	width: 0;
	background: var(--amber);
	transition: width 220ms ease;
}

.story-player-copy {
	padding: 15px 18px 13px;
}

.story-player-copy > span {
	font-family: var(--mono);
	font-size: 8px;
	color: var(--quiet);
}

.story-player-copy strong {
	display: block;
	margin-top: 4px;
	font-size: 13px;
}

.story-player-copy p {
	margin: 5px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--muted);
}

.story-player-actions {
	display: grid;
	grid-template-columns: 40px 78px 40px;
	align-items: stretch;
	border-left: 1px solid var(--line);
}

.story-player-actions button {
	border: 0;
	border-right: 1px solid var(--line);
	border-radius: 0;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
}

.story-player-actions button:last-child {
	border-right: 0;
}

.toast {
	position: fixed;
	z-index: 400;
	left: 50%;
	bottom: 52px;
	transform: translateX(-50%);
	max-width: min(560px, calc(100vw - 30px));
	padding: 10px 13px;
	border: 1px solid #4b5754;
	background: rgba(19, 25, 26, 0.97);
	font-family: var(--mono);
	font-size: 10px;
	color: var(--text);
	box-shadow: var(--shadow);
}

.mobile-only {
	display: none;
}

/* Three-screen exhibit canvas */
body.exhibit {
	--nav-w: 0px;
	--topbar-h: 62px;
}

body.exhibit .nav-panel {
	position: fixed;
	z-index: 90;
	top: var(--topbar-h);
	bottom: var(--statusbar-h);
	left: 0;
	width: 360px;
	transform: translateX(-103%);
	transition: transform 180ms ease;
}

body.exhibit.nav-open .nav-panel {
	transform: none;
}

body.exhibit .atlas-stage::before {
	content: "";
	position: absolute;
	z-index: 11;
	top: 0;
	bottom: 0;
	left: 33.333333%;
	width: 33.333333%;
	border-left: 1px dashed rgba(216, 182, 108, 0.15);
	border-right: 1px dashed rgba(216, 182, 108, 0.15);
	pointer-events: none;
}

body.exhibit .detail-drawer {
	right: calc(33.333333vw + 26px);
	width: 500px;
}

body.exhibit .status-hud {
	left: 44px;
	bottom: 32px;
	width: 290px;
}

body.exhibit .galaxy-panel {
	top: 32px;
	right: 44px;
	width: 320px;
	height: 272px;
}

body.exhibit #galaxy-svg {
	height: 200px;
}

body.exhibit .brand-title {
	font-size: 17px;
}

body.exhibit .navigation-hint {
	bottom: 34px;
}

@media (min-width: 1800px) {
	:root {
		--nav-w: 328px;
	}

	.brand-block {
		min-width: 216px;
	}

	.galaxy-panel {
		width: 298px;
	}
}

@media (max-width: 1180px) {
	.segmented-control button {
		min-width: 57px;
		padding-inline: 7px;
	}

	.compact-select {
		display: none;
	}

	.legend-inline span:nth-child(2) {
		display: none;
	}
}

@media (max-width: 920px) {
	:root {
		--nav-w: 276px;
	}

	.brand-block {
		min-width: 150px;
	}

	.brand-title {
		font-size: 13px;
	}

	.topbar-divider,
	.control-kicker,
	.control-button.compact span,
	.status-hud {
		display: none;
	}

	.horizon-button {
		min-width: 106px;
	}

	.segmented-control button {
		min-width: 44px;
		font-size: 0;
	}

	.segmented-control button::first-letter {
		font-size: 10px;
	}

	.galaxy-panel {
		width: 230px;
	}
}

@media (max-width: 760px) {
	:root {
		--topbar-h: 58px;
		--statusbar-h: 28px;
		--drawer-w: 100%;
	}

	body {
		overflow: hidden;
	}

	.app-shell {
		grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--statusbar-h);
	}

	.topbar {
		gap: 6px;
		padding: 7px 8px;
	}

	.mobile-only {
		display: inline-grid;
	}

	.desktop-only,
	.topbar .segmented-control,
	.topbar .horizon-button,
	.topbar #sound-button,
	.topbar #share-button {
		display: none;
	}

	.brand-block {
		min-width: 0;
	}

	.brand-block .eyebrow {
		display: none;
	}

	.brand-title {
		margin: 0;
		font-size: 12px;
		white-space: nowrap;
	}

	.topbar-spacer {
		flex: 1;
	}

	.workspace {
		display: block;
	}

	.nav-panel {
		position: fixed;
		z-index: 100;
		top: var(--topbar-h);
		bottom: var(--statusbar-h);
		left: 0;
		width: min(330px, 86vw);
		transform: translateX(-103%);
		transition: transform 180ms ease;
	}

	body.nav-open .nav-panel {
		transform: none;
	}

	.atlas-stage {
		width: 100%;
		height: 100%;
	}

	.timeline-scroll {
		overflow-x: hidden;
		overflow-y: auto;
		cursor: default;
	}

	.time-cursor {
		top: 43%;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 1px;
	}

	.cursor-line {
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, transparent 4%, rgba(216, 182, 108, 0.45) 18%, rgba(216, 182, 108, 0.7) 78%, transparent 96%);
	}

	.cursor-head {
		top: 0;
		left: 10px;
		min-width: 76px;
		padding: 4px 7px;
		transform: translateY(-100%);
	}

	.cursor-head strong {
		font-size: 11px;
	}

	.galaxy-panel {
		top: 8px;
		right: 8px;
		width: 170px;
		height: 156px;
	}

	.galaxy-panel.collapsed {
		height: 34px;
	}

	.panel-heading {
		height: 34px;
	}

	#galaxy-svg {
		height: 95px;
	}

	.map-caption {
		height: 26px;
		padding: 6px 8px;
		font-size: 7px;
	}

	.navigation-hint {
		left: 9px;
		bottom: 10px;
		transform: none;
		font-size: 7px;
	}

	.attract-badge {
		right: 8px;
		bottom: 8px;
	}

	.detail-drawer {
		top: auto;
		left: 0;
		right: 0;
		bottom: var(--statusbar-h);
		width: 100%;
		height: min(68dvh, 650px);
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		animation: drawer-up 180ms ease-out;
	}

	@keyframes drawer-up {
		from { opacity: 0; transform: translateY(20px); }
		to { opacity: 1; transform: none; }
	}

	.drawer-content {
		padding: 18px 18px 24px;
	}

	.drawer-hero {
		padding-top: 28px;
	}

	.drawer-hero h2 {
		font-size: 24px;
	}

	.statusbar {
		grid-template-columns: 1fr auto;
		padding-inline: 8px;
	}

	.legend-inline {
		display: none;
	}

	#coordinate-readout {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.status-actions button:first-child {
		display: none;
	}

	.first-run-card {
		padding: 25px 20px;
	}

	.first-run-books {
		grid-template-columns: 1fr 1fr;
	}

	.first-run-book {
		min-height: 78px;
	}

	.modal-layer {
		padding: 10px;
	}

	.modal-card {
		padding: 20px;
	}

	.horizon-options,
	.about-grid {
		grid-template-columns: 1fr;
	}

	.search-card {
		margin-top: 2vh;
	}

	.story-player {
		bottom: calc(var(--statusbar-h) + 8px);
		grid-template-columns: 1fr;
		width: calc(100vw - 16px);
	}

	.story-player-actions {
		grid-template-columns: 1fr 2fr 1fr;
		height: 38px;
		border-top: 1px solid var(--line);
		border-left: 0;
	}

	.toast {
		bottom: 38px;
	}
}

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

@media print {
	.topbar,
	.nav-panel,
	.statusbar,
	.galaxy-panel,
	.status-hud,
	.time-cursor,
	.navigation-hint,
	.detail-drawer {
		display: none !important;
	}

	.app-shell,
	.workspace,
	.atlas-stage,
	.timeline-scroll {
		position: static;
		display: block;
		height: auto;
		overflow: visible;
	}
}
:root .scope-summary{font-size:12px;line-height:1.6;color:var(--muted,#a1aba8);padding:8px 0;border-bottom:1px solid #384144}
.chapter-progress{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0;align-items:end}.chapter-progress label,.progress-field{display:grid;gap:8px;font-size:14px}.chapter-progress input,.chapter-progress select,.progress-field input{background:#151b1d;color:#e6e5dd;border:1px solid #58615f;padding:10px;max-width:180px}.playback-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px;grid-column:1/-1;font-size:12px;padding-top:10px}.playback-controls label{display:flex;gap:8px;align-items:center}.playback-controls select{background:#151b1d;color:#e6e5dd;padding:7px}.story-player{flex-wrap:wrap}.story-player .playback-controls{flex-basis:100%}.story-player-copy p{max-height:100px;overflow:auto}.drawer-section details{padding:12px 0;border-bottom:1px solid #384144}.drawer-section summary{cursor:pointer;line-height:1.5}.time-band{fill:#d8b66c;opacity:.3}.time-band.inferred{fill:none;stroke:#d8b66c;stroke-dasharray:4 3}.svg-event-group.playing .svg-event-card{stroke:#d8b66c;stroke-width:2}.svg-event-card{fill:#151b1d}.svg-time-help{font-size:12px;fill:#a1aba8}.timeline-empty{font-size:18px;fill:#a1aba8}
@media(max-width:760px){.topbar{flex-wrap:wrap}.topbar .compact-select{display:none!important}.topbar .compact-select select{max-width:135px}.topbar .compact-select:has(#layout-select){display:none!important}.playback-controls{gap:10px}.story-player-copy p{max-height:70px}.chapter-progress{flex-direction:column;align-items:stretch}}
.drawer-section a{color:var(--amber,#d8b66c);text-underline-offset:3px}.playback-controls{padding:12px 18px}.playback-controls button{background:#26322f;border:1px solid #6a756f;color:#e6e5dd;padding:8px 15px;cursor:pointer}.playback-controls input{accent-color:#d8b66c}#journey-route{max-width:100%;flex-shrink:1}#journey-context{flex-basis:100%;line-height:1.5}.story-player{max-height:60vh;overflow-y:auto}

.mobile-time{display:none}@media(max-width:760px){.mobile-time{display:grid}.topbar{flex-wrap:nowrap}}

/* Reader controls retain their CSS-pixel size on wide displays. */
.time-switch{display:grid;gap:4px;flex:none}.time-switch>span{font:8px var(--mono);letter-spacing:.12em;color:var(--quiet)}.time-switch>div{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}.time-switch button{font:11px var(--mono);padding:8px 10px;background:#141b1c;color:var(--muted);border:0;cursor:pointer}.time-switch button+button{border-left:1px solid var(--line)}.time-switch button[aria-pressed=true]{background:#393629;color:var(--amber);box-shadow:inset 0 -2px var(--amber)}.time-switch button:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}.technology-home-link{color:var(--amber);font-size:12px;white-space:nowrap;text-decoration:none}.mobile-time{display:none}
.detail-drawer{bottom:auto;height:min(78dvh,820px);max-height:calc(100dvh - var(--topbar-h) - var(--statusbar-h) - 28px)}.drawer-toolbar{left:10px;align-items:center}.drawer-drag{flex:1;min-width:0;text-align:left;padding:8px;color:var(--muted);background:transparent;border:0;font:11px var(--mono);cursor:grab;touch-action:none}.detail-drawer.moving{animation:none;user-select:none}.detail-drawer.moving .drawer-drag{cursor:grabbing}.drawer-toolbar .icon-button{flex:none}.source-details{margin:22px 0;border-top:1px solid var(--line);padding-top:16px}.source-details>summary{cursor:pointer;color:var(--muted);font-size:13px;line-height:1.6}.source-details[open]>summary{color:var(--amber)}.source-details .drawer-section{margin-top:16px}
.galaxy-panel{top:auto;right:auto;left:16px;bottom:48px;height:300px}.map-picker{display:grid;gap:4px;padding:7px 10px;font:10px var(--mono);color:var(--muted)}.map-picker select{width:100%;background:#172020;color:var(--text);border:1px solid var(--line);font-size:11px;padding:5px}.map-caption{height:auto;min-height:42px;white-space:normal;line-height:1.5;font-size:9px;padding:6px 10px}.map-label{opacity:0;pointer-events:none;font-size:4px}.map-label.active,.map-place-node:hover .map-label,.map-place-node:focus .map-label{opacity:1}.map-place-node{cursor:pointer}.map-place-node:focus .map-system{stroke:var(--amber);stroke-width:1.2}.galaxy-panel.collapsed>:not(.panel-heading){display:none}
@media(max-width:1480px) and (min-width:761px){.topbar>.compact-select{display:none}.topbar{gap:8px}.topbar .brand-block{min-width:166px}.topbar .brand-title{font-size:13px}.time-switch button{padding:8px}.topbar-spacer{min-width:0}}
@media(max-width:1000px) and (min-width:761px){.topbar #sound-button,.topbar #exhibit-button{display:none}.topbar .segmented-control button{min-width:38px;padding:6px}.topbar .brand-block{min-width:145px}.time-switch button{font-size:10px;padding:7px}}
@media(max-width:760px){.topbar>.time-switch{display:none}.mobile-time{display:grid;margin:14px 0}.mobile-time button{flex:1}.topbar .brand-block{min-width:0;flex:1}.technology-home-link{font-size:11px;padding:7px}.topbar{gap:6px;padding-inline:10px}.topbar #about-button{display:none}.detail-drawer{top:auto;bottom:var(--statusbar-h);height:min(62dvh,650px);max-height:68dvh}.drawer-drag,#drawer-reset{display:none}.drawer-toolbar{left:auto}.galaxy-panel{top:8px;bottom:auto;left:auto;right:8px;width:210px;height:270px}#galaxy-svg{height:138px}.galaxy-panel.collapsed{height:34px}.map-caption{font-size:9px}.story-player{max-height:38dvh}}
@media(prefers-reduced-motion:reduce){.detail-drawer{animation:none}}

.galaxy-panel.collapsed #galaxy-svg{display:none}

/* Secondary navigation follows the primary exploration controls. */
.nav-secondary{display:grid;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.nav-secondary>a{display:block;width:100%;padding:7px 0;border:0;background:transparent;color:var(--muted);font:11px/1.5 var(--mono);text-decoration:none;text-align:left}
.nav-secondary>a:hover{color:var(--amber);text-decoration:underline}
.nav-secondary .evidence-select{margin:8px 0 0;font:9px/1.5 var(--mono);letter-spacing:.08em;color:var(--quiet)}
.nav-secondary .evidence-select select{margin-top:6px;padding:7px 9px;font-size:11px;color:var(--muted);background:var(--panel-2)}
/* Use a shared 38px control box, including the labelled Time control. */
.topbar>.control-button,.topbar>.icon-button,.topbar>.segmented-control,.topbar>.compact-select,.topbar>.time-switch{height:38px;box-sizing:border-box}
.topbar>.time-switch{grid-template-rows:8px 1fr;gap:2px;padding:4px 0 2px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}
.topbar>.time-switch>span{padding-inline:9px;line-height:8px}
.topbar>.time-switch>div{border:0;border-radius:0}
.topbar>.time-switch button{padding-block:0;line-height:18px}