/* Isolated about-panel rules. Load after the main stylesheet. */
#about {
  width: min(520px, calc(100vw - 28px));
  max-width: 520px;
  max-height: calc(100svh - 36px);
  padding: 0;
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #e4e2dc;
  border-radius: 22px;
  background: #ffffff;
  color: #202420;
  box-shadow: 0 24px 80px #0004;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'DM Sans', Arial, sans-serif;
}
#about::backdrop { background: #101b25a6; backdrop-filter: blur(5px); }
#about .about-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 24px 0; }
#about .about-kicker { display: block; margin-bottom: 9px; color: #657268; font-size: 10px; line-height: 1.3; letter-spacing: 2px; font-weight: 700; }
#about h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 29px; line-height: 1.12; font-weight: 400; letter-spacing: -.8px; text-transform: none; }
#about .about-close { position: static; display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid #dedfd8; border-radius: 50%; background: transparent; color: #303a32; font-size: 28px; line-height: 1; box-shadow: none; }
#about .about-close:hover { background: #eeefe8; }
#about .about-content { padding: 0 24px; }
#about p { margin: 0; color: #4c554d; font-size: 13px; line-height: 1.55; letter-spacing: 0; }
#about .about-intro { margin: 15px 0 20px; color: #39473d; font-size: 15px; line-height: 1.5; }
#about .about-section { padding: 14px 0; border-top: 1px solid #e4e6df; }
#about h3 { margin: 0 0 5px; font-family: inherit; font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: 0; color: #222e25; }
#about .about-sample-note { margin-top: 2px; padding: 13px 14px; border: 1px solid #e3e8dd; border-radius: 12px; background: #f1f4ec; }
#about .about-credits { margin: 14px 0 17px; font-size: 11px; line-height: 1.6; color: #606a60; }
#about a { color: #354d3c; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#about .about-actions { display: flex; align-items: center; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid #e4e6df; background: #ffffff; }
#about .about-sample-button, #about .about-done-button { min-height: 44px; border-radius: 11px; padding: 11px 14px; font-size: 13px; font-weight: 600; line-height: 1.3; box-shadow: none; }
#about .about-sample-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; background: #233c2c; color: #fff; border: 1px solid #233c2c; }
#about .about-sample-button:hover { background: #34533e; }
#about .about-done-button { flex: 0 0 auto; background: transparent; color: #39473d; border: 1px solid #d4dacf; }
#about .about-done-button:hover { background: #f1f4ec; }
#about button:focus-visible, #about a:focus-visible { outline: 2px solid #235b89; outline-offset: 3px; }
#about button:focus:not(:focus-visible), #about a:focus:not(:focus-visible) { outline: none; }
@media (max-width: 370px) {
  #about .about-heading { padding: 20px 18px 0; gap: 10px; }
  #about h2 { font-size: 25px; }
  #about .about-content { padding: 0 18px; }
  #about .about-actions { padding: 14px 18px 18px; }
  #about .about-sample-button, #about .about-done-button { padding-inline: 10px; font-size: 12px; }
}
@media (forced-colors: active) {
  #about, #about .about-sample-note, #about button { border: 1px solid CanvasText; }
  #about button:focus-visible, #about a:focus-visible { outline-color: Highlight; }
}