.rank-nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 20px}.rank-nav button{background:#ffffff0c;color:#f3d895;border:1px solid #cfb87d55;border-radius:18px;padding:9px 13px;cursor:pointer;font:600 12px sans-serif}.rank-nav button:hover{background:#e3be6530}.rankings{width:min(660px,92vw);max-height:85vh;overflow:auto}.rankings p{font-size:13px;line-height:1.7;opacity:.7}.rank-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-bottom:1px solid #b8ad8a55;background:transparent;color:#284c3e;cursor:pointer;text-align:left}.rank-row span{flex:1}.rank-row strong{font-variant-numeric:tabular-nums}.rank-row canvas{width:64px;height:48px}.rank-row:hover{background:#e5c97633}@media(max-width:950px){.header{flex-wrap:wrap}.rank-nav{order:3;width:100%;margin:8px 0}.rank-nav button{flex:1;padding:8px}.header-right .demo-note{display:none}}
.rank-row.rank-self{background:#264e3d;color:#fff2c8;border:1px solid #d9bb76;border-radius:10px;box-shadow:inset 4px 0 #efd083}.rank-row.rank-self:hover{background:#315f49}.rank-row.rank-self strong{color:#ffe09a}.ride-level{display:inline-block;padding:4px 10px;margin:0 0 6px;border:1px solid #b69a52;border-radius:5px;background:#284f3d;color:#ffe4a0;font:700 13px monospace}