/* Styles shared by the Circles demo pages. */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fg: #1d1d1f;
  --muted: #6b6b70;
  --accent: #e8590c;
  --panel: rgba(255, 255, 255, 0.9);
  --border: #dcdce0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font: 15px / 1.45 var(--font);
  color: var(--fg);
  background: #fff;
}

a {
  color: var(--accent);
}

code,
pre,
kbd {
  font-family: var(--mono);
  font-size: 0.9em;
}

kbd {
  padding: 0 0.3em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 0.25em;
  background: #f6f6f8;
}

/* The element the visualization is embedded in; the page is its viewport. */
#visualization {
  height: 100%;
}

/* A short explanation floating over the visualization. */
.note {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  max-width: 24rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--panel);
  backdrop-filter: blur(6px);
  font-size: 0.9rem;
}

.note p {
  margin: 0 0 0.5em;
}

.note p:last-child {
  margin-bottom: 0;
}