body{margin:0;background:#000;color:#eee;font-family:Manrope,sans-serif;font-size:13px;height:100vh;overflow:hidden;display:flex;flex-direction:column;}
  .wrap{display:flex;flex:1;min-height:0;}
  .charts{flex:1;display:flex;flex-direction:column;border-right:1px solid #1a1a1a;}
  .panel{flex:1;position:relative;border-bottom:1px solid #1a1a1a;}
  .panel:last-child{border-bottom:none;}
  canvas{width:100%;height:100%;display:block;}
  .side{width:340px;padding:14px;overflow-y:auto;background:#080808;}
  .side h3{margin:0 0 8px;font-size:11px;color:#888;text-transform:uppercase;letter-spacing:1px;}
  .ctrl{margin-bottom:14px;}
  select,input{width:100%;background:#181820;color:#eee;border:1px solid #2a2a2a;
    border-radius:4px;padding:6px 8px;font-family:inherit;}
  .stat-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #14141a;}
  .stat-row .l{color:#888;}
  .stat-row .v{font-variant-numeric:tabular-nums;}
  .legend{position:absolute;top:10px;left:14px;font-size:11px;color:#aaa;
    background:rgba(0,0,0,0.5);padding:4px 8px;border-radius:3px;}
  .legend span{margin-right:14px;}
  .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;margin-right:4px;}
  .panel-title{position:absolute;top:8px;right:14px;font-size:11px;color:#666;
    text-transform:uppercase;letter-spacing:1px;}
  .green{color:#00e676;}
  .red{color:#ff5252;}
  .cyan{color:#60a5fa;}
  .pink{color:#ec4899;}