:root { font-family: Arial, Helvetica, sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #555; }
main { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px; }
#player-container { width: min(800px, 100%, calc((100svh - 100px) * 4 / 3)); aspect-ratio: 4 / 3; }
ruffle-player { display: block; width: 100%; height: 100%; }
#status { font-size: 11px; min-height: 13px; margin: 10px 0; text-align: center; }
nav { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
button, a { font: inherit; font-size: 12px; color: inherit; }
nav button { background: none; border: 0; padding: 5px 0; cursor: pointer; text-decoration: underline; }
body.dark { color: #bbb; }
:focus-visible { outline: 2px solid #91b86f; outline-offset: 4px; }
dialog { color: #333; max-width: min(480px, 90vw); border: 1px solid #bbb; padding: 24px; }
dialog::backdrop { background: #0008; }
dialog p { line-height: 1.6; overflow-wrap: anywhere; }
dialog button { display: block; margin-top: 20px; }
noscript { margin-top: 18px; text-align: center; }