:root{color-scheme:dark;--bg:#0c131d;--panel:#141e2c;--stage:#0a111b;--line:#36495e;--text:#edf4fb;--muted:#a1b5c8;--button:#202e40;--accent:#5ebefa}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px system-ui,sans-serif}body.light{color-scheme:light;--bg:#edf3f8;--panel:#fff;--stage:#f5f9fc;--line:#b5c6d4;--text:#182d42;--muted:#4d657a;--button:#e6eff7}header{display:flex;align-items:center;gap:18px;padding:18px max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left));flex-wrap:wrap}a{color:var(--accent);text-decoration:none}h1{font-size:23px;letter-spacing:.04em;margin:0}h2{font-size:17px;margin:0 0 14px}p{line-height:1.5}header p{margin:5px 0 0;color:var(--muted);font-size:13px}#status{margin-left:auto;background:var(--button);color:#f59a42;padding:12px 20px;border-radius:24px}button,input{font:inherit}button{min-height:42px;border:1px solid var(--line);border-radius:9px;background:var(--button);color:var(--text);padding:8px 13px;cursor:pointer;touch-action:manipulation}button:hover,button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--button))}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}main{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;gap:16px;padding:0 max(18px,env(safe-area-inset-right)) 15px max(18px,env(safe-area-inset-left))}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}.controls,.readings{max-height:calc(100dvh - 130px);overflow:auto}.controls>button,.controls fieldset>button,.presets button{width:100%;margin-bottom:8px}fieldset{border:0;border-bottom:1px solid var(--line);padding:10px 0 16px;margin:10px 0}legend{color:var(--accent);font-weight:650}label{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:6px}input[type=number]{width:80px;min-height:40px;background:var(--stage);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px}input[type=range]{width:100%;accent-color:var(--accent);min-height:36px}.buttons{display:flex;gap:6px}.buttons button{flex:1}.observation{display:flex;flex-direction:column;gap:16px;min-width:0}.scenes{display:grid;grid-template-columns:1fr 1fr;gap:16px}.scenes canvas{width:100%;height:clamp(210px,39dvh,400px);display:block;background:var(--stage);border-radius:10px}.caption{font-size:12px;color:var(--muted);margin:10px 0 0}.graph-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.graph-head h2{margin:0 auto 0 0}.graph canvas{width:100%;height:clamp(145px,23dvh,250px);display:block}#temperature{font-size:32px;color:#f59a42;display:block;margin:12px 0 24px}.fraction{margin:18px 0}.fraction span{display:flex;justify-content:space-between}progress{width:100%;height:10px;accent-color:var(--phase)}#heat-balance{font-size:12px;color:var(--muted)}#limit{color:#f59a42;font-size:13px}footer{padding:0 22px max(16px,env(safe-area-inset-bottom));font-size:12px;color:var(--muted)}@media(max-width:1100px){main{grid-template-columns:180px minmax(0,1fr)}.readings{grid-column:1/-1;max-height:none;display:flex;align-items:center;flex-wrap:wrap;gap:12px}.readings h2,.readings p,#temperature{margin:0}.presets{display:flex;flex-wrap:wrap;gap:6px}.presets button{width:auto}#fractions{display:flex;gap:15px}.fraction{min-width:90px;margin:0}}@media(max-width:680px){header{gap:8px;padding:12px}h1{font-size:18px}header>div{flex:1}#status{margin:0;font-size:13px}main{display:flex;flex-direction:column;padding:0 10px 12px;gap:10px}.observation{order:0}.controls{order:1;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}.controls h2{grid-column:1/-1}.controls fieldset{margin:0}.readings{order:2}.scenes{gap:8px}.scenes .panel{padding:9px}.scenes canvas{height:235px}.scenes h2{font-size:14px}.graph{padding:10px}.graph-head{gap:6px}.graph-head button{padding:6px 9px}.caption{font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

@media(max-width:680px){.scenes{grid-template-columns:1fr}.scenes canvas{height:280px}.scenes .panel{padding:12px}}