/* The reference format belongs to this page; the component layer stays portable. */
.ac-site .guide-index {
  padding: 26px 0 48px;
}
.ac-site .guide-index > p {
  margin-bottom: 18px;
}
.ac-site .guide-index ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ac-site .guide-index a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 3px 10px;
  padding: 18px 0;
  border-top: 1px solid var(--ac-line);
  min-height: 88px;
}
.ac-site .guide-index a > span {
  font: 11px/1.8 var(--ac-mono);
  color: var(--ac-accent);
}
.ac-site .guide-index a strong {
  font-size: 19px;
}
.ac-site .guide-index a small {
  grid-column: 2;
  color: var(--ac-muted);
  font-size: 14px;
}
.ac-site .guide-index a:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--ac-accent);
  text-underline-offset: 5px;
}
.ac-site .guide-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.ac-site .guide-principle {
  border-top: 3px solid var(--ac-ink);
  padding-top: 20px;
}
.ac-site .guide-principle h3 {
  font: 29px/1.15 var(--ac-display);
  margin: 13px 0;
}
.ac-site .guide-principle p:not(.eyebrow) {
  color: var(--ac-muted);
  font-size: 16px;
  line-height: 1.6;
}
.ac-site .guide-invariant {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  margin-top: 28px;
  padding: 23px 26px;
  background: var(--ac-ink);
  color: var(--ac-field);
  border-radius: 4px 22px 4px 4px;
}
.ac-site .guide-invariant strong {
  font: 12px/1.8 var(--ac-mono);
}
.ac-site .guide-invariant p {
  max-width: 75ch;
}
.ac-site .guide-definition {
  margin-bottom: 36px;
}
.ac-site .guide-definition > h3 {
  font: 28px/1.2 var(--ac-display);
  margin-bottom: 14px;
}
.ac-site .guide-definition > p {
  max-width: 80ch;
  color: var(--ac-muted);
  margin: 12px 0;
}
.ac-site .guide-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ac-line);
  border-radius: 4px;
  background: var(--ac-surface);
}
.ac-site .guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}
.ac-site .guide-table caption {
  text-align: left;
  padding: 18px;
  font: 12px/1.5 var(--ac-mono);
}
.ac-site .guide-table th,
.ac-site .guide-table td {
  padding: 16px 18px;
  vertical-align: top;
  border-top: 1px solid var(--ac-line);
}
.ac-site .guide-table thead th {
  font: 11px/1.5 var(--ac-mono);
  text-transform: uppercase;
  background: var(--ac-field);
}
.ac-site .guide-table tbody th {
  font-weight: 600;
}
.ac-site .guide-table td:last-child {
  color: var(--ac-muted);
}
.ac-site .guide-formulas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}
.ac-site .guide-formulas article {
  padding: 23px;
  background: var(--ac-surface);
  border: 1px solid var(--ac-line);
}
.ac-site .guide-formulas h3 {
  font-size: 19px;
  margin-bottom: 12px;
}
.ac-site .guide-formulas code {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}
.ac-site .guide-formulas p {
  font-size: 15px;
  color: var(--ac-muted);
}
.ac-site .guide-chapter {
  padding-top: 64px;
  border-top: 2px solid var(--ac-ink);
}
.ac-site .guide-chapter > .ds-section {
  border-top: 0;
  padding-top: 20px;
}
.ac-site .guide-chapter > .ds-section + .ds-section {
  border-top: 1px solid var(--ac-line);
  padding-top: 48px;
}
.ac-site .guide-chapter .section-heading h3 {
  font: clamp(30px, 4vw, 48px)/1.08 var(--ac-display);
  margin-top: 12px;
}
.ac-site .guide-chapter h4 {
  margin: 0;
  font-size: 20px;
}
.ac-site .guide-compositions {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  align-items: start;
}
.ac-site .guide-editorial {
  position: relative;
  isolation: isolate;
  padding: 35px 28px;
  background: var(--ac-surface);
  border: 1px solid var(--ac-line);
}
.ac-site .guide-editorial > .paint-mark {
  top: 24px;
  right: -8px;
  width: 110px;
  height: 65px;
  z-index: -1;
  transform: rotate(-12deg);
}
.ac-site .guide-editorial h3 {
  font: 46px/1.04 var(--ac-display);
  margin: 32px 0 20px;
  max-width: 8ch;
}
.ac-site .guide-editorial > p {
  max-width: 34ch;
}
.ac-site .guide-editorial .text-link {
  margin-top: 24px;
}
.ac-site .guide-pattern-note {
  color: var(--ac-muted);
  margin-top: 18px;
  font-size: 15px;
}
.ac-site .guide-records caption {
  font: 19px/1.3 var(--ac-body);
  font-weight: 600;
}
.ac-site .guide-records td:last-child {
  white-space: nowrap;
  color: var(--ac-success);
}
.ac-site .guide-records details {
  padding: 16px 18px;
  font-size: 14px;
  border-top: 1px solid var(--ac-line);
}
.ac-site .guide-records summary {
  cursor: pointer;
  min-height: 28px;
  font-weight: 600;
}
@media (max-width: 760px) {
  .ac-site .guide-index ol {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .ac-site .guide-index a strong {
    font-size: 17px;
  }
  .ac-site .guide-principles,
  .ac-site .guide-compositions,
  .ac-site .guide-formulas {
    grid-template-columns: 1fr;
  }
  .ac-site .guide-invariant {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px;
  }
  .ac-site .guide-table {
    font-size: 13px;
  }
  .ac-site .guide-table th,
  .ac-site .guide-table td {
    padding: 12px 10px;
  }
  .ac-site .guide-chapter {
    padding-top: 40px;
  }
}