/* /krebs-cycle/ interactive model (markup tools/build_krebs.py, script assets/krebs.js). Scoped to .kc. */
.kc-title { font-family: Anton, Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 1px;
  font-size: clamp(40px, 8vw, 72px); line-height: 1; margin: 22px 0 18px; }
.kc { --nadh:#8FD3F0; --fadh:#F0B46A; --atp:#7CE38B; --co2:#C9C3CC; --acetyl:#FF9F43; --mut:#9C93A0; --line:#26222b; --ink:#ECE7EE;
  position: relative; width: min(1100px, calc(100vw - 32px)); left: 50%; transform: translateX(-50%);
  margin: 0 0 34px; color: var(--ink); font-family: Geist, system-ui, sans-serif; }
.kc * { box-sizing: border-box; }
/* counters across the top; stay under the site header while the model scrolls (like /thiamine/) */
.kc-top { position: sticky; top: 58px; z-index: 4; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin-bottom: 10px; padding: 6px; background: #000; border-radius: 16px; }
.kc-c { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; min-width: 0;
  background: #0b0a0d; border: 1px solid var(--line); border-radius: 14px; transition: border-color .3s, background-color .3s; }
.kc-c span { font: 12px "Geist Mono", ui-monospace, monospace; letter-spacing: 1px; color: var(--mut); white-space: nowrap; }
.kc-c b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.05; color: #fff;
  font-variant-numeric: tabular-nums; }
.kc-c--atp b { color: var(--atp); } .kc-c--co2 b { color: var(--co2); }
.kc-c--nadh b, .kc-c--nad b { color: var(--nadh); } .kc-c--fadh b, .kc-c--fad b { color: var(--fadh); }
.kc-c--nad b, .kc-c--fad b { opacity: .75; }
.kc-c.is-bump { border-color: #fff; background: #17151b; }
.kc-c.is-bump b { animation: kc-bump .5s ease-out; }
@keyframes kc-bump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* stage: Krebs ring canvas on top, the flipped home ETC under it, messengers fly on .kc-fly over both */
.kc-stage { position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #000; }
.kc-canvas { display: block; width: 100%; aspect-ratio: 900 / 680; touch-action: pan-y; }
.kc-etc { width: 100%; aspect-ratio: 1200 / 560; overflow: hidden; position: relative; }
.kc-etc svg { display: block; width: 100%; height: 100%; }
.kc-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mut); font: 13px "Geist Mono", monospace; }
.kc-fly { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.kc-go { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
  font: 700 15px Geist, system-ui, sans-serif; letter-spacing: .3px; color: #000; background: var(--acetyl);
  border: 0; border-radius: 999px; padding: 10px 22px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,159,67,.4), 0 6px 24px rgba(255,159,67,.35); transition: opacity .2s, transform .15s; }
.kc-go:hover { transform: translateX(-50%) scale(1.04); }
.kc-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.kc-go[aria-disabled="true"] { opacity: .45; cursor: default; transform: translateX(-50%); }
/* speed + reset */
.kc-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.kc-speed { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.kc-speed button, .kc-reset { font: 13px "Geist Mono", ui-monospace, monospace; color: var(--mut); background: #0b0a0d;
  border: 0; padding: 8px 14px; cursor: pointer; }
.kc-speed button[aria-pressed="true"] { color: #000; background: #fff; }
.kc-reset { border: 1px solid var(--line); border-radius: 999px; }
.kc-reset:hover, .kc-speed button:hover { color: #fff; }
.kc-speed button[aria-pressed="true"]:hover { color: #000; }
.kc-now { margin: 6px 0 12px; min-height: 1.5em; font-size: 16px; line-height: 1.5; color: #fff; }
/* the 8 steps under the model */
.kc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kc-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 14px; background: #0b0a0d; transition: border-color .3s, background-color .3s, opacity .3s; }
.kc-steps li b { display: block; font-size: 14px; line-height: 1.3; color: #fff; }
.kc-steps li p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #bdb6c0; }
.kc-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 12px "Geist Mono", monospace; color: #fff; border: 1px solid #4a4450; }
.kc-steps li.is-on { border-color: var(--acetyl); background: #1a120b; }
.kc-steps li.is-on .kc-n { background: var(--acetyl); border-color: var(--acetyl); color: #000; }
.kc-steps li.is-done .kc-n { background: #fff; border-color: #fff; color: #000; }
.kc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kc-chip { display: inline-block; font: 11px "Geist Mono", monospace; padding: 1px 7px; border-radius: 999px;
  border: 1px solid #3a3440; color: var(--mut); }
.kc-chip--nadh { color: var(--nadh); border-color: rgba(143,211,240,.45); }
.kc-chip--fadh { color: var(--fadh); border-color: rgba(240,180,106,.45); }
.kc-chip--atp { color: var(--atp); border-color: rgba(124,227,139,.45); }
.kc-chip--co2 { color: var(--co2); border-color: rgba(201,195,204,.45); }
.kc-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--mut); }
@media (max-width: 900px) { .kc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .kc { width: calc(100vw - 16px); }
  .kc-top { gap: 3px; padding: 4px; }
  .kc-c { padding: 5px 1px 4px; border-radius: 10px; }
  .kc-c span { font-size: 9.5px; letter-spacing: 0; }
  .kc-c b { font-size: 20px; }
  .kc-go { font-size: 14px; padding: 9px 18px; top: 10px; }
  .kc-steps li { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { .kc-c.is-bump b { animation: none; } }
/* from 1100px the 300px side nav takes part of the row: fit the column, no sideways scroll (same as /thiamine/) */
@media (min-width: 1100px) { .kc { width: min(1100px, calc(min(100vw, 1320px) - 348px)); } }