body{background-color:#f9f9f9;margin:0;padding:0;font-family:Arial,sans-serif}#menu-list{visibility:hidden;opacity:0;transition:opacity .3s .1s,visibility 0s .4s}#hamburger{& .line{transition:transform .4s,opacity .4s}& .top{transform-origin:16px 8px}& .middle{transform-origin:16px 16px}& .bottom{transform-origin:16px 24px}}#menu:hover:not(.closed){& #menu-list{visibility:visible;opacity:1;transition:opacity .3s,visibility}& #hamburger{& .top{transform:translateY(8px)rotate(45deg)}& .middle{transform:rotateY(90deg)}& .bottom{transform:translateY(-8px)rotate(-45deg)}}}.menu-item{background-color:#fff;font-size:1rem}.menu-item:hover{background-color:#f7f7f7}.roster-item-row{color:#444;background-color:#fff;border-bottom:1px solid #eee;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:4px;font-size:.9rem;display:grid}.roster-item-row.clickable:hover{cursor:pointer;background-color:#f0f7ff}.roster-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.roster-meta{color:#888;text-align:right;font-family:monospace;font-size:.75rem}.roster-header{color:#333;text-align:center;z-index:10;background-color:#f0f0f0;border-bottom:1px solid #ddd;padding:2px 4px;font-size:.85rem;font-weight:700;position:sticky;top:0}