:root {
  color-scheme: dark;
  --background: #09110f;
  --surface: #14201c;
  --surface-hover: #24352c;
  --text: #eeeede;
  --text-muted: #afbbad;
  --border: #526254;
  --focus: #d8e5b4;
  --scrim: #030906cc;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --text-small: 12px;
  --text-body: 14px;
  --text-brand: 21px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --control-height: 44px;
  --stroke: 1px;
  --focus-stroke: 2px;
  --motion-duration: 360ms;
  --motion-ease: cubic-bezier(.2,.65,.3,1);
  font-family: var(--font-body);
  font-synthesis: none;
  background: var(--background);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
a:focus-visible, button:focus-visible, select:focus-visible, canvas:focus-visible {
  outline: var(--focus-stroke) solid var(--focus);
  outline-offset: var(--space-1);
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


html, body { width: 100%; height: 100%; overflow: hidden; }
body { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
#stage { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100svh; }
#scene { display: block; width: 100%; height: 100%; touch-action: manipulation; }
#scene:focus-visible { outline-offset: calc(-1 * var(--space-1)); }
.chrome { position: fixed; z-index: 2; left: var(--space-8); right: var(--space-8); display: flex; align-items: center; font-size: var(--text-small); }
/* Above the footer, so the open world list is never covered by it. */
nav.chrome { top: var(--space-6); z-index: 3; justify-content: space-between; }
.home-link { font-size: var(--text-brand); letter-spacing: -.04em; }
.chrome a { min-height: var(--control-height); display: inline-flex; align-items: center; }
.home-link, #worlds { text-shadow: 0 2px 12px var(--background); }
/* The world switcher: the current world's name opens a list of all of them, which scrolls when long. */
.world-switcher { position: relative; }
.chrome #worlds { display: inline-flex; align-items: center; gap: var(--space-2); padding-right: var(--space-3); }
#worlds svg { width: 16px; height: 16px; transition: transform var(--motion-duration) var(--motion-ease); }
#worlds[aria-expanded="true"] svg { transform: rotate(180deg); }
#world-list { position: absolute; top: calc(100% + var(--space-1)); right: 0; min-width: 100%; width: max-content; max-height: calc(100svh - 2 * var(--space-6) - var(--control-height) - var(--space-1)); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: var(--space-1); list-style: none; background: var(--scrim); }
#world-list a { width: 100%; padding: 0 var(--space-4); color: var(--text-muted); }
#world-list a:hover { color: var(--text); background: var(--surface-hover); }
#world-list a:focus-visible { outline-offset: calc(-1 * var(--focus-stroke)); }
#world-list [aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: var(--space-2); }
footer.chrome { bottom: var(--space-6); justify-content: space-between; gap: var(--space-4); }
.buttons, .preferences { display: flex; gap: var(--space-1); align-items: center; background: var(--scrim); padding: var(--space-1); }
.chrome button, .chrome select, #show-controls { min-height: var(--control-height); padding: 0 var(--space-4); border: 0; border-radius: 0; background: transparent; font-size: var(--text-small); }
.chrome .icon-button { width: var(--control-height); padding: 0; display: inline-grid; place-items: center; }
.icon-button svg { width: 20px; height: 20px; }
.chrome button:hover, .chrome select:hover, #show-controls:hover { background: var(--surface-hover); }
.chrome button:active, #show-controls:active { background: var(--surface); }
.chrome select { cursor: pointer; }
.chrome select option { background: var(--background); }
#show-controls { display: none; position: fixed; z-index: 3; bottom: var(--space-6); right: var(--space-8); background: var(--scrim); }
.clean .chrome { visibility: hidden; pointer-events: none; }
.clean #show-controls { display: block; }
.capture #show-controls { display: none; }
[data-motion="host"] .chrome, [data-motion="host"] #show-controls { display: none; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--background); pointer-events: none; z-index: 1; transition: opacity var(--motion-duration) var(--motion-ease); }
#loading p { font: 400 var(--text-body)/1.5 var(--font-body); color: var(--text-muted); }
#error { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; width: min(440px, calc(100% - var(--space-12))); padding: var(--space-8); background: var(--surface); border: var(--stroke) solid var(--border); font-size: var(--text-body); line-height: 1.6; }
#error a { text-decoration: underline; text-underline-offset: var(--space-1); }
@media (max-width: 600px) {
  .chrome { left: var(--space-4); right: var(--space-4); }
  nav.chrome { top: var(--space-3); }
  #world-list { max-height: calc(100svh - 2 * var(--space-3) - var(--control-height) - var(--space-1)); }
  footer.chrome { left: 50%; right: auto; width: max-content; max-width: calc(100% - var(--space-8)); transform: translateX(-50%); bottom: var(--space-4); align-items: center; flex-direction: column; gap: 0; background: var(--scrim); padding: var(--space-1); }
  .buttons, .preferences { background: transparent; padding: 0; }
  #show-controls { bottom: var(--space-4); right: var(--space-4); }
}


/* The betta is lit against pure black, and the page around it is the same black. */
:root { --background: #000; }
/* Drag orbits and pinch zooms, so the canvas takes every touch gesture itself. */
html:not([data-motion="host"]) #scene { touch-action: none; cursor: grab; }
html:not([data-motion="host"]) #scene.dragging { cursor: grabbing; }

nav.chrome{align-items:flex-start}.brand{display:grid;gap:5px}.brand strong{font-size:22px;font-weight:500}.brand small{font-size:12px;color:#a7b3bf}#observed{font-variant-numeric:tabular-nums}footer.chrome{flex-wrap:wrap}.tips{color:#a7b3bf;font-size:12px;padding:8px;background:#0009}.chrome button:not(.icon-button){border:1px solid #ffffff26;border-radius:7px}.buttons,.preferences{border-radius:10px}dialog{max-width:470px;width:calc(100% - 32px);background:#111a23;color:#e2ebf6;border:1px solid #425361;border-radius:18px;padding:25px;line-height:1.7}dialog::backdrop{background:#000b}dialog h2{margin-top:0}dialog button{min-height:44px;padding:8px 20px;background:#22404d;border:1px solid #467c8c;border-radius:8px}dialog a{text-decoration:underline}#fullscreen{display:none}@media(max-width:600px){nav.chrome{left:16px;right:16px}.brand strong{font-size:19px}.brand small{max-width:230px}.tips{max-width:330px;text-align:center}.preferences{gap:0}.chrome button,.chrome select{padding:0 12px}}