:root { color-scheme: dark; background: #000; color: #fff; font-family: "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
#screen { position: fixed; inset: 0; background: #000; }
#screen img, #screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#status { position: fixed; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; background: #000; }
#status p { max-width: 40ch; line-height: 1.5; font-size: clamp(1rem, 2vw, 1.5rem); }
#status[hidden] { display: none; }
#fullscreen { position: fixed; right: 1rem; bottom: 1rem; border: 1px solid #aaa; border-radius: 4px; padding: .7rem 1rem; font: inherit; color: #fff; background: #171717; opacity: 0; cursor: pointer; }
body.controls #fullscreen, #fullscreen:focus-visible { opacity: 1; }
#fullscreen:hover { background: #333; }
#fullscreen:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
:fullscreen #fullscreen { display: none; }
::selection { color: #000; background: #fff; }