:root {
  --bg: #000;
  --handle: #00e5ff;
  --crown: #ffd400;
  --gap: 16px;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); overflow: hidden; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { position: fixed; inset: 0; pointer-events: none; }
.handle {
  position: absolute;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--handle);
  border-radius: 50%;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.handle.crown { border-color: var(--crown); }
#panel { position: fixed; top: var(--gap); right: var(--gap); width: 300px; max-height: calc(100% - 2 * var(--gap)); overflow-y: auto; }
@media (max-width: 600px) {
  #panel { left: var(--gap); width: auto; top: auto; bottom: var(--gap); max-height: 45%; }
}