@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/source-serif-4-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/source-serif-4-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/source-sans-3-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/source-sans-3-1.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/ibm-plex-mono-0.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/dm-sans-0.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/dm-sans-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/kalam-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/space-grotesk-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/space-grotesk-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/jost-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/jost-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/jost-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/inter-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/inter-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/inter-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/noto-serif-sc-0.ttf) format('truetype');
}
@font-face {
  font-family: 'ET Book';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/et-book-roman-line-figures.woff) format('woff');
}
@font-face {
  font-family: 'ET Book';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/et-book-display-italic-old-style-figures.woff) format('woff');
}
@font-face {
  font-family: 'ET Book';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/et-book-bold-line-figures.woff) format('woff');
}
:root {
  color-scheme:light;
  --bg:#fff;
  --ink:#171817;
  --muted:#555;
  --line:#ddd;
  --accent:#222;
  --sans:"Source Sans 3",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#141513;
    --ink:#edece6;
    --muted:#9ba094;
    --line:#2e322a;
    --accent:#5ba384;
  }
  :root:not([data-theme="light"]) .collection-menu {
    box-shadow:0 10px 30px #00000066;
  }
  html:not([data-theme="light"]) body {
    --bg:#151614;
    --ink:#edece6;
    --muted:#9ba094;
    --line:#2e322a;
  }
  :root:not([data-theme="light"]) .hand-note {
    background:#292416;
    color:#e8dca0;
    border:1px solid #4a4124;
  }
  :root:not([data-theme="light"]) img[src*="tufte"] {
    filter:invert(0.88) contrast(1.2);
  }
}

:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme:dark;
  --bg:#141513;
  --ink:#edece6;
  --muted:#9ba094;
  --line:#2e322a;
  --accent:#5ba384;
}
:root[data-theme="dark"] .collection-menu,
[data-theme="dark"] .collection-menu {
  box-shadow:0 10px 30px #00000066;
}
html[data-theme="dark"] body,
body[data-theme="dark"] {
  --bg:#151614;
  --ink:#edece6;
  --muted:#9ba094;
  --line:#2e322a;
}
:root[data-theme="dark"] .hand-note,
[data-theme="dark"] .hand-note {
  background:#292416;
  color:#e8dca0;
  border:1px solid #4a4124;
}
:root[data-theme="dark"] img[src*="tufte"],
[data-theme="dark"] img[src*="tufte"] {
  filter:invert(0.88) contrast(1.2);
}

:root[data-theme="light"] {
  color-scheme:light;
}

* {
  box-sizing:border-box;
}
html {
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
}
a {
  color:inherit;
  text-underline-offset:.2em;
  text-decoration-thickness:1px;
}
a:hover {
  text-decoration-thickness:2px;
}
a:focus-visible,summary:focus-visible,input:focus-visible,button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px;
}
button,input {
  font:inherit;
}
img {
  display:block;
  max-width:100%;
}
h1,h2,p,figure {
  margin:0;
}
h1 {
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.05;
  font-size:clamp(3rem,7vw,4.2rem);
}
h2 {
  font-size:1.35rem;
  line-height:1.25;
}
p {
  max-width:100%;
}
.sheet {
  max-width:1000px;
  padding:56px 64px 40px;
  margin:auto;
}

.overview-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.collection-nav {
  max-width:1000px;
  padding:22px 64px 0;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font:11px/1.5 var(--mono);
  color:var(--muted);
  letter-spacing:.04em;
}
.collection-nav>a {
  text-decoration:none;
}
.collection-nav-actions {
  display:inline-flex;
  align-items:center;
  gap:18px;
}
.collection-nav details {
  position:relative;
  z-index:2;
}
.collection-nav summary {
  cursor:pointer;
  min-height:30px;
  display:inline-flex;
  align-items:center;
}
.collection-menu {
  position:absolute;
  right:0;
  top:100%;
  width:260px;
  padding:16px 20px;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 10px 30px #00000012;
  display:grid;
  gap:2px;
}
.collection-menu a {
  padding:7px 0;
  min-height:32px;
}
.collection-menu [aria-current=page] {
  font-weight:bold;
  color:var(--ink);
}

.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  line-height:1;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
  flex-shrink:0;
}
.theme-toggle:hover {
  background:var(--line);
  color:var(--accent);
}
.theme-toggle:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.theme-toggle:active {
  transform:scale(0.92);
}
.theme-toggle svg {
  width:18px;
  height:18px;
  pointer-events:none;
}
.theme-toggle .theme-icon-sun {
  display:none !important;
}
.theme-toggle .theme-icon-moon {
  display:block !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-sun {
    display:block !important;
  }
  :root:not([data-theme="light"]) .theme-toggle .theme-icon-moon {
    display:none !important;
  }
}
:root[data-theme="dark"] .theme-toggle .theme-icon-sun,
[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display:block !important;
}
:root[data-theme="dark"] .theme-toggle .theme-icon-moon,
[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display:none !important;
}
:root[data-theme="light"] .theme-toggle .theme-icon-sun,
[data-theme="light"] .theme-toggle .theme-icon-sun {
  display:none !important;
}
:root[data-theme="light"] .theme-toggle .theme-icon-moon,
[data-theme="light"] .theme-toggle .theme-icon-moon {
  display:block !important;
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  padding:10px;
  background:var(--bg);
  z-index:20;
  transform:translateY(-160%);
}
.skip-link:focus {
  transform:translateY(0);
}
.eyebrow {
  font:12px/1.5 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}
.identity {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
}
.author {
  font-size:18px;
}
.hero>* {
  min-width:0;
}
.hero {
  display:grid;
  gap:24px;
  margin-bottom:36px;
}
.intro {
  font-size:19px;
  max-width:740px;
  line-height:1.5;
  color:var(--muted);
}
.subtitle {
  font-size:21px;
}
.scope {
  font-size:13px;
  color:var(--muted);
}
.principles {
  list-style:none;
  padding:0;
  margin:0;
}
.principles>li {
  break-inside:avoid;
}
.number {
  font:14px/1.5 var(--mono);
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.description {
  font-size:18px;
  line-height:1.5;
}
.copy {
  min-width:0;
}
.copy h2 {
  margin-bottom:8px;
}
.source {
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:32px;
  color:var(--muted);
  font-size:14px;
  display:grid;
  gap:10px;
}
.source>a {
  width:fit-content;
}
.source .eyebrow {
  font-size:11px;
}
.page-turn {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-top:28px;
  margin-top:28px;
  border-top:1px solid var(--line);
  font-size:13px;
}
.page-turn a {
  padding:8px 0;
  max-width:48%;
}
.page-turn a:last-child {
  text-align:right;
}
.cn {
  font-family:"Noto Serif SC","Songti SC",serif;
}
.diagram {
  margin:0;
}
.diagram img {
  width:100%;
  height:auto;
}
.diagram figcaption {
  margin-top:10px;
  font:12px/1.5 var(--mono);
  color:var(--muted);
}
@media(max-width:680px) {
  .sheet {
    padding:32px 24px;
  }
  .collection-nav {
    padding:18px 24px 0;
  }
  .identity {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .hero {
    gap:18px;
    margin-bottom:30px;
  }
  .intro {
    font-size:18px;
  }
  .subtitle {
    font-size:19px;
  }
  .page-turn {
    font-size:12px;
  }
  .collection-menu {
    width:min(260px,calc(100vw - 48px));
  }
}
@media print {
  .collection-nav,.page-turn,.skip-link,.theme-toggle {
    display:none;
  }
  .sheet {
    padding:0;
    max-width:none;
  }
  body {
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }
  .source {
    break-inside:avoid;
  }
  a {
    text-decoration:none;
  }
  .hero {
    break-inside:avoid;
  }
}