:root{color-scheme:dark;--ground:#1e2430;--raised:#2b3343;--line:#d8dee812;--text:#d8dee8;--muted:#a3adbf;--gold:#e0ad4a;--silver:#a3adbf;--empty:#65728a;--focus:#9fd3e0;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-family:"Iowan Old Style",Palatino,Georgia,serif;background:var(--ground);color:var(--text)}
*{box-sizing:border-box}body{margin:0;background:var(--ground)}main{max-width:900px;margin:auto;padding:48px 32px 64px}
a{color:inherit;text-decoration:none}a:hover{color:var(--focus)}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

header{margin-bottom:32px}h1{font-size:28px;font-weight:400;letter-spacing:-.4px;margin:0}h1 span{font-size:18px;color:var(--muted);margin-left:8px}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0;font:13px/1.5 var(--mono);color:var(--muted)}.legend .in-class{color:var(--gold)}.legend .unearned{color:var(--empty)}
#load-status{color:var(--muted);font-size:15px}

.board{width:100%;border-collapse:collapse;table-layout:fixed}.col-address{text-align:left;font-weight:400}.col-badge{width:96px}
thead{position:sticky;top:0;z-index:4}thead th{font-weight:400;background:var(--ground);border-bottom:1px solid #d8dee82e;padding:0 0 10px;vertical-align:bottom}
thead .col-address{font:12px/1 var(--mono);color:var(--muted);padding-bottom:16px}
.col-badge{position:relative;text-align:center}
.column-help{display:inline-flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:6px 2px;border-radius:5px;color:var(--text)}.column-help:hover,.column-help[aria-expanded=true]{background:#d8dee80d}
.column-mark svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.column-name{font-size:14px;font-weight:600;text-decoration:underline dotted #a3adbf80;text-underline-offset:3px}.column-help:hover .column-name{text-decoration-color:var(--text)}
.column-count{font:11px/1.2 var(--mono);color:var(--muted)}

tbody tr+tr{border-top:1px solid var(--line)}tbody th,tbody td{padding:9px 0}
.identity{display:flex;align-items:center;gap:8px;min-width:0}
.address{font:14px/1.6 var(--mono);font-variant-ligatures:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group+.group,.ellipsis+.group{margin-left:.55ch}.ellipsis{display:none;margin-left:.55ch}
.copy-address{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;color:var(--empty);border-radius:4px}.copy-address:hover{color:var(--text);background:#d8dee80d}.copy-address svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4}.copy-address.copied{color:var(--focus)}

.achievement{text-align:center}.badge-mark{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;vertical-align:middle}
.badge-mark svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.badge-indicator{position:absolute;right:-6px;top:-3px;font:12px/1 var(--mono)}
.in-class,.earned{color:var(--gold)}.completed,.pending{color:var(--silver)}
.in-class svg,.earned svg,.completed svg{fill:currentColor;fill-opacity:.28}.badge-mark svg path[d^="M5 8"]{fill:none}
.unearned{color:var(--empty)}.unearned svg{stroke-dasharray:2 3;opacity:.55}

.explanation{position:absolute;top:calc(100% + 6px);z-index:6;width:280px;max-width:calc(100vw - 32px);padding:14px 16px;background:var(--raised);border:1px solid #4a5367;border-radius:6px;color:var(--text);box-shadow:0 8px 28px #0004;font-size:15px;line-height:1.5;text-align:left;font-weight:400}
.explanation.left{left:0}.explanation.right{right:0}.explanation strong{font-weight:600;display:block}.explanation p{margin:6px 0 0}.explanation small{display:block;margin-top:8px;font:12px/1.5 var(--mono);color:var(--muted)}.explanation small+small{margin-top:2px}

@media(max-width:640px){
  main{padding:24px 16px 40px}header{margin-bottom:22px}h1{font-size:23px}h1 span{font-size:15px}.legend{font-size:12px;gap:4px 14px}
  .col-badge{width:58px}.column-mark{display:none}.column-help{padding:4px 0}.column-name{font-size:12px}.column-count{font-size:10px}
  thead .col-address{font-size:0;padding-bottom:0}
  .address{font-size:13px}.middle{display:none}.ellipsis{display:inline}.copy-address{display:none}
  tbody th,tbody td{padding:7px 0}.badge-mark{width:30px;height:30px}.badge-mark svg{width:21px;height:21px}.badge-indicator{font-size:11px;right:-5px}
  .col-badge{position:static}.explanation.left,.explanation.right{left:0;right:0;width:auto;max-width:none}
}
@media(max-width:360px){.col-badge{width:47px}.column-name{font-size:11px}}