html, body { margin: 0; height: 100%; background: #000; }
body { display: flex; flex-direction: column; overflow: hidden; }
.back { flex: none; align-self: flex-start; padding: 8px 14px; color: #9aa3bd; font: 600 13px/1.2 system-ui, sans-serif; text-decoration: none; }
.back:hover, .back:focus-visible { color: #fff; }
#screen { display: block; margin: auto; image-rendering: pixelated; image-rendering: crisp-edges; }

#debug { position: fixed; top: 8px; right: 8px; width: 300px; max-height: calc(100% - 16px); overflow: auto; padding: 10px 12px; border-radius: 8px; background: #0b0f1fe6; color: #e6e9f5; font: 12px/1.4 ui-monospace, Menlo, monospace; }
#debug h2 { margin: 0 0 8px; font-size: 13px; }
#debug h2 small { color: #8a93b5; font-weight: 400; }
#debug .stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 10px; }
#debug dt { color: #8a93b5; }
#debug dd { margin: 0; text-align: right; }
#debug label { display: grid; grid-template-columns: 1fr 96px 44px; align-items: center; gap: 6px; margin: 3px 0; }
#debug label.toggle { grid-template-columns: auto 1fr; }
#debug select { grid-column: 2 / 4; }
#debug output { text-align: right; }
#debug .buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#debug button { padding: 4px 8px; border: 1px solid #3a4468; border-radius: 4px; background: #1a2140; color: inherit; font: inherit; cursor: pointer; }