:root {
  color-scheme: dark;
  --bg: #121411; --fg: #dfe3d6; --dim: #959b8c; --line: #30352c; --accent: #c9d9b0;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 system-ui, sans-serif; }
main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 48px; }
.stage { margin: 0; }
/* The drawing is 4888 × 3232; keep its shape and fit it to the window. */
#view, #fallback {
  display: block; width: min(100%, calc((100vh - 120px) * 4888 / 3232)); aspect-ratio: 4888 / 3232;
  margin: 0 auto; background: #e6ead9; border-radius: 4px;
}
.about { max-width: 68ch; margin: 20px auto 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }
.meta { color: var(--dim); margin: 2px 0 12px; }
p { margin: 0 0 12px; }
a { color: var(--accent); }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.medium { margin: -6px 0 16px; }
.statement { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line); font-style: italic; }
.credits, .note { color: var(--dim); font-size: .9rem; }
button {
  font: inherit; color: var(--fg); background: #232820; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 18px; cursor: pointer;
}
button:disabled { cursor: default; color: var(--dim); }
button:not(:disabled):hover { border-color: var(--accent); }