:root { color-scheme: dark; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background: #071318; color: #e5eef0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: clamp(2rem,5vw,4rem) 1.25rem; background: radial-gradient(circle at top,#123039 0,#071318 52%); }
main { max-width: 68rem; margin: 0 auto; }
.eyebrow { margin: 0 0 .75rem; color: #79d6ca; font-size: .8rem; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2.5rem,9vw,4.5rem); letter-spacing: -.04em; }
.lead { max-width: 40rem; margin: 1rem 0 2.8rem; color: #b8c8cc; line-height: 1.8; }
.section-title { margin: 0 0 1rem; font-size: 1.2rem; }
.tools { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap: 1rem; }
.tool { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid #29464d; border-radius: 1.25rem; background: rgba(15,35,41,.82); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.15); }
.tool-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
h3 { margin: 0; font-size: 1.3rem; }
.state { white-space: nowrap; border: 1px solid #45656a; border-radius: 999px; padding: .2rem .55rem; font-size: .7rem; color: #b8c8cc; }
.published { color: #79d6ca; border-color: #34786e; }
.tool p { color: #b8c8cc; line-height: 1.75; }
.tool > a { display: inline-flex; gap: .5rem; align-items: center; align-self: flex-start; margin-top: auto; color: #071318; background: #79d6ca; padding: .8rem 1.1rem; border-radius: .65rem; font-weight: 750; text-decoration: none; }
.tool > a:hover { background: #9ce5dc; }
a:focus-visible { outline: 3px solid #e5eef0; outline-offset: 3px; }
.tool .unavailable { margin-top: auto; color: #8fa5aa; font-size: .8rem; }
footer { margin-top: 2.5rem; color: #9db1b6; font-size: .85rem; }
.footer-link { color: #b2eee6; }
@media (max-width: 420px) { .tool { padding: 1.2rem; } .tool-heading { flex-wrap: wrap; } }