* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #c9b8b5; color: #3d343a; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
[hidden] { display: none !important; }
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: #73656b; letter-spacing: normal; }
#status { position: fixed; inset: 50% 20px auto; text-align: center; pointer-events: none; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 8px 12px; margin-left: 8px; border-left: 1px solid #77646a44; text-transform: uppercase; letter-spacing: inherit; }
button:hover { color: #21151d; }
button:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.lil-gui.root { top: 20px; right: 28px; max-height: calc(100dvh - 110px); }
.lil-gui.root, .lil-gui.root .lil-gui { --background-color: #c7bfd2; --text-color: #554b61; --title-background-color: #c0b6cc; --title-text-color: #554b61; --widget-color: #b9adc6; --hover-color: #b1a2bf; --focus-color: #a594b5; --number-color: #5d4774; --string-color: #5d4774; --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; }
}