.brand-lockup { color: var(--muted); text-decoration: none; }
.brand-lockup:hover, .brand-lockup:focus-visible { color: var(--brass-bright); }
.tool-nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.tool-nav a { color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.tool-nav a:hover, .tool-nav a:focus-visible { color: var(--brass-bright); }
.intro { align-items: start; }
.intro-copy { color: var(--soft) !important; font-size: 12px !important; line-height: 1.55; margin-top: 10px !important; max-width: 690px; }
.scale-examples { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr); margin-top: 18px; padding: 20px 23px; }
.scale-examples h2 { margin-top: 4px; }
.scale-example-list { display: grid; gap: 0 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scale-example-list p { border-left: 1px solid var(--line-strong); display: grid; gap: 5px; margin: 0; padding-left: 12px; }
.scale-example-list strong { font-size: 12px; }
.scale-example-list span { color: var(--brass-bright); font-family: "DM Mono", monospace; font-size: 12px; }
.site-footer a { color: inherit; }
@media (max-width: 760px) {
  .site-header { align-items: start; gap: 15px; }
  .tool-nav { align-items: end; flex-direction: column; gap: 6px; }
  .scale-examples { display: block; }
  .scale-example-list { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}