* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #111; color: #eee; font-family: monospace; overflow: hidden; }
canvas { display: block; }
#info {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.7); padding: 10px; border-radius: 4px;
  font-size: 13px; line-height: 1.6;
}
#info kbd { background: #333; padding: 1px 5px; border-radius: 3px; }
#crosshair {
  position: absolute; pointer-events: none;
  width: 16px; height: 16px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: rgba(255,80,80,0.6);
}
#crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
#crosshair::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
#tooltip {
  position: absolute; display: none;
  background: rgba(0,0,0,0.85); padding: 6px 10px; border-radius: 4px;
  font-size: 12px; pointer-events: none;
}
#controls {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.7); padding: 10px; border-radius: 4px;
  font-size: 13px;
}
#controls label { display: block; margin: 4px 0; }
#colorbar { margin-top: 8px; }
#colorbar .bar { height: 12px; border-radius: 2px; }
#colorbar .ticks { position: relative; height: 16px; font-size: 10px; color: #aaa; }
#colorbar .ticks span { position: absolute; transform: translateX(-50%); }
#version {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.7); padding: 6px 10px; border-radius: 4px;
  font-size: 11px;
}
#version a { color: #8cf; text-decoration: none; }
#version a:hover { text-decoration: underline; }