* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #030814; color: #e4edf0; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
main { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
header { position: fixed; z-index: 2; top: 24px; left: 28px; letter-spacing: .16em; pointer-events: none; }
header p { margin: 6px 0 0; color: #829fae; letter-spacing: normal; }
#status { position: fixed; inset: 50% 20px auto; text-align: center; pointer-events: none; }
.lil-gui.root { top: 20px; right: 28px; max-height: calc(100dvh - 110px); }
.lil-gui.root, .lil-gui.root .lil-gui { --background-color: #0c2033; --text-color: #b1d4e4; --title-background-color: #0c2033; --title-text-color: #b1d4e4; --widget-color: #17324a; --hover-color: #23445e; --focus-color: #315a73; --number-color: #71dcff; --string-color: #71dcff; --font-size: 11px; }
.lil-gui.root > .children { overflow-y: auto; max-height: calc(100dvh - 160px); }
.lil-gui.root, .lil-gui.root * { text-transform: uppercase; }
@media (max-width: 600px) {
  header { left: 16px; top: 20px; font-size: 10px; }
  header p { font-size: 9px; }
  .lil-gui.root { right: 16px; top: 78px; }
}