:root {
  color-scheme: light dark;
  --o009-paper: #fff;
  --o009-ink: #17212b;
  --o009-muted: #4c5b67;
  --o009-border: #b8c7d1;
  --o009-accent: #174f78;
  --o009-panel: #eef6fb;
}

html {
  scroll-behavior: smooth;
}

body {
  box-sizing: border-box;
  max-width: 82rem;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 3vw, 3rem) 4rem;
  color: var(--o009-ink);
  background: var(--o009-paper);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  line-height: 1.65;
}

body > p,
body > ol,
body > ul,
body > h1,
body > h2,
body > h3,
body > h4,
body > blockquote,
body > figure,
body > .unit,
body > .lab,
body > .component-attribution,
body > .edition-note,
main {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

blockquote {
  color: var(--o009-muted);
  border-left-color: var(--o009-border);
}

a {
  color: var(--o009-accent);
  text-underline-offset: 0.14em;
}

div.unit {
  color: var(--o009-ink);
  background: var(--o009-panel);
  border-color: var(--o009-border);
}

:not(pre) > code,
.component-attribution,
.edition-note {
  overflow-wrap: anywhere;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 0.2rem solid #d16a00;
  outline-offset: 0.18rem;
}

.component-attribution,
.edition-note,
.original-addition,
.exercise,
.hint,
.answer,
.solution,
.mastery-exercise,
.mastery-hint,
.mastery-answer,
.mastery-solution,
.assessment-problem,
.mastery-bindings,
.mastery-context {
  border: 1px solid var(--o009-border);
  border-radius: 0.45rem;
  padding: 0.85rem 1rem;
  margin-block: 1rem;
  background: var(--o009-panel);
}

.component-attribution {
  border-left: 0.35rem solid var(--o009-accent);
}

.edition-note {
  border-left: 0.35rem solid #8a5a00;
}

details {
  margin-block: 0.6rem;
}

.mastery-reader,
.assessment-reader {
  width: 100%;
}

.mastery-reader > .mastery,
.mastery-reader > .original-mastery,
.mastery-reader > .original-mastery-set,
.assessment-reader > .cumulative-assessment {
  max-width: 72rem;
  margin-inline: auto;
}

.mastery-reader details,
.assessment-reader details {
  border: 1px solid var(--o009-border);
  border-radius: 0.45rem;
  padding: 0.65rem 0.85rem;
  background: var(--o009-panel);
}

summary {
  cursor: pointer;
  font-weight: 650;
}

h2.reader-level-2 {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 125%;
}

h3.reader-level-3 {
  font-size: 100%;
}

h3.reader-level-3.chapter::before {
  content: counter(chapterCount) ". ";
}

h3.reader-level-3.chapter {
  counter-increment: chapterCount;
}

pre {
  overflow-x: auto;
  padding: 0.8rem;
  border-radius: 0.35rem;
  background: #18232d;
  color: #f4f7f9;
}

pre code {
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

table {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: 1rem;
  font-variant-numeric: tabular-nums;
}

th,
td {
  border: 1px solid var(--o009-border);
  padding: 0.45rem 0.6rem;
  text-align: right;
}

th,
table.data tr:nth-child(even) {
  color: var(--o009-ink);
  background: var(--o009-panel);
}

th:first-child,
td:first-child {
  text-align: left;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

@media (prefers-color-scheme: dark) {
  :root {
    --o009-paper: #111820;
    --o009-ink: #eef4f8;
    --o009-muted: #bdcbd4;
    --o009-border: #536875;
    --o009-accent: #85c9f4;
    --o009-panel: #182733;
  }
}

@media (max-width: 48rem) {
  body {
    padding-inline: 0.8rem;
  }

  .math.display {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .unit li,
  mjx-container[display="true"] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

}

@media print {
  :root {
    --o009-paper: #fff;
    --o009-ink: #17212b;
    --o009-muted: #4c5b67;
    --o009-border: #b8c7d1;
    --o009-accent: #174f78;
    --o009-panel: #eef6fb;
  }
}