/* States of Matter: dark lab-bench stage + white side cards (same family as Atom Builder). Frame from /shared/style.css. */
.sm-head{max-width:1080px;margin:0 auto;padding:4px 16px 0}
.sm-head h1{margin:6px 0 4px;font-size:clamp(24px,6vw,34px)}
.sm-head p{margin:0 0 10px;color:#4b5563;font-size:15px}
#sm-wrap{position:relative;max-width:1080px;margin:0 auto;padding:0 8px;user-select:none;-webkit-user-select:none}
.sm-bar{display:flex;align-items:center;gap:6px;padding:0 4px 10px;flex-wrap:wrap}
.sm-bar .sp{flex:1}
.sm-bar button{height:38px;min-width:38px;padding:0 12px;border-radius:999px;border:0;background:#fff;box-shadow:0 1px 3px #0002;font:700 14px/1 system-ui,sans-serif;color:#1f2a3a;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sm-bar button.ic{border-radius:12px}
.sm-sub i{width:12px;height:12px;border-radius:50%;display:inline-block}
.sm-sub.on{background:#1f2a3a;color:#fff}
.sm-main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px;align-items:start}
#sm-stage{position:relative;border-radius:22px;background:linear-gradient(#26324d,#1b2438);box-shadow:0 6px 16px #0003;overflow:hidden}
#sm-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 290px);min-height:240px;margin:0 auto}
#sm-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#3a1f5ce6;box-shadow:0 0 0 2px #ffc34a88;color:#fff;font:800 18px system-ui,sans-serif;padding:7px 18px;border-radius:14px;pointer-events:none;white-space:nowrap}
#sm-banner[hidden]{display:none}
.sm-lever{background:#2c2119;padding:8px 18px 14px;color:#fff}
.sm-lrow{display:flex;align-items:center;gap:12px;font:800 14px system-ui,sans-serif}
#sm-track{position:relative;flex:1;height:18px;border-radius:10px;background:linear-gradient(90deg,#5fb3ff,#2a3a5a 46%,#2a3a5a 54%,#ff7a3a);cursor:pointer;touch-action:none;outline:none}
#sm-track:focus-visible{box-shadow:0 0 0 3px #ffd24a}
#sm-track:before{content:"";position:absolute;inset:-16px 0}
#sm-track:after{content:"";position:absolute;left:50%;top:-6px;width:2px;height:30px;background:#ffffff70}
.sm-knob{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #ffffff40,0 3px 6px #0006;transition:box-shadow .2s;pointer-events:none}
.sm-knob.hot{box-shadow:0 0 0 5px #ff7a3a88,0 3px 6px #0006}.sm-knob.cold{box-shadow:0 0 0 5px #5fb3ff88,0 3px 6px #0006}
.sm-lsub{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:8px;font:700 13px system-ui,sans-serif;color:#ffffffc0}
#sm-off{border:0;background:#ffffff1c;color:#fff;font:700 12px system-ui,sans-serif;padding:4px 10px;border-radius:999px;cursor:pointer}
#sm-hand{position:absolute;left:78%;top:2px;font-size:32px;filter:drop-shadow(0 2px 2px #0007);pointer-events:none;animation:smtap 1s ease-in-out infinite}
@keyframes smtap{50%{transform:translate(-6px,-4px) scale(.92)}}
.sm-side{display:flex;flex-direction:column;gap:12px}
.sm-card{background:#fff;border-radius:18px;box-shadow:0 1px 4px #0002;padding:14px 16px}
.sm-state{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
#sm-title{font:800 26px/1.1 system-ui,sans-serif;display:block}
#sm-subt{color:#6b7280;font:600 14px system-ui,sans-serif}
.sm-temp{text-align:right;white-space:nowrap}
#sm-tc{font:800 28px/1.1 system-ui,sans-serif;color:#c2410c;display:block}
#sm-tf{color:#6b7280;font:600 13px system-ui,sans-serif}
#sm-desc{margin:10px 0 0;font:14px/1.45 system-ui,sans-serif;color:#374151;min-height:3em}
.sm-graph .lab{font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
#sm-graph{display:block;width:100%;height:auto}
.sm-pack a{display:flex;gap:12px;align-items:center;background:#fff;border-radius:16px;box-shadow:0 1px 4px #0002;padding:12px 14px;text-decoration:none;color:#1f2a3a}
.sm-pack img{flex:0 0 auto;width:56px;height:auto;border-radius:6px;box-shadow:0 1px 4px #0003}
.sm-pack .tag{display:block;font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.sm-pack b{display:block;color:#0f6b4f;font-size:15px;margin:2px 0;line-height:1.3}
.sm-pack .ln{display:block;font-size:13px;color:#4b5563;line-height:1.4}
.sm-info{max-width:820px;margin:26px auto 0;padding:0 16px 30px}
.sm-info h2{font-size:22px;margin:26px 0 8px}.sm-info h3{font-size:17px;margin:18px 0 4px}
.sm-info p,.sm-info li{font-size:16px;line-height:1.6;color:#374151}
.sm-info ul{margin:0;padding-left:22px}
.sm-info li{margin:4px 0;padding-left:2px}
@media (max-width:820px){.sm-main{grid-template-columns:1fr}#sm-svg{max-height:none}}
@media (max-width:420px){.sm-bar{gap:5px}.sm-bar button{padding:0 9px;font-size:13px;height:36px}.sm-bar button.ic{min-width:34px;padding:0 6px}.sm-sub i{display:none}#sm-banner{font-size:15px}#sm-title{font-size:22px}#sm-tc{font-size:24px}.sm-lever{padding:6px 12px 12px}}