@font-face{font-family:'Inter';src:url(/fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:block}
:root{--bg:#fbfbfd;--fg:#1d1d1f;--soft:#424245;--muted:#6e6e73;--line:#ececf0;--fill:#f0f0f3;--edge:#d2d2d7;--card:#fff;--link:#0066cc}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Inter',-apple-system,system-ui,sans-serif;font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased}
button,input{font-family:inherit;font-feature-settings:inherit}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.wrap>header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.logo{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.logo:hover{text-decoration:none}
nav{display:flex;gap:20px;font-size:14px}
nav a{color:var(--muted)}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin:24px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
h1{font-size:48px;line-height:1.06;margin:48px 0 14px;font-weight:600;letter-spacing:-.035em}
h2{font-size:19px;margin:0 0 14px;font-weight:600;letter-spacing:-.01em}
.lede{font-size:18px;line-height:1.55;color:var(--soft);margin:0 0 26px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;background:var(--fg);color:#fff;border:0;border-radius:999px;font-size:15px;font-weight:500;cursor:pointer}
.btn:hover{text-decoration:none;opacity:.88}
.btn:disabled{opacity:.5;cursor:wait}
.btn.ghost{background:var(--card);color:var(--fg);box-shadow:inset 0 0 0 1px var(--edge)}
.row{display:flex;align-items:center;gap:14px;padding:14px 8px;border-top:1px solid var(--line);color:inherit;border-radius:12px}
.row:first-child{border-top:0}
.row:hover{background:#f5f5f7;text-decoration:none}
.rank{width:28px;color:var(--muted);font-weight:500;text-align:center;font-variant-numeric:tabular-nums}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--fill);flex:none;object-fit:cover}
.who{flex:1;min-width:0}
.who b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{display:block;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.chip{font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
footer{text-align:center;color:var(--muted);font-size:13px;padding:32px 0 40px}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--fg);border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:600px){h1{font-size:36px;margin-top:36px}}