/* Generated copy of docs/design-system/icbe/pack/base.css (build_packs.py). Do not edit here. */
/* iCBE comic pack: base. Every rule sits inside :where() (zero specificity) so page classes win.
   Source of truth: docs/design-system/icbe/DESIGN.md. */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(body.aipage) {
  margin: 0;
  background: var(--ap-c-cream-50);
  color: var(--ap-c-ink);
  font-family: var(--ap-font-body);
  font-size: var(--ap-fs-body);
  line-height: var(--ap-lh-body);
}
:where(.aipage) :where(img, video, svg) { max-width: 100%; height: auto; }
:where(.aipage) :where(h1, h2, h3, h4) { font-family: var(--ap-font-headline); font-weight: 800; line-height: 1.15; margin: 0 0 16px; color: inherit; }
:where(.aipage) :where(p) { margin: 0 0 14px; }
:where(.aipage) :where(a) { color: var(--ap-c-red-600); }
:where(.aipage) ::selection { background: var(--ap-c-yellow-400); color: var(--ap-c-ink); }
:where(.aipage) :where(a, button, summary, input):focus-visible { outline: 3px solid var(--ap-c-cyan-500); outline-offset: 3px; }
:where(.ap-js .aipage) :where([data-ap-reveal]) { opacity: 0; transform: translateY(18px) rotate(-.5deg); transition: opacity .5s var(--ap-motion-ease-out), transform .5s var(--ap-motion-ease-out); }
:where(.ap-js .aipage) :where([data-ap-reveal].is-in) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  :where(.ap-js .aipage) :where([data-ap-reveal]) { opacity: 1; transform: none; transition: none; }
  :where(html) { scroll-behavior: auto; }
}