.hidden{display:none!important}.phase-shell{height:calc(100vh - 72px);min-height:650px;display:grid;grid-template-columns:230px minmax(520px,1fr) 280px;gap:16px;padding:16px}.phase-sidebar,.phase-inspector{padding:18px;overflow:auto}.phase-workspace{display:flex;flex-direction:column;overflow:hidden}.state-card{width:100%;display:grid;grid-template-columns:72px 1fr;text-align:left;align-items:center;border:1px solid var(--line);background:#f9fbfd;border-radius:14px;padding:12px;margin-bottom:10px;cursor:pointer;color:var(--ink);transition:.18s}.state-card:hover,.state-card.active{transform:translateY(-1px);border-color:#7caeff;box-shadow:0 8px 18px rgba(40,120,255,.12)}.state-card b,.state-card small{grid-column:2}.state-card b{font-size:14px}.state-card small{font-size:10px;color:#8190a2;line-height:1.45;margin-top:3px}.state-dots{grid-row:1/3;font-size:13px;line-height:1.25;letter-spacing:2px}.solid-dots{color:#57a6e8}.liquid-dots{color:#2878ff}.gas-dots{color:#8a67dc}.lesson-note{margin-top:18px;padding:14px;border-radius:13px;background:#eff6ff;color:#41638d}.lesson-note b{font-size:12px}.lesson-note p{font-size:11px;line-height:1.65;margin:6px 0 0}.phase-badge{font-size:10px;color:#2878ff;background:#eaf2ff;border:1px solid #c6dcff;border-radius:20px;padding:8px 12px}.phase-stage{position:relative;flex:1;min-height:390px;background:linear-gradient(#d9efff,#f4faff);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.phase-stage canvas{position:absolute;inset:0;width:100%;height:100%}.phase-status{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);box-shadow:0 7px 22px rgba(39,78,118,.1)}.phase-status>span{font-size:28px}.phase-status small,.phase-status b{display:block}.phase-status small{font-size:9px;color:#8190a2}.phase-status b{font-size:14px;margin-top:2px}.motion-legend{position:absolute;right:14px;bottom:12px;border-radius:18px;background:rgba(255,255,255,.8);padding:7px 11px;font-size:9px;color:#6f8196}.motion-legend span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2878ff;margin-right:6px;box-shadow:0 0 0 4px rgba(40,120,255,.12)}.lesson-guide{position:absolute;right:16px;top:16px;width:min(310px,42%);padding:14px 15px;border:1px solid rgba(166,196,225,.75);border-radius:15px;background:rgba(255,255,255,.91);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(38,76,112,.13)}.guide-head{display:flex;align-items:center;justify-content:space-between}.guide-head span{font-size:9px;font-weight:800;color:#2878ff}.guide-head button{border:0;background:#eaf2ff;color:#2878ff;border-radius:8px;padding:5px 8px;font-size:9px;cursor:pointer}.lesson-guide strong{display:block;margin-top:9px;font-size:15px}.lesson-guide p{min-height:48px;margin:6px 0 10px;color:#63758a;font-size:11px;line-height:1.55}.guide-actions{display:flex;justify-content:flex-end;gap:7px}.guide-actions button{border:1px solid var(--line);background:#f7f9fc;color:#69798d;border-radius:8px;padding:7px 11px;font-size:10px;font-weight:700;cursor:pointer}.guide-actions button:last-child{border-color:#2878ff;background:#2878ff;color:#fff}.guide-actions button:disabled{opacity:.38;cursor:default}.temperature-controls{height:178px;padding:16px 24px}.temp-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.temp-heading label{font-size:12px;font-weight:800}.temp-heading output{font-size:23px;font-weight:900;color:#2878ff}.temperature-controls input{accent-color:#2878ff}.temp-scale{display:flex;justify-content:space-between;color:#8996a6;font-size:9px;margin-top:2px}.temp-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:13px}.temp-presets button{border:1px solid var(--line);background:#f8fafc;border-radius:9px;padding:8px 4px;font-size:9px;color:#708095;cursor:pointer}.temp-presets button.active{background:#e9f2ff;border-color:#91b9ff;color:#2878ff;font-weight:800}.thermometer-box{height:300px;position:relative;display:flex;justify-content:center;align-items:flex-end;padding:18px 0 32px}.thermometer{position:relative;width:24px;height:235px;border:4px solid #d9e2ea;border-radius:14px 14px 10px 10px;background:#fff;overflow:visible}.thermometer:before{content:"";position:absolute;left:50%;top:7px;bottom:7px;width:7px;transform:translateX(-50%);background:#edf2f6;border-radius:5px}.mercury{position:absolute;z-index:2;left:50%;bottom:4px;width:7px;height:31.25%;transform:translateX(-50%);border-radius:5px;background:linear-gradient(#ff845f,#ec3d47);transition:height .25s}.bulb{position:absolute;z-index:3;left:50%;bottom:-19px;width:34px;height:34px;transform:translateX(-50%);border:4px solid #d9e2ea;border-radius:50%;background:#ec3d47}.thermometer-scale{position:absolute;left:63px;bottom:47px;width:47px;height:225px;border-right:1px solid #aebbc8}.thermometer-scale:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 13px,#aebbc8 13px,#aebbc8 14px);opacity:.75}.thermometer-scale span{position:absolute;right:8px;transform:translateY(50%);font-size:9px;color:#6f7e90;z-index:2}.thermometer-box>b{position:absolute;right:28px;top:115px;color:#2878ff;font-size:20px}.challenge-btn{width:100%;border:0;border-radius:10px;padding:11px;background:#eaf2ff;color:#2878ff;font-weight:800;cursor:pointer}.observation-card{margin-top:14px;padding:13px;border-radius:12px;background:linear-gradient(135deg,#203b70,#245aa5);color:#fff}.observation-card span,.observation-card strong{display:block}.observation-card span{font-size:9px;opacity:.7}.observation-card strong{font-size:11px;line-height:1.6;margin-top:6px}.change-map{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px}.change-map>b{display:block;font-size:11px;margin-bottom:9px}.change-map div{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;text-align:center;margin:6px 0}.change-map span{background:#edf5ff;border-radius:7px;padding:5px 2px;font-size:9px;font-weight:800;color:#2878ff}.change-map em{font-style:normal;font-size:9px;color:#e56a42}.change-map small{display:block;color:#8a98a8;font-size:9px;margin-top:8px}@media(max-width:1050px){.phase-shell{grid-template-columns:190px minmax(480px,1fr)}.phase-inspector{display:none}}@media(max-width:760px){.phase-shell{height:auto;min-height:calc(100vh - 60px);display:flex;flex-direction:column;padding:8px}.phase-workspace{height:790px;order:1}.phase-stage{min-height:500px}.phase-stage canvas{bottom:162px;height:auto}.phase-sidebar{order:2}.phase-inspector{display:block;order:3}.state-card{display:inline-grid;width:32%;margin-right:1%}.temp-presets{grid-template-columns:repeat(3,1fr)}.temperature-controls{height:215px;padding:14px}.phase-badge{display:none}.lesson-guide{left:10px;right:10px;top:auto;bottom:8px;width:auto;padding:10px 12px}.lesson-guide p{min-height:0;margin:4px 0 7px;font-size:10px}.lesson-guide strong{margin-top:5px;font-size:13px}.guide-actions button{padding:5px 9px}.motion-legend{display:none}}