.cm-krebs-sim {
	--cm-krebs-bg: rgba(6, 12, 20, 0.8);
	--cm-krebs-card: rgba(255, 255, 255, 0.05);
	--cm-krebs-card-strong: rgba(255, 255, 255, 0.08);
	--cm-krebs-line: rgba(255, 255, 255, 0.09);
	--cm-krebs-line-strong: rgba(255, 255, 255, 0.14);
	--cm-krebs-text: #eef5ff;
	--cm-krebs-muted: #b7c8dc;
	--cm-krebs-fullscreen-height: calc(100dvh - 48px);
	--cm-krebs-loop-viewport-height: clamp(380px, calc(100dvh - 248px), 760px);
	--cm-krebs-blue: #5eb8ff;
	--cm-krebs-cyan: #22d3ee;
	--cm-krebs-amber: #fbbf24;
	--cm-krebs-green: #4ade80;
	--cm-krebs-rose: #fb7185;
	--cm-krebs-violet: #a78bfa;
	--cm-krebs-orange: #f97316;
	--cm-krebs-radius: 26px;
	--cm-krebs-shadow: 0 24px 52px rgba(0, 0, 0, 0.32);
	--cm-krebs-viewport-height: clamp(420px, calc(100dvh - 220px), 720px);
	--cm-krebs-compact-dock-reserve: 172px;
	position: relative;
	color: var(--cm-krebs-text);
}

.cm-krebs-sim *,
.cm-krebs-sim *::before,
.cm-krebs-sim *::after {
	box-sizing: border-box;
}

.cm-krebs-sim [hidden] {
	display: none !important;
}

.cm-krebs-layout {
	display: grid;
	grid-template-columns: 312px minmax(0, 1fr) 360px;
	gap: 18px;
	align-items: start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.cm-krebs-panel {
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--cm-krebs-line);
	border-radius: var(--cm-krebs-radius);
	background:
		radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.08), transparent 34%),
		linear-gradient(180deg, rgba(8, 13, 20, 0.94), rgba(5, 10, 16, 0.98));
	box-shadow: var(--cm-krebs-shadow);
	backdrop-filter: blur(8px);
}

.cm-krebs-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 0;
}

.cm-krebs-panel-head h2 {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.2;
	color: #f6fbff;
}

.cm-krebs-kicker {
	margin: 0 0 4px;
	color: #bfd9f7;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-krebs-chip,
.cm-krebs-toolbar-pill {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--cm-krebs-line);
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.78rem;
	font-weight: 700;
	color: #dcebfd;
	white-space: nowrap;
}

.cm-krebs-stage-panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

.cm-krebs-panel--overview,
.cm-krebs-panel--detail {
	position: sticky;
	top: 18px;
}

.cm-krebs-panel-body,
.cm-krebs-detail-scroll {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 18px 18px;
}

.cm-krebs-section,
.cm-krebs-detail-section {
	border: 1px solid var(--cm-krebs-line);
	border-radius: 20px;
	padding: 14px 15px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.cm-krebs-section h3,
.cm-krebs-detail-section h3 {
	margin: 0 0 0.75rem;
	font-size: 0.96rem;
	color: #f5fbff;
}

.cm-krebs-phase-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.2rem 0 0.05rem;
}

.cm-krebs-phase-label {
	color: #a9bed6;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-phase-card strong {
	font-size: 1.08rem;
	color: #f7fbff;
	line-height: 1.3;
}

.cm-krebs-phase-card p,
.cm-krebs-detail-text,
.cm-krebs-detail-lead {
	margin: 0;
	color: #d6e5f6;
	font-size: 0.92rem;
	line-height: 1.65;
}

.cm-krebs-detail-scroll > .cm-krebs-detail-section:first-child {
	background:
		radial-gradient(circle at 100% 0%, rgba(94, 184, 255, 0.12), transparent 42%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
	border-color: rgba(94, 184, 255, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(94, 184, 255, 0.08),
		0 16px 34px rgba(5, 12, 20, 0.32);
	position: relative;
	overflow: hidden;
}

.cm-krebs-detail-scroll > .cm-krebs-detail-section:first-child::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 4px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(94, 184, 255, 0.98), rgba(34, 211, 238, 0.82));
}

.cm-krebs-detail-lead {
	font-size: 0.98rem;
	line-height: 1.72;
	color: #e5f1fd;
	padding-left: 0.6rem;
}

.cm-krebs-progress {
	position: relative;
	height: 10px;
	margin-top: 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

.cm-krebs-progress span {
	display: block;
	height: 100%;
	width: 12%;
	border-radius: inherit;
	background: linear-gradient(90deg, #5eb8ff 0%, #22d3ee 55%, #fbbf24 100%);
	box-shadow: 0 0 18px rgba(94, 184, 255, 0.32);
	transition: width 0.28s ease;
}

.cm-krebs-yield-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cm-krebs-yield-card,
.cm-krebs-meta-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.95rem 1rem;
	border-radius: 18px;
	border: 1px solid var(--cm-krebs-line);
	background: rgba(255, 255, 255, 0.05);
}

.cm-krebs-yield-card strong {
	font-size: 1.35rem;
	line-height: 1;
	color: #f7fbff;
}

.cm-krebs-yield-card span,
.cm-krebs-meta-card span {
	color: #a8bad0;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-meta-card strong {
	font-size: 0.98rem;
	color: #f5fbff;
	line-height: 1.35;
}

.cm-krebs-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cm-krebs-chip-list .cm-krebs-chip {
	background: rgba(255, 255, 255, 0.05);
}

.cm-krebs-chip-list--products .cm-krebs-chip,
.cm-krebs-products-ribbon .cm-krebs-chip {
	background: linear-gradient(135deg, rgba(94, 184, 255, 0.16), rgba(34, 211, 238, 0.1));
	border-color: rgba(94, 184, 255, 0.24);
}

.cm-krebs-list {
	margin: 0;
	padding-left: 1.05rem;
	color: #d6e5f6;
	font-size: 0.9rem;
	line-height: 1.6;
}

.cm-krebs-list li + li {
	margin-top: 0.4rem;
}

.cm-krebs-list li.is-empty {
	color: #98abc1;
	font-style: italic;
}

.cm-krebs-panel--stage {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
	min-height: var(--cm-krebs-viewport-height);
}

.cm-krebs-toolbar {
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--cm-krebs-line);
	border-radius: 22px;
	padding: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
}

.cm-krebs-toolbar-main {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	min-width: 0;
}

.cm-krebs-toolbar-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
	max-width: 100%;
}

.cm-krebs-toolbar-group--meta {
	justify-content: center;
}

.cm-krebs-toolbar-pill strong {
	margin-left: 0.4rem;
	color: #f7fbff;
	font-size: 0.82rem;
}

.cm-krebs-toolbar-pill--hint {
	background: rgba(255, 255, 255, 0.04);
}

.cm-krebs-compact-story {
	display: none;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	border-radius: 22px;
	border: 1px solid rgba(94, 184, 255, 0.22);
	background:
		radial-gradient(circle at 100% 0%, rgba(94, 184, 255, 0.16), transparent 38%),
		linear-gradient(180deg, rgba(7, 14, 23, 0.94), rgba(4, 9, 16, 0.98));
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.cm-krebs-compact-story-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 72px;
	min-height: 34px;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgba(94, 184, 255, 0.14);
	border: 1px solid rgba(94, 184, 255, 0.24);
	color: #e3f2ff;
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-compact-story-copy {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	min-width: 0;
}

.cm-krebs-compact-story-copy strong {
	color: #f6fbff;
	font-size: 0.98rem;
	line-height: 1.28;
}

.cm-krebs-compact-story-copy p {
	margin: 0;
	color: #dbe9f8;
	font-size: 0.88rem;
	line-height: 1.48;
}

.cm-krebs-control-btn,
.cm-krebs-viewport-fullscreen,
.cm-krebs-reaction-btn {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	color: var(--cm-krebs-text);
	font: inherit;
	cursor: pointer;
	transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.cm-krebs-control-btn {
	min-height: 38px;
	padding: 0.62rem 0.95rem;
	border-radius: 999px;
	font-size: 0.84rem;
	font-weight: 800;
}

.cm-krebs-control-btn:hover,
.cm-krebs-viewport-fullscreen:hover,
.cm-krebs-reaction-btn:hover {
	transform: translateY(-1px);
	border-color: rgba(94, 184, 255, 0.4);
	background: rgba(255, 255, 255, 0.1);
}

.cm-krebs-control-btn.is-active,
.cm-krebs-viewport-fullscreen.is-active,
.cm-krebs-reaction-btn.is-active {
	border-color: transparent;
	background: linear-gradient(135deg, rgba(94, 184, 255, 0.92), rgba(34, 211, 238, 0.92));
	color: #04101b;
	box-shadow: 0 12px 26px rgba(34, 211, 238, 0.18);
}

.cm-krebs-control-btn--ghost {
	background: rgba(255, 255, 255, 0.04);
}

.cm-krebs-stage {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	min-width: 0;
}

.cm-krebs-viewport {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: calc(var(--cm-krebs-viewport-height) - 140px);
	min-width: 0;
	max-width: 100%;
	padding: 18px;
	border: 1px solid var(--cm-krebs-line);
	border-radius: 28px;
	background:
		radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08), transparent 45%),
		linear-gradient(180deg, rgba(5, 10, 16, 0.96), rgba(6, 12, 20, 0.98));
	overflow: hidden;
}

.cm-krebs-viewport::before {
	content: "";
	position: absolute;
	inset: 20px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.cm-krebs-viewport-fullscreen {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	font-size: 1.15rem;
}

.cm-krebs-orbit-topline {
	position: absolute;
	top: 18px;
	left: 18px;
	right: 74px;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	transition: opacity 0.24s ease, transform 0.24s ease;
}

.cm-krebs-orbit-brandmark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow:
		0 12px 28px rgba(0, 0, 0, 0.26),
		inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.cm-krebs-orbit-brandmark-core {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}

.cm-krebs-orbit-brandmark img {
	width: 76%;
	height: 76%;
	object-fit: contain;
}

.cm-krebs-orbit-topline-copy {
	display: flex;
	flex-direction: column;
	gap: 0.22rem;
	min-width: 0;
}

.cm-krebs-orbit-kicker {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 0.32rem 0.65rem;
	border-radius: 999px;
	background: rgba(56, 189, 248, 0.12);
	border: 1px solid rgba(56, 189, 248, 0.18);
	color: #d7efff;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cm-krebs-orbit-topline strong {
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	line-height: 1.2;
	color: #f6fbff;
}

.cm-krebs-orbit-subtitle {
	color: #b8cbe0;
	font-size: 0.88rem;
}

.cm-krebs-orbit-window {
	position: relative;
	flex: 1 1 auto;
	width: min(100%, 1320px);
	max-width: 100%;
	margin: 0 auto;
	padding-top: 78px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(340px, 0.84fr) minmax(480px, 1.16fr);
	gap: 18px;
	align-items: stretch;
}

.cm-krebs-orbit-scene {
	position: relative;
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1;
}

.cm-krebs-orbit-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cm-krebs-center-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.9rem 0.95rem;
	min-width: 156px;
	max-width: 180px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(4, 11, 18, 0.76);
	backdrop-filter: blur(8px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
	text-align: center;
}

.cm-krebs-center-hub span {
	color: #a4bad2;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-krebs-center-hub strong {
	color: #f6fbff;
	font-size: 1rem;
}

.cm-krebs-center-hub small {
	color: #c6d8eb;
	font-size: 0.82rem;
	line-height: 1.45;
}

.cm-krebs-sim:not(.is-loop-mode) .cm-krebs-center-hub {
	display: none;
}

.cm-krebs-reaction-zoom {
	position: relative;
	z-index: 6;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: auto;
	min-height: 0;
	padding: 14px;
	align-self: stretch;
	justify-self: end;
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background:
		radial-gradient(circle at 0% 0%, rgba(94, 184, 255, 0.11), transparent 34%),
		linear-gradient(180deg, rgba(5, 10, 16, 0.9), rgba(7, 14, 22, 0.94));
	backdrop-filter: blur(10px);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition:
		transform 0.24s ease,
		opacity 0.24s ease,
		border-color 0.24s ease,
		box-shadow 0.24s ease;
}

.cm-krebs-reaction-zoom-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.cm-krebs-reaction-zoom-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 4px 2px 0;
}

.cm-krebs-reaction-zoom-brandmark {
	width: 52px;
	height: 52px;
	box-shadow:
		0 10px 24px rgba(0, 0, 0, 0.24),
		inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.cm-krebs-reaction-zoom-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 48px;
	min-height: 48px;
	padding: 0.3rem 0.6rem;
	border-radius: 18px;
	background: rgba(94, 184, 255, 0.12);
	border: 1px solid rgba(94, 184, 255, 0.22);
	color: #e3f2ff;
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-reaction-zoom-copy {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	padding-top: 0.1rem;
}

.cm-krebs-reaction-zoom-copy strong {
	color: #f6fbff;
	font-size: clamp(1.2rem, 1.8vw, 1.55rem);
	line-height: 1.25;
}

.cm-krebs-reaction-zoom-copy small {
	color: #bfd2e7;
	font-size: 0.94rem;
	line-height: 1.45;
}

.cm-krebs-reaction-zoom-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cm-krebs-reaction-zoom-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	padding: 14px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}

.cm-krebs-reaction-stepper {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}

.cm-krebs-reaction-stepper-meta {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.cm-krebs-reaction-stepper-counter {
	color: #9fb8d2;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-krebs-reaction-stepper-caption {
	margin: 0;
	color: #e4eef9;
	font-size: 0.95rem;
	line-height: 1.55;
}

.cm-krebs-reaction-stepper-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 10px;
}

.cm-krebs-reaction-stepper-btn {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.28rem;
	min-height: 62px;
	padding: 0.78rem 0.82rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: #d7e6f6;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.cm-krebs-reaction-stepper-btn:hover {
	transform: translateY(-1px);
	border-color: rgba(94, 184, 255, 0.36);
	background: rgba(255, 255, 255, 0.07);
}

.cm-krebs-reaction-stepper-btn.is-active {
	border-color: rgba(94, 184, 255, 0.48);
	background: linear-gradient(180deg, rgba(94, 184, 255, 0.18), rgba(34, 211, 238, 0.08));
	box-shadow: 0 12px 24px rgba(94, 184, 255, 0.1);
}

.cm-krebs-reaction-stepper-btn.is-complete {
	border-color: rgba(74, 222, 128, 0.22);
	background: rgba(74, 222, 128, 0.06);
}

.cm-krebs-reaction-stepper-btn strong {
	color: #f4f9ff;
	font-size: 0.88rem;
	line-height: 1.2;
}

.cm-krebs-reaction-stepper-btn small {
	color: #9db5cd;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-reaction-zoom-block {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.03);
}

.cm-krebs-reaction-zoom-block--fullscreen {
	display: none;
}

.cm-krebs-reaction-zoom-label {
	margin: 0 0 0.55rem;
	color: #9fb8d2;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-krebs-reaction-equation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
}

.cm-krebs-reaction-zoom-description,
.cm-krebs-reaction-zoom-note {
	margin: 0;
	color: #d9e8f8;
	font-size: 0.86rem;
	line-height: 1.58;
}

.cm-krebs-legend {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 0.6rem;
}

.cm-krebs-legend-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #e8f3ff;
	font-size: 0.8rem;
	font-weight: 700;
}

.cm-krebs-legend-dot {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	border: 2px solid #fff;
	flex: 0 0 auto;
}

.cm-krebs-legend-dot--base {
	background: #111827;
}

.cm-krebs-legend-dot--added {
	background: #ef4444;
}

.cm-krebs-legend-dot--coa {
	background: #16a34a;
}

.cm-krebs-products-ribbon {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 5;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	width: min(calc(100% - 36px), 560px);
	transform: translateX(-50%);
}

.cm-krebs-loop-yield {
	position: absolute;
	top: 108px;
	right: 18px;
	z-index: 6;
	display: none;
	flex-direction: column;
	gap: 0.8rem;
	width: min(280px, calc(100% - 36px));
	padding: 1rem 1rem 0.95rem;
	border-radius: 24px;
	border: 1px solid rgba(94, 184, 255, 0.18);
	background:
		radial-gradient(circle at 100% 0%, rgba(94, 184, 255, 0.15), transparent 40%),
		linear-gradient(180deg, rgba(6, 14, 24, 0.92), rgba(4, 10, 18, 0.96));
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(10px);
}

.cm-krebs-loop-yield-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.9rem;
}

.cm-krebs-loop-yield-head span {
	display: block;
	color: #a9c8e8;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-krebs-loop-yield-head strong {
	display: block;
	margin-top: 0.22rem;
	color: #f5fbff;
	font-size: 1.02rem;
	line-height: 1.25;
}

.cm-krebs-loop-yield-head small {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(94, 184, 255, 0.18);
	background: rgba(94, 184, 255, 0.08);
	color: #ddf0ff;
	font-size: 0.78rem;
	font-weight: 800;
	white-space: nowrap;
}

.cm-krebs-loop-yield-copy {
	margin: 0;
	color: #d7e8fa;
	font-size: 0.86rem;
	line-height: 1.6;
}

.cm-krebs-loop-yield-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem;
}

.cm-krebs-loop-yield-card {
	padding: 0.8rem 0.85rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.045);
}

.cm-krebs-loop-yield-card strong {
	display: block;
	color: #f8fbff;
	font-size: 1.22rem;
	line-height: 1;
}

.cm-krebs-loop-yield-card span {
	display: block;
	margin-top: 0.28rem;
	color: #abc2d9;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-loop-summary {
	display: none;
	flex-direction: column;
	gap: 10px;
	width: min(100%, 338px);
	height: 100%;
	max-height: 100%;
	min-height: 0;
	padding: 12px;
	border-radius: 24px;
	border: 1px solid rgba(94, 184, 255, 0.12);
	background:
		radial-gradient(circle at 100% 0%, rgba(94, 184, 255, 0.08), transparent 34%),
		linear-gradient(180deg, rgba(5, 11, 18, 0.88), rgba(6, 12, 20, 0.94));
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(94, 184, 255, 0.32) rgba(255, 255, 255, 0.03);
}

.cm-krebs-loop-summary::-webkit-scrollbar {
	width: 8px;
}

.cm-krebs-loop-summary::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(94, 184, 255, 0.24);
}

.cm-krebs-loop-summary-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.cm-krebs-loop-summary-head span,
.cm-krebs-loop-summary-label {
	display: block;
	color: #a9c8e8;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-krebs-loop-summary-head strong {
	display: block;
	margin-top: 0.18rem;
	color: #f5fbff;
	font-size: 0.98rem;
	line-height: 1.25;
}

.cm-krebs-loop-summary-head small {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0.26rem 0.66rem;
	border-radius: 999px;
	border: 1px solid rgba(94, 184, 255, 0.18);
	background: rgba(94, 184, 255, 0.08);
	color: #ddf0ff;
	font-size: 0.76rem;
	font-weight: 800;
	white-space: nowrap;
}

.cm-krebs-loop-summary-section {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 0.92rem 0.94rem;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		radial-gradient(circle at 0% 0%, rgba(94, 184, 255, 0.06), transparent 30%),
		rgba(255, 255, 255, 0.035);
}

.cm-krebs-loop-summary-section--compact {
	gap: 0.8rem;
}

.cm-krebs-loop-summary-meta-bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.7rem;
}

.cm-krebs-loop-summary-meta-bar small {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0.22rem 0.62rem;
	border-radius: 999px;
	border: 1px solid rgba(94, 184, 255, 0.14);
	background: rgba(94, 184, 255, 0.08);
	color: #dceeff;
	font-size: 0.72rem;
	font-weight: 800;
	white-space: nowrap;
}

.cm-krebs-loop-summary-reaction {
	display: block;
	color: #f8fbff;
	font-size: 1.05rem;
	line-height: 1.28;
}

.cm-krebs-loop-summary-enzyme {
	display: block;
	margin-top: -0.1rem;
	color: #bdd1e7;
	font-size: 0.82rem;
	line-height: 1.45;
}

.cm-krebs-loop-summary-copy,
.cm-krebs-loop-summary-note {
	margin: 0;
	color: #d9e8f8;
	font-size: 0.85rem;
	line-height: 1.58;
}

.cm-krebs-loop-summary .cm-krebs-chip-list {
	gap: 6px;
}

.cm-krebs-loop-summary .cm-krebs-chip {
	min-height: 28px;
	padding: 0.22rem 0.62rem;
	font-size: 0.72rem;
	white-space: normal;
	line-height: 1.25;
	text-align: center;
	overflow-wrap: anywhere;
}

.cm-krebs-loop-summary-inline {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.1rem;
}

.cm-krebs-loop-summary-inline-copy strong {
	display: block;
	margin-top: 0.18rem;
	color: #eff8ff;
	font-size: 0.88rem;
	line-height: 1.35;
}

.cm-krebs-loop-summary-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.cm-krebs-loop-summary-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.38rem;
	padding: 0.42rem 0.62rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.045);
}

.cm-krebs-loop-summary-stat strong {
	color: #f8fbff;
	font-size: 0.96rem;
	line-height: 1;
}

.cm-krebs-loop-summary-stat small {
	color: #abc2d9;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-loop-toggle {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.7rem;
	align-items: center;
	padding: 0.78rem 0.82rem;
	border-radius: 18px;
	border: 1px solid rgba(94, 184, 255, 0.14);
	background: linear-gradient(180deg, rgba(94, 184, 255, 0.08), rgba(255, 255, 255, 0.02));
	cursor: pointer;
}

.cm-krebs-loop-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cm-krebs-loop-toggle-track {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 58px;
	height: 32px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cm-krebs-loop-toggle-thumb {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #f8fbff;
	box-shadow: 0 8px 18px rgba(4, 11, 18, 0.28);
	transform: translateX(0);
	transition: transform 0.2s ease;
}

.cm-krebs-loop-toggle input:checked + .cm-krebs-loop-toggle-track {
	background: linear-gradient(135deg, rgba(94, 184, 255, 0.92), rgba(34, 211, 238, 0.92));
	border-color: transparent;
}

.cm-krebs-loop-toggle input:checked + .cm-krebs-loop-toggle-track .cm-krebs-loop-toggle-thumb {
	transform: translateX(26px);
}

.cm-krebs-loop-toggle-copy {
	display: flex;
	flex-direction: column;
	gap: 0.22rem;
	min-width: 0;
}

.cm-krebs-loop-toggle-copy strong {
	color: #f7fbff;
	font-size: 0.9rem;
	line-height: 1.35;
}

.cm-krebs-loop-toggle-copy small {
	color: #bfd2e7;
	font-size: 0.77rem;
	line-height: 1.45;
}

.cm-krebs-loop-summary-note {
	padding: 0 0.15rem;
	color: #9fb8d2;
	font-size: 0.76rem;
	line-height: 1.45;
}

.cm-krebs-page-note--full {
	border-color: rgba(94, 184, 255, 0.18);
	background:
		radial-gradient(circle at 100% 0%, rgba(94, 184, 255, 0.12), transparent 35%),
		linear-gradient(180deg, rgba(7, 12, 20, 0.9), rgba(7, 12, 20, 0.82));
}

.cm-krebs-equation-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 20px;
	border: 1px solid var(--cm-krebs-line);
	background: rgba(255, 255, 255, 0.04);
}

.cm-krebs-equation-side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.cm-krebs-equation-side--reactants {
	justify-content: flex-end;
}

.cm-krebs-equation-side--products {
	justify-content: flex-start;
}

.cm-krebs-equation-chip,
.cm-krebs-equation-plus {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 800;
}

.cm-krebs-equation-chip {
	padding: 0.4rem 0.78rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	color: #eef5ff;
}

.cm-krebs-equation-chip--reactant {
	background: rgba(56, 189, 248, 0.1);
	border-color: rgba(56, 189, 248, 0.22);
}

.cm-krebs-equation-chip--product {
	background: rgba(74, 222, 128, 0.1);
	border-color: rgba(74, 222, 128, 0.22);
}

.cm-krebs-equation-plus {
	padding: 0 0.1rem;
	color: #8ea7bf;
}

.cm-krebs-equation-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #f7fbff;
	font-size: 1.25rem;
	font-weight: 900;
}

.cm-krebs-detail-text--equation {
	margin-top: 0.85rem;
}

.cm-krebs-zoom-stage {
	fill: rgba(255, 255, 255, 0.03);
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 1.6;
}

.cm-krebs-zoom-caption {
	fill: #e5f2ff;
	font-size: 20px;
	font-weight: 800;
}

.cm-krebs-zoom-caption-sub {
	fill: #97afc8;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-krebs-zoom-bond {
	stroke: rgba(255, 255, 255, 0.62);
	stroke-width: 7;
	stroke-linecap: round;
}

.cm-krebs-zoom-bond--secondary {
	stroke-width: 4.5;
	opacity: 0.7;
}

.cm-krebs-zoom-atom-label {
	fill: #f8fbff;
	font-size: 11px;
	font-weight: 900;
	text-anchor: middle;
}

.cm-krebs-zoom-group-line {
	stroke: rgba(255, 255, 255, 0.24);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.cm-krebs-zoom-group-text {
	fill: #f8fbff;
	font-size: 12px;
	font-weight: 800;
	text-anchor: middle;
}

.cm-krebs-zoom-fragment-label {
	fill: #eff7ff;
	font-size: 12px;
	font-weight: 800;
	text-anchor: middle;
}

.cm-krebs-statusbar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	min-width: 0;
	max-width: 100%;
}

.cm-krebs-stage-route {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	max-width: 100%;
	padding: 14px 16px 16px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		radial-gradient(circle at 0% 0%, rgba(94, 184, 255, 0.08), transparent 34%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.cm-krebs-stage-route-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.cm-krebs-stage-route-head h3 {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.3;
	color: #f5fbff;
}

.cm-krebs-status-pill {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	padding: 0.95rem 1rem;
	border-radius: 18px;
	border: 1px solid var(--cm-krebs-line);
	background: rgba(255, 255, 255, 0.04);
}

.cm-krebs-status-pill span {
	color: #a6bcd4;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-status-pill strong {
	font-size: 0.96rem;
	line-height: 1.4;
	color: #f6fbff;
}

.cm-krebs-detail-meta,
.cm-krebs-delta-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.cm-krebs-delta-grid {
	grid-template-columns: 1fr;
	gap: 14px;
}

.cm-krebs-delta-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--cm-krebs-line);
	border-radius: 18px;
	padding: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
	overflow: hidden;
}

.cm-krebs-delta-card-head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.cm-krebs-delta-card-kicker {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 0.28rem 0.62rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cm-krebs-delta-card h3 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}

.cm-krebs-delta-card--add {
	border-color: rgba(74, 222, 128, 0.22);
	background: linear-gradient(180deg, rgba(74, 222, 128, 0.08), rgba(255, 255, 255, 0.03));
}

.cm-krebs-delta-card--remove {
	border-color: rgba(251, 113, 133, 0.22);
	background: linear-gradient(180deg, rgba(251, 113, 133, 0.08), rgba(255, 255, 255, 0.03));
}

.cm-krebs-delta-card--shift {
	border-color: rgba(94, 184, 255, 0.22);
	background: linear-gradient(180deg, rgba(94, 184, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.cm-krebs-delta-card--add .cm-krebs-delta-card-kicker {
	background: rgba(74, 222, 128, 0.14);
	color: #cbf7d8;
	border: 1px solid rgba(74, 222, 128, 0.24);
}

.cm-krebs-delta-card--remove .cm-krebs-delta-card-kicker {
	background: rgba(251, 113, 133, 0.14);
	color: #ffd6de;
	border: 1px solid rgba(251, 113, 133, 0.24);
}

.cm-krebs-delta-card--shift .cm-krebs-delta-card-kicker {
	background: rgba(94, 184, 255, 0.14);
	color: #d9efff;
	border: 1px solid rgba(94, 184, 255, 0.24);
}

.cm-krebs-delta-card .cm-krebs-list {
	margin: 0;
	padding-left: 1.15rem;
	font-size: 0.94rem;
	line-height: 1.7;
}

.cm-krebs-molecule-compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
}

.cm-krebs-molecule-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border-radius: 20px;
	border: 1px solid var(--cm-krebs-line);
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

.cm-krebs-molecule-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--cm-krebs-accent, #5eb8ff);
}

.cm-krebs-molecule-role {
	color: #9ab0c8;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-krebs-molecule-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.cm-krebs-molecule-title strong {
	font-size: 1rem;
	line-height: 1.35;
	color: #f6fbff;
}

.cm-krebs-carbon-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 30px;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--cm-krebs-line);
	font-size: 0.76rem;
	font-weight: 800;
	color: #e4f0ff;
}

.cm-krebs-carbon-chain {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cm-krebs-carbon-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.72rem;
	font-weight: 800;
	color: #f4f8ff;
}

.cm-krebs-molecule-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cm-krebs-group-chip {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0.34rem 0.65rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.76rem;
	font-weight: 700;
	color: #dcebfd;
}

.cm-krebs-molecule-arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 132px;
	padding: 12px 0;
}

.cm-krebs-molecule-arrow span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: rgba(56, 189, 248, 0.12);
	border: 1px solid rgba(56, 189, 248, 0.24);
	font-size: 1.45rem;
	font-weight: 800;
	color: #d9f3ff;
}

.cm-krebs-molecule-delta-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.cm-krebs-delta-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.32rem 0.62rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	border: 1px solid transparent;
}

.cm-krebs-delta-chip--add {
	background: rgba(74, 222, 128, 0.12);
	border-color: rgba(74, 222, 128, 0.24);
	color: #c8f9d6;
}

.cm-krebs-delta-chip--remove {
	background: rgba(251, 113, 133, 0.12);
	border-color: rgba(251, 113, 133, 0.24);
	color: #ffd9df;
}

.cm-krebs-delta-chip--shift {
	background: rgba(34, 211, 238, 0.12);
	border-color: rgba(34, 211, 238, 0.24);
	color: #d8fbff;
}

.cm-krebs-reaction-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.cm-krebs-reaction-nav--horizontal {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scroll-snap-type: x proximity;
}

.cm-krebs-reaction-nav--horizontal .cm-krebs-reaction-btn {
	flex: 0 0 232px;
	scroll-snap-align: start;
}

.cm-krebs-reaction-nav--horizontal::-webkit-scrollbar {
	height: 8px;
}

.cm-krebs-reaction-nav--horizontal::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
}

.cm-krebs-reaction-btn {
	display: flex;
	flex-direction: column;
	gap: 0.42rem;
	align-items: flex-start;
	min-height: 92px;
	padding: 0.9rem 0.95rem;
	border-radius: 18px;
	text-align: left;
}

.cm-krebs-reaction-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.75rem;
	font-weight: 800;
	color: #f6fbff;
}

.cm-krebs-reaction-btn strong {
	font-size: 0.92rem;
	line-height: 1.45;
	color: #f5fbff;
}

.cm-krebs-reaction-btn small {
	color: #aabed3;
	font-size: 0.8rem;
	line-height: 1.45;
}

.cm-krebs-orbit-scene {
	transition:
		transform 0.24s ease,
		opacity 0.24s ease,
		border-color 0.24s ease,
		box-shadow 0.24s ease,
	background 0.24s ease;
}

.cm-krebs-sim.is-medium-layout:not(.is-compact-flow) .cm-krebs-layout {
	grid-template-columns: minmax(0, 1fr) 332px;
}

.cm-krebs-sim.is-medium-layout:not(.is-compact-flow) .cm-krebs-panel--overview {
	display: none;
}

.cm-krebs-sim.is-medium-layout:not(.is-compact-flow) .cm-krebs-toolbar-main {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"nav actions"
		"meta meta";
}

.cm-krebs-sim.is-medium-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--core {
	grid-area: nav;
}

.cm-krebs-sim.is-medium-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--meta {
	grid-area: meta;
	justify-content: flex-start;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-top: 2px;
	scrollbar-width: none;
}

.cm-krebs-sim.is-medium-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--meta::-webkit-scrollbar {
	display: none;
}

.cm-krebs-sim.is-medium-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--actions {
	grid-area: actions;
	justify-content: flex-end;
}

.cm-krebs-sim.is-medium-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--actions .cm-krebs-control-btn {
	white-space: nowrap;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-layout {
	grid-template-columns: 1fr;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-panel--overview {
	display: none;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-stage-panel {
	order: 1;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-panel--detail {
	order: 2;
	position: static;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-panel--stage,
.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-stage,
.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-viewport {
	min-height: 0;
	height: auto;
	max-height: none;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-toolbar {
	position: sticky;
	top: 12px;
	z-index: 12;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-toolbar-main {
	grid-template-columns: 1fr;
	grid-template-areas:
		"nav"
		"meta"
		"actions";
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--core,
.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--meta,
.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--actions {
	width: 100%;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-toolbar-group--actions {
	justify-content: flex-start;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-orbit-window {
	grid-template-columns: 1fr;
	padding-top: 74px;
}

.cm-krebs-sim.is-slim-layout:not(.is-compact-flow) .cm-krebs-reaction-zoom {
	width: 100%;
	max-width: none;
	margin-top: 0;
	min-height: 0;
	justify-self: stretch;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-viewport,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-viewport {
	overflow: hidden;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-orbit-window,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-orbit-window {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stage";
	align-items: center;
	justify-items: center;
	width: 100%;
	min-height: clamp(500px, calc(100dvh - 260px), 700px);
	gap: 0;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-orbit-window {
	padding-top: 78px;
}

.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-orbit-window {
	padding-top: 0;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-orbit-scene,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-orbit-scene,
.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-reaction-zoom,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-reaction-zoom {
	grid-area: stage;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-orbit-scene,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-orbit-scene {
	width: min(100%, clamp(480px, 66dvh, 660px));
	max-width: 100%;
	aspect-ratio: 1;
	align-self: center;
	justify-self: center;
	transition:
		transform 0.42s ease,
		opacity 0.42s ease,
		visibility 0s linear 0.42s,
		border-color 0.24s ease,
		box-shadow 0.24s ease,
		background 0.24s ease;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-orbit-scene {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition-delay: 0s;
}

.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-orbit-scene {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.18);
	pointer-events: none;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-reaction-zoom,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-reaction-zoom {
	width: min(100%, 900px);
	max-width: 100%;
	align-self: center;
	justify-self: center;
	transition:
		transform 0.34s ease,
		opacity 0.34s ease,
		visibility 0s linear 0.34s,
		border-color 0.24s ease,
		box-shadow 0.24s ease;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-reaction-zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%) scale(0.94);
	pointer-events: none;
}

.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-reaction-zoom {
	position: relative;
	z-index: 3;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition-delay: 0.08s, 0.08s, 0s, 0s, 0s;
}

.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-orbit-topline {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-orbit-topline {
	opacity: 1;
	transform: translateY(0);
}

.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-reaction-zoom-stage {
	flex: 0 1 auto;
	min-height: clamp(250px, 38dvh, 420px);
	aspect-ratio: 760 / 420;
}

.cm-krebs-sim.is-panels-collapsed .cm-krebs-layout {
	grid-template-columns: 1fr;
}

.cm-krebs-sim.is-panels-collapsed .cm-krebs-panel--overview,
.cm-krebs-sim.is-panels-collapsed .cm-krebs-panel--detail {
	display: none;
}

.cm-krebs-sim.is-loop-mode .cm-krebs-layout {
	grid-template-columns: 1fr;
}

.cm-krebs-sim.is-loop-mode .cm-krebs-panel--stage,
.cm-krebs-sim.is-loop-mode .cm-krebs-stage {
	min-height: 0;
}

.cm-krebs-sim.is-loop-mode .cm-krebs-viewport {
	min-height: 0;
	height: var(--cm-krebs-loop-viewport-height);
	max-height: var(--cm-krebs-loop-viewport-height);
}

.cm-krebs-sim.is-loop-mode .cm-krebs-orbit-window {
	grid-template-columns: minmax(0, 1.24fr) minmax(286px, 338px);
	height: 100%;
	max-height: none;
	min-height: 0;
	gap: 14px;
	align-items: stretch;
}

.cm-krebs-sim.is-loop-mode .cm-krebs-orbit-scene {
	aspect-ratio: auto;
	min-width: 0;
}

.cm-krebs-sim.is-loop-mode .cm-krebs-loop-yield {
	display: none;
}

.cm-krebs-sim.is-loop-mode .cm-krebs-loop-summary {
	display: flex;
	align-self: stretch;
	justify-self: end;
}

.cm-krebs-sim.is-loop-mode .cm-krebs-panel--overview,
.cm-krebs-sim.is-loop-mode .cm-krebs-panel--detail,
.cm-krebs-sim.is-loop-mode .cm-krebs-reaction-zoom,
.cm-krebs-sim.is-loop-mode .cm-krebs-statusbar,
.cm-krebs-sim.is-loop-mode .cm-krebs-stage-route {
	display: none;
}

.cm-krebs-page-main:fullscreen .cm-krebs-layout {
	flex: 1 1 auto;
	min-height: 0;
	grid-template-columns: 286px minmax(0, 1fr) 342px;
}

.cm-krebs-page-main:fullscreen .cm-krebs-panel--stage {
	min-height: 0;
	height: 100%;
}

.cm-krebs-page-main:fullscreen .cm-krebs-stage,
.cm-krebs-page-main:fullscreen .cm-krebs-viewport {
	flex: 1 1 auto;
	min-height: 0;
}

.cm-krebs-page-main:fullscreen .cm-krebs-viewport {
	min-height: calc(100dvh - 220px);
}

.cm-krebs-viewport:fullscreen {
	width: 100vw;
	height: 100dvh;
	min-height: 100dvh;
	padding: 16px;
	border-radius: 0;
}

.cm-krebs-viewport:fullscreen::before {
	inset: 16px;
	border-radius: 28px;
}

.cm-krebs-viewport:fullscreen::backdrop {
	background: radial-gradient(circle at center, rgba(12, 26, 40, 0.88), rgba(2, 6, 12, 0.98));
}

.cm-krebs-viewport:fullscreen .cm-krebs-orbit-window {
	width: 100%;
	flex: 1 1 auto;
	height: auto;
	max-height: none;
	min-height: 0;
	grid-template-columns: minmax(360px, 0.86fr) minmax(560px, 1.14fr);
	gap: 24px;
}

.cm-krebs-viewport:fullscreen .cm-krebs-orbit-scene,
.cm-krebs-viewport:fullscreen .cm-krebs-reaction-zoom {
	height: 100%;
}

.cm-krebs-viewport:fullscreen .cm-krebs-orbit-scene {
	aspect-ratio: auto;
}

.cm-krebs-viewport:fullscreen .cm-krebs-reaction-zoom {
	padding: 18px;
}

.cm-krebs-viewport:fullscreen .cm-krebs-reaction-zoom-copy strong {
	font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.cm-krebs-viewport:fullscreen .cm-krebs-orbit-brandmark {
	width: 64px;
	height: 64px;
}

.cm-krebs-viewport:fullscreen .cm-krebs-reaction-zoom-block--fullscreen {
	display: block;
	max-height: 180px;
	overflow: auto;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-orbit-window,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-orbit-window {
	display: grid;
	grid-template-columns: minmax(360px, 0.86fr) minmax(560px, 1.14fr);
	grid-template-areas: "orbit molecular";
	align-items: stretch;
	justify-items: stretch;
	min-height: 0;
	padding-top: 78px;
	gap: 24px;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-orbit-scene,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-orbit-scene {
	grid-area: orbit;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	align-self: stretch;
	justify-self: stretch;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
	pointer-events: auto;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-reaction-zoom,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-reaction-zoom {
	grid-area: molecular;
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: 100%;
	max-width: none;
	align-self: stretch;
	justify-self: stretch;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
	pointer-events: auto;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-reaction-zoom-stage,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-reaction-zoom-stage {
	flex: 1 1 auto;
	min-height: 0;
	aspect-ratio: auto;
}

.cm-krebs-sim.is-desktop-orbit-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-orbit-topline,
.cm-krebs-sim.is-desktop-molecular-focus:not(.is-loop-mode) .cm-krebs-viewport:fullscreen .cm-krebs-orbit-topline {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.cm-krebs-sim.is-loop-mode .cm-krebs-viewport:fullscreen .cm-krebs-orbit-window {
	grid-template-columns: minmax(0, 1.28fr) minmax(300px, 360px);
	height: auto;
	max-height: none;
}

.cm-krebs-page-menu:focus-visible,
.cm-krebs-control-btn:focus-visible,
.cm-krebs-viewport-fullscreen:focus-visible,
.cm-krebs-reaction-btn:focus-visible {
	outline: 2px solid rgba(94, 184, 255, 0.75);
	outline-offset: 2px;
}

.cm-krebs-orbit-backdrop {
	fill: rgba(8, 14, 22, 0.42);
}

.cm-krebs-orbit-grid {
	fill: none;
	stroke: rgba(255, 255, 255, 0.04);
	stroke-width: 1;
}

.cm-krebs-orbit-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 42;
	stroke-linecap: round;
}

.cm-krebs-orbit-track-inner {
	fill: none;
	stroke: rgba(255, 255, 255, 0.04);
	stroke-width: 18;
	stroke-linecap: round;
}

.cm-krebs-orbit-segment {
	fill: none;
	stroke: var(--segment-accent, rgba(94, 184, 255, 0.34));
	stroke-width: 24;
	stroke-linecap: round;
	opacity: 0.38;
	transition: opacity 0.25s ease, stroke-width 0.25s ease;
}

.cm-krebs-orbit-segment.is-active {
	opacity: 1;
	stroke-width: 30;
}

.cm-krebs-step-chip rect {
	fill: rgba(5, 10, 16, 0.92);
	stroke: rgba(255, 255, 255, 0.1);
	stroke-width: 1.4;
}

.cm-krebs-step-chip text {
	fill: #eaf4ff;
	font-size: 18px;
	font-weight: 800;
}

.cm-krebs-step-chip .cm-krebs-step-chip__small {
	fill: #a8bfd7;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-krebs-step-chip.is-active rect {
	stroke: var(--segment-accent, rgba(94, 184, 255, 0.44));
	fill: rgba(7, 18, 28, 0.96);
}

.cm-krebs-node-core {
	fill: rgba(4, 12, 18, 0.96);
	stroke: var(--node-accent, #5eb8ff);
	stroke-width: 3;
}

.cm-krebs-node-inner {
	fill: rgba(255, 255, 255, 0.04);
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 1.5;
}

.cm-krebs-node-group.is-current .cm-krebs-node-core,
.cm-krebs-node-group.is-next .cm-krebs-node-core {
	stroke-width: 4.2;
}

.cm-krebs-node-carbon {
	fill: #f7fbff;
	font-size: 18px;
	font-weight: 800;
}

.cm-krebs-node-label-bg {
	fill: rgba(5, 10, 16, 0.88);
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 1.4;
}

.cm-krebs-node-label {
	fill: #d9e9f9;
	font-size: 12px;
	font-weight: 700;
}

.cm-krebs-focus-halo {
	fill: none;
	stroke: rgba(94, 184, 255, 0.56);
	stroke-width: 6;
	stroke-dasharray: 12 14;
	opacity: 0.7;
}

.cm-krebs-token-glow {
	fill: rgba(255, 255, 255, 0.3);
}

.cm-krebs-token-dot {
	fill: #f8fbff;
	stroke: #5eb8ff;
	stroke-width: 5;
}

.cm-krebs-hub-ring {
	fill: none;
	stroke: rgba(255, 255, 255, 0.06);
	stroke-width: 2;
}

.cm-krebs-acetyl-line {
	fill: none;
	stroke: rgba(251, 191, 36, 0.75);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 8 12;
}

.cm-krebs-acetyl-dot {
	fill: #fbbf24;
}

.cm-krebs-acetyl-card rect {
	fill: rgba(16, 24, 39, 0.94);
	stroke: rgba(251, 191, 36, 0.32);
	stroke-width: 1.4;
}

.cm-krebs-acetyl-card text {
	fill: #fce7b2;
	font-size: 13px;
	font-weight: 800;
}

@media (max-width: 1420px) {
	.cm-krebs-layout {
		grid-template-columns: 292px minmax(0, 1fr) 332px;
	}
}

@media (max-width: 1180px), (pointer: coarse) and (max-width: 1366px) {
	.cm-krebs-sim.is-compact-flow {
		padding-bottom: var(--cm-krebs-compact-dock-reserve);
		scroll-padding-bottom: calc(var(--cm-krebs-compact-dock-reserve) + 24px);
	}

	.cm-krebs-layout {
		grid-template-columns: 1fr;
	}

	.cm-krebs-panel--overview {
		display: none;
	}

	.cm-krebs-panel--detail {
		order: 2;
		position: static;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-panel--detail {
		display: flex;
		order: 2;
		position: static;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.cm-krebs-stage-panel {
		order: 1;
	}

	.cm-krebs-panel--stage {
		min-height: 0;
		padding: 16px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-stage,
	.cm-krebs-sim.is-compact-flow .cm-krebs-viewport,
	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-window {
		flex: 0 0 auto;
		height: auto;
		max-height: none;
	}

	.cm-krebs-toolbar {
		position: sticky;
		top: 12px;
		z-index: 12;
	}

	.cm-krebs-toolbar-main {
		grid-template-columns: 1fr;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar {
		position: fixed;
		top: auto;
		left: 16px;
		right: 16px;
		bottom: max(8px, env(safe-area-inset-bottom));
		z-index: 1500;
		width: min(calc(100% - 32px), 920px);
		margin: 0 auto;
		padding: 10px;
		border-radius: 20px;
		border-color: rgba(94, 184, 255, 0.2);
		background:
			radial-gradient(circle at 100% 0%, rgba(94, 184, 255, 0.16), transparent 38%),
			linear-gradient(180deg, rgba(7, 14, 23, 0.96), rgba(4, 9, 16, 0.98));
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
		backdrop-filter: blur(14px);
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "nav actions";
		gap: 12px;
		align-items: center;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--core {
		grid-area: nav;
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		width: 100%;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--core .cm-krebs-toolbar-pill--hint {
		display: none;
	}

	.cm-krebs-toolbar-group--meta {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.cm-krebs-toolbar-group--meta::-webkit-scrollbar {
		display: none;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--meta {
		display: none;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--actions {
		grid-area: actions;
		display: flex;
		flex-wrap: nowrap;
		width: auto;
		justify-content: flex-end;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--actions .cm-krebs-control-btn {
		width: auto;
		justify-content: center;
		white-space: nowrap;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-control-btn {
		min-height: 44px;
		padding: 0.66rem 0.92rem;
		border-radius: 16px;
		font-size: 0.88rem;
		line-height: 1.1;
		white-space: nowrap;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--actions [data-reset] {
		min-width: 104px;
		padding-inline: 0.95rem;
	}

	.cm-krebs-compact-story {
		display: grid;
		padding: 12px 14px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-compact-story {
		align-items: start;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-compact-story-step {
		min-width: auto;
		min-height: 30px;
		padding: 0.3rem 0.72rem;
		font-size: 0.72rem;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-compact-story-copy strong {
		font-size: 0.94rem;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-compact-story-copy p {
		font-size: 0.84rem;
		line-height: 1.45;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-window {
		grid-template-columns: 1fr;
		padding-top: 0;
		gap: 16px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-topline {
		display: none;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-scene,
	.cm-krebs-sim.is-compact-flow .cm-krebs-reaction-zoom {
		scroll-margin-top: 92px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-products-ribbon {
		display: none;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-scene {
		width: min(100%, 620px);
		max-width: 100%;
		margin: 0 auto;
		padding: 14px;
		border-radius: 28px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		background:
			radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08), transparent 45%),
			linear-gradient(180deg, rgba(5, 10, 16, 0.9), rgba(7, 14, 22, 0.94));
		box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-svg {
		max-width: 100%;
		margin: 0 auto;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-reaction-zoom {
		width: 100%;
		max-width: none;
		margin-top: 0;
		min-height: 0;
		height: auto;
		justify-self: stretch;
	}

	.cm-krebs-sim.is-compact-orbit-focus .cm-krebs-reaction-zoom,
	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-reaction-zoom {
		display: none;
	}

	.cm-krebs-sim.is-compact-molecular-focus .cm-krebs-orbit-topline,
	.cm-krebs-sim.is-compact-molecular-focus .cm-krebs-orbit-scene {
		display: none;
	}

	.cm-krebs-sim.is-compact-orbit-focus .cm-krebs-orbit-topline,
	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-orbit-topline {
		display: none;
	}

	.cm-krebs-sim.is-compact-orbit-focus .cm-krebs-orbit-scene,
	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-orbit-scene {
		display: block;
	}

	.cm-krebs-sim.is-compact-molecular-focus .cm-krebs-reaction-zoom {
		display: flex;
	}

	.cm-krebs-sim.is-compact-molecular-focus .cm-krebs-orbit-window {
		gap: 0;
	}

	.cm-krebs-sim.is-compact-orbit-focus .cm-krebs-orbit-scene {
		border-color: rgba(94, 184, 255, 0.34);
		box-shadow:
			0 20px 46px rgba(0, 0, 0, 0.28),
			0 0 0 1px rgba(94, 184, 255, 0.12) inset;
	}

	.cm-krebs-sim.is-compact-orbit-focus .cm-krebs-reaction-zoom {
		opacity: 0.78;
		transform: translateY(4px);
	}

	.cm-krebs-sim.is-compact-molecular-focus .cm-krebs-orbit-scene {
		opacity: 0.74;
		transform: translateY(-4px);
	}

	.cm-krebs-sim.is-compact-molecular-focus .cm-krebs-reaction-zoom {
		border-color: rgba(94, 184, 255, 0.34);
		box-shadow:
			0 24px 52px rgba(0, 0, 0, 0.34),
			0 0 0 1px rgba(94, 184, 255, 0.12) inset;
	}

	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-orbit-scene,
	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-loop-summary {
		border-color: rgba(94, 184, 255, 0.3);
	}

	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-center-hub,
	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-products-ribbon {
		display: none;
	}

	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-orbit-window {
		gap: 14px;
	}

	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-orbit-scene {
		order: 1;
	}

	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-loop-summary {
		order: 2;
		width: 100%;
		max-width: none;
		overflow: visible;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--actions [data-action="toggle-panels"] {
		display: none;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-statusbar {
		display: none;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-panel--detail .cm-krebs-panel-head {
		display: none;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-panel--detail .cm-krebs-detail-scroll {
		padding: 0;
		gap: 14px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-panel--detail .cm-krebs-detail-section:nth-child(1),
	.cm-krebs-sim.is-compact-flow .cm-krebs-panel--detail .cm-krebs-detail-section:nth-child(2),
	.cm-krebs-sim.is-compact-flow .cm-krebs-panel--detail .cm-krebs-detail-section:nth-child(5),
	.cm-krebs-sim.is-compact-flow .cm-krebs-panel--detail .cm-krebs-detail-section:nth-child(6) {
		display: none;
	}

	.cm-krebs-stage-route-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.cm-krebs-page-main:fullscreen .cm-krebs-layout {
		grid-template-columns: 1fr;
	}

	.cm-krebs-orbit-window {
		grid-template-columns: 1fr;
		padding-top: 74px;
	}

	.cm-krebs-reaction-zoom {
		width: 100%;
		max-width: none;
		margin-top: 0;
		min-height: 0;
		justify-self: stretch;
	}
}

@media (max-width: 960px) {
	.cm-krebs-sim {
		--cm-krebs-viewport-height: 620px;
	}

	.cm-krebs-statusbar,
	.cm-krebs-detail-meta,
	.cm-krebs-delta-grid,
	.cm-krebs-reaction-nav {
		grid-template-columns: 1fr;
	}

	.cm-krebs-equation-box {
		grid-template-columns: 1fr;
	}

	.cm-krebs-equation-side--reactants,
	.cm-krebs-equation-side--products {
		justify-content: flex-start;
	}

	.cm-krebs-reaction-zoom {
		width: 100%;
		padding: 12px;
	}

	.cm-krebs-reaction-stepper-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-krebs-reaction-nav--horizontal .cm-krebs-reaction-btn {
		flex-basis: 204px;
	}

	.cm-krebs-viewport:fullscreen {
		padding: 16px;
	}

	.cm-krebs-viewport:fullscreen .cm-krebs-orbit-window {
		height: auto;
		max-height: none;
		grid-template-columns: 1fr;
	}

	.cm-krebs-reaction-equation {
		grid-template-columns: 1fr;
	}

	.cm-krebs-equation-side--reactants,
	.cm-krebs-equation-side--products {
		justify-content: flex-start;
	}
}

@media (max-width: 820px) {
	.cm-krebs-sim {
		--cm-krebs-viewport-height: auto;
		--cm-krebs-compact-dock-reserve: 158px;
		width: 100%;
		max-width: 100%;
		min-height: 0;
		padding-bottom: var(--cm-krebs-compact-dock-reserve);
		overflow-x: hidden;
	}

	.cm-krebs-layout {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.cm-krebs-panel--overview {
		display: none;
	}

	.cm-krebs-panel--stage {
		display: flex;
		flex-direction: column;
		padding: 0;
		min-height: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.cm-krebs-toolbar {
		position: fixed;
		top: auto;
		left: 12px;
		right: 12px;
		bottom: max(6px, env(safe-area-inset-bottom));
		z-index: 1500;
		margin-bottom: 0;
		padding: 9px;
		border-radius: 18px;
		border-color: rgba(94, 184, 255, 0.2);
		background:
			radial-gradient(circle at 100% 0%, rgba(94, 184, 255, 0.16), transparent 38%),
			linear-gradient(180deg, rgba(7, 14, 23, 0.96), rgba(4, 9, 16, 0.98));
		box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
		backdrop-filter: blur(14px);
	}

	.cm-krebs-toolbar-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "nav actions";
		gap: 10px;
		align-items: center;
	}

	.cm-krebs-toolbar-group {
		gap: 8px;
	}

	.cm-krebs-toolbar-group--meta {
		display: none;
	}

	.cm-krebs-toolbar-group--meta::-webkit-scrollbar {
		display: none;
	}

	.cm-krebs-toolbar-group--core {
		grid-area: nav;
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		width: 100%;
	}

	.cm-krebs-toolbar-group--core .cm-krebs-toolbar-pill--hint {
		display: none;
	}

	.cm-krebs-toolbar-group--actions {
		grid-area: actions;
		display: flex;
		flex-wrap: nowrap;
		width: auto;
		justify-content: flex-end;
	}

	.cm-krebs-toolbar-group--actions .cm-krebs-control-btn {
		width: auto;
		justify-content: center;
		white-space: nowrap;
	}

	.cm-krebs-toolbar-group--actions [data-action="toggle-panels"] {
		display: none;
	}

	.cm-krebs-toolbar-pill,
	.cm-krebs-control-btn {
		min-width: 0;
		max-width: 100%;
		min-height: 42px;
		font-size: 0.86rem;
	}

	.cm-krebs-toolbar-pill {
		flex: 0 0 auto;
		width: auto;
		justify-content: center;
		white-space: normal;
		text-align: center;
		scroll-snap-align: start;
	}

	.cm-krebs-toolbar-pill strong {
		font-size: 0.8rem;
	}

	.cm-krebs-stage {
		gap: 12px;
		flex: 0 0 auto;
	}

	.cm-krebs-statusbar {
		display: none;
	}

	.cm-krebs-viewport {
		flex: 0 0 auto;
		height: auto;
		max-height: none;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}

	.cm-krebs-viewport::before {
		display: none;
	}

	.cm-krebs-orbit-topline {
		display: none;
	}

	.cm-krebs-orbit-brandmark {
		width: 52px;
		height: 52px;
	}

	.cm-krebs-orbit-topline strong {
		font-size: 1.16rem;
	}

	.cm-krebs-orbit-subtitle {
		font-size: 0.84rem;
	}

	.cm-krebs-orbit-window {
		display: flex;
		flex-direction: column;
		padding-top: 0;
		gap: 12px;
	}

	.cm-krebs-sim:not(.is-loop-mode) .cm-krebs-viewport {
		height: auto;
		max-height: none;
	}

	.cm-krebs-sim:not(.is-loop-mode) .cm-krebs-orbit-scene {
		order: 1;
		display: block;
		width: min(100%, 360px);
		max-width: 100%;
		margin: 0 auto;
		aspect-ratio: 1;
	}

	.cm-krebs-products-ribbon {
		display: none;
	}

	.cm-krebs-sim:not(.is-loop-mode) .cm-krebs-reaction-zoom {
		order: 2;
		padding: 0;
		gap: 12px;
		height: auto;
		min-height: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.cm-krebs-sim.is-compact-orbit-focus:not(.is-loop-mode) .cm-krebs-reaction-zoom,
	.cm-krebs-sim.is-compact-loop-focus .cm-krebs-reaction-zoom {
		display: none;
	}

	.cm-krebs-sim.is-compact-molecular-focus .cm-krebs-orbit-scene {
		display: none;
	}

	.cm-krebs-sim:not(.is-loop-mode) .cm-krebs-reaction-zoom-stage {
		flex: 0 0 auto;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		aspect-ratio: 1.68;
	}

	.cm-krebs-zoom-stage {
		fill: transparent;
		stroke: transparent;
	}

	.cm-krebs-reaction-zoom-copy strong {
		font-size: 1.18rem;
	}

	.cm-krebs-reaction-zoom-copy small {
		font-size: 0.9rem;
	}

	.cm-krebs-reaction-stepper {
		padding: 12px 13px;
	}

	.cm-krebs-reaction-stepper-nav {
		display: flex;
		grid-template-columns: none;
		gap: 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
	}

	.cm-krebs-reaction-stepper-btn {
		flex: 0 0 min(72vw, 190px);
		min-height: 56px;
		scroll-snap-align: center;
	}

	.cm-krebs-reaction-stepper-caption {
		font-size: 0.9rem;
	}

	.cm-krebs-statusbar {
		gap: 8px;
	}

	.cm-krebs-status-pill {
		padding: 0.85rem 0.9rem;
	}

	.cm-krebs-stage-route {
		padding: 12px;
		gap: 12px;
	}

	.cm-krebs-reaction-nav--horizontal .cm-krebs-reaction-btn {
		flex: 0 0 min(240px, 74vw);
		min-height: 84px;
	}

	.cm-krebs-chip,
	.cm-krebs-equation-chip,
	.cm-krebs-group-chip,
	.cm-krebs-status-pill strong,
	.cm-krebs-reaction-btn strong,
	.cm-krebs-reaction-btn small {
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.cm-krebs-panel-head {
		padding: 16px 16px 0;
	}

	.cm-krebs-panel-body,
	.cm-krebs-detail-scroll {
		padding: 12px 16px 16px;
		gap: 12px;
	}

	.cm-krebs-panel--detail {
		order: 2;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.cm-krebs-panel--detail .cm-krebs-panel-head {
		display: none;
	}

	.cm-krebs-panel--detail .cm-krebs-detail-scroll {
		padding: 0;
	}

	.cm-krebs-panel--detail .cm-krebs-detail-section:nth-child(1),
	.cm-krebs-panel--detail .cm-krebs-detail-section:nth-child(2),
	.cm-krebs-panel--detail .cm-krebs-detail-section:nth-child(5),
	.cm-krebs-panel--detail .cm-krebs-detail-section:nth-child(6) {
		display: none;
	}

	.cm-krebs-section,
	.cm-krebs-detail-section {
		padding: 13px 14px;
		border-radius: 18px;
	}

	.cm-krebs-detail-lead {
		font-size: 0.94rem;
		line-height: 1.65;
	}

	.cm-krebs-detail-scroll > .cm-krebs-detail-section:first-child::before {
		top: 14px;
		bottom: 14px;
	}

	.cm-krebs-sim.is-loop-mode .cm-krebs-viewport {
		height: auto;
		max-height: none;
	}

	.cm-krebs-sim.is-loop-mode .cm-krebs-orbit-topline {
		position: static;
		margin-bottom: 12px;
	}

	.cm-krebs-sim.is-loop-mode .cm-krebs-orbit-window {
		grid-template-columns: 1fr;
		padding-top: 0;
	}

	.cm-krebs-sim.is-loop-mode .cm-krebs-orbit-scene {
		order: 1;
		aspect-ratio: 1;
	}

	.cm-krebs-sim.is-loop-mode .cm-krebs-loop-summary {
		order: 2;
		padding: 12px;
		border-radius: 24px;
		width: 100%;
		height: auto;
		max-height: none;
		overflow: visible;
	}

	.cm-krebs-sim.is-loop-mode .cm-krebs-center-hub,
	.cm-krebs-sim.is-loop-mode .cm-krebs-products-ribbon {
		display: none;
	}

	.cm-krebs-sim.is-loop-mode .cm-krebs-products-ribbon,
	.cm-krebs-sim.is-loop-mode .cm-krebs-loop-yield {
		position: static;
		width: 100%;
		margin-top: 14px;
		transform: none;
	}

	body.cm-menu-open .cm-krebs-toolbar {
		display: none;
	}
}

@media (max-width: 720px) {
	.cm-krebs-sim {
		--cm-krebs-viewport-height: 540px;
	}

	.cm-krebs-panel-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.cm-krebs-yield-grid {
		grid-template-columns: 1fr 1fr;
	}

	.cm-krebs-viewport {
		padding: 0;
	}

	.cm-krebs-orbit-topline {
		right: 18px;
	}

	.cm-krebs-orbit-brandmark {
		width: 46px;
		height: 46px;
	}

	.cm-krebs-center-hub {
		position: static;
		transform: none;
		margin: 84px auto 0;
		width: min(100%, 240px);
	}

	.cm-krebs-products-ribbon {
		position: static;
		transform: none;
		width: 100%;
		margin-top: 14px;
	}

	.cm-krebs-loop-yield {
		position: static;
		width: 100%;
		margin-top: 14px;
		display: none;
	}

	.cm-krebs-reaction-zoom {
		width: 100%;
		margin-top: 0;
	}

	.cm-krebs-orbit-window {
		grid-template-columns: 1fr;
		gap: 14px;
		padding-top: 0;
	}

	.cm-krebs-viewport-fullscreen {
		top: 14px;
		right: 14px;
	}
}

@media (max-width: 560px) {
	.cm-krebs-yield-grid,
	.cm-krebs-reaction-nav {
		grid-template-columns: 1fr;
	}

	.cm-krebs-panel--stage {
		padding: 0;
		border-radius: 0;
	}

	.cm-krebs-toolbar {
		left: 10px;
		right: 10px;
		padding: 8px;
	}

	.cm-krebs-toolbar-main {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.cm-krebs-toolbar-group--core {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	}

	.cm-krebs-toolbar-group--core .cm-krebs-control-btn {
		width: 100%;
		justify-content: center;
		font-size: 0.8rem;
		padding-right: 0.82rem;
		padding-left: 0.82rem;
	}

	.cm-krebs-toolbar-group--actions .cm-krebs-control-btn {
		width: auto;
		min-width: 44px;
		font-size: 0.78rem;
		padding-right: 0.78rem;
		padding-left: 0.78rem;
	}

	.cm-krebs-toolbar-pill {
		width: auto;
	}

	.cm-krebs-toolbar-pill strong {
		margin-left: 0.28rem;
	}

	.cm-krebs-loop-toggle {
		grid-template-columns: 1fr;
	}

	.cm-krebs-loop-summary-stats {
		gap: 0.38rem;
	}

	.cm-krebs-loop-summary-stat {
		width: 100%;
		justify-content: space-between;
	}

	.cm-krebs-toolbar-group--core .cm-krebs-toolbar-pill--hint {
		display: none;
	}

	.cm-krebs-reaction-nav--horizontal .cm-krebs-reaction-btn {
		flex-basis: 86%;
	}

	.cm-krebs-reaction-stepper-nav {
		display: flex;
		grid-template-columns: none;
	}

	.cm-krebs-reaction-zoom-head {
		flex-direction: column;
	}

	.cm-krebs-reaction-zoom-step {
		align-self: flex-start;
	}

	.cm-krebs-sim:not(.is-loop-mode) .cm-krebs-reaction-zoom-stage {
		aspect-ratio: 1.5;
	}

	.cm-krebs-legend {
		gap: 6px;
	}
}

.cm-krebs-control-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

@media (max-width: 1180px), (pointer: coarse) and (max-width: 1366px) {
	.cm-krebs-sim.is-compact-flow {
		--cm-krebs-compact-dock-reserve: clamp(108px, 12dvh, 148px);
		--cm-krebs-compact-scene-size: clamp(300px, min(calc(100vw - 48px), calc(100dvh - var(--cm-krebs-compact-dock-reserve) - 132px)), 780px);
		padding-bottom: calc(var(--cm-krebs-compact-dock-reserve) + env(safe-area-inset-bottom));
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-panel--stage {
		padding: clamp(6px, 1vw, 14px);
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar {
		position: fixed !important;
		top: auto;
		left: max(12px, env(safe-area-inset-left));
		right: max(12px, env(safe-area-inset-right));
		bottom: max(12px, env(safe-area-inset-bottom));
		z-index: 5000;
		width: auto;
		max-width: 980px;
		margin-inline: auto;
		padding: 10px;
		border-radius: 18px;
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-main {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "nav actions";
		gap: 10px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--core {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--core .cm-krebs-control-btn {
		width: 100%;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-toolbar-group--actions {
		gap: 8px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-control-btn {
		min-height: 46px;
		padding: 0.68rem 0.95rem;
		border-radius: 15px;
		font-size: 0.88rem;
		line-height: 1.12;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-compact-story {
		padding: 10px 12px;
		border-radius: 18px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-stage {
		gap: 10px;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-viewport {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-window {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		width: 100%;
		min-height: 0;
		padding-top: 0;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-scene {
		width: var(--cm-krebs-compact-scene-size);
		height: var(--cm-krebs-compact-scene-size);
		aspect-ratio: auto;
		padding: clamp(6px, 1vw, 12px);
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-orbit-svg {
		width: 100%;
		height: 100%;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-reaction-zoom {
		max-height: calc(100dvh - var(--cm-krebs-compact-dock-reserve) - 78px);
		overflow: auto;
		overscroll-behavior: contain;
	}

	.cm-krebs-sim.is-compact-flow .cm-krebs-reaction-zoom-stage {
		flex: 0 0 auto;
		height: clamp(250px, 42dvh, 430px);
		min-height: 0;
	}
}

.cm-krebs-panel--stage:fullscreen,
.cm-krebs-panel--stage:-webkit-full-screen,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage {
	--cm-krebs-compact-dock-reserve: clamp(92px, 10dvh, 124px);
	--cm-krebs-compact-scene-size: min(calc(100vw - 32px), calc(100dvh - var(--cm-krebs-compact-dock-reserve) - 32px), 980px);
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100dvh;
	min-height: 100dvh;
	padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(var(--cm-krebs-compact-dock-reserve) + max(10px, env(safe-area-inset-bottom))) max(10px, env(safe-area-inset-left));
	border: 0;
	border-radius: 0;
	background:
		radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.1), transparent 44%),
		linear-gradient(180deg, #03080e, #040a12);
	box-shadow: none;
	overflow: hidden;
}

.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage {
	position: fixed;
	inset: 0;
	z-index: 6000;
}

.cm-krebs-panel--stage:fullscreen::backdrop,
.cm-krebs-panel--stage:-webkit-full-screen::backdrop {
	background: #02060c;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-toolbar,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-toolbar,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-toolbar {
	position: fixed !important;
	top: auto;
	left: max(12px, env(safe-area-inset-left));
	right: max(12px, env(safe-area-inset-right));
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: 5000;
	width: auto;
	max-width: 980px;
	margin-inline: auto;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-compact-story,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-compact-story,
.cm-krebs-panel--stage:fullscreen .cm-krebs-statusbar,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-statusbar,
.cm-krebs-panel--stage:fullscreen .cm-krebs-stage-route,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-stage-route,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-compact-story,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-statusbar,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-stage-route {
	display: none;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-stage,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-stage,
.cm-krebs-panel--stage:fullscreen .cm-krebs-viewport,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-viewport,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-stage,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-viewport {
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
	max-height: none;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-viewport,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-viewport,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-viewport {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: hidden;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-viewport-fullscreen,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-viewport-fullscreen,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-viewport-fullscreen {
	position: fixed;
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
	z-index: 5001;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-orbit-window,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-orbit-window,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-orbit-window {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	gap: 0;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-orbit-scene,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-orbit-scene,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-orbit-scene {
	width: var(--cm-krebs-compact-scene-size);
	height: var(--cm-krebs-compact-scene-size);
	aspect-ratio: auto;
	padding: clamp(18px, 3dvh, 28px);
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-reaction-zoom,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-reaction-zoom,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-reaction-zoom {
	width: min(100%, 980px);
	height: min(calc(100dvh - var(--cm-krebs-compact-dock-reserve) - 24px), 740px);
	max-height: calc(100dvh - var(--cm-krebs-compact-dock-reserve) - 24px);
	overflow: hidden;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-reaction-stepper,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-reaction-stepper,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-reaction-stepper {
	flex: 0 0 auto;
	max-height: 168px;
	overflow: auto;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-loop-summary,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-loop-summary,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-loop-summary {
	max-height: calc(100dvh - var(--cm-krebs-compact-dock-reserve) - 32px);
}

.cm-krebs-fullscreen-context {
	display: none;
	min-width: 0;
}

body.cm-krebs-pseudo-fullscreen {
	overflow: hidden !important;
}

.cm-krebs-fullscreen-context-head {
	display: flex;
	flex-direction: column;
	gap: 0.34rem;
	min-width: 0;
}

.cm-krebs-fullscreen-context-head span {
	align-self: flex-start;
	padding: 0.3rem 0.68rem;
	border-radius: 999px;
	border: 1px solid rgba(94, 184, 255, 0.22);
	background: rgba(94, 184, 255, 0.12);
	color: #dff2ff;
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

.cm-krebs-fullscreen-context-head strong {
	color: #f7fbff;
	font-size: 1.28rem;
	line-height: 1.22;
}

.cm-krebs-fullscreen-context p {
	margin: 0;
	color: #e0edf9;
	font-size: 0.96rem;
	line-height: 1.55;
}

.cm-krebs-fullscreen-context-meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
	margin-top: auto;
}

.cm-krebs-fullscreen-context-meta span {
	display: flex;
	flex-direction: column;
	gap: 0.24rem;
	padding: 0.72rem 0.78rem;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.045);
	color: #9fb7d1;
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

.cm-krebs-fullscreen-context-meta strong {
	color: #f2f8ff;
	font-size: 0.9rem;
	line-height: 1.28;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
}

.cm-krebs-panel--stage:fullscreen,
.cm-krebs-panel--stage:-webkit-full-screen,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage {
	--cm-krebs-fullscreen-context-width: clamp(286px, 30vw, 392px);
	--cm-krebs-compact-scene-size: min(calc(100vw - var(--cm-krebs-fullscreen-context-width) - 72px), calc(100dvh - var(--cm-krebs-compact-dock-reserve) - 36px), 940px);
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-stage,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-stage,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--cm-krebs-fullscreen-context-width);
	gap: 14px;
	align-items: stretch;
	width: 100%;
	min-height: 0;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-fullscreen-context,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-fullscreen-context,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-fullscreen-context {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	height: 100%;
	min-height: 0;
	padding: 14px;
	border-radius: 22px;
	border: 1px solid rgba(94, 184, 255, 0.18);
	background:
		radial-gradient(circle at 100% 0%, rgba(94, 184, 255, 0.13), transparent 34%),
		linear-gradient(180deg, rgba(7, 14, 24, 0.9), rgba(4, 9, 16, 0.96));
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
	overflow: auto;
	overscroll-behavior: contain;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-viewport,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-viewport,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-viewport {
	align-self: stretch;
	justify-self: stretch;
}

.cm-krebs-panel--stage:fullscreen .cm-krebs-reaction-zoom-block--fullscreen,
.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-reaction-zoom-block--fullscreen,
.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-reaction-zoom-block--fullscreen {
	display: block;
	max-height: 150px;
	overflow: auto;
}

@media (max-width: 900px) {
	.cm-krebs-panel--stage:fullscreen,
	.cm-krebs-panel--stage:-webkit-full-screen,
	.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage {
		--cm-krebs-fullscreen-context-width: 100%;
		--cm-krebs-compact-scene-size: min(calc(100vw - 32px), calc(100dvh - var(--cm-krebs-compact-dock-reserve) - 206px), 780px);
	}

	.cm-krebs-panel--stage:fullscreen .cm-krebs-stage,
	.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-stage,
	.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-stage {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
	}

	.cm-krebs-panel--stage:fullscreen .cm-krebs-fullscreen-context,
	.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-fullscreen-context,
	.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-fullscreen-context {
		order: 1;
		max-height: 178px;
		padding: 12px;
	}

	.cm-krebs-panel--stage:fullscreen .cm-krebs-viewport,
	.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-viewport,
	.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-viewport {
		order: 2;
	}

	.cm-krebs-panel--stage:fullscreen .cm-krebs-fullscreen-context-meta,
	.cm-krebs-panel--stage:-webkit-full-screen .cm-krebs-fullscreen-context-meta,
	.cm-krebs-sim.is-stage-fullscreen .cm-krebs-panel--stage .cm-krebs-fullscreen-context-meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 0;
	}
}

.cm-krebs-sim.is-compact-flow:not(.is-molecular-focus) .cm-krebs-orbit-topline {
	display: flex;
	top: 12px;
	left: max(12px, calc((100% - var(--cm-krebs-compact-scene-size)) / 2 + 12px));
	right: auto;
	z-index: 8;
}

.cm-krebs-sim.is-compact-flow:not(.is-molecular-focus) .cm-krebs-orbit-topline-copy {
	display: none;
}

.cm-krebs-sim.is-compact-flow:not(.is-molecular-focus) .cm-krebs-orbit-brandmark {
	width: 52px;
	height: 52px;
}

.cm-krebs-sim.is-stage-fullscreen:not(.is-molecular-focus) .cm-krebs-panel--stage .cm-krebs-orbit-topline {
	top: 14px;
	left: max(14px, calc((100% - var(--cm-krebs-compact-scene-size)) / 2 + 14px));
}

.cm-krebs-sim.is-stage-fullscreen:not(.is-molecular-focus) .cm-krebs-panel--stage .cm-krebs-orbit-brandmark {
	width: 54px;
	height: 54px;
}

@media (max-width: 560px) {
	.cm-krebs-sim.is-compact-flow:not(.is-molecular-focus) .cm-krebs-orbit-brandmark {
		width: 44px;
		height: 44px;
	}
}