:root{font-family:Arial,Helvetica,sans-serif;color:#171717;background:#fff;color-scheme:light dark;--bg:#fff;--ink:#171717;--muted:#747474;--line:#dedede;--ease-out:cubic-bezier(.16,1,.3,1)}*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}main{width:min(100%,620px);margin:0 auto;padding:48px 24px 32px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}h1{font-size:38px;font-weight:400;letter-spacing:-1.2px;margin:0;line-height:1.1}.pick-yours{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:13px;text-decoration:none;transition:background-color .15s,transform .15s}.pick-yours:active{transform:scale(.97)}
.tabs{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}.tabs button{font:inherit;font-size:14px;min-height:38px;min-width:96px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}.tabs button[aria-selected=true]{background:var(--ink);color:var(--bg)}
.summary{font:11px monospace;color:var(--muted);margin:16px 0 6px;min-height:16px}
#board{list-style:none;margin:12px 0 0;padding:0}#board a{display:grid;grid-template-columns:24px 150px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:4px 0;color:inherit;text-decoration:none}
.rank{font:12px monospace;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.who{min-width:0}.name{display:block;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.year{display:block;font:11px monospace;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}.you{margin-left:8px;padding:1px 6px;border:1px solid var(--line);border-radius:999px;font-size:10px}
.track{position:relative;height:44px;min-width:0}.fill{position:absolute;left:0;top:10px;bottom:10px;width:calc(var(--share,0)*100% - 20px);min-width:2px;border-radius:0 4px 4px 0;background:var(--ink);opacity:.14;transform-origin:left;animation:run .8s var(--ease-out) both;animation-delay:calc(var(--i,0)*25ms)}
.tip{position:absolute;left:0;top:0;width:max(calc(var(--share,0)*100%),44px);height:44px;animation:slide .8s var(--ease-out) both;animation-delay:calc(var(--i,0)*25ms)}.tip img{position:absolute;right:0;top:0;width:44px;height:44px;object-fit:contain;display:block}
.count{font:14px monospace;font-variant-numeric:tabular-nums;text-align:right;min-width:3ch;padding-right:2px}
@keyframes run{from{transform:scaleX(0)}}@keyframes slide{from{transform:translateX(calc(-100% + 44px))}}
#board.still .fill,#board.still .tip{animation:none}
#status{text-align:center;min-height:18px;margin:18px 0 0;font-size:12px;color:var(--muted);line-height:1.5}.retry{display:block;margin:10px auto 0;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:13px Arial,sans-serif;cursor:pointer}
.links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-top:28px}.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--muted);font-size:13px;text-decoration:none}
@media(hover:hover) and (pointer:fine){.pick-yours:hover,.retry:hover{background:var(--line)}.tabs button:not([aria-selected=true]):hover{color:var(--ink)}#board a:hover .name{text-decoration:underline;text-underline-offset:3px}#board a:hover .fill{opacity:.3}.links a:hover{color:var(--ink)}}
@media(max-width:450px){main{padding:32px 18px 24px}h1{font-size:30px}.pick-yours{padding:10px 12px}#board a{grid-template-columns:20px minmax(0,1fr) auto;gap:10px;min-height:66px}.who{grid-column:2;grid-row:1}.count{grid-column:3;grid-row:1}.track{grid-column:2/4;grid-row:2;height:36px}.tip{height:36px;width:max(calc(var(--share,0)*100%),36px)}.tip img{width:36px;height:36px}.fill{top:8px;bottom:8px;width:calc(var(--share,0)*100% - 16px)}@keyframes slide{from{transform:translateX(calc(-100% + 36px))}}}
@media(prefers-color-scheme:dark){:root{--bg:#141414;--ink:#eee;--line:#333;--muted:#aaa;background:var(--bg);color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.tabs button,.pick-yours{transition:none;transform:none!important}.fill,.tip{animation:none}}