/* MarathonX chemistry lab (/tools/chemistry/). Scoped to .mxc; site tokens from mx.css. */
.mxc { --c-ink: var(--mx-ink, #10181F); --c-ink2: var(--mx-ink-2, #3D4955); --c-ink3: var(--mx-ink-3, #5F6B77); --c-line: var(--mx-line, #D5DCE3); --c-tone: var(--mx-tone, #ECEFF3);
	--c-blue: var(--mx-blue, #0D2742); --c-brand: var(--mx-brand, #F5A000); --c-teal: #0B7896; --c-teal-2: #5FB7CC; --c-ok: var(--mx-ok, #1E7A4C);
	font-family: var(--mx-font, Heebo, Arial, sans-serif); color: var(--c-ink); line-height: 1.6; container: mxc / inline-size; }
.mxc *, .mxc *::before, .mxc *::after { box-sizing: border-box; }
.mxc [hidden] { display: none !important; }
.mxc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mxc-filter { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--c-tone); }
.mxc-filter button { min-height: 38px; padding: 6px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--c-ink2); font: 700 .9375rem var(--mx-font, Heebo, Arial, sans-serif); cursor: pointer; transition: background var(--mx-t-ui, 220ms), color var(--mx-t-ui, 220ms); }
.mxc-filter button[aria-pressed="true"] { background: var(--c-blue); color: #fff; }
.mxc-tabs { display: flex; gap: 8px; margin: 0 0 16px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: thin; }
.mxc-tabs [role="tab"] { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 auto; min-width: 128px; min-height: 64px; padding: 8px 12px; border: 1.5px solid var(--c-line); border-radius: 8px; background: var(--mx-surface, #fff); color: var(--c-ink); font: 700 .9375rem var(--mx-font, Heebo, Arial, sans-serif); text-align: start; cursor: pointer; transition: border-color var(--mx-t-hover, 180ms), background var(--mx-t-hover, 180ms), transform var(--mx-t-press, 140ms) var(--mx-ease-out, ease); }
.mxc-tabs [role="tab"]:hover { border-color: var(--c-ink); }
.mxc-tabs [role="tab"]:active { transform: scale(.98); }
.mxc-tabs [role="tab"][aria-selected="true"] { border-color: var(--c-blue); background: var(--c-blue); color: #fff; }
.mxc-tn { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .75rem; color: var(--mx-brand-strong, #DB8B00); }
.mxc-tabs [aria-selected="true"] .mxc-tn { color: var(--c-brand); }
.mxc-tabs em { font-style: normal; font-weight: 500; font-size: .75rem; color: var(--c-ink3); }
.mxc-tabs [aria-selected="true"] em { color: #A9BDD2; }

.mxc-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.mxc-side, .mxc-main { min-width: 0; padding: 18px; border-radius: var(--mx-radius-lg, 8px); background: var(--mx-surface, #fff); box-shadow: 0 0 0 1px var(--c-tone); }
.mxc-side { position: sticky; top: calc(var(--mx-header-h, 64px) + 12px); }
.mxc-k { margin: 0 0 4px; color: var(--mx-brand-strong, #DB8B00); font-size: .8125rem; font-weight: 800; }
.mxc-title { margin: 0 0 6px; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); font-weight: 900; line-height: 1.2; }
.mxc-intro { margin: 0 0 12px; color: var(--c-ink2); font-size: .9375rem; }
.mxc-f { display: block; margin: 0 0 10px; color: var(--c-ink2); font-size: .875rem; font-weight: 700; }
.mxc-f input, .mxc-f select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1.5px solid var(--c-line); border-radius: 5px; background: #fff; color: var(--c-ink); font: 500 .9375rem var(--mx-font, Heebo, Arial, sans-serif); }
.mxc-f input[dir="ltr"] { font-family: 'IBM Plex Mono', ui-monospace, monospace; text-align: left; }
.mxc-f input[type="range"] { padding: 0; accent-color: var(--c-teal); }
.mxc-f.is-off { opacity: .45; }
.mxc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.mxc-check { display: inline-flex; align-items: center; gap: 7px; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.mxc-check input { width: 18px; height: 18px; accent-color: var(--c-blue); }
.mxc-btn, .mxc-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px; border: 1.5px solid var(--c-line); border-radius: 7px; background: #fff; color: var(--c-ink); font: 700 .9375rem var(--mx-font, Heebo, Arial, sans-serif); cursor: pointer; transition: border-color var(--mx-t-hover, 180ms), transform var(--mx-t-press, 140ms) var(--mx-ease-out, ease); }
.mxc-btn:hover, .mxc-ghost:hover { border-color: var(--c-ink); }
.mxc-btn:active, .mxc-ghost:active { transform: scale(.97); }
.mxc-btn-primary { border-color: var(--c-brand); background: var(--c-brand); color: var(--mx-on-brand, #170F00); font-weight: 800; }
.mxc-ghost { border-color: transparent; background: transparent; min-height: 36px; padding: 6px 10px; font-size: .875rem; }
.mxc :focus-visible { outline: 3px solid var(--mx-focus, #0B6BCB); outline-offset: 2px; }
.mxc-limits { margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: #F3F6F8; font-size: .875rem; color: var(--c-ink2); }
.mxc-limits summary { font-weight: 800; color: var(--c-ink); cursor: pointer; }
.mxc-limits p { margin: 8px 0 0; }

.mxc-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; background: #FDF0ED; color: #8E2A17; font-weight: 600; }
.mxc-scene { display: grid; gap: 10px; }
.mxc-svg { display: block; width: 100%; height: auto; border-radius: 6px; background: #F7FAFC; box-shadow: inset 0 0 0 1px var(--c-tone); }
.mxc-svg text { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.mxc-tx { fill: var(--c-ink2); font-size: 13px; }
.mxc-cap { margin: 8px 2px 0; color: var(--c-ink3); font-size: .875rem; }
.mxc-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.mxc-metric { padding: 10px 12px; border-radius: 6px; background: #EEF4F7; font-size: .8125rem; color: var(--c-ink2); animation: mxc-up 360ms var(--mx-ease-out, ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.mxc-metric strong { display: block; margin-top: 2px; color: var(--c-teal); font: 700 1.25rem 'IBM Plex Mono', ui-monospace, monospace; text-align: right; overflow-wrap: anywhere; }
.mxc-metric.is-hi { background: var(--mx-brand-soft, #FFF1D6); }
.mxc-metric.is-hi strong { color: #8A5300; }
.mxc-steps { margin: 12px 0; padding-inline-start: 14px; border-inline-start: 3px solid var(--c-brand); }
.mxc-steps h3 { margin: 0 0 4px; font-size: 1rem; }
.mxc-steps ol { margin: 0; padding-inline-start: 20px; }
.mxc-steps li { padding: 3px 0; font-size: .9375rem; animation: mxc-up 320ms var(--mx-ease-out, ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.mxc-steps bdi { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .875rem; color: var(--c-blue); }
.mxc-detail { display: grid; gap: 12px; }
.mxc-table h4 { margin: 0 0 6px; font-size: .9375rem; }
.mxc-scroll { max-height: 300px; overflow: auto; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--c-tone); }
.mxc table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.mxc th { position: sticky; top: 0; z-index: 1; padding: 7px 9px; background: #F2F5F8; color: var(--c-ink2); font-weight: 700; text-align: start; white-space: nowrap; }
.mxc td { padding: 6px 9px; border-bottom: 1px solid var(--c-tone); font-family: 'IBM Plex Mono', ui-monospace, monospace; white-space: nowrap; }
.mxc td:first-child { font-family: inherit; font-weight: 700; }
.mxc td[dir="ltr"] { text-align: left; }
.mxc tr.is-lim td { background: var(--mx-brand-soft, #FFF1D6); }
.mxc tr.is-hi td, .mxc td.is-col, .mxc th.is-col { box-shadow: inset 0 0 0 999px rgba(11, 120, 150, .08); }
.mxc tr.is-hi td { box-shadow: inset 0 0 0 999px rgba(245, 160, 0, .22); }
.mxc-ice tbody tr { animation: mxc-up 380ms var(--mx-ease-out, ease) both; }
.mxc-ice tbody tr:nth-child(2) { animation-delay: 380ms; }
.mxc-ice tbody tr:nth-child(3) { animation-delay: 760ms; }
.mxc-ice tbody tr:nth-child(2) td { color: #8A5300; }
.mxc-ice tbody tr:nth-child(3) td { background: #EEF4F7; }
.mxc-data { font-size: .875rem; }
.mxc-data summary { font-weight: 700; cursor: pointer; }
.mxc-data .mxc-ghost { margin: 6px 0; }
.mxc-course { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 16px 0; padding: 12px 14px; border-radius: 8px; background: var(--c-blue); color: #EAF1F8; text-decoration: none; transition: transform var(--mx-t-hover, 180ms) var(--mx-ease-out, ease); }
.mxc-course:hover { transform: translateY(-1px); }
.mxc-course b { color: #fff; }
.mxc-course em { font-style: normal; font-weight: 800; color: var(--c-brand); }
.mxc-practice { margin-top: 6px; padding: 16px; border-radius: 8px; background: var(--mx-brand-soft, #FFF1D6); }
.mxc-practice h3 { margin: 0 0 6px; font-size: 1.125rem; }
.mxc-ans { flex: 1 1 260px; max-width: 360px; margin: 0; }
.mxc-fb { min-height: 1.6em; margin: 6px 0 0; font-weight: 700; }
.mxc-fb.is-ok { color: var(--c-ok); }
.mxc-fb.is-no { color: #8E2A17; }

/* graph */
.mxc-gl { stroke: #E3EAF0; }
.mxc-zero { stroke: #9FB2C1; stroke-width: 1.4; }
.mxc-gt { fill: #6F8394; font-size: 11.5px; }
.mxc-al { fill: var(--c-ink2); font-size: 13px; font-weight: 600; }
.mxc-line { fill: none; stroke: var(--c-teal); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: mxc-draw 900ms var(--mx-ease-out, ease) both; }
.is-quiet .mxc-line, .is-quiet .mxc-metric, .is-quiet .mxc-steps li, .is-quiet .mxc-ice tbody tr, .is-quiet .mxc-fv, .is-quiet .mxc-farrow, .is-quiet .mxc-ratio, .is-quiet .mxc-xi, .is-quiet .mxc-prod, .is-quiet .mxc-yield, .is-quiet .mxc-be, .is-quiet .mxc-liq, .is-quiet .mxc-dot { animation: none !important; }
.mxc-reg { fill: rgba(11, 120, 150, .05); }
.mxc-reg.is-on { fill: rgba(245, 160, 0, .12); }
.mxc-reg.is-good { fill: rgba(30, 122, 76, .1); }
.mxc-regt { fill: #6F8394; font-size: 11.5px; font-family: var(--mx-font, Heebo, Arial, sans-serif) !important; }
.mxc-vl { stroke: #B86E00; stroke-width: 1.6; stroke-dasharray: 5 5; }
.mxc-vlt { fill: #8A5300; font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: #F7FAFC; stroke-width: 4px; }
.mxc-hl { stroke: rgba(13, 39, 66, .25); }
.mxc-hc { fill: #fff; stroke: var(--c-blue); stroke-width: 2; }
.mxc-hb { fill: var(--c-blue); }
.mxc-ht { fill: #fff; font-size: 12px; }
.mxc-ml { stroke: var(--c-brand); stroke-width: 1.4; stroke-dasharray: 3 4; }
.mxc-m { fill: var(--c-brand); stroke: #fff; stroke-width: 2.5; transition: r 150ms; }
.mxc-mhit { fill: transparent; }
.mxc-mark.is-drag { cursor: ew-resize; }
.mxc-mark.is-drag:hover .mxc-m, .mxc-mark.is-drag:focus .mxc-m { r: 9; }
.mxc-mark:focus { outline: none; }
.mxc-mark:focus .mxc-m { stroke: var(--mx-focus, #0B6BCB); stroke-width: 3; }
.mxc-mt { fill: #8A5300; font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #F7FAFC; stroke-width: 4px; }

/* stoichiometry flow */
.mxc-eq { fill: var(--c-blue); font-size: 20px; font-weight: 700; }
.mxc-colh { fill: #6F8394; font-size: 12px; font-weight: 600; }
.mxc-flowbg { fill: #fff; stroke: var(--c-tone); transition: fill 180ms; }
.mxc-flow.is-lim .mxc-flowbg { fill: #FFF6E3; stroke: #E9B455; stroke-width: 1.5; }
.mxc-flow.is-hi .mxc-flowbg { fill: #FFE9BF; }
.mxc-sp { fill: var(--c-blue); font-size: 15px; font-weight: 700; }
.mxc-fv { fill: var(--c-ink); font-size: 14px; animation: mxc-fade 380ms var(--mx-ease-out, ease) both; animation-delay: var(--d, 0ms); }
.mxc-farrow { fill: none; stroke: #9FB2C1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: mxc-fade 300ms both; animation-delay: var(--d, 0ms); }
.mxc-farrow.is-static { stroke: var(--c-teal); stroke-width: 2.4; }
.mxc-ratio { fill: var(--c-teal); transform-box: fill-box; transform-origin: right; animation: mxc-grow 520ms var(--mx-ease-out, ease) both; animation-delay: var(--d, 0ms); }
.mxc-flow.is-lim .mxc-ratio { fill: var(--c-brand); }
.mxc-limt { fill: #8A5300; font-size: 11px; font-weight: 700; font-family: var(--mx-font, Heebo, Arial, sans-serif) !important; }
.mxc-xi { fill: var(--c-blue); font-size: 15px; font-weight: 700; animation: mxc-fade 400ms both; animation-delay: var(--d, 0ms); }
.mxc-prod { fill: var(--c-teal); font-size: 14px; font-weight: 600; animation: mxc-fade 400ms both; animation-delay: var(--d, 0ms); }
.mxc-yield { fill: #8A5300; font-size: 13px; animation: mxc-fade 400ms both; animation-delay: var(--d, 0ms); }

/* molecule */
.mxc-shadow { fill: rgba(13, 39, 66, .07); }
.mxc-bond { stroke: #8EA8B6; stroke-linecap: round; }
.mxc-bond.is-front { stroke: #5D7D8F; }
.mxc-bond.is-back { stroke: #B7C8D2; stroke-dasharray: 6 5; }
.mxc-atom { stroke: #2C6C83; stroke-width: 1.6; }
.mxc-atom.is-back { opacity: .82; }
.mxc-an { fill: var(--c-blue); font-size: 17px; font-weight: 700; pointer-events: none; }
.mxc-anc { fill: #fff; font-size: 22px; font-weight: 700; pointer-events: none; }
.mxc-lone { fill: var(--c-brand); font-size: 22px; letter-spacing: 2px; }
.mxc-mlab { fill: var(--c-ink2); font-size: 15px; font-weight: 600; }
.mxc-rot { fill: transparent; cursor: grab; touch-action: none; }
.mxc-rot:active { cursor: grabbing; }
.mxc-rot:focus { outline: none; stroke: rgba(11, 107, 203, .35); stroke-width: 3; }

/* gas box */
.mxc-box { fill: #EAF4F8; stroke: #8EA8B6; stroke-width: 2; }
.mxc-piston { fill: var(--c-blue); }
.mxc-p { fill: var(--c-teal); animation: mxc-jitter var(--t, 1.6s) ease-in-out infinite alternate; }

/* dilution */
.mxc-beaker { fill: none; stroke: #6F8F9F; stroke-width: 3; stroke-linejoin: round; }
.mxc-liq { fill: var(--c-teal-2); fill-opacity: var(--o, .5); }
.mxc-liq.is-grow { transform-box: fill-box; transform-origin: bottom; animation: mxc-rise 900ms var(--mx-ease-in-out, ease) both; }
.mxc-dot { fill: #0D617E; }
.mxc-dot.is-spread { animation: mxc-fade 500ms both; animation-delay: calc(500ms + var(--k, 0) * 18ms); }
.mxc-bl { fill: var(--c-ink2); font-size: 14px; font-weight: 600; font-family: var(--mx-font, Heebo, Arial, sans-serif) !important; }
.mxc-bc { fill: var(--c-teal); font-size: 14px; font-weight: 700; }

/* equilibrium bars */
.mxc-base { stroke: #9FB2C1; stroke-width: 1.5; }
.mxc-bi { fill: #C5D4DE; }
.mxc-be { fill: var(--c-teal); animation: mxc-grow-y 700ms var(--mx-ease-out, ease) both; animation-delay: calc(400ms + var(--i, 0) * 120ms); }
.mxc-bvt { fill: var(--c-teal); font-size: 12px; font-weight: 700; }

@keyframes mxc-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes mxc-fade { from { opacity: 0; } }
@keyframes mxc-draw { from { stroke-dashoffset: 1; } }
@keyframes mxc-grow { from { transform: scaleX(0); } }
@keyframes mxc-grow-y { from { transform: scaleY(0); } }
@keyframes mxc-rise { from { transform: scaleY(var(--s0, 1)); } }
@keyframes mxc-jitter { to { transform: translate(var(--dx, 6px), var(--dy, 6px)); } }
.mxc.is-enter .mxc-main { animation: mxc-up 300ms var(--mx-ease-out, ease); }
.mxc.is-paused * { animation-play-state: paused !important; }

@container mxc (max-width: 900px) { .mxc-grid { grid-template-columns: 1fr; } .mxc-side { position: static; } .mxc-main { order: -1; } }
@container mxc (max-width: 560px) { .mxc-metrics { grid-template-columns: 1fr 1fr; } .mxc-side, .mxc-main { padding: 12px; } .mxc-tabs [role="tab"] { min-width: 112px; } .mxc-svg text { font-size: 115%; } }
@media (prefers-reduced-motion: reduce) { .mxc *, .mxc *::before, .mxc *::after { animation: none !important; transition: none !important; } }

.mxc-detail, .mxc-scene { min-width: 0; }
.mxc-detail > *, .mxc-scene > * { min-width: 0; max-width: 100%; }
.mxc-scroll { max-width: 100%; }