:root{color-scheme:light;font-family:system-ui,-apple-system,sans-serif;color:#111;background:#fff}body{margin:0}main{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:8px;box-sizing:border-box;gap:8px}.gauges-area{flex:1 1 auto;min-height:0;overflow-y:auto}h1{margin:8px 0;font-size:1.2rem}.controls{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.controls button{height:40px;padding:0 16px;font-size:1rem}.controls .status{font-size:.9rem;opacity:.7}.error{color:#b00;margin:8px 0;font-size:.9rem}.gauges{display:grid;grid-template-columns:max-content 1fr;column-gap:6px;row-gap:1px;align-items:center}.snapshot-row{display:contents}.snapshot-row .time{font-family:ui-monospace,SF Mono,Consolas,monospace;font-size:11px;color:#555;white-space:nowrap;text-align:right}.snapshot-row .time.aggregated{color:#999;font-style:italic}.snapshot-row .cells{display:grid;grid-template-columns:repeat(var(--cells-count, 32),1fr);gap:1px}.snapshot-row .cell{height:14px;border-radius:1px}.legend{flex:none;padding:6px 4px 4px;background:#fff;border-top:1px solid #eee}.legend-bar{height:12px;border-radius:2px}.legend-labels{position:relative;height:1.2em;margin-top:2px;font-size:11px;color:#555}.legend-labels span{position:absolute;transform:translate(-50%);white-space:nowrap}.legend-labels span:first-child{transform:translate(0)}.legend-labels span:last-child{transform:translate(-100%)}