:root {
  color-scheme: dark;
  --color-page: #b8b2a6;
  --color-surface: #f6f5f0;
  --color-surface-elevated: #ffffff;
  --color-text: #1c1d1f;
  --color-text-secondary: #3a3c40;
  --color-text-muted: #7a7c80;
  --color-text-on-page: #3a3c40;
  --color-text-inverted: var(--color-surface);
  --color-border: rgba(28, 29, 31, .14);
  --color-border-subtle: rgba(28, 29, 31, .08);
  --color-divider-strong: #1c1d1f;
  --color-accent: #1f3f7a;
  --color-accent-subtle: rgba(31, 63, 122, .1);
  --color-accent-contrast: #ffffff;
  --color-white: #ffffff;
  --color-menu-surface: var(--color-surface);
  --color-menu-text: var(--color-text);
  --color-menu-text-secondary: var(--color-text-secondary);
  --color-menu-text-muted: var(--color-text-muted);
  --color-menu-border: var(--color-border);
  --color-menu-border-subtle: var(--color-border-subtle);
  --color-menu-focus: var(--color-focus);
  --color-bg: var(--color-page);
  --color-surface-alt: var(--color-border-subtle);
  --color-primary: var(--color-accent);
  --color-primary-contrast: var(--color-accent-contrast);
  --color-die-face: #ffffff;
  --color-die-dot: #1c1d1f;
  --color-die-border: #1c1d1f;
  --color-success: #2a6f4a;
  --color-warning: #c77700;
  --color-error: #b00020;
  --color-focus: var(--color-accent);
  --color-focus-ring: var(--color-accent);
  --focus-ring-width: 3px;
  --background-page: url("data:image/svg+xml,%3csvg%20viewBox='0%200%20200%20200'%20xmlns='http://www.w3.org/2000/svg'%3e%3cfilter%20id='n'%3e%3cfeTurbulence%20type='fractalNoise'%20baseFrequency='0.65'%20numOctaves='3'%20stitchTiles='stitch'/%3e%3c/filter%3e%3crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.55'/%3e%3c/svg%3e"), var(--color-page);
  --background-page-size: 200px 200px, auto;
  --paper-shade-0: #f4f6f9;
  --paper-shade-1: #edf1f5;
  --paper-shade-2: #f7f9fb;
  --background-surface: var(--color-surface);
  --font-sans:
    "IBM Plex Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  --font-mono:
    "IBM Plex Mono",
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    monospace;
  --font-hand:
    "Caveat",
    "Kalam",
    cursive;
  --font-family-base: var(--font-sans);
  --font-family-display: var(--font-sans);
  --line-height-base: 1.5;
  --font-size-base: 16px;
  --font-size-sm: .875rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --max-content-width: 60ch;
  --page-padding: clamp(var(--space-2), 2vw, var(--space-4));
}
:root[data-theme=dark] {
  --color-page: #2a2622;
  --color-text-on-page: #f6f5f0;
  --color-surface: #e6e2d5;
  --color-surface-elevated: #ebe8dc;
  --color-text: #1c1d1f;
  --color-text-secondary: #3a3c40;
  --color-text-muted: #7a7c80;
  --color-text-inverted: var(--color-surface);
  --color-border: rgba(28, 29, 31, .16);
  --color-border-subtle: rgba(28, 29, 31, .08);
  --color-divider-strong: #1c1d1f;
  --color-accent: #22407d;
  --color-accent-subtle: rgba(34, 64, 125, .14);
  --color-accent-contrast: #ffffff;
  --color-die-face: #ffffff;
  --color-die-dot: #1c1d1f;
  --color-die-border: #1c1d1f;
  --color-menu-surface: #3a352e;
  --color-menu-text: #f6f5f0;
  --color-menu-text-secondary: #d4d3ce;
  --color-menu-text-muted: #a8a29b;
  --color-menu-border: rgba(246, 245, 240, .16);
  --color-menu-border-subtle: rgba(246, 245, 240, .08);
  --color-menu-focus: #9db8e8;
  --paper-shade-0: #e3dfd1;
  --paper-shade-1: #dcd8ca;
  --paper-shade-2: #e8e4d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-page: #2a2622;
    --color-text-on-page: #f6f5f0;
    --color-surface: #e6e2d5;
    --color-surface-elevated: #ebe8dc;
    --color-text: #1c1d1f;
    --color-text-secondary: #3a3c40;
    --color-text-muted: #7a7c80;
    --color-text-inverted: var(--color-surface);
    --color-border: rgba(28, 29, 31, .16);
    --color-border-subtle: rgba(28, 29, 31, .08);
    --color-divider-strong: #1c1d1f;
    --color-accent: #22407d;
    --color-accent-subtle: rgba(34, 64, 125, .14);
    --color-accent-contrast: #ffffff;
    --color-die-face: var(--color-white);
    --color-die-dot: var(--color-text);
    --color-die-border: var(--color-text);
    --color-menu-surface: #3a352e;
    --color-menu-text: #f6f5f0;
    --color-menu-text-secondary: #d4d3ce;
    --color-menu-text-muted: #a8a29b;
    --color-menu-border: rgba(246, 245, 240, .16);
    --color-menu-border-subtle: rgba(246, 245, 240, .08);
    --color-menu-focus: #9db8e8;
    --paper-shade-0: #e3dfd1;
    --paper-shade-1: #dcd8ca;
    --paper-shade-2: #e8e4d6;
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--background-page);
  background-size: var(--background-page-size);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}
body {
  display: flex;
  flex-direction: column;
}
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--page-padding);
}
main:has([r-component=culture-select-page]) {
  display: flex;
  flex-direction: column;
}
a {
  color: var(--color-accent);
}
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-text);
  color: var(--color-text-inverted);
  padding: var(--space-2) var(--space-4);
  z-index: 999;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}
button {
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
}
[r-component=app-bar] header {
  max-height: 4rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--page-padding);
}
[r-component=app-bar] a:not(.skip-link) {
  display: inline-flex;
  align-items: center;
}
#splash {
  z-index: 1000;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--background-page);
  background-size: var(--background-page-size);
  transition: opacity .24s ease;
}
#splash svg {
  width: clamp(4rem, 22vw, 6rem);
  height: auto;
  transform-origin: center;
  animation: splash-toss 1.3s cubic-bezier(.2, .8, .3, 1) infinite;
}
@keyframes splash-toss {
  0%, to {
    transform: rotate(-7deg) translateY(0);
  }
  50% {
    transform: rotate(7deg) translateY(-8%);
  }
}
.splash-message {
  margin: 0;
  max-width: 28ch;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-on-page);
}
#splash.is-dismissed {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #splash svg {
    animation: none;
  }
}