/* Keep the guide inside the shared page frame, with readable text in both themes. */
.about-page {
  --about-text: #c3cbd0;
  --about-heading: #eef2f4;
  --about-border: #4b5357;
  --about-note: #25353d;
  color: var(--about-text);
  font-size: 16px;
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.about-page :is(h1, h2, strong, dt) { color: var(--about-heading); }
.about-page h1 { font-size: 24px; line-height: 1.4; }
.about-page .about-lead { color: var(--about-heading); font-size: 18px; font-weight: 500; }
.about-page p { margin: 12px 0 0; }
.about-page section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--about-border); }
.about-page h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.5; }
.about-page :is(ul, dl) { margin: 12px 0 0; }
.about-page ul { padding-left: 24px; }
.about-page li + li { margin-top: 8px; }
.about-page .about-status-list > div + div { margin-top: 18px; }
.about-page dt { font-weight: 500; }
.about-page dd { margin: 6px 0 0; }
.about-page .addtag { display: inline-block; margin: 0 6px 0 0; padding: 2px 6px; font-size: 13px; line-height: 1.5; vertical-align: middle; }
.about-page .about-note { margin-top: 18px; padding: 14px 16px; background: var(--about-note); border-left: 3px solid #59808f; border-radius: 3px; }
.about-page p a { text-decoration: underline; text-underline-offset: 3px; }
.about-page .home-btn { box-sizing: border-box; width: fit-content; min-height: 44px; margin-top: 28px; padding: 7px 20px; }
:root[data-theme="light"] .about-page {
  --about-text: #435360;
  --about-heading: #263c4b;
  --about-border: #c5d0d8;
  --about-note: #edf4f7;
}