* { box-sizing: border-box; color: inherit; font-size: inherit; font-family: inherit; -webkit-tap-highlight-color: transparent }


button { border: none }
button:hover { cursor: pointer; filter: brightness(1.2) }


body { display: flex; margin: 0; max-width: 100vw; position: relative; flex-grow: 1; justify-content: center; font-family: rubik, sans-serif; color: var(--color); align-items: center; gap: 1em; overflow: hidden }


canvas { max-width: calc(100vw - 1em); max-height: calc(100% - 1em); flex-shrink: 1; border: .1em solid var(--bd-canvas); border-radius: .25em }
.pane { display: flex; width: 15em; position: absolute; background: var(--bg-pane); border: .1em solid var(--bd-pane); height: 100%; transition: .1s; flex-direction: column }
.pane > .title { display: flex; padding: .5em 1em; background: var(--bg-pane-title); justify-content: space-between; align-items: center }
.pane > .title h2 { margin: 0; font-weight: normal; text-transform: uppercase }
.pane > .title .close { aspect-ratio: 1; background: inherit; border-radius: .25em }
.pane > .wrapper { min-height: 0 }

#debug { left: -16em }
#debug.active { left: 0 }
#tools { right: -16em }
#tools.active { right: 0 }

@media (min-width: 1400px) {
    #debug:not(.active), #tools:not(.active) { display: none; position: unset }
    #debug, #tools { position: unset }
}