*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;font-family:Noto Sans,sans-serif;font-size:16px}body{background:url(/static/image/background.c3306bda.png) 50%/cover}body:before{content:"";-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.hidden{display:none}#page{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}h1{text-align:center;margin:0 0 5px;font-size:28px}.container{align-items:center;gap:5px;display:flex}.colors,.blips,.blip-container{width:396px;height:310px;position:relative}.blip-container{width:310px;height:310px}.colors,.blips{grid-template-columns:repeat(auto-fill,16.6667%);display:grid;overflow-y:auto}.color,.blip{aspect-ratio:1;cursor:pointer;background-color:#d4d4d4;border:1px solid #333;flex-direction:column;justify-content:center;margin:5px;padding:5px;display:flex;position:relative}.blip.active,.color.active{border-width:3px;border-color:#000}.blip>div{text-align:center;flex-grow:1;justify-content:center;align-items:center;display:flex}.blip img{max-height:36px}#blip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.background{width:100%}.background:not(.active){--height:12%;cursor:pointer;transition:clip-path .2s;position:absolute;top:0;left:0}.background:not(.active):hover{--height:16%}.background:not(.active).idx0{clip-path:polygon(0 0,25% 0,25% var(--height),0 var(--height))}.background:not(.active).idx1{clip-path:polygon(25% 0,50% 0,50% var(--height),25% var(--height))}.background:not(.active).idx2{clip-path:polygon(50% 0,75% 0,75% var(--height),50% var(--height))}.background:not(.active).idx3{clip-path:polygon(75% 0,100% 0,100% var(--height),75% var(--height))}.color{text-align:center;font-weight:500}.output-container{justify-content:center;width:100%;margin-top:15px;display:flex}.code-block{color:#000;background:#d4d4d4;border:1px solid #333;justify-content:space-between;align-items:center;gap:10px;width:320px;padding:10px 15px;font-family:Source Code Pro,Consolas,Monaco,monospace;font-size:14px;transition:border-color .2s,background-color .2s;display:flex}.code-block.error{background-color:#ffcdd2;border-color:#d32f2f}#code-output{color:inherit;font-family:inherit;font-size:inherit;resize:none;background:0 0;border:none;outline:none;width:100%;height:80px;overflow:hidden}#copy-btn{color:#333;cursor:pointer;background:0 0;border:none;border-radius:3px;align-items:center;padding:5px;transition:background .2s;display:flex}#copy-btn:hover{color:#000;background:#0000001a}