:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101010; color: #eee; }
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 6px; }
header, footer { display: flex; align-items: center; gap: 8px; min-width: 0; }
h1 { font-size: 1rem; margin: 0 auto 0 0; }
nav { display: flex; gap: 4px; }
button, a { color: inherit; }
button { font: inherit; font-size: .875rem; background: #242424; border: 1px solid #777; border-radius: 4px; min-height: 44px; padding: 6px 10px; cursor: pointer; }
button[aria-pressed="true"] { background: #eee; color: #111; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
main { min-width: 0; min-height: 0; display: grid; place-items: center; }
#stage { background: #000; flex: none; }
#mount, #stage iframe, #stage > div { width: 100%; height: 100%; border: 0; display: block; }
[hidden] { display: none !important; }
#fallback { text-align: center; max-width: 40rem; padding: 4px; }
#fallback p { margin: 0 0 8px; }
footer { font-size: .75rem; }
#status { flex: 1; min-width: 0; }
footer a { text-align: right; }
footer button { min-height: 36px; }
@media (max-height: 360px) { header button { min-height: 32px; } footer button { min-height: 28px; } body { gap: 4px; } }
@media (max-width: 359px) { header { gap: 4px; } button { padding-inline: 7px; } }