@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap);:root{--base:min(calc( 100vh - var(--headerHeight)), 100vw);--cellWidth:calc( var(--base) / 7.5 )}#header.start:after{animation:120s 1 forwards progress linear}.board{display:flex;justify-content:center;height:100%;align-items:center;touch-action:none;margin-top:1rem}.column{display:flex;flex-direction:column;align-items:center;width:100%}.dot{border:none;display:block;cursor:pointer;margin:0;height:auto;width:0;overflow:hidden;aspect-ratio:1;animation:.25s 1 forwards scaleIn ease-in-out;position:relative;background-color:transparent;position:relative;overflow:visible;z-index:0;padding:0;--border:calc( var(--cellWidth) / 20 )}.dot::after{content:'';position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:100%;display:flex;justify-content:center;align-items:center;font-size:calc( var(--cellWidth) / 2);font-weight:400;font-style:normal;font-family:"Noto Color Emoji",sans-serif}.dot.active{background-color:lch(var(--primary-100) / .25)}.dot.fade{animation:.25s 1 forwards scaleOut ease-in-out}@keyframes scaleIn{0%{width:0;margin:0}100%{width:var(--cellWidth)}}@keyframes scaleOut{0%{width:var(--cellWidth)}100%{width:0;margin:0}}@keyframes scaleUp{0%{scale:0}100%{scale:1}}