/*
  Page shell only: the palette and the reset.

  Layout and every panel's look live in the components — `app.html` owns the grid,
  each child owns its own. These custom properties cross into them, so a component
  inherits the theme without knowing this file exists.
*/

:root {
  /*
    The reference's palette, read off the variables TypeDoc defines, so the theme
    switch in the docs sidebar drives this page too — there is no second switch here
    to disagree with it, and no `prefers-color-scheme` block either: TypeDoc's `os`
    theme already means "follow the system".

    `--accent` stays the demo's own. It marks what the page does, not what the site
    is, and the reference has no equivalent to borrow.
  */
  --bg: var(--color-background);
  --panel: var(--color-background-secondary);
  --border: var(--color-accent);
  --text: var(--color-text);
  --muted: var(--color-text-aside);
  --accent: #ff007f;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/*
  TypeDoc hides the toolbar links below 769px because its menu trigger takes over
  there. This page has no menu, so hiding them would leave no way back to the
  reference. Unlayered, so it wins.
*/
@media (max-width: 769px) {
  #tsd-toolbar-links {
    display: flex;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, sans-serif;
}