html, body { height: 100%; margin: 0; background: #111; color: #ddd; }
header { padding: 10px 12px; border-bottom: 1px solid #2a2a2a; }
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.row.small { margin-top: 6px; font-size: 12px; opacity: 0.9; }
main { position: relative; height: calc(100% - 70px); }
canvas#gl, canvas#overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
label { display: flex; gap: 8px; align-items: center; }
label.iters {
  display: grid;
  grid-template-columns: auto 3ch 1fr;
  gap: 8px;
  align-items: center;
  width: 50vw;
}
.lineBreak { flex-basis: 100%; height: 0; }
label.iters .readout {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
label.iters input[type="range"] {
  width: 100%;
}
input[type="range"] { width: 400px; }
button, select { background: #222; color: #ddd; border: 1px solid #333; padding: 6px 10px; }
button:hover { border-color: #666; cursor: pointer; }