/* ============================================================
   FOUNDATIONS — base.css
   Reset + body type. Every page loads tokens.css, then this.
   Components add their own files; nothing component-shaped
   belongs here.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--font-base);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: inherit; }

/* In an iframe the host owns scrolling; never show a bar. */
html.sy-embedded, html.sy-embedded * { scrollbar-width: none; }
html.sy-embedded *::-webkit-scrollbar { display: none; }
/* ?present=1 (theme.js): a jam on a presentation slide shows its switches and directions, not its title and brief */
html.sy-present .page > .brief, html.sy-present .page > .top > h1 { display: none; }
/* In an iframe the host owns the theme (theme.js listens for it), so a jam's own Light/Dark switch steps aside */
html.sy-embedded #themeSeg { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}