#performance-hud {
  position:fixed; left:18px; top:232px; z-index:110;
  width:318px; max-width:calc(100vw - 16px); box-sizing:border-box;
  padding:10px 12px; border:1px solid #477f7b; border-top:2px solid #65e4d3;
  border-radius:6px; background:rgba(5,17,23,.94); color:#d7e8e5;
  font:11px/1.4 Consolas,ui-monospace,monospace; font-variant-numeric:tabular-nums;
  letter-spacing:0; text-shadow:none; pointer-events:none; contain:layout paint;
}
#performance-hud[hidden] { display:none; }
.perf-heading { display:flex; justify-content:space-between; align-items:center; gap:6px;
  cursor:move; touch-action:none; pointer-events:auto; color:#74e8d7; }
.perf-heading strong { font-size:10px; letter-spacing:.12em; }
.perf-actions { display:flex; gap:4px; }
#performance-hud button { margin:0; padding:2px 5px; width:auto; min-height:22px;
  border:1px solid #416363; border-radius:3px; background:#132b30; color:#cde7e3;
  font:10px/1.3 Consolas,monospace; cursor:pointer; pointer-events:auto; box-shadow:none; }
#performance-hud button:hover,#performance-hud button:focus-visible { background:#244b50; outline:1px solid #74e8d7; }
.perf-summary { display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin:3px 0; }
.perf-fps { font-size:25px; line-height:1.1; color:#74e8d7; }
.perf-fps small { font-size:10px; color:#b2cbc7; }
.perf-window { font-size:10px; text-align:right; color:#b2cbc7; }
.perf-window,.perf-drop,.perf-context { white-space:pre-line; }
#performance-chart { width:100%; height:66px; margin:3px 0; }
.perf-timing { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px 8px; margin:5px 0; font-size:10px; }
.perf-timing span { color:#9cb8b4; white-space:nowrap; }
.perf-timing b { color:#e1eeeb; font-weight:400; float:right; }
.perf-counts,.perf-context { font-size:10px; color:#bbd1cd; }
.perf-drop { margin-top:5px; padding-top:5px; border-top:1px solid #315052; color:#ffba79; font-size:10px; min-height:28px; }
.perf-note { color:#8fa8a6; font-size:9px; margin-top:3px; }
@media (max-height:620px) { #performance-hud { top:100px; } }
@media (max-width:600px) { #performance-hud { left:8px; top:110px; width:290px; } }