:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #101414; }
#scene { width: 100%; height: 100%; display: block; }
nav { position: fixed; top: 50%; right: 10px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.modes { display: flex; flex-direction: column; gap: 3px; }
nav button, nav a { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #ffffff45; border-radius: 8px; background: #111a1acc; color: white; text-decoration: none; font: 20px system-ui; cursor: pointer; }
nav button[aria-pressed="true"] { background: #edfaff; color: #12252b; border-color: #edfaff; }
nav button:hover, nav a:hover { border-color: white; }
button:focus-visible, a:focus-visible { outline: 2px solid #76e7ff; outline-offset: 3px; }
dialog { max-width: 360px; border: 1px solid #ffffff40; border-radius: 14px; padding: 24px; background: #152023; color: #fff; }
dialog::backdrop { background: #0008; }
dialog p { margin: 0 0 20px; line-height: 1.5; }
#help { max-width: 390px; max-height: 90dvh; overflow-y: auto; font-size: 14px; }
#help h2 { margin: 0 0 16px; font-size: 20px; }
#help h3 { margin: 0; font-size: 16px; }
#help svg { width: 100%; height: 120px; color: #a5e9e6; }
#help ul { padding-left: 18px; margin: 8px 0 16px; line-height: 1.8; }
dialog button { border: 0; border-radius: 7px; padding: 10px 16px; font: inherit; background: #e4faff; color: #102027; cursor: pointer; }