:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; background: #101114; color: #f3f4f6; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.shell { width: min(100% - 2rem, 960px); margin: 0 auto; padding: 2rem 0 4rem; }
.site-nav { display: flex; align-items: center; gap: .85rem; min-height: 3rem; margin-bottom: 5rem; }
.brand { color: #f3f4f6; font-weight: 750; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.nav-links { display: flex; align-items: center; flex: 1; min-width: 0; flex-wrap: nowrap; gap: .1rem; overflow-x: auto; }
.nav-links a { flex: 0 0 auto; min-height: 2.5rem; padding: .45rem .55rem; border: 1px solid transparent; border-radius: .5rem; color: #9ba3af; background: transparent; font: inherit; font-size: .85rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav-links a:hover, .nav-links a:focus-visible { border-color: #526071; color: #f3f4f6; outline: none; }
.nav-links a.active { border-color: #3c6756; color: #74e0b4; background: #1b2a25; }
.hero { max-width: 36rem; margin-inline: auto; }
.eyebrow { color: #74e0b4; letter-spacing: .14em; font-size: .75rem; font-weight: 700; margin: 0; }
h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); line-height: .95; margin: .4rem 0 1rem; letter-spacing: -.04em; }
.lede { color: #b9bec8; font-size: 1.05rem; max-width: 32rem; }
.tool-list { display: grid; max-width: 34rem; margin: 2.25rem auto 0; border-top: 1px solid #30343d; }
.tool-row { display: grid; gap: .2rem; padding: .85rem 0; border-bottom: 1px solid #30343d; color: inherit; text-decoration: none; }
.tool-row:hover, .tool-row:focus-visible { color: #f3f4f6; outline: none; }
.tool-row:hover strong, .tool-row:focus-visible strong { color: #74e0b4; }
.tool-copy { display: grid; gap: .15rem; min-width: 0; }
.tool-copy strong { font-size: 1.05rem; }
.tool-copy span { color: #9ba3af; }
@media (max-width: 640px) {
  .shell { padding: 1rem 0 2rem; }
  .site-nav { flex-wrap: wrap; gap: .75rem; margin-bottom: 3rem; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; }
  .tool-list { margin-top: 1.5rem; }
}