:root { color-scheme:light; --ink:#171717; --muted:#171717; --line:rgba(23,23,23,.18); --red:#cc534a; --blue:#4a95cc; }
[hidden] { display:none!important; }
.leaderboard { margin-top:42px; }
.leaderboard-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:17px; }
.leaderboard-heading h2 { font-size:24px; letter-spacing:-.045em; margin:0; font-weight:650; }
.leaderboard-heading>span,.leaderboard-note { font-size:11px; color:#000; }
.leaderboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.leaderboard-entry { min-width:0; padding:15px 16px 20px; border-right:1px solid var(--line); }
.entry-heading { display:flex; align-items:center; gap:10px; min-height:40px; margin-bottom:10px; }
.entry-heading>a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#000; text-decoration:none; font-size:12px; }
.entry-heading>a:hover { color:var(--blue); }
.tweet-slot { min-height:210px; }
.tweet-mount { width:100%; }
.tweet-mount .twitter-tweet { margin:0!important; }
.tweet-fallback { padding:24px 0; font-size:12px; line-height:1.8; }
.tweet-fallback a { display:block; color:var(--blue); }
.leaderboard-note { margin:10px 0 0; }
.load-more { display:block; margin:20px auto 0; padding:10px 22px; border:1px solid var(--line); background:#fff; color:#000; font:500 12px Inter,Arial,sans-serif; cursor:pointer; border-radius:4px; }
.load-more:hover { border-color:var(--blue); }
.load-more:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:1600px) { .leaderboard-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1100px) { .leaderboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .leaderboard-entry { border-bottom:1px solid var(--line); } }
@media(max-width:720px) { .leaderboard-grid { grid-template-columns:1fr; } .leaderboard-entry { padding:14px 0 20px; border-right:0; } .leaderboard-heading { align-items:flex-start; flex-direction:column; gap:6px; } }
* { box-sizing:border-box; }
html { min-height:100%; background:#fff; scroll-behavior:smooth; }
body { min-height:100svh; margin:0; color:var(--ink); font-family:Inter,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; background:#fff; }
.page { position:relative; isolation:isolate; width:min(100%,1660px); min-height:100svh; margin:auto; padding:24px clamp(22px,4.5vw,72px) 22px; display:flex; flex-direction:column; }
.intro { text-align:center; padding:10px 0 25px; animation:rise .6s ease-out both; }
h1 { margin:0; font-size:clamp(33px,5.3vw,73px); font-weight:650; line-height:1.04; letter-spacing:-.055em; white-space:nowrap; color:var(--ink); }
h1 span { color:var(--red); }
.intro p { margin:8px auto 0; max-width:720px; color:var(--ink); font-size:clamp(13px,1.2vw,16px); line-height:1.4; }
.guide-link { display:inline-block; margin-top:13px; color:var(--blue); font-size:12px; font-weight:700; text-underline-offset:4px; text-decoration-thickness:1px; transition:transform .2s ease,color .2s ease; }
.guide-link:hover { transform:translateY(-2px); color:var(--red); }
.guide-link span { margin-left:4px; }
.directory { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); animation:rise .7s .08s ease-out both; }
.directory-column { position:relative; min-width:0; padding:20px clamp(12px,1.5vw,24px) 24px; border-left:1px solid var(--line); }
.directory-column:first-child { border-left:0; }
.category + .category { margin-top:24px; }
.category h2 { margin:0 0 11px; color:var(--red); font-size:11px; font-weight:700; line-height:1.25; letter-spacing:.09em; text-transform:uppercase; }
.directory-column:nth-child(even) .category h2 { color:var(--blue); }
.category a { display:block; padding:7px 0 8px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; transition:color .18s ease,transform .18s ease; }
.category a:hover { color:var(--blue); transform:translateX(3px); }
.directory-column:nth-child(even) .category a:hover { color:var(--red); }
.category a:focus-visible,.guide-link:focus-visible,footer a:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }
.item-name { display:block; font-size:13px; font-weight:500; line-height:1.22; letter-spacing:-.015em; }
.item-desc { display:block; margin-top:2px; color:var(--muted); font-size:10.7px; line-height:1.3; }
footer { display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:auto; padding-top:20px; color:var(--ink); text-align:center; }
footer p { margin:0; font-size:13px; font-weight:600; }
footer span { font-size:11px; }
footer a { color:var(--blue); text-underline-offset:3px; }
.guide-page { width:min(100%,1040px); }
.breadcrumb { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:12px; }
.breadcrumb a { color:var(--ink); text-underline-offset:3px; }
.guide-intro { padding:45px 0 36px; text-align:center; animation:rise .6s ease-out both; }
.guide-intro h1 span { color:var(--blue); }
.guide-intro h1 { font-size:clamp(47px,7vw,85px); }
.guide-intro>p:last-child { max-width:650px; margin:15px auto 0; color:var(--ink); font-size:clamp(16px,1.8vw,22px); line-height:1.35; letter-spacing:-.025em; }
.guide-content { padding:clamp(23px,4vw,55px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); animation:rise .7s .08s ease-out both; }
.questions h2 { margin:0 0 13px; color:var(--red); font-size:23px; letter-spacing:-.04em; }
.qa { display:grid; grid-template-columns:minmax(180px,33%) 1fr; gap:30px; padding:19px 0; border-top:1px solid var(--line); }
.qa h3 { margin:0; font-size:15px; letter-spacing:-.025em; }
.qa p { margin:0; color:var(--ink); font-size:14px; line-height:1.55; }
.guide-sources { margin:26px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.6; }
.guide-sources a { color:var(--blue); text-underline-offset:3px; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1050px) { .directory { grid-template-columns:repeat(3,minmax(0,1fr)); } .directory-column:nth-child(4) { border-left:0; } .directory-column:nth-child(n+4) { border-top:1px solid var(--line); } }
@media (max-width:680px) { .page { padding:18px 14px 20px; } .intro { padding:14px 0 20px; } h1 { font-size:clamp(30px,8vw,54px); letter-spacing:-.055em; } .intro p { max-width:345px; } .directory { grid-template-columns:repeat(2,minmax(0,1fr)); } .directory-column { padding:18px 12px 20px; } .directory-column:nth-child(odd) { border-left:0; } .directory-column:nth-child(even) { border-left:1px solid var(--line); } .directory-column:nth-child(n+3) { border-top:1px solid var(--line); } .item-name { font-size:12px; } .item-desc { font-size:10px; } .guide-intro { padding:39px 0 27px; } .qa { grid-template-columns:1fr; gap:5px; } }
@media (max-width:420px) { .directory { grid-template-columns:1fr; } .directory-column { border-left:0!important; border-top:1px solid var(--line); } .directory-column:first-child { border-top:0; } h1 { font-size:clamp(27px,7.8vw,34px); } .directory-column:nth-child(even) .category h2 { color:var(--red); } .category:nth-child(even) h2 { color:var(--blue); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }