/* Milky + Mantis: a cream meadow by day, a firefly forest by night. */
:root {
  --milky: #fffdf1;
  --mantis: #59c749;
  --mantis-deep: #3c9a2f;
  --forest: #0b1609;
  --forest-2: #13240f;
  --bg: var(--milky);
  --ink: #1b3216;
  --muted: rgb(27 50 22 / 0.6);
  --line: rgb(27 50 22 / 0.16);
  --card: #fffaea;
  --glow: rgb(89 199 73 / 0.22);
  --font: "Figtree", system-ui, sans-serif;
  --serif: "Young Serif", Georgia, serif;
  --mono: "Source Code Pro", "SF Mono", Menlo, monospace;
  color-scheme: light;
}

:root[data-theme="night"] {
  --bg: var(--forest);
  --ink: var(--milky);
  --muted: rgb(255 253 241 / 0.6);
  --line: rgb(255 253 241 / 0.14);
  --card: var(--forest-2);
  --glow: rgb(89 199 73 / 0.16);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(60vmax 45vmax at 50% 35%, var(--glow), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Normal (non-reel) mode: the component centred, with a small toolbar. */
.demo-page {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 48px 16px 120px;
}

.toolbar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
}

.toolbar a {
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
}

.toolbar a:hover, .toolbar a:focus-visible { background: var(--mantis); color: var(--forest); outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}