:root{--ink:#07374b;--muted:#587080;--teal:#007f80;--line:#d8e4e8;--paper:#f4f7f7}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 system-ui,sans-serif}.collision-app,.collision-app *{box-sizing:border-box}.collision-app{max-width:1380px;margin:auto;padding:28px 32px 0}.back-link{font-size:13px;color:var(--muted);text-decoration:none}.lab-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:26px 0 30px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:750;color:var(--muted);margin:0 0 8px}.lab-heading h1{font-size:clamp(36px,5vw,58px);letter-spacing:-2px;line-height:1.1;margin:0 0 12px}.lab-heading h1 span{color:var(--teal)}.lab-heading p:last-child{margin:0;color:var(--muted)}.key-rule{background:#e6f1ef;border-left:3px solid var(--teal);padding:18px 22px;border-radius:0 12px 12px 0}.key-rule strong,.key-rule span{display:block}.key-rule span{font-size:13px;margin-top:5px}.key-rule b{color:var(--teal);padding:0 7px}.factor-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:22px}.collision-app button{font:inherit;cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);border-radius:8px;min-height:42px;padding:9px 14px}.factor-picker button{text-align:left;font-size:13px;font-weight:650;padding:14px}.factor-picker button span{display:block;font-size:10px;opacity:.65;margin-bottom:5px;letter-spacing:1px}.factor-picker button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.collision-app :is(button,input,a,summary):focus-visible{outline:3px solid #e8af50;outline-offset:3px}.experiment-controls{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:white;border:1px solid var(--line);border-radius:14px;padding:24px 28px}.collision-app h2{font-size:20px;line-height:1.3;margin:0 0 10px}.experiment-controls p{margin:0;font-size:13px;color:var(--muted);max-width:560px}.adjustment{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px 12px}.adjustment label{font-size:13px;font-weight:650}.adjustment output{font-size:23px;color:var(--teal);font-weight:750}.adjustment input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--teal);height:28px;cursor:ew-resize}.range-ends{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}#catalyst-control{grid-column:1/-1;padding:18px;background:#e6f1ef;border-radius:8px;font-size:15px}input[type=checkbox]{accent-color:var(--teal);width:17px;height:17px;vertical-align:middle;margin-right:6px}.collision-app [hidden]{display:none!important}.view-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:22px 0 13px;font-size:12px}.view-toolbar p{margin:0}.view-toolbar>div{display:flex;align-items:center;gap:8px}.view-toolbar button{font-size:12px;padding:7px 12px;min-height:36px}.slow{margin-right:6px}.live-dot{display:inline-block;background:var(--teal);width:7px;height:7px;border-radius:50%;margin-right:6px}#elapsed{font-variant-numeric:tabular-nums;margin-left:12px;color:var(--muted)}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}.chamber{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}.chamber.changed{border-color:#85bbba}.chamber-heading{display:flex;align-items:center;justify-content:space-between;padding:19px 22px 15px}.chamber-heading h2{font-size:18px;margin:0}.condition-tag{font-size:10px;border:1px solid var(--line);border-radius:30px;padding:4px 9px;color:var(--muted)}.changed .condition-tag{background:#e6f1ef;border-color:#c8e2df;color:var(--teal)}.chamber canvas{width:100%;display:block;aspect-ratio:560/340;background:#edf4f6}.collision-event{font-size:12px;min-height:20px;margin:12px 20px;color:var(--muted)}.statistics{display:grid;grid-template-columns:repeat(3,1fr);padding:0 20px 18px;gap:10px}.statistics>div{border-top:1px solid var(--line);padding-top:10px}.statistics strong{display:block;font-size:25px;line-height:1.3;font-variant-numeric:tabular-nums}.statistics>div:nth-child(2) strong{color:var(--teal)}.statistics span{font-size:10px;color:var(--muted);display:block}.legend{display:flex;gap:12px 24px;flex-wrap:wrap;font-size:11px;margin:15px 0 8px}.legend i{display:inline-block;vertical-align:middle;width:10px;height:10px;border-radius:50%;margin-right:7px}.legend .a{background:#168caf}.legend .b{background:#a25990}.legend .unsuccessful{border:2px solid #ba7617}.legend .successful{border:2px solid #008270}.model-caption{font-size:12px;color:var(--muted);margin:0 0 28px}.interpretation{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.interpretation>article{background:white;border:1px solid var(--line);border-radius:14px;padding:25px}.explain ol{padding-left:24px;font-size:14px}.explain li{margin:8px 0;padding-left:6px}.explain li::marker{color:var(--teal);font-weight:700}.remember{padding:12px 16px;border-radius:8px;background:#edf5f3;font-size:13px}.fair-test{display:flex;gap:16px;font-size:11px;color:var(--muted)}.fair-test strong{white-space:nowrap}.fair-test p{margin:0}.energy canvas{display:block;width:100%;aspect-ratio:560/245}.energy>p{font-size:13px;color:var(--muted);margin:10px 0 0}.check-understanding{margin:22px 0;background:#07374b;color:white;border-radius:14px;padding:25px}.check-understanding .eyebrow{color:#a0c1ca}.check-understanding h2{font-size:18px}#answers{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}#answers button{background:#ffffff12;color:white;border-color:#ffffff40;font-size:13px}#answers button[aria-pressed=true]{background:#e6f1ef;color:var(--ink)}#feedback{margin:12px 0 0;font-size:13px;min-height:20px}.model-details{font-size:12px;color:var(--muted);padding:8px 0 25px}.model-details summary{cursor:pointer;font-weight:650}.model-details a{color:var(--teal)}.lab-footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:12px;display:flex;justify-content:space-between}@media(min-width:1600px){.chamber canvas{max-height:390px}}@media(max-width:850px){.collision-app{padding:20px 20px 0}.key-rule{display:none}.factor-picker{grid-template-columns:repeat(3,1fr)}.experiment-controls{gap:20px;padding:20px}.interpretation{grid-template-columns:1fr}.statistics{padding:0 12px 15px;gap:7px}.statistics strong{font-size:22px}.chamber-heading{padding:16px}.chamber-heading h2{font-size:15px}.condition-tag{display:none}}@media(max-width:580px){.collision-app{padding:18px 14px 0}.lab-heading{margin:22px 0}.lab-heading h1{font-size:40px}.lab-heading p:last-child{font-size:13px}.factor-picker{grid-template-columns:repeat(2,1fr)}.factor-picker button:last-child{grid-column:1/-1}.factor-picker button{padding:11px}.factor-picker button span{display:inline;margin-right:8px}.experiment-controls{grid-template-columns:1fr}.view-toolbar{flex-wrap:wrap}.view-toolbar>div{flex-wrap:wrap}.comparison{grid-template-columns:1fr}.interpretation>article{padding:20px}.chamber canvas{aspect-ratio:560/340}.fair-test{display:block}.fair-test p{margin-top:4px}.lab-footer{margin-top:10px}}

@media(min-width:851px){.lab-heading{margin:18px 0 22px}.lab-heading h1{font-size:46px;margin-bottom:8px}.factor-picker{margin-bottom:16px}.factor-picker button{padding:10px 14px}.experiment-controls{padding:18px 24px}.view-toolbar{margin-top:16px}.collision-app{padding-top:20px}}

.statistics{grid-template-columns:repeat(4,1fr)}@media(max-width:1000px) and (min-width:581px){.statistics{grid-template-columns:repeat(2,1fr)}}@media(max-width:380px){.statistics{grid-template-columns:repeat(2,1fr)}}
/* The introductory collision example comes before the five investigations. */
.effective-section{background:#fff;border:1px solid var(--line);border-radius:16px;margin:22px 0 32px;padding:26px}.effective-heading{display:flex;gap:26px;align-items:center;justify-content:space-between;margin-bottom:20px}.effective-heading>div{max-width:630px}.effective-heading h2{font-size:27px;margin:6px 0 10px}.effective-heading>div>p:last-child{font-size:14px;color:var(--muted);margin:0}.reaction-equation{font-size:24px;font-weight:750;white-space:nowrap;color:var(--teal);padding:18px;background:#edf6f3;border-radius:10px;text-align:center;margin:0}.reaction-equation span{display:block;font-size:11px;font-weight:500;margin-top:7px;color:var(--muted)}.effective-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:24px}.effective-animation{border:1px solid var(--line);border-radius:12px;overflow:hidden}.effective-animation canvas{display:block;width:100%;aspect-ratio:760/350}.effective-playback{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#f7fafa;align-items:center}.effective-playback>span{flex:1 1 100%;font-size:12px;min-height:20px;color:var(--muted)}.effective-playback button{font-size:12px;min-height:36px;padding:6px 12px}.effective-conditions h3{margin:0 0 6px;font-size:17px}.effective-conditions>p{font-size:12px;color:var(--muted);margin:0 0 16px}.effective-conditions>label{display:block;border:1px solid var(--line);border-radius:8px;padding:12px;margin:9px 0;font-weight:650;font-size:14px;cursor:pointer}.effective-result{background:#e8f4ef;border-left:3px solid var(--teal);padding:14px 16px;margin:16px 0}.effective-result strong{color:var(--teal);font-size:15px}.effective-result p{font-size:13px;margin:5px 0 0}.effective-result.ineffective{background:#fbf3e4;border-color:#b67c24}.effective-result.ineffective strong{color:#9c6014}.effective-atom-key{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px}.effective-atom-key i{width:10px;height:10px;border-radius:50%;display:inline-block}.carbon-key{background:#455460}.oxygen-key{background:#c95c4c;margin-left:10px}.effective-note{font-size:11px;color:var(--muted);margin:14px 0 0;max-width:950px}.factors-intro{margin-bottom:18px}.factors-intro h2{font-size:23px}.interpretation{grid-template-columns:1fr}.explain ol{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.energy{display:none}@media(max-width:900px){.effective-heading{display:block}.reaction-equation{display:inline-block;margin-top:18px}.effective-grid{grid-template-columns:1fr}.effective-conditions{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.effective-conditions h3,.effective-conditions>p,.effective-result{grid-column:1/-1}.explain ol{display:block}}@media(max-width:580px){.effective-section{padding:16px}.effective-heading h2{font-size:23px}.reaction-equation{font-size:21px}.effective-conditions{display:block}.effective-animation canvas{min-height:190px;object-fit:contain;background:#eff5f6}.factors-intro h2{font-size:21px}}

/* Matching concentration–time plots beneath each scenario. */
.concentration-graph{border-top:1px solid var(--line);padding:20px;background:#fafcfc}.graph-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.graph-heading h3{font-size:18px;margin:0}.graph-heading>span{font-size:10px;color:var(--muted)}.graph-key{display:flex;gap:22px;font-size:12px;margin:12px 0 3px}.graph-key span:before{content:'';display:inline-block;width:24px;vertical-align:middle;margin-right:7px;border-top:3px solid #a25990}.graph-key .product-line:before{border-color:#007f80;border-top-style:dashed}.concentration-graph svg{display:block;width:100%;height:auto;overflow:visible;font:12px system-ui;fill:#587080}.concentration-graph .axis-title{font-size:13px;fill:#07374b}.graph-grid{stroke:#e0e9ec;stroke-width:1}.graph-axis{stroke:#8099a4;stroke-width:1.5;fill:none}.curve{fill:none;stroke-width:3;stroke-linecap:round}.curve.b{stroke:#a25990}.curve.product{stroke:#007f80;stroke-dasharray:8 5}.graph-clock{stroke:#708995;stroke-dasharray:3 5}.graph-dot{stroke:#fff;stroke-width:2}.graph-dot.b{fill:#a25990}.graph-dot.product{fill:#007f80}.graph-reading{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;margin:8px 0;color:var(--ink)}.graph-note{font-size:12px;line-height:1.6;color:var(--muted);margin:0;min-height:58px}@media(max-width:580px){.concentration-graph{padding:16px 12px}.graph-note{min-height:0}}