* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #f8faf5;
  color: #171815;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

.notes-article {
  min-height: 100dvh;
  padding: 76px 24px 90px;
}

.notes-paper {
  width: min(100%, 620px);
  min-height: calc(100dvh - 166px);
  margin: 0 auto;
  padding: 18px 20px 70px;
}

.notes-article-back {
  position: fixed;
  top: 18px;
  left: 20px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #171815;
  text-decoration: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(23, 24, 21, .12);
  backdrop-filter: blur(12px);
}

.notes-article-title {
  margin: 0;
  color: #171815;
  font: 700 clamp(28px, 4vw, 38px)/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  letter-spacing: -.7px;
}

.notes-article-rule {
  width: 100%;
  height: 1px;
  margin: 22px 0 24px;
  background: rgba(23, 24, 21, .18);
}

.notes-article-body a {
  color: #718052;
  text-decoration: underline;
  text-decoration-color: rgba(113, 128, 82, .45);
  text-underline-offset: 3px;
}

.notes-article-body a:hover { color: #53653a; }

.aion-term {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: underline dotted #718052;
  text-underline-offset: 3px;
  cursor: help;
}

.aion-term::after {
  content: attr(data-definition);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 10;
  width: min(300px, 78vw);
  padding: 10px 12px;
  color: #f8faf5;
  background: #30342b;
  border: 1px solid rgba(194, 207, 166, .35);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(20, 25, 17, .22);
  font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity .16s ease, transform .16s ease;
}

.aion-term:hover::after,
.aion-term:focus-visible::after,
.aion-term.is-open::after { opacity: 1; transform: translate(-50%, 0); }

.aion-term:focus-visible { outline: 2px solid #718052; outline-offset: 3px; }

.notes-article-body {
  white-space: normal;
  color: #252620;
  font: 400 18px/1.58 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  letter-spacing: -.05px;
}

.notes-article-body p {
  margin: 0 0 1.05em;
}

.notes-article-body h2 {
  margin: 1.45em 0 .62em;
  color: #171815;
  font: 700 clamp(22px, 3vw, 29px)/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  letter-spacing: -.35px;
}

@media (max-width: 640px) {
  .notes-article { padding: 68px 18px 56px; }
  .notes-paper { min-height: calc(100dvh - 124px); padding: 14px 3px 50px; }
  .notes-article-title { font-size: clamp(27px, 8vw, 34px); }
  .notes-article-body { font-size: 17px; line-height: 1.58; }
  .notes-article-back { top: 15px; left: 15px; }
}

@media (prefers-color-scheme: dark) {
  html, body { background: #252624; color: #c2c0b6; }
  .notes-article-title, .notes-article-body, .notes-article-body h2 { color: #c2c0b6; }
  .notes-article-rule { background: rgba(194, 192, 182, .2); }
  .notes-article-back { color: #c2c0b6; background: rgba(47, 48, 46, .86); border-color: rgba(194, 192, 182, .18); }
}