:root {
  --paper: #fcfdfe;
  --tint: #f3f6fa;
  --ink: #1f2937;
  --text: #465261;
  --blue: #7592aa;
  --deep-blue: #315f84;
  --line: #dde5ec;
  --surface: #fff;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --comic: "Comic Sans MS", "Comic Sans", "Comic Neue", cursive;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: #eef1f5; font: 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:not(:disabled) { cursor: pointer; }
a { color: var(--deep-blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--deep-blue); outline-offset: 5px; }
[hidden] { display: none !important; }
.container { width: min(100%, 1200px); padding-inline: 28px; margin-inline: auto; }
.wide-container { width: min(100%, 1460px); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.space-heading { text-align: center; padding: 22px 16px 8px; }
.space-heading h1 { font: 700 30px var(--serif); color: var(--deep-blue); margin: 0 0 8px; }
.space-heading p { margin: 0; font-size: 14px; }
.space-heading a { font-size: 13px; }
.space-links { display: flex; justify-content: center; gap: 20px; margin-top: 12px; }
#teaser { min-height: 0; padding: 20px 12px 28px; border: 0; }
#teaser .wide-container { width: 100%; max-width: 1500px; padding: 0; }
.demo-view > figcaption > span { font-family: var(--comic); }

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