:root { color-scheme:light; --paper:#efede8; --white:#fff; --ink:#171715; --muted:#62625c; --line:#d7d5cf; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; scrollbar-color:#a9a69f var(--paper); }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.55 "Manrope",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:4px; }
button { font:inherit; }
::selection { background:var(--ink); color:var(--paper); }
:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
.skip-link { position:absolute; top:10px; left:20px; z-index:200; transform:translateY(-150%); padding:10px; background:var(--white); }
.skip-link:focus { transform:none; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; padding:20px 40px; border-bottom:1px solid var(--line); }
.brand { text-decoration:none; font-size:15px; white-space:nowrap; }
.site-nav { display:flex; align-items:center; gap:30px; }
.site-nav>a { text-decoration:none; font-size:13px; }
.site-nav>a:hover { text-decoration:underline; }
main { max-width:1600px; margin:auto; padding:76px 40px 80px; }
.intro { display:flex; justify-content:space-between; gap:48px; align-items:flex-end; margin-bottom:52px; }
h1 { margin:0; font-size:clamp(46px,6.5vw,88px); font-weight:500; line-height:1.02; letter-spacing:-.04em; text-wrap:balance; }
.intro p { max-width:38ch; margin:0 0 3px; color:var(--muted); font-size:16px; }
.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; border-top:1px solid var(--line); margin-bottom:14px; }
.filters { display:flex; gap:6px; flex-wrap:wrap; }
.filters button { cursor:pointer; border:0; border-radius:30px; background:transparent; color:var(--muted); padding:9px 15px; min-height:42px; font-size:13px; }
.filters button:hover { background:#e2dfd8; color:var(--ink); }
.filters button[aria-pressed=true] { background:var(--ink); color:var(--white); }
.count { margin:0; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; row-gap:45px; }
.tool { min-width:0; }
.tool[hidden] { display:none; }
.tool-link { display:block; text-decoration:none; }
.preview { aspect-ratio:4/3; overflow:hidden; border-radius:12px; background:var(--white); }
.preview svg { display:block; width:100%; height:100%; }
.tool-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:17px; }
h2 { font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.025em; margin:0; }
.open-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; border:1px solid var(--line); border-radius:50%; transition:background .18s,color .18s; }
.open-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.tool-link:hover .open-icon, .tool-link:focus-visible .open-icon { background:var(--ink); color:var(--white); }
.kind { display:block; color:var(--muted); font-size:12px; margin-top:5px; }
.description { margin:15px 0 14px; font-size:14px; line-height:1.6; max-width:47ch; }
.formats { display:block; font-size:11px; color:var(--muted); }
.site-footer { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 40px; padding:26px 0 32px; font-size:12px; color:var(--muted); }
.site-footer a { text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
@media(min-width:1400px) { .tool-grid { gap:52px 32px; } }
@media(max-width:1050px) { .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .intro { align-items:flex-start; flex-direction:column; gap:24px; } .intro p { max-width:57ch; } }
@media(max-width:600px) { .site-header { min-height:72px; padding:16px 20px; gap:16px; } .site-nav { gap:12px; } .site-nav>a { display:none; } main { padding:44px 20px 56px; } h1 { font-size:46px; } .intro { margin-bottom:32px; gap:20px; } .intro p { font-size:14px; max-width:37ch; } .filter-bar { display:block; padding:14px 0 5px; margin-bottom:18px; } .filters { gap:2px; } .filters button { padding:9px 11px; font-size:12px; } .count { margin:14px 0 0; } .tool-grid { grid-template-columns:1fr; gap:35px; } .tool-title { margin-top:13px; } h2 { font-size:23px; } .description { margin-top:12px; } .site-footer { margin:0 20px; align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }