.states-app{max-width:1240px;margin:auto;padding:28px 24px 48px;color:#25382f;font-family:system-ui,sans-serif}.states-app *{box-sizing:border-box}.states-back{color:#416354;font-size:13px}.states-heading{margin:28px 0}.states-heading>span{font-size:11px;letter-spacing:2px;color:#738078;font-weight:700}.states-heading h1{font-size:clamp(32px,4vw,48px);line-height:1.1;margin:12px 0}.states-heading p{color:#617169}.states-app h2{font-size:14px;color:#718279;margin:0 0 18px}.states-app h2 span{font-size:17px;color:#25382f;margin-left:9px}.states-app button{font:inherit;font-size:13px;padding:10px 13px;border:1px solid #cbd7cf;border-radius:9px;background:#fff;color:#345b45;cursor:pointer}.states-app button:focus-visible,.states-app input:focus-visible{outline:3px solid #c28a3b;outline-offset:4px}.substance-panel,.particle-panel,.temperature-panel,.state-notes{background:#fff;border:1px solid #dce3dc;border-radius:18px;padding:23px}.substance-panel{margin-bottom:22px}.substance-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.states-app .substance-buttons button{text-align:left;padding:15px 18px;background:#f8faf6}.substance-buttons strong{font-size:17px;display:block}.substance-buttons small{font-size:12px;display:block;margin-top:5px;opacity:.8}.states-app .substance-buttons button[aria-pressed=true]{background:#315e49;color:white;border-color:#315e49}.fine{font-size:12px;color:#6a776f;line-height:1.6}.substance-panel>.fine{margin:15px 0 0}.states-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);gap:22px;align-items:start}.particle-panel{background:#fbfcf8}.panel-heading{display:flex;gap:12px;justify-content:space-between;align-items:center}.panel-heading h2{margin:0}.state-heading{display:flex;justify-content:space-between;align-items:center;margin:24px 0 10px}.state-heading p{font-size:13px;color:#63736a;margin:0 0 6px}.state-heading h3{font-size:30px;margin:0}.state-heading output{font-size:30px;font-weight:650;color:#315e49}#particles{width:100%;display:block;border-radius:12px;background:#112b33;aspect-ratio:64/45}.motion-legend{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-size:11px;color:#6b7c72;flex-wrap:wrap}.motion-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#69c0b8;margin-right:5px}#particle-explanation{font-size:15px;line-height:1.6}.states-grid aside{display:grid;gap:18px}.slider-label{font-size:14px;display:flex;justify-content:space-between;gap:10px}.slider-label span{font-size:11px;color:#718279}.states-app input[type=range]{width:100%;accent-color:#315e49;height:36px;cursor:ew-resize;margin:15px 0 0}.temperature-scale{display:flex;justify-content:space-between;font-size:12px;color:#6b786f}.jump-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0}.jump-buttons button{font-size:11px;padding:8px 10px}.transition-points{border-top:1px solid #e1e7e0;padding-top:12px;margin-bottom:0}.transition-points div{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:9px 0}.transition-points dd{font-weight:750;margin:0;white-space:nowrap}#transition-controls{background:#f7eedb;padding:15px;border-radius:10px;margin-top:16px}#transition-controls[hidden]{display:none}#transition-controls h3{font-size:16px;margin:0}#transition-controls p{font-size:12px;line-height:1.6}#transition-controls label{font-size:12px;display:flex;justify-content:space-between}#transition-controls input{accent-color:#a56520}.state-path{display:flex;align-items:center;justify-content:space-between;gap:7px}.state-path span{padding:7px 10px;background:#f0f3ef;border-radius:8px;font-size:12px}.state-path span.active{background:#315e49;color:white}.state-path b{color:#718279;font-weight:400}.state-notes>p{font-size:12px;line-height:1.6}.states-summary{padding:24px;background:#edf2e7;border-radius:14px;margin:22px 0;font-size:14px;line-height:1.6}.states-summary p{margin:8px 0 0}.states-sources{font-size:12px;color:#64756a;line-height:1.7}.states-sources a{color:#315e49}@media(max-width:800px){.states-grid{grid-template-columns:1fr}.substance-buttons{grid-template-columns:repeat(2,1fr)}.states-app{padding:24px 16px}.substance-panel,.particle-panel,.temperature-panel,.state-notes{padding:18px}.state-heading h3,.state-heading output{font-size:25px}}@media(prefers-reduced-motion:reduce){.states-app *{scroll-behavior:auto!important}}

.mobile-temperature{display:none}@media(max-width:800px){.mobile-temperature{display:block;margin-bottom:12px;font-size:12px}.mobile-temperature input[type=range]{margin-top:0}}

.states-app [hidden]{display:none!important}

.states-app{max-width:1480px}.states-grid{grid-template-columns:minmax(0,2.15fr) minmax(310px,1fr)}.linked-views{display:grid;grid-template-columns:1fr 34px 1.33fr;align-items:start;gap:8px}.linked-views h3{font-size:13px;margin:0 0 12px;color:#426456}.linked-views canvas{width:100%;height:300px;object-fit:contain;border-radius:12px;display:block}.macro-view canvas{background:#edf3f2}.micro-view canvas{background:#112b33}.linked-views p{font-size:12px;line-height:1.5;color:#64756a;margin:10px 0}.zoom-link{padding-top:130px;display:grid;text-align:center;color:#638472;font-size:25px}.zoom-link span{font-size:9px}.states-heading{margin:18px 0}.substance-panel{padding:18px}.state-heading{margin:18px 0 12px}@media(max-width:1000px){.states-grid{grid-template-columns:1fr}}@media(max-width:540px){.linked-views{grid-template-columns:1fr 22px 1.33fr;gap:4px}.linked-views canvas{height:205px}.linked-views h3{font-size:11px;min-height:28px}.zoom-link{padding-top:105px;font-size:18px}.zoom-link span{font-size:8px}.linked-views p{font-size:11px}}

@media(max-width:540px){.linked-views{grid-template-columns:1fr}.linked-views h3{min-height:0}.macro-view canvas{height:155px}.micro-view canvas{height:235px}.zoom-link{padding:0;display:flex;justify-content:center;align-items:center;gap:8px;font-size:20px}.zoom-link span{font-size:11px}.linked-views p{margin:7px 0 12px}}

/* Give the linked observation views the full page width. */
.states-grid{grid-template-columns:1fr}.states-grid aside{grid-template-columns:1fr 1fr;align-items:start}.linked-views{grid-template-columns:minmax(0,.8fr) 46px minmax(0,1.5fr);gap:16px}.linked-views canvas{height:460px}.linked-views h3{font-size:18px}.zoom-link{padding-top:205px}.mobile-temperature{display:block;max-width:760px;margin:0 auto 24px;font-size:14px}.mobile-temperature input[type=range]{margin-top:4px}.micro-view canvas{border:2px solid #638c86}.linked-views p{font-size:14px}.particle-panel{padding:28px}.panel-heading h2 span{font-size:21px}
@media(max-width:800px){.states-grid aside{grid-template-columns:1fr}.linked-views{grid-template-columns:minmax(0,.7fr) 26px minmax(0,1.3fr);gap:8px}.linked-views canvas{height:320px}.linked-views h3{font-size:14px}.zoom-link{padding-top:150px}.particle-panel{padding:18px}}
@media(max-width:540px){.linked-views{grid-template-columns:1fr}.macro-view canvas{height:185px}.micro-view canvas{height:300px}.zoom-link{padding:0}.panel-heading h2 span{font-size:17px}.linked-views p{font-size:12px}}