.traversalLab {
	--labInk: var(--bodyText);
	--labMuted: var(--darkTextSecondary);
	--labSurface: var(--pageBackground);
	--labSurfaceSoft: var(--lighter);
	--labSurfaceGlass: color-mix(in srgb, var(--pageBackground) 92%, transparent);
	--labPanel: color-mix(in srgb, var(--primaryLightest) 36%, var(--pageBackground));
	--labPanelStrong: color-mix(in srgb, var(--primaryLightest) 74%, var(--pageBackground));
	--labLine: color-mix(in srgb, var(--inputBorder) 70%, var(--primary) 30%);
	--labDivider: color-mix(in srgb, var(--structureBorder) 68%, var(--primary) 32%);
	--labAccent: var(--primary);
	--labAccentDark: var(--primaryDarker);
	--labBlue: var(--primary);
	--labGreen: var(--primaryDarker);
	--labRed: var(--linkHoverForeground);
	--labFrontier: var(--highlighterTwo);
	--labFrontierDark: color-mix(in srgb, var(--highlighterTwo) 48%, var(--darkText));
	--labGrid: color-mix(in srgb, var(--primary) 10%, transparent);
	--labEdge: color-mix(in srgb, var(--darkTextSecondary) 60%, var(--structureBorder));
	--labEdgeDimmed: color-mix(in srgb, var(--labEdge) 46%, var(--pageBackground));
	--labVisitedFill: color-mix(in srgb, var(--highlighterThree) 40%, var(--pageBackground));
	--labFrontierFill: color-mix(in srgb, var(--highlighterTwo) 52%, var(--pageBackground));
	--labCurrentFill: color-mix(in srgb, var(--primaryLightest) 72%, var(--pageBackground));
	--labSelectedFill: color-mix(in srgb, var(--highlighter) 54%, var(--pageBackground));
	--labBadgeStroke: color-mix(in srgb, var(--darkTextSecondary) 45%, var(--structureBorder));
	--labShadow: color-mix(in srgb, var(--darkText) 14%, transparent);
	--labOverlay: color-mix(in srgb, var(--darkText) 66%, transparent);
	color: var(--labInk);
	margin-top: 30px;
}

.traversalLab * {
	box-sizing: border-box;
}

body.graphModalOpen {
	overflow: hidden;
}

.labControls,
.graphStage,
.resultCard,
.stepTableWrap,
.distanceTableWrap {
	border: 3px solid var(--structureBorder);
	border-radius: 18px;
	background: linear-gradient(135deg, var(--labSurface), var(--labPanel));
	box-shadow: 0 8px 0 var(--labShadow);
}

#mainContent .traversalLab > h2 {
	border-top: none;
	font-size: 34px;
	line-height: 1.12;
	margin: 0 0 18px;
	padding: 0;
}

.heroStats {
	display: grid;
	grid-template-columns: repeat(3, 72px);
	gap: 8px;
	position: relative;
	z-index: 1;
}

.heroStats div {
	background: var(--labSurface);
	border: 2px solid var(--labLine);
	border-radius: 12px;
	padding: 8px 6px;
	text-align: center;
}

.heroStats strong {
	display: block;
	font-size: 23px;
	line-height: 1;
	color: var(--labAccentDark);
}

.heroStats span {
	color: var(--labMuted);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.customizeOverlay {
	border: none;
	border-radius: 22px;
	background: transparent;
	inline-size: min(920px, calc(100vw - 34px));
	max-block-size: min(86vh, 900px);
	padding: 0;
}

.customizeOverlay::backdrop {
	background: var(--labOverlay);
	backdrop-filter: blur(4px);
}

.customizeOverlay.isOpen {
	display: block;
	inset: 30px 0 auto;
	margin: auto;
	position: fixed;
	z-index: 4000;
}

.labControls {
	padding: 16px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	max-block-size: min(86vh, 900px);
	overflow-y: auto;
}

.customizeHeader {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	grid-column: 1 / -1;
	border-bottom: 2px dashed var(--labDivider);
	padding-bottom: 12px;
}

#mainContent .customizeHeader h3 {
	border-top: none;
	font-size: 24px;
	margin: 0;
	padding: 0;
}

#mainContent .customizeHeader p {
	color: var(--labMuted);
	font-size: 15px;
	line-height: 1.45;
	margin: 4px 0 0;
	padding: 0;
}

.controlGroup {
	border-bottom: none;
	border-right: 2px dashed var(--labDivider);
	margin-bottom: 0;
	padding: 0 16px 0 0;
}

.controlGroup:last-child {
	border-right: none;
	padding-right: 0;
}

#mainContent .controlGroup h3,
#mainContent .resultCard h3,
#mainContent .stepTableWrap h3,
#mainContent .distanceTableWrap h3 {
	border-top: none;
	font-size: 18px;
	margin: 0 0 12px;
	padding: 0;
}

.labControls label {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	color: var(--labInk);
	font-size: 14px;
	font-weight: 800;
	margin: 12px 0 6px;
}

.labControls input,
.labControls select,
.labControls button,
.graphToolbar button,
.graphIconButton,
.graphStepControls button {
	font: inherit;
}

.labControls input[type="range"] {
	width: 100%;
	accent-color: var(--labAccent);
}

.labControls input[type="text"],
.labControls select {
	width: 100%;
	border: 2px solid var(--labLine);
	border-radius: 10px;
	background: var(--labSurface);
	color: var(--labInk);
	padding: 9px 10px;
}

.inlineControls,
.buttonGrid,
.modeButtons,
.algorithmToggle {
	display: grid;
	gap: 8px;
}

.inlineControls {
	grid-template-columns: minmax(0, 1fr) auto;
}

.buttonGrid,
.algorithmToggle {
	grid-template-columns: 1fr 1fr;
}

.modeButtons {
	grid-template-columns: repeat(3, 1fr);
}

.labControls button,
.graphToolbar button,
.graphIconButton,
.graphStepControls button {
	border: 2px solid var(--labLine);
	border-radius: 10px;
	background: var(--labSurface);
	color: var(--labInk);
	cursor: pointer;
	font-weight: 800;
	padding: 9px 10px;
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.labControls button:hover,
.graphToolbar button:hover,
.graphIconButton:hover,
.graphStepControls button:hover {
	box-shadow: 0 3px 0 var(--labShadow);
	transform: translateY(-1px);
}

.labControls button:disabled,
.graphToolbar button:disabled,
.graphIconButton:disabled,
.graphStepControls button:disabled {
	cursor: not-allowed;
	opacity: .55;
	transform: none;
	box-shadow: none;
}

.labControls .primaryAction,
.graphToolbar .primaryAction,
.modeButtons .isActive,
.algorithmToggle .isActive {
	background: var(--labAccent);
	border-color: var(--labAccentDark);
	color: var(--textOnPrimary);
}

#mainContent .controlNote {
	color: var(--labMuted);
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 10px;
	padding: 0;
}

.graphStage {
	padding: 14px;
	position: relative;
	transition: box-shadow .2s ease, inset .2s ease;
	background:
		linear-gradient(var(--labSurfaceGlass), var(--labSurfaceGlass)),
		radial-gradient(circle at 18px 18px, color-mix(in srgb, var(--labAccent) 22%, transparent) 2px, transparent 2px);
	background-size: auto, 36px 36px;
}

.graphStage.isExpanded {
	display: flex;
	flex-direction: column;
	inset: 18px;
	margin: 0;
	position: fixed;
	z-index: 3000;
	box-shadow:
		0 0 0 9999px var(--labOverlay),
		0 24px 80px color-mix(in srgb, var(--darkText) 32%, transparent);
}

.graphToolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.graphToolbarActions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.expandedOnly {
	display: none;
}

.graphStage.isExpanded .expandedOnly {
	display: inline-block;
}

.graphStage.isExpanded #expandGraphButton {
	display: none;
}

.graphCanvasShell {
	position: relative;
}

#mainContent .graphToolbar p,
#mainContent .graphHint {
	color: var(--labMuted);
	font-size: 14px;
	margin: 0;
	padding: 0;
}

#graphCanvas {
	display: block;
	width: 100%;
	min-height: 520px;
	border: 2px solid var(--labLine);
	border-radius: 14px;
	background:
		linear-gradient(90deg, var(--labGrid) 1px, transparent 1px),
		linear-gradient(var(--labGrid) 1px, transparent 1px),
		linear-gradient(135deg, var(--labSurface), var(--labPanel));
	background-size: 36px 36px, 36px 36px, auto;
	touch-action: none;
	user-select: none;
}

.graphIconButton {
	align-items: center;
	display: inline-flex;
	font-size: 22px;
	height: 42px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 42px;
	z-index: 3;
}

#mainContent .graphGoalBadge {
	position: absolute;
	left: 16px;
	top: 14px;
	z-index: 3;
	margin: 0;
	border: 2px solid color-mix(in srgb, var(--labBlue) 42%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--labCurrentFill) 94%, transparent);
	box-shadow: 0 3px 0 var(--labShadow);
	color: var(--labInk);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.1;
	padding: 9px 12px;
}

.graphIconButton.expandedOnly {
	display: none;
}

.graphStage.isExpanded .graphIconButton.expandedOnly {
	display: inline-flex;
}

.graphStage.isExpanded .graphCanvasShell {
	flex: 1 1 auto;
	min-height: 0;
}

.graphStage.isExpanded #graphCanvas {
	height: 100%;
	min-height: 0;
}

#mainContent .graphStepTooltip {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 18px;
	z-index: 2;
	max-width: 790px;
	margin: 0 auto;
	border: 2px solid color-mix(in srgb, var(--labAccentDark) 34%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--labPanel) 94%, transparent);
	box-shadow: 0 8px 24px var(--labShadow);
	color: var(--labInk);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	padding: 10px 14px;
	pointer-events: none;
}

#mainContent .graphStage.isExpanded .graphStepTooltip {
	bottom: 22px;
	max-width: 920px;
}

.graphStepTooltip::before {
	content: "Current step";
	display: block;
	color: var(--labAccentDark);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .08em;
	line-height: 1;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.graphStepControls {
	display: grid;
	grid-template-columns: auto auto;
	gap: 10px;
	justify-content: center;
	margin-top: 12px;
}

.edgeLine {
	stroke: var(--labEdge);
	stroke-width: 5;
	stroke-linecap: round;
	transition: stroke .2s ease, stroke-width .2s ease, opacity .2s ease;
}

.edgeLine.dimmed {
	opacity: .16;
	stroke: var(--labEdgeDimmed);
	stroke-width: 4;
}

.edgeLine.frontier {
	stroke: var(--labFrontier);
	stroke-width: 8;
}

.edgeLine.tree {
	stroke: var(--labGreen);
	stroke-width: 8;
}

.edgeLine.path {
	stroke: var(--labGreen);
	stroke-width: 10;
}

.edgeLine.candidate {
	stroke: var(--labAccent);
	stroke-width: 9;
}

.nodeGroup {
	cursor: grab;
	transition: opacity .2s ease;
}

.nodeGroup:active {
	cursor: grabbing;
}

.nodeGroup.dimmed {
	opacity: .25;
}

.nodeCircle {
	fill: var(--labSurface);
	stroke: var(--labBlue);
	stroke-width: 5;
	filter: drop-shadow(0 3px 0 var(--labShadow));
	transition: fill .2s ease, stroke .2s ease, stroke-width .2s ease;
}

.nodeGroup.visited .nodeCircle {
	fill: var(--labVisitedFill);
	stroke: var(--labGreen);
}

.nodeGroup.frontier .nodeCircle {
	fill: var(--labFrontierFill);
	stroke: var(--labFrontierDark);
	stroke-dasharray: 8 5;
	stroke-width: 7;
}

.nodeGroup.frontier .nodeLabel {
	fill: var(--darkText);
}

.nodeGroup.current .nodeCircle {
	fill: var(--labCurrentFill);
	stroke: var(--labBlue);
	stroke-dasharray: none;
	stroke-width: 7;
}

.nodeGroup.path .nodeCircle {
	fill: var(--labVisitedFill);
	stroke: var(--labGreen);
	stroke-dasharray: none;
	stroke-width: 8;
}

.nodeGroup.selected .nodeCircle {
	fill: var(--labSelectedFill);
	stroke: var(--labRed);
	stroke-width: 7;
}

.nodeLabel {
	fill: var(--labInk);
	font-size: 21px;
	font-weight: 900;
	pointer-events: none;
	text-anchor: middle;
}

.nodeOrderBadge {
	fill: color-mix(in srgb, var(--labSurface) 94%, transparent);
	stroke: var(--labBadgeStroke);
	stroke-width: 2;
	filter: drop-shadow(0 2px 0 var(--labShadow));
	pointer-events: none;
}

.nodeOrderLabel {
	fill: var(--labInk);
	font-size: 14px;
	font-weight: 900;
	pointer-events: none;
	text-anchor: middle;
}

.nodeGroup.current .nodeOrderBadge {
	fill: var(--labCurrentFill);
	stroke: var(--labBlue);
}

.nodeGroup.frontier .nodeOrderBadge {
	fill: var(--labFrontierFill);
	stroke: var(--labFrontierDark);
}

.nodeGroup.visited .nodeOrderBadge {
	fill: var(--labVisitedFill);
	stroke: var(--labGreen);
}

.nodeGroup.path .nodeOrderBadge {
	fill: var(--labVisitedFill);
	stroke: var(--labGreen);
}

.resultsGrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 18px;
}

.resultCard,
.stepTableWrap,
.distanceTableWrap {
	padding: 16px;
}

#mainContent .resultCard p {
	color: var(--labMuted);
	font-size: 16px;
	line-height: 1.45;
	margin: 0;
	padding: 0;
}

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

.stepTableWrap,
.distanceTableWrap {
	margin-top: 18px;
	overflow-x: auto;
}

#stepLogTable,
#traversalTable {
	border-collapse: collapse;
	width: 100%;
	min-width: 520px;
}

#stepLogTable th,
#stepLogTable td,
#traversalTable th,
#traversalTable td {
	border: 1px solid var(--labLine);
	padding: 9px 10px;
	text-align: left;
}

#stepLogTable th,
#traversalTable th {
	background: var(--labPanelStrong);
	color: var(--labInk);
	font-size: 14px;
	text-transform: uppercase;
}

#stepLogTable td,
#traversalTable td {
	background: color-mix(in srgb, var(--labSurface) 78%, transparent);
	color: var(--labInk);
}

#stepLogTable tr.currentStep td {
	background: var(--labSelectedFill);
	font-weight: 800;
}

@media all and (max-width: 1200px) {
	.resultsGrid,
	.labControls {
		grid-template-columns: 1fr;
	}

	.heroStats {
		grid-template-columns: repeat(3, 1fr);
	}

	.controlGroup {
		border-right: none;
		border-bottom: 2px dashed var(--labDivider);
		padding: 0 0 16px;
	}

	.controlGroup:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	#graphCanvas {
		min-height: 460px;
	}

	#mainContent .graphStepTooltip {
		left: 22px;
		right: 22px;
	}
}

@media all and (max-width: 620px) {
	#mainContent .traversalLab > h2 {
		font-size: 27px;
	}

	.heroStats,
	.buttonGrid,
	.modeButtons,
	.algorithmToggle {
		grid-template-columns: 1fr;
	}

	.graphToolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.graphToolbarActions,
	.customizeHeader {
		align-items: stretch;
		flex-direction: column;
	}

	.graphToolbarActions {
		display: grid;
	}

	#graphCanvas {
		min-height: 340px;
	}

	#mainContent .graphStepTooltip {
		bottom: 14px;
		font-size: 13px;
		left: 18px;
		right: 18px;
		padding: 8px 10px;
	}

	.graphIconButton {
		height: 40px;
		right: 10px;
		top: 10px;
		width: 40px;
	}

	#mainContent .graphGoalBadge {
		font-size: 13px;
		left: 10px;
		top: 10px;
	}

	.graphStage.isExpanded {
		inset: 8px;
		padding: 10px;
	}

	.graphStage.isExpanded .graphCanvasShell {
		flex: 1 1 auto;
		min-height: 0;
	}

	#mainContent .graphStage.isExpanded .graphStepTooltip {
		bottom: 14px;
	}
}