* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #25291e; color: #e5e7ce; 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; outline: none; }
canvas:active { cursor: grabbing; }
canvas:focus-visible { outline: 1px solid #c8d3ac; outline-offset: -4px; }
header { position: fixed; z-index: 2; top: 24px; left: 28px; letter-spacing: .16em; pointer-events: none; text-shadow: 0 1px 12px #14201099; }
header p { margin: 6px 0 0; color: #d4d9b5aa; letter-spacing: normal; }
#status { position: fixed; inset: 50% 24px auto; text-align: center; pointer-events: none; letter-spacing: .05em; }
#focus-mark { position: fixed; width: 26px; height: 26px; margin: -13px; border: 1px solid #eef1d899; border-radius: 50%; pointer-events: none; transition: opacity .4s; }
.lil-gui.root { top: 20px; right: 28px; max-height: calc(100dvh - 110px); }
.lil-gui.root, .lil-gui.root .lil-gui { --background-color: #242b21ed; --text-color: #d0d8bc; --title-background-color: #30392ade; --title-text-color: #e0e6ce; --widget-color: #3d4933; --hover-color: #4b5a3c; --focus-color: #586745; --number-color: #c8dc9d; --string-color: #c8dc9d; --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; }
}