#performance-panel {
  position: absolute; right: 64px; bottom: 56px; z-index: 6;
  width: 244px; max-width: calc(100% - 76px); max-height: calc(100% - 68px);
  display: flex; flex-direction: column; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid rgba(151, 201, 222, .35); border-radius: 7px;
  background: rgba(5, 28, 35, .94); color: #e8f4f6;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .28);
  font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
#performance-panel[hidden] { display: none; }
#performance-panel .perf-head, #performance-panel #perf-values > div {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#performance-panel .perf-head { color: #9edfff; letter-spacing: .08em; margin-bottom: 7px; }
#performance-panel #perf-values { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#performance-panel h3 { margin: 12px 0 6px; color: #9edfff; font-size: 12px; letter-spacing: .08em; }
#performance-panel #perf-values > div { padding: 2px 0; }
#performance-panel output { color: #fff; font-weight: 600; }
#performance-panel p { margin: 8px 0; color: #b8ced3; font-size: 11px; line-height: 1.35; }
#performance-panel button {
  border: 1px solid #6c9db1; border-radius: 4px; background: transparent;
  color: #e8f4f6; cursor: pointer; font: inherit;
}
#performance-panel button:hover, #performance-panel button:focus-visible { background: #205264; }
#perf-toggle { min-width: 22px; height: 22px; }
#perf-copy { width: 100%; padding: 4px; }
#performance-panel.collapsed { width: auto; }
#performance-panel.collapsed .perf-head { margin: 0; }
#performance-panel.collapsed #perf-values { display: none; }
@media (max-width: 700px) {
  #performance-panel {
    position: fixed; bottom: 128px;
    max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
  }
}