/* Guide and FAQ patterns shared only by the four design content pages. */
.design-tool-content {
  margin-top: 32px;
  padding: 22px;
  border-radius: 18px;
  color: var(--text);
}
.design-tool-content h2 {
  margin: 0 0 18px;
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.design-tool-content h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.4; }
.design-tool-content p, .design-tool-content li { color: #c5ced8; line-height: 1.65; }
.design-tool-content p { margin: 0; max-width: 75ch; }
.design-tool-content p + p { margin-top: 12px; }
.design-tool-content ol, .design-tool-content ul { margin: 18px 0 0; padding-left: 24px; max-width: 75ch; }
.design-tool-content li + li { margin-top: 8px; }
.design-tool-content li::marker { color: var(--accent-2); font-weight: 700; }
.design-guide-intro, .design-guide-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
.design-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.design-faq-list { display: grid; gap: 10px; }
.design-faq-list details { padding: 16px 18px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.025); }
.design-faq-list summary { cursor: pointer; font-weight: 800; }
.design-faq-list summary h3 { display: inline; margin: 0; font-size: 17px; }
.design-faq-list summary::marker { color: var(--accent-2); }
.design-faq-list details[open] summary { margin-bottom: 12px; }
.design-related-links { margin-top: 18px; }
.design-tool-content a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.design-tool-content a:hover { text-decoration-thickness: 2px; }
.design-tool-content a:focus-visible, .design-tool-content summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
html[data-theme="light"] .design-tool-content { color: #141414; background: #f7f7f4; }
html[data-theme="light"] .design-tool-content p, html[data-theme="light"] .design-tool-content li { color: #555f68; }
html[data-theme="light"] .design-tool-content a, html[data-theme="light"] .design-tool-content li::marker, html[data-theme="light"] .design-faq-list summary::marker { color: #865600; }
html[data-theme="light"] .design-guide-intro, html[data-theme="light"] .design-guide-card, html[data-theme="light"] .design-faq-list details { background: rgba(255,255,255,.6); border-color: rgba(16,16,16,.11); }
@media (max-width: 640px) {
  .design-guide-grid { grid-template-columns: 1fr; }
  .design-tool-content { margin-top: 26px; }
  .design-guide-intro, .design-guide-card { padding: 18px; }
}
/* Native disclosure requires no animation or JavaScript, including reduced motion. */