:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.4;
}

.container { max-width: 980px; margin: 0 auto; padding: 1rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #000; color: #fff; padding: .5rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 9999; }

.site-header { border-bottom: 1px solid #6666; }
.site-title a { text-decoration: none; }

.nav { list-style: none; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.nav a { text-decoration: underline; }

.breadcrumbs { margin: .75rem 0; }
.prewrap { white-space: pre-wrap; word-break: break-word; border: 1px solid #6666; padding: .75rem; border-radius: .6rem; }

.button, button.button {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid currentColor;
  border-radius: .6rem;
  text-decoration: none;
  background: transparent;
}

.button.secondary { opacity: .85; }

.field { margin: 1rem 0; }
label { display: block; font-weight: 600; margin-bottom: .25rem; }
input, textarea {
  width: 100%;
  padding: .6rem;
  border-radius: .5rem;
  border: 1px solid #6666;
}

.actions { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.actions .button { margin: 0; }

.messages .msg { padding: .75rem; border-radius: .6rem; margin: .5rem 0; }
.messages .success { border: 1px solid #3a3; }
.messages .error { border: 1px solid #c33; }

.card-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.card { border: 1px solid #6666; border-radius: .8rem; padding: 1rem; }
.muted { opacity: .85; }
.help { opacity: .85; margin-top: .4rem; }

.list { padding-left: 1.25rem; }
.scene-item { margin: 1rem 0; }
.scene-title { margin: 0.25rem 0; }

:focus { outline: 3px solid currentColor; outline-offset: 2px; }