body{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;text-align:center;font-size:1rem;line-height:1.5}*{padding:0;margin:0;box-sizing:border-box}button{all:unset;display:none;padding:0.3em 1em;background:black;color:white;margin-bottom:2rem;font-size:1.2em;cursor:pointer}@media only screen{body{max-width:1200px;margin:3rem auto}button{display:inline-block}}h1{font-size:1.5em}.no-spot{opacity:0!important}.class-spots-grid-wrap{text-align:center;margin:3rem 0}.class-spots-grid-wrap .class-front{margin-bottom:calc(var(--gap) * 1.5)}.class-spots-grid-wrap .class-front svg{font-size:1.5rem}.class-spots-grid-wrap .class-spots-grid{list-style:none;display:inline-grid;grid-template-columns:repeat(var(--cols),var(--spot-size));gap:var(--gap)}.class-spots-grid-wrap li{position:relative;height:var(--spot-size);border:2px dashed #aaa;display:flex;align-items:center;justify-content:center;color:#aaa;border-radius:100%}.class-spots-grid-wrap .class-spot{font-size:calc(var(--spot-size) / 3);font-weight:bold}.class-spots-grid-wrap [data-spot-filled=true]{border:2px solid black;color:black}.roster-list{font-size:0.7rem;list-style:none;text-align:left;columns:3;column-gap:2rem;-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 2px),0 calc(100% - 2px));clip-path:polygon(0 0,100% 0,100% calc(100% - 2px),0 calc(100% - 2px))}.roster-list li{display:inline-flex;width:100%;border-bottom:1px solid #888}.roster-list li div{padding:0.3em 0.2em}.roster-list li div:not(:first-child){border-left:1px solid #888}.roster-list .spot{font-weight:bold;width:2.5em;text-align:center;font-size:1.1em}.roster-list .initials{width:4em}.roster-list .name{flex:1;padding-left:1em}