*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}body{min-height:100vh;background:radial-gradient(#7b7b7b,#000)}:root{--n-color: #f00 }#app{aspect-ratio:1;margin:0;padding:0;font-family:glowworm-mn,sans-serif;font-weight:400;font-style:normal}:root{--led-glow:#ffffff55}.bubble_wrapper{display:flex;justify-self:stretch;align-self:stretch;will-change:transform,z-index;backface-visibility:hidden}.bubble{position:relative;width:100%;height:100%;border-radius:50%;background-size:contain;pointer-events:none;backface-visibility:hidden;z-index:10}.lit{box-shadow:inset 0 0 6px #00000080,0 0 1rem var(--7b649ed6);background:radial-gradient(ellipse at 35% 35%,#ffffff80,#fff0 50%),radial-gradient(ellipse at 35% 35%,#fff3,#fff0 25%);z-index:100}.bubble_glow{position:absolute;left:-25%;top:-25%;width:150%;height:150%;border-radius:100%;background:radial-gradient(#ffffff11 50%,transparent 100%);mix-blend-mode:overlay;display:none;z-index:-1;pointer-events:none}.lit+.bubble_glow{display:block}#title{top:1rem;z-index:100;font-size:3rem}#title span{display:inline-block}#title span:nth-child(1){color:#b257ff}#title span:nth-child(2){color:#0690ff}#title span:nth-child(3){color:#0f0}#title span:nth-child(4){color:#ff0}#title span:nth-child(5){color:#ff7f00}#title span:nth-child(6){color:red}#title span:nth-child(7){color:#b257ff}#title span:nth-child(8){color:#0690ff}#title span:nth-child(9){color:#ff0}#title span:nth-child(10){color:#ff7f00}#title span:nth-child(11){color:red}#color_palette{display:flex;border:2px solid #797979;border-radius:2rem;background-color:#363636;padding:.45rem;box-shadow:0 0 1rem #00b4ff,inset 0 0 1rem #1c1c1c;background:linear-gradient(0deg,#222,#555,#222)}#color_palette .bubble{width:1.5rem;height:1.5rem;margin:0 .2rem;pointer-events:all;display:flex;align-items:center;justify-content:center;box-shadow:.2rem .2rem .6rem #000}#color_palette .bubble.lit.erase{box-shadow:0 0 .2rem #fff}#color_palette .bubble.active{outline:3px solid #fff}.drawer{position:absolute;width:100%;height:calc-size(auto,size);z-index:1000;top:0;left:0;overflow:hidden;background-color:#999;box-shadow:0 1rem 1rem #000}.drawer_content{padding:1rem;position:relative;bottom:0;color:#fff;background:#343434;box-shadow:inset 0 0 3rem #000;display:flex;justify-content:space-between;align-items:center;font-family:Helvetica,sans-serif}.drawer-enter-active,.drawer-leave-active{transition:height .25s ease-out}.drawer-enter-from,.drawer-leave-to{height:0}#board_controls{overflow:hidden;border:2px solid #595959;border-radius:2rem;padding:.35rem;display:flex;align-items:center;justify-content:space-between;background-color:#363636;background:linear-gradient(0deg,#222,#555,#222);box-shadow:0 0 1rem #0300f869,inset 0 0 1rem #1c1c1c}#user_count{margin:0 1rem 0 0}#count{display:inline-block;width:1.5rem;text-align:right;margin-right:.25rem}#reset_btn{background-color:red}#new_btn{background-color:#0071ff;color:#fff;margin-left:.5rem}HEADER{position:relative;width:100%;max-width:1200px;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:linear-gradient(45deg,#00091a,#0c7ae2,#00091a);border:3px solid #000;border-bottom:none;margin:1rem 0 0;border-radius:.6vh .6vh 0 0}MAIN{max-width:min(100vw,90vh);margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}BUTTON{padding:.25rem .5rem;border-radius:2rem;color:#fff;box-shadow:inset 0 0 6px #00000080;background:radial-gradient(ellipse at 25% 25%,#ffffff80,#fff0 50%);background-color:#b257ff;background-blend-mode:screen;border:none;box-shadow:.2rem .2rem .6rem #000;font-family:glowworm-mn,sans-serif;font-size:1rem;letter-spacing:.05rem}BUTTON:hover{outline:2px solid #fff}#board{position:relative;width:100%;aspect-ratio:1;max-width:1200px;display:grid;grid-template-columns:repeat(50,1fr);grid-template-rows:repeat(50,1fr);border:5px solid #000;touch-action:pinch-zoom;background-color:#000;border-radius:0 0 .6vh .6vh;box-shadow:0 0 1rem #000}input[type=text]{all:unset;width:15rem;border-radius:1rem 0 0 1rem;padding:.25rem .5rem;background-color:#fff;color:#000}.input_btn{border-radius:0 1rem 1rem 0;background:none;box-shadow:none;background-color:#0279a6;color:#fff}.input_btn:hover{background-color:#11aae4;outline:1px solid #fff}