/* Scoped rendering styles; no changes to existing site typography/navigation. */
.cs-view{display:grid;place-items:center;min-width:0;background:#fff;overflow:hidden}
.cs-view[hidden],.cs-card[hidden]{display:none!important}
.cs-view>svg{display:block;width:100%;height:auto;max-height:none;overflow:visible}
.molecule-frame.cs-view>svg{max-width:520px;max-height:280px}
.cs-lab{max-width:1220px;margin:1.5rem auto;padding:0 1rem;color:#162737;font:16px/1.5 system-ui,sans-serif}
.cs-lab h1{font-size:2rem;line-height:1.2;margin:0 0 .6rem}.cs-lab h2{font-size:1.4rem;margin:2rem 0 .8rem}.cs-lab h3{font-size:1rem;margin:.5rem 0;font-weight:650;line-height:1.4}
.cs-lab p{margin:.4rem 0}.cs-lab figure{margin:0}.cs-lab figcaption{font-size:.85rem;text-align:center;margin:.3rem 0}
.cs-lab code{font-size:.79rem;overflow-wrap:anywhere}.cs-muted,.cs-note{color:#465966;font-size:.86rem}
.cs-metrics{display:flex;gap:2rem;flex-wrap:wrap;border-block:1px solid #bbcbd5;padding:.8rem 0;margin:1rem 0}.cs-metrics strong{font-size:1.7rem;color:#0d6175;margin-right:.25rem}
.cs-checksum{display:block;color:#516473;margin-top:.2rem}.cs-controls{display:flex;align-items:end;gap:1rem;flex-wrap:wrap;margin:1.3rem 0}.cs-controls label{display:grid;gap:.3rem;flex:1;min-width:180px}.cs-controls input,.cs-controls select{width:100%;box-sizing:border-box;padding:.65rem;border:1px solid #8fa5b3;background:#fff;color:#172b3a;font:inherit;border-radius:3px}
.cs-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.5rem 1rem}.cs-card{border-bottom:1px solid #b9cbd6;padding:.4rem .4rem 1rem;min-width:0}.cs-card .cs-view{height:180px}.cs-card .cs-view>svg{height:180px;width:100%}.cs-id{font:12px/1.4 ui-monospace,monospace;color:#4e6272;overflow-wrap:anywhere}.cs-tags{font-size:.86rem;min-height:2.5em}.cs-status{font-size:.78rem;color:#17664a}.cs-failed .cs-status,.cs-error{color:#9b1c29}.cs-details{font-size:.85rem}.cs-details summary{cursor:pointer;padding:.4rem 0}.cs-details code{display:block;margin:.4rem 0}
.cs-comparison-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-bottom:1px solid #cdd8de;padding:.8rem 0}.cs-comparison-row h3{grid-column:1/-1}.cs-comparison-row .cs-view{max-width:320px;margin:auto}.cs-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.cs-reaction-block{padding:1rem 0;border-bottom:1px solid #cdd8de}
.cs-equation{display:flex;align-items:center;justify-content:center;gap:.6rem;max-width:100%;overflow-x:auto}.cs-equation-side{display:flex;align-items:center;min-width:0;flex:1}.cs-participant{min-width:85px;flex:1}.cs-participant .cs-view{min-width:90px}.cs-operator{font-size:1.5rem;padding:.2rem}.cs-reaction-arrow{display:grid;justify-items:center;min-width:120px;max-width:190px;flex:0 1 150px}.cs-condition{font-size:.82rem;text-align:center}.cs-arrow-symbol{font-family:system-ui,sans-serif;font-size:2.5rem;line-height:1.1}.cs-coefficient{float:left}.cs-route{display:flex;align-items:center;justify-content:center;gap:1rem}.cs-route-node{min-width:120px;flex:1}.cs-route-step{display:grid;justify-items:center;flex:0 1 130px}.cs-native{overflow:auto}.cs-native>.cs-view{min-width:640px}
.cs-lab>details{margin:1.5rem 0}.cs-lab>details>summary{cursor:pointer;font-weight:600}.cs-error{font-size:.9rem;padding:.7rem}
@media(max-width:640px){.cs-lab{padding:0 .7rem}.cs-metrics{gap:1rem;font-size:.85rem}.cs-highlights{grid-template-columns:1fr}.cs-equation{display:grid;justify-items:center;overflow:visible}.cs-equation-side{width:100%;max-width:470px;justify-content:center}.cs-participant{max-width:215px;min-width:95px}.cs-reaction-arrow{min-width:0;width:100%;max-width:none;margin:.1rem 0 .5rem}.cs-reaction-arrow .cs-arrow-symbol{transform:rotate(90deg);line-height:1.2}.cs-route{flex-direction:column}.cs-route-node{width:250px;max-width:100%}.cs-route-step{flex:none;min-height:80px}.cs-route-step .cs-arrow-symbol{transform:rotate(90deg)}.cs-comparison-row{gap:.4rem}.cs-comparison-row .cs-view>svg{min-height:120px}}
@media print{.cs-controls,.cs-details,.cs-lab>details{display:none}.cs-card{break-inside:avoid}.cs-gallery{grid-template-columns:repeat(3,1fr)}}
/* Keep molecular panels at the same display scale on each side of an equation. */
.cs-equation-side{flex:0 1 auto;justify-content:center}
.cs-participant{flex:0 1 220px;max-width:220px}
.cs-participant .cs-view>svg{width:220px;max-width:100%;height:140px}
.cs-native.cs-view{overflow-x:auto;display:block}
.cs-native.cs-view>svg{min-width:640px}
@media(max-width:640px){.cs-participant{flex:1 1 0;max-width:215px}.cs-equation-side{display:flex;width:100%}}