html,body{margin:0;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;font-size:1em;text-size-adjust:100%;-webkit-text-size-adjust:100%}button,input,select,textarea{font:inherit}#legend{position:fixed;bottom:6px;left:12px;color:#cfd6df;opacity:.8}canvas{display:block}#mainCanvas{margin-left:430px;width:calc(100vw - 430px);height:100vh}#buttonPanel button{padding:4px 8px!important;margin:0;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;background-color:#4a90e2;color:#fff}#buttonPanel button:hover{background-color:#357abd}#overlay{position:fixed;top:0;left:0;width:430px;height:100vh;background:#fff;color:#111827;padding:.625em;line-height:1.4;z-index:1000;box-shadow:2px 0 8px #0000001a;display:flex;flex-direction:column;box-sizing:border-box}#buttonPanel{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-shrink:0}#plotPanel{width:100%;box-sizing:border-box;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;margin-bottom:8px;padding-left:0;padding-right:0}#plotPanel canvas{display:block;width:100%;height:120px;margin:0 0 4px;padding:0;box-sizing:border-box}#plotPanel canvas.last{margin-bottom:0}#overlay>div:last-of-type{flex-shrink:0;margin-bottom:0}#overlay .overlay-metrics>.metric-badge{margin-bottom:4px}#overlay b{color:#4a90e2;font-weight:600}#overlay span{color:#111827;font-weight:600}.overlay-metrics{display:flex;gap:6px;flex-wrap:wrap}.metric-badge{display:inline-block;min-width:50px;padding:2px 8px;border-radius:8px;background:#e5e7eb;color:#111827;font-weight:600;text-align:left}.metric-badge.fps{min-width:50px}.metric-badge.pidUpdates{min-width:180px}.metric-badge.force{min-width:80px}#fadeOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:2000}@media (orientation: portrait),(max-aspect-ratio: 3/4),(max-width: 900px){#overlay{top:auto;left:0;bottom:0;width:100vw;height:45vh;box-shadow:0 -2px 8px #0000001a}body{font-size:1.4em}#buttonPanel button{padding:4px 8px!important}#plotPanel{display:flex;flex-direction:column;align-items:center}#plotPanel canvas{width:100%;max-width:36em;margin-left:auto;margin-right:auto}}@media (max-width: 480px),(max-height: 600px){body{font-size:1.15em}}@media (min-width: 1400px){body{font-size:.8em}}#overlay label{line-height:1.4em;margin-right:.5em;vertical-align:middle}#overlay input,#overlay select,#overlay button{font-family:inherit;line-height:1.4em;padding:.45em .6em;margin:0;vertical-align:middle}#overlay .config-row,#overlay .row,#overlay .form-row{min-height:2.2em;display:flex;align-items:center;gap:.5em}