:root{color-scheme:dark;--bg:#0a1018;--panel:#111a25;--border:#253141;--muted:#8e9bae;--text:#e5edf7;--accent:#70e5c1}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}header{padding:28px 32px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:2px;font-weight:700}h1{font-size:28px;letter-spacing:-1px;margin:7px 0 0;font-weight:600}h1 span{font-weight:400;color:var(--muted);font-size:17px;letter-spacing:0;margin-left:18px}.tag{font-size:10px;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:center;gap:8px}.tag i{height:6px;width:6px;background:var(--accent);border-radius:50%}main{display:grid;grid-template-columns:285px minmax(0,1fr);max-width:2000px;margin:auto}aside{border-right:1px solid var(--border);padding:0 22px 24px;background:#0d141e}section{padding:22px 0 18px;border-bottom:1px solid var(--border)}h2{font-size:13px;font-weight:600;margin:0 0 18px}h2 b{color:#65809a;font-size:10px;margin-right:10px;font-weight:500}.control{margin:13px 0}.row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.unit{color:var(--muted);font-size:10px}input[type=number]{width:76px;border:1px solid var(--border);border-radius:5px;background:#15202e;color:var(--text);padding:5px;font:12px ui-monospace,monospace}input[type=range]{width:100%;height:4px;margin:12px 0 5px;accent-color:var(--accent);cursor:pointer}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}.toggle{display:flex;align-items:center;gap:8px;font-size:12px;margin:11px 0}.stack{display:flex;flex-direction:column;gap:8px;font-size:12px}select{width:100%;border:1px solid var(--border);border-radius:6px;background:#15202e;padding:8px;color:var(--text)}.hint{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0 0}.workspace{padding:24px 26px;min-width:0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.buttons{display:flex;gap:8px;flex-wrap:wrap}button{background:#172332;border:1px solid #304153;color:var(--text);border-radius:6px;padding:9px 14px;font:600 12px system-ui;cursor:pointer}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#10231e;border-color:var(--accent);min-width:76px}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.clock{display:flex;flex-direction:column;text-align:right;font-family:ui-monospace,monospace;white-space:nowrap}.clock small{font-size:10px;color:var(--muted);margin-top:3px}#canvas-host{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#0d1520;min-height:400px;touch-action:none}canvas{display:block}#loading{padding:40px}.legend{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);margin-top:17px;flex-wrap:wrap}.legend-label{font-size:9px;letter-spacing:1px}.gradient{height:8px;width:150px;border-radius:5px;background:linear-gradient(90deg,#120a26,#501c6a,#a52c60,#ed7040,#fcefb3)}.legend-detail{margin-left:auto;font-size:10px}.status{margin:15px 0 24px;display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:11px;line-height:1.6}.guide{border-top:1px solid var(--border);padding:17px 0}.guide summary{cursor:pointer;color:#b9c8d8;font-size:12px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px}.guide p{font-size:12px;line-height:1.8;color:var(--muted)}h3{font-size:12px;font-weight:500}footer{margin-top:15px;color:#5f758b;font-size:10px;display:flex;justify-content:space-between}input:disabled{opacity:.35}@media(min-width:1600px){.workspace{padding:30px 40px}}@media(max-width:1000px){main{grid-template-columns:250px minmax(0,1fr)}aside{padding:0 16px}.workspace{padding:20px 14px}.guide-grid{grid-template-columns:1fr}.tag{display:none}}@media(max-width:650px){header{padding:20px}h1 span{display:block;margin:5px 0 0;font-size:13px}main{display:flex;flex-direction:column}.workspace{order:0}aside{order:1;display:grid;grid-template-columns:1fr 1fr;gap:0 22px;border-top:1px solid var(--border);border-right:0}.toolbar{align-items:flex-start}button{padding:8px 10px}.legend-detail{margin-left:0}.status{flex-direction:column;gap:4px}footer{gap:8px}.guide-grid{gap:8px}}@media(max-width:400px){aside{grid-template-columns:1fr}}
@media(min-width:651px){aside{max-height:calc(100vh - 112px);overflow-y:auto;position:sticky;top:0;scrollbar-width:thin;scrollbar-color:#304153 transparent}}
/* Controls and title: lavender and slate. Heatmap colors are unchanged. */
:root{--accent:#bba7fa;--border:#303246;--muted:#a19db4;--text:#eeeaf7}header h1{color:#ded2ff}.eyebrow{color:#bba7fa}button.primary{color:#241b3d}button{background:#222237;border-color:#40405a}input[type=number],select{background:#202033}aside{background:#11121e}h2{color:#d7ccec}.tabs{display:flex;gap:6px;padding:18px 0 0;position:sticky;top:0;background:#11121e;z-index:1}.tabs button{flex:1}.tabs [aria-selected=true]{background:#bba7fa;color:#241b3d;border-color:#bba7fa}[hidden]{display:none!important}.mean-key{font-size:11px;color:#b9b4ca;margin:16px 0 22px;display:flex;gap:7px;align-items:center}.mean-key>span{display:inline-block;width:8px;height:8px;background:#66eda3;border-radius:50%}.mean-key small{color:#f2c68c}.energy-panel{border:1px solid var(--border);border-radius:10px;padding:16px;margin:18px 0;background:#101623}.energy-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.energy-heading h2{margin:0}.energy-heading label{display:flex;align-items:center;gap:10px;font-size:12px}.energy-heading select{width:160px}#energy-canvas{margin-top:14px;width:100%;height:300px}.energy-panel .hint{margin:9px 0 0}@media(max-width:650px){aside{display:block}.tabs{position:static}.energy-heading{flex-wrap:wrap}}
/* Mobile and tablet interaction/layout. */
.mobile-only{display:none}#energy-toggle[aria-pressed=true]{background:var(--accent);color:#241b3d;border-color:var(--accent);box-shadow:inset 0 0 0 2px #e4d9ff}#energy-toggle[aria-pressed=true]::before{content:'✓ ';font-weight:800}#canvas-host{touch-action:auto}#defaultCanvas0{touch-action:auto}#controls-backdrop{position:fixed;inset:0;z-index:30;border:0;border-radius:0;background:#050810aa;width:100%;height:100%;padding:0}body.controls-open{overflow:hidden}.mean-key{flex-wrap:wrap}footer{flex-wrap:wrap}input[type=number]{max-width:100%}
@media(max-width:1000px){
 .mobile-only{display:block}header{padding:16px 18px;gap:12px}h1{font-size:24px}h1 span{font-size:13px;margin-left:10px}main{display:block}.workspace{padding:14px;min-width:0}.toolbar{gap:8px;align-items:center}.buttons{gap:6px;flex:1}.clock{flex-shrink:0}button{min-height:44px;padding:10px 12px}#controls-toggle{flex-shrink:0}.drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.drawer-heading h2{font-size:18px;margin:0}#controls-panel{display:none;position:fixed;inset:0 0 0 auto;width:min(380px,100%);height:100vh;height:100dvh;max-height:none;z-index:40;overflow-y:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top,0px) 20px max(20px,env(safe-area-inset-bottom));border-left:1px solid var(--border);border-right:0;background:#11121e;scrollbar-width:thin}body.controls-open #controls-panel{display:block}.tabs{position:sticky;top:0;padding:10px 0;background:#11121e}.row{font-size:13px}.row label{flex:1}input[type=number]{font-size:16px;width:95px;min-height:42px;padding:8px}select{font-size:16px;min-height:44px}input[type=range]{height:28px;margin:7px 0;touch-action:pan-y}.toggle{min-height:44px;font-size:14px;margin:4px 0}input[type=checkbox]{width:20px;height:20px}.control{margin:15px 0}section{padding:18px 0}.energy-panel{padding:12px}.energy-heading{flex-wrap:wrap}.energy-heading label{flex:1;justify-content:flex-end}.energy-heading select{width:auto;max-width:100%;flex:1}.guide summary{padding:8px 0;min-height:44px}.guide-grid{grid-template-columns:1fr}.legend{gap:8px}.legend-label{font-size:9px}.gradient{width:110px}.energy-panel .hint{font-size:11px}
}
@media(max-width:480px){
 header{padding:12px}h1 span{display:block;margin:3px 0 0}h1{font-size:22px}.eyebrow{font-size:8px;letter-spacing:1.2px}.workspace{padding:10px}.toolbar{flex-wrap:wrap}.buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;flex-basis:100%}.buttons button{font-size:11px;padding:8px 4px;min-width:0}#energy-toggle{grid-column:1/3}.clock{margin-top:-50px;margin-left:auto;pointer-events:none;min-height:44px;justify-content:center}.legend{margin-top:12px}#canvas-host{min-height:0}.mean-key{margin:12px 0 16px}.energy-heading label{flex-basis:100%;justify-content:flex-start}.energy-heading select{flex:1}.hint{line-height:1.5}
}