.tool-reference { position: relative; z-index: 1; background: #0b0907; color: #ccc5b9; border-top: 1px solid #47311b; font: 15px/1.7 Inter, sans-serif; padding: 36px 20px; }
.tool-reference-inner { max-width: 1000px; margin: 0 auto; }
.tool-reference h2, .tool-reference h3, .tool-reference h4 { color: #e5b96a; line-height: 1.35; margin: 1.2em 0 .5em; font-family: "Crimson Pro", Georgia, serif; }
.tool-reference h2 { margin-top: 0; font-size: 30px; }
.tool-reference h3 { font-size: 23px; }
.tool-reference h4 { font-size: 19px; }
.tool-reference p { margin: 0 0 1em; }
.tool-reference a { color: #efbc75; text-decoration: underline; text-underline-offset: 3px; }
.tool-reference a:hover { color: #ffe1a9; }
.tool-reference nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0; }
.tool-reference details { border: 1px solid #463423; border-radius: var(--radius-sm, 6px); margin: 12px 0; background: #12100d; }
.tool-reference summary { padding: 15px 18px; border-radius: var(--radius-sm, 6px); cursor: pointer; color: #ead1a6; font-weight: 600; }
.tool-reference summary:hover { background: #20180f; }
.tool-reference :focus-visible { outline: 2px solid #efbc75; outline-offset: 4px; }
.tool-reference .reference-content { padding: 0 22px 22px; }
.tool-reference article { border-left: 2px solid #765025; padding-left: 16px; margin: 20px 0; }
.tool-reference ul, .tool-reference ol { padding-left: 24px; margin: 10px 0 20px; }
.tool-reference small { font: 13px Inter, sans-serif; color: #c3b7a3; }
.tool-reference footer { border-top: 1px solid #3c2c1b; margin-top: 28px; padding-top: 12px; }
@media (max-width: 600px) {
  .tool-reference { padding: 26px 16px; }
  .tool-reference h2 { font-size: 26px; }
  .tool-reference summary { padding: 13px; }
  .tool-reference .reference-content { padding: 0 15px 18px; }
}