.phase-lab{--phase-ink: #182028;--phase-muted: rgba(24, 32, 40, .62);--phase-panel: rgba(255, 255, 255, .72);--phase-line: rgba(24, 32, 40, .12);--phase-hairline: rgba(24, 32, 40, .09);--phase-label: #5f6b70;--phase-track: rgba(24, 32, 40, .25);--phase-solid: #8ea3b0;--phase-liquid: #2e8bc0;--phase-gas: #e3b341;--phase-super: #36b18f;--phase-critical: #e65355;display:grid;gap:1rem;width:min(100%,1180px);padding:clamp(1rem,3vw,1.7rem);color:var(--phase-ink);background:linear-gradient(135deg,rgba(227,179,65,.18),transparent 32%),linear-gradient(225deg,rgba(54,177,143,.18),transparent 34%),#eef3f1;border:1px solid rgba(24,32,40,.08);border-radius:8px;box-shadow:0 28px 70px #203a4029}.theme-dark .phase-lab{--phase-ink: #f7fbf7;--phase-muted: rgba(247, 251, 247, .66);--phase-panel: rgba(8, 16, 20, .74);--phase-line: rgba(247, 251, 247, .13);--phase-hairline: rgba(247, 251, 247, .11);--phase-label: rgba(247, 251, 247, .58);--phase-track: rgba(247, 251, 247, .24);background:linear-gradient(135deg,rgba(227,179,65,.18),transparent 32%),linear-gradient(225deg,rgba(54,177,143,.22),transparent 34%),#081014;border-color:#ffffff14;box-shadow:0 28px 70px #00000061}.phase-panel,.phase-map-shell{min-width:0}.phase-panel{display:grid;gap:1.15rem;align-content:start;padding:.25rem .1rem;background:transparent;border:0;border-radius:0}.phase-field{display:grid;gap:.62rem;padding-bottom:1.05rem;border-bottom:1px solid var(--phase-hairline)}.phase-field span,.phase-readout>span,.phase-meter span,.phase-coexistence-head span{color:var(--phase-muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.phase-field output,.phase-readout strong{font-weight:760;line-height:.92}.phase-field output{font-size:clamp(1.65rem,7vw,3rem)}.phase-field select{width:100%;min-height:42px;padding:0 2.2rem 0 .45rem;color:var(--phase-ink);appearance:none;background:linear-gradient(45deg,transparent 50%,currentcolor 50%) right .92rem center / 6px 6px no-repeat,linear-gradient(135deg,currentcolor 50%,transparent 50%) right .58rem center / 6px 6px no-repeat;border:0;border-bottom:1px solid var(--phase-line);border-radius:0;font-weight:700}.theme-dark .phase-field select{color:var(--phase-ink);background:linear-gradient(45deg,transparent 50%,currentcolor 50%) right .92rem center / 6px 6px no-repeat,linear-gradient(135deg,currentcolor 50%,transparent 50%) right .58rem center / 6px 6px no-repeat,#081014}.phase-field select option{color:#182028;background:#eef3f1}.theme-dark .phase-field select option{color:#f7fbf7;background:#081014}.phase-field input[type=range]{--fill: 50%;width:100%;height:24px;margin:0;appearance:none;background:transparent}.phase-field input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:0;background:linear-gradient(90deg,var(--phase-ink) 0,var(--phase-ink) var(--fill),var(--phase-track) var(--fill),var(--phase-track) 100%)}.phase-field input[type=range]::-webkit-slider-thumb{width:13px;height:13px;margin-top:-5.5px;border:2px solid var(--phase-ink);border-radius:50%;appearance:none;background:var(--phase-panel);box-shadow:none;cursor:grab}.phase-field input[type=range]::-moz-range-track{height:2px;border-radius:0;background:var(--phase-track)}.phase-field input[type=range]::-moz-range-progress{height:2px;border-radius:0;background:var(--phase-ink)}.phase-field input[type=range]::-moz-range-thumb{width:13px;height:13px;border:2px solid var(--phase-ink);border-radius:50%;background:var(--phase-panel);box-shadow:none;cursor:grab}#phase-reset{justify-self:start;min-height:32px;padding:0;color:var(--phase-muted);background:transparent;border:0;border-radius:0;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;opacity:.62;transition:opacity .16s ease}#phase-reset:hover{opacity:1}.theme-dark #phase-reset{color:var(--phase-muted);background:transparent}.phase-map-shell{padding:0;overflow:visible;background:transparent;border:0;border-radius:0}.phase-map-frame{position:relative;padding:0 0 1.05rem 1.1rem}.theme-dark .phase-map-shell{background:transparent}.phase-map{display:block;width:100%;height:auto;min-height:clamp(390px,52vw,560px)}.phase-axis-label{position:absolute;color:var(--phase-muted);font-size:.58rem;font-weight:800;letter-spacing:.12em;opacity:.58;pointer-events:none;text-transform:uppercase}.phase-axis-label-y{top:50%;left:0;transform:translate(-48%,-50%) rotate(-90deg);transform-origin:center}.phase-axis-label-x{bottom:0;left:calc(1.1rem + 50%);transform:translate(-50%)}.phase-region{stroke:none}.phase-region-gas{fill:#e3b3410f}.phase-region-solid{fill:#8ea3b014}.phase-region-liquid{fill:#2e8bc012}.phase-region-supercritical{fill:#36b18f12}.phase-grid{fill:none;stroke:var(--phase-hairline);stroke-width:1}.phase-boundary{fill:none;stroke-linecap:round;stroke-linejoin:round}.phase-vapor{stroke:var(--phase-critical);stroke-width:1.5}.phase-melt{stroke:var(--phase-ink);stroke-width:1.5;stroke-dasharray:8 10;opacity:.62}.phase-point circle{fill:var(--phase-ink);stroke:#fff;stroke-width:2}.phase-critical circle{fill:var(--phase-critical)}.phase-point text,.phase-region-label{fill:var(--phase-ink);font-weight:800}.phase-point text{font-size:10px;letter-spacing:.08em;opacity:.5;paint-order:stroke;stroke:#eef3f1;stroke-width:4px;stroke-linejoin:round;text-transform:uppercase}.theme-dark .phase-point text{stroke:#081014}.phase-region-label{fill:var(--phase-label);font-size:10px;letter-spacing:.14em;opacity:.5;paint-order:stroke;stroke:#eef3f1b3;stroke-width:4px;stroke-linejoin:round;text-transform:uppercase}.theme-dark .phase-region-label{stroke:#081014bd}.phase-sample-marker{transition:transform .26s cubic-bezier(.16,1,.3,1)}.phase-sample-trail{fill:none;stroke:var(--phase-critical);transform-origin:center}.phase-sample-trail-outer{stroke-width:1;opacity:.26;animation:phase-pulse 1.8s ease-in-out infinite}.phase-sample-trail-inner{stroke-width:4;stroke-dasharray:7 10;opacity:.36;animation:phase-spin 5.2s linear infinite}.phase-sample-dot{fill:var(--phase-critical);stroke:#fff;stroke-width:3}.phase-sample-marker[data-phase=solid] .phase-sample-dot{fill:var(--phase-solid)}.phase-sample-marker[data-phase=liquid] .phase-sample-dot{fill:var(--phase-liquid)}.phase-sample-marker[data-phase=gas] .phase-sample-dot{fill:var(--phase-gas)}.phase-sample-marker[data-phase=supercritical] .phase-sample-dot{fill:var(--phase-super)}.phase-readout{min-width:0;max-width:100%;overflow:hidden;align-content:start;padding-top:1rem;border-top:1px solid var(--phase-hairline)}.phase-readout strong{display:block;max-width:100%;overflow-wrap:anywhere;font-size:clamp(2.2rem,7vw,4.2rem)}.phase-readout p{margin:0;color:var(--phase-muted);line-height:1.55}.phase-meter{display:grid;gap:.55rem;min-width:0;padding-top:.75rem;border-top:1px solid var(--phase-hairline)}.phase-meter div{display:flex;align-items:center;justify-content:space-between;gap:1rem}.phase-meter output{font-weight:800}.phase-meter i{--value: 0;display:block;height:4px;overflow:hidden;background:#1820281f;border-radius:0}.phase-meter i:before{display:block;width:calc(var(--value) * 100%);height:100%;background:linear-gradient(90deg,var(--phase-gas),var(--phase-critical),var(--phase-super));content:""}.phase-coexistence{display:grid;gap:.65rem;min-width:0;overflow:hidden;padding-top:.8rem;border-top:1px solid var(--phase-hairline)}.phase-coexistence-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.65rem;align-items:center}.phase-coexistence-head span,.phase-coexistence-head output{color:var(--phase-muted);font-size:.62rem;font-weight:800;letter-spacing:.08em;min-width:0;text-transform:uppercase}.phase-coexistence-head span:last-child{text-align:right}.phase-coexistence-head output{color:var(--phase-ink)}.phase-coexistence-axis{position:relative;width:100%;height:24px}.phase-coexistence-axis:before{position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--phase-track);content:""}.phase-coexistence-axis:after{position:absolute;top:50%;right:0;width:calc(var(--coexistence, 0) * 100%);height:1px;background:var(--phase-critical);box-shadow:0 0 14px #e6535542;content:""}.phase-coexistence-axis i{--value: 0;position:absolute;top:50%;left:calc(var(--value) * 100%);width:9px;height:9px;background:var(--phase-critical);border-radius:50%;transform:translate(-50%,-50%);transition:left .26s cubic-bezier(.16,1,.3,1)}@keyframes phase-pulse{0%,to{opacity:.16;transform:scale(.9)}50%{opacity:.34;transform:scale(1.12)}}@keyframes phase-spin{to{transform:rotate(360deg)}}@media(min-width:900px){.phase-lab{grid-template-columns:minmax(190px,.44fr) minmax(0,1.9fr) minmax(230px,.54fr);align-items:stretch}.phase-controls{padding-right:clamp(0rem,2vw,1rem);border-right:1px solid var(--phase-hairline)}.phase-readout{padding-top:.25rem;padding-left:clamp(0rem,2vw,1rem);border-top:0;border-left:1px solid var(--phase-hairline)}.phase-readout strong{font-size:clamp(2.25rem,4.1vw,3.35rem)}}