:root{--blue:#3b5998;--blue-d:#2d4373;--yellow:#f4d03f;--cream:#fff9e6;--ink:#2c3e50;--muted:#5d6d7e;--line:#e5e8ec;--bg:#fff;--soft:#f8f9fa}
@media (prefers-color-scheme:dark){:root{--ink:#e6e9ee;--muted:#a9b4c2;--bg:#141821;--soft:#1c2230;--line:#2c3446;--cream:#2a2614;--blue:#8ea8e0;--blue-d:#b5c7ee}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--blue)}a:hover{color:var(--blue-d)}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
header.top{border-bottom:3px solid var(--yellow)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:12px;flex-wrap:wrap}
.brand{font-weight:800;text-decoration:none;color:var(--ink);font-size:18px}.brand span{color:var(--blue)}
.navsub{font-size:15px;font-weight:600;text-decoration:none}
main{padding:24px 0 8px}
h1{font-size:30px;line-height:1.2;margin:.2em 0 .4em}h2{font-size:21px;margin:1.8em 0 .5em;color:var(--blue)}
h3{font-size:18px;margin:1.2em 0 .3em}
.lede{font-size:19px;color:var(--muted);margin-top:0}
.crumbs{font-size:14px;color:var(--muted)}.crumbs a{color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px;font-size:14px}
.pill{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px 10px;text-decoration:none;color:var(--ink)}
.pill.feat{background:var(--cream);border-color:var(--yellow)}
.box{background:var(--soft);border-left:4px solid var(--blue);border-radius:6px;padding:12px 16px;margin:14px 0}
.box.free{background:var(--cream);border-left-color:var(--yellow)}
.box p{margin:.3em 0}
.hero{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);margin:8px 0}
.btn{display:inline-block;background:#3b5998;color:#fff!important;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:8px;margin:6px 0}
.btn:hover{background:#2d4373}
.list{list-style:none;padding:0;margin:0}
.list li{border-bottom:1px solid var(--line);padding:12px 0}
.list a.t{font-weight:700;font-size:18px;text-decoration:none}
.list .d{color:var(--muted);font-size:15px;margin:2px 0 0}
.list .s{font-size:13px;color:var(--muted)}
table.scores{border-collapse:collapse;font-size:15px;width:100%;max-width:420px}
table.scores td{border-bottom:1px solid var(--line);padding:6px 4px}table.scores td:last-child{text-align:right;font-weight:700}
.cta{background:var(--cream);border:2px solid var(--yellow);border-radius:10px;padding:18px;margin:32px 0 8px}
.cta h2{margin:0 0 .3em;color:var(--ink)}.cta p{margin:.2em 0 .8em}
footer{border-top:1px solid var(--line);margin-top:32px;padding:18px 0 32px;font-size:14px;color:var(--muted)}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
code{background:var(--soft);padding:1px 5px;border-radius:4px;font-size:.9em}
@media (min-width:640px){h1{font-size:36px}}