:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #b7d9ff; outline-offset: 6px; }
#viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.image a { display: block; border-radius: 50%; }
#reset-scene {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: 48px;
  height: 48px;
  border: 1px solid #666;
  border-radius: 50%;
  background: #242424;
  color: #eee;
}
#reset-scene svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
dialog {
  width: min(90vw, 540px);
  max-height: 80vh;
  padding: 30px;
  border: 1px solid #666;
  border-radius: 16px;
  background: #232426;
  color: #eee;
  user-select: text;
}
dialog::backdrop { background: #000b; }
dialog h2 { font-size: 24px; margin: 0 0 24px; }
dialog p, dialog li, dialog dl { font-size: 16px; line-height: 1.8; }
dialog p { margin: 18px 0; }
dialog dd { margin: 0 0 16px; }
dialog button { background: #eee; color: #222; padding: 12px 22px; border: 0; }
.multiline { white-space: pre-wrap; }
#notice { font-size: 14px; background: #382726; padding: 16px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}