*{box-sizing:border-box}html,body{margin:0;font:14px/1.5 system-ui,sans-serif;background:#101a2b;color:#e2eaf3}main{max-width:1250px;margin:auto;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:600px;height:100vh}header{display:flex;justify-content:space-between;gap:12px;align-items:center}h1{font:600 18px/1.3 system-ui;margin:0}h2{font-size:12px;margin:0;padding:10px 12px;border-bottom:1px solid #2a3e57}a{color:#8dd3e5}#subtitle,#key{font-size:12px;color:#aebdd0;margin:3px 0 0}.plots{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;flex:1;min-height:240px}.panel{background:#0c1524;border:1px solid #2a3e57;border-radius:8px;display:flex;flex-direction:column;min-width:0;overflow:hidden}.canvas{flex:1;position:relative;min-height:0}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#controls{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;background:#19283d;padding:12px;border-radius:8px}label{font-size:12px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px}input{width:100%;accent-color:#67d4e6}.buttons{display:flex;gap:5px;flex-wrap:wrap}button{font:inherit;font-size:12px;border:1px solid #526984;border-radius:5px;background:#1a2b43;color:#dce8f4;padding:7px;cursor:pointer}button[aria-pressed=true]{background:#24697a;border-color:#67d4e6}button:focus-visible,input:focus-visible{outline:2px solid #fbbf24;outline-offset:2px}#readout{font-size:12px;line-height:1.65;margin:0;color:#eff5fb;font-variant-numeric:tabular-nums}details{font-size:12px;color:#b8c6d7}details a{color:#8dd3e5}@media(max-width:650px){main{height:auto;min-height:100vh;padding:10px}.plots{grid-template-columns:1fr;flex:none}.panel{height:255px}.panel:nth-child(2){height:230px}h1{font-size:16px}header a{font-size:11px}label{min-width:120px}#controls{gap:12px}.buttons{width:100%}}