/* Written by build.py from 00-05's website kit and era colours (ST-15, 00 L-24). Do not edit here:
   change 00-05 and build again. */
@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");
:root {
  --wum-display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --wum-body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wum-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wum-stage-bg: #07060A;
  --wum-stage-glass: rgba(16, 12, 11, 0.6);
  --wum-stage-glass-line: rgba(255, 236, 220, 0.14);
  --wum-stage-ink: #F3ECE4;
  --wum-stage-muted: #B5A99E;
  --wum-stage-accent: #E0825E;
  --wum-stage-focus: #E9C28E;
  --wum-card-bg: #F5F2EE;
  --wum-card-ink: #1D1B19;
  --wum-card-muted: #6A635C;
  --wum-card-rule: #E3DED7;
  --wum-card-accent: #B4502B;
  --wum-card-grey: #9A948D;
  --wum-real: #2A5FA8;
  --wum-real-soft: #E4ECF7;
  --wum-real-stage: #8DB8F2;
  --wum-real-fill: #2A5FA8;
  --wum-world: #7A5A0C;
  --wum-world-soft: #F6EDD6;
  --wum-world-stage: #E8C063;
  --wum-world-fill: #A67A12;
  --wum-art: #6A3F7C;
  --wum-art-soft: #EFE6F3;
  --wum-art-stage: #C4A6E0;
  --wum-art-fill: #7A4A8C;
  --wum-sea: #2F6FA0;
  --wum-sea-stage: #8ECDE6;
  --wum-era-ancient: #7A6034;
  --wum-era-ancient-stage: #D2B27A;
  --wum-era-today: #5A606A;
  --wum-era-today-stage: #B8BEC6;
  --wum-era-robots: #6F737A;
  --wum-era-robots-stage: #A3A8AE;
  --wum-era-crew: #2A5FA8;
  --wum-era-crew-stage: #7FA8E0;
  --wum-era-town: #2D7A71;
  --wum-era-town-stage: #6CC3B5;
  --wum-era-city: #B4502B;
  --wum-era-city-stage: #E88A62;
  --wum-era-far: #3E3A7A;
  --wum-era-far-stage: #A7A2E8;
}
/* The website kit's shared pieces (00-05 ST-15). build.py puts the colour and font tokens above this part.
   Step 1. The stage: the dark page every experience sits on.
   Step 2. Labels: the Real, Our world and Art chips, on the stage and on a light card.
   Step 3. The light card every fact sits on.
   Step 4. The navigation bar: home and every experience.
   Step 5. Era colours: a dot and a bar in each era's colour, for time controls. */

/* Step 1. The stage */
.wum-stage { background: var(--wum-stage-bg); color: var(--wum-stage-ink); font-family: var(--wum-body); }
.wum-stage :focus-visible { outline: 2px solid var(--wum-stage-focus); outline-offset: 2px; }
.wum-eyebrow { font: 500 11px/1.2 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wum-stage-muted); }

/* Step 2. Labels */
.wum-chip { display: inline-block; font: 500 10.5px/1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; background: transparent; }
.wum-chip.real { color: var(--wum-real-stage); }
.wum-chip.world { color: var(--wum-world-stage); }
.wum-chip.art { color: var(--wum-art-stage); }
.wum-card .wum-chip { border-color: transparent; }
.wum-card .wum-chip.real { color: var(--wum-real); background: var(--wum-real-soft); }
.wum-card .wum-chip.world { color: var(--wum-world); background: var(--wum-world-soft); }
.wum-card .wum-chip.art { color: var(--wum-art); background: var(--wum-art-soft); }

/* Step 3. The light card */
.wum-card { background: var(--wum-card-bg); color: var(--wum-card-ink); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
.wum-card :focus-visible { outline: 2px solid var(--wum-card-accent); outline-offset: 2px; }

/* Step 4. The navigation bar */
.wum-nav { display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--wum-stage-glass); border: 1px solid var(--wum-stage-glass-line); border-radius: 999px; padding: 3px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 500 12px/1 var(--wum-body); }
.wum-nav a { color: var(--wum-stage-muted); text-decoration: none; padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.wum-nav a:hover { color: var(--wum-stage-ink); }
.wum-nav a[aria-current="page"] { color: var(--wum-stage-ink); background: rgba(255, 240, 228, 0.14); }
.wum-nav a.wum-home { font: 600 12px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wum-stage-accent); }
.wum-nav::-webkit-scrollbar { display: none; }
@media (max-width: 440px) {                /* one row on a phone: tighter spacing, never wrapped */
  .wum-nav { font-size: 11px; }
  .wum-nav a { padding: 7px 8px; }
  .wum-nav a.wum-home { font-size: 11px; letter-spacing: 0.08em; }
}

/* Step 5. Era colours */
.wum-era-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wum-era-dot, var(--wum-stage-muted)); }