/* Structure shared by all variants. Variants set colours via --bg/--fg/--muted/--accent on body. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); font-family: system-ui, sans-serif;
  transition: background-color 4s ease, color 4s ease;
}
button { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Design-preview tab bar */
.tabs { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; padding: 6px 16px; font: .875rem/1.2 system-ui, sans-serif; border-block-end: 1px solid rgba(127, 127, 127, .25); background: color-mix(in srgb, var(--bg) 80%, transparent); }
.tabs-note { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 0.875rem; }
.tabs ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.tabs a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-block-end: 2px solid transparent; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .tabs a:hover { color: var(--fg); } }
.tabs a[aria-current="page"] { color: var(--fg); border-block-end-color: currentColor; }
.skip { position: absolute; inset-inline-start: 8px; top: -80px; z-index: 10; padding: 12px 16px; background: var(--fg); color: var(--bg); text-decoration: none; }
.skip:focus { top: 8px; }
main:focus { outline: none; }

/* Stage */
.stage { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage > header, .stage > main, .stage > footer { position: relative; }
.nojs { margin: 15vh auto; max-width: 40ch; padding: 0 24px; text-align: center; line-height: 1.6; }

.hdr { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.hdr-right { display: flex; align-items: center; gap: 20px; }
.lang { position: relative; min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lang:focus-within { outline: 2px solid currentColor; outline-offset: 3px; }
.lang select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 1rem; } /* 16px: iOS zooms smaller form fields on focus */
.lang option { color: #16202B; background: #fff; font-size: 1rem; }
.jump { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; text-decoration: none; position: relative; }
.jump:hover { color: var(--fg); }
.sound { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; color: inherit; cursor: pointer; }

.main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.theme { margin: 0; text-wrap: balance; }
.label, .sub { text-wrap: pretty; }
.count { font-variant-numeric: tabular-nums; margin: 0; line-height: 1; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.btn { min-width: 2.75rem; background: transparent; color: inherit; cursor: pointer; }
.note { margin: 0; }

.ftr { display: flex; flex-direction: column; }
.steps { list-style: none; margin: 0; padding: 0; }
.safe { margin: 0; text-wrap: pretty; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.about-btn { min-height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.about { position: relative; width: 100%; max-width: 44rem; margin: 0 auto; padding: 1rem 1.5rem 2.5rem; }
.about-title, .do-title { margin: 0; }
.story, .do-body { margin: 0 0 1rem; text-wrap: pretty; overflow-wrap: break-word; }
.cal-link { display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  body, .btn, .stage * { transition: none !important; }
}
/* In-page "pause animation" (body.still) */
.still, .still * { transition: none !important; }

/* No palette fade on first paint (removed by app.js after the first variant mounts) */
.boot, .boot * { transition: none !important; }