*{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-user-select:none;user-select:none}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;margin:0;padding:0;box-sizing:border-box;background:#1d1d1d;color:#fff;overflow:hidden}p{margin:0}main{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.hidden{display:none}.button{background:#ccc;border:3px solid #000;border-radius:10px;font-size:1rem;line-height:1.2rem;font-weight:700;color:#000;padding:5px 10px;cursor:pointer}.button:hover:not(:disabled){color:#ccc;background:#000}.button:disabled{opacity:.5;cursor:default}.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1rem;opacity:0;z-index:5;transition:all .8s}.levels.show{opacity:1}.level{width:50px;height:50px;font-size:1.5rem}.currentLevel{position:fixed;top:10px;left:20px;z-index:3;border-radius:10px;display:flex;justify-content:center;align-items:center;font-size:1.2rem;line-height:35px;font-weight:600;color:#ccc}.backtomenu{position:fixed;bottom:10px;left:12px;z-index:3}.lights{position:fixed;top:-550px}.lights .question{position:absolute;bottom:-100px;left:50%;transform:translate(-50%,-50%);font-size:1.2rem;width:100dvw;text-align:center}.lights>div{display:flex;gap:10px}.lights.resolve{transition:all 3s ease-in-out;top:50%}.light{position:relative}.light .index{position:absolute;bottom:-25px;left:50%;transform:translate(-50%)}.bulb{position:relative;width:80px;height:80px;background:#444;border-radius:50%;z-index:2}.bulb.on{background:#fff;box-shadow:0 0 50px #fff,0 0 100px #fff,0 0 150px #fff,0 0 200px #fff,0 0 250px #fff,0 0 300px #fff,0 0 350px #fff;transition:box-shadow .3s}.bulb:before{content:"";position:absolute;top:-50px;left:22.5px;width:35px;height:60px;background:#444;border-top:30px solid #000;border-radius:10px}.bulb.on:before{background:#fff}.bulb.on:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;background:#fff;border-radius:50%;filter:blur(40px)}.bulb span:nth-child(1){position:absolute;top:-16px;left:-4px;display:block;width:30px;height:30px;background:transparent;transform:rotate(342deg);border-bottom-right-radius:40px;box-shadow:20px 20px 0 10px #444}.bulb.on span:nth-child(1){box-shadow:20px 20px 0 10px #fff}.bulb span:nth-child(2){position:absolute;top:-16px;right:-4px;display:block;width:30px;height:30px;background:transparent;transform:rotate(17deg);border-bottom-left-radius:40px;box-shadow:-20px 20px 0 10px #444}.bulb.on span:nth-child(2){box-shadow:-20px 20px 0 10px #fff}.bulb span:nth-child(3){position:absolute;bottom:22px;right:35px;display:block;width:30px;height:30px;background:transparent;transform:rotate(140deg);box-shadow:-10px 10px 0 10px #444}.bulb.broken{background:transparent}.light .temperature{position:absolute;top:20px;left:50%;z-index:3;transform:translate(-50%,-50%);font-size:1rem;color:#000}.wire{position:absolute;left:calc(50% - 2px);bottom:50%;width:4px;height:70dvh;background:#000;z-index:1}.switches{position:relative;bottom:0}.switches .explain{position:absolute;bottom:-100px;left:50%;transform:translate(-50%,-50%);font-size:1rem;width:60dvw;text-align:center}.switches>div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.switches.resolve{transition:all 3s ease-in-out;bottom:-1000px}.switch{position:relative;width:80px;height:80px;background:linear-gradient(#eee,#ccc,#eee);border:3px solid #000;border-radius:10px;display:flex;justify-content:center;align-items:center}.switch .index{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);z-index:1;font-size:1.2rem;font-weight:700;color:#1d1d1d;cursor:pointer;-webkit-user-select:none;user-select:none}.switch.on .index{transform:translate(-50%,-45%)}.switch .btn{position:relative;width:25px;height:40px;background:linear-gradient(#777,#fff,#777);border-radius:6px;border:2px solid #000;cursor:pointer}.switch .btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:85%;background:linear-gradient(#fff,#fff);border-radius:4px}.switch.on .btn:before{top:15%}.look-up{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #eee;border-radius:10px;padding:4px 10px 7px;background:transparent;color:#eee;font-size:1.5rem;font-weight:600;text-align:center;width:100%;margin-bottom:40px;cursor:pointer}.look-up:hover{background:#eee;color:#1d1d1d}.result{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;font-size:1.2rem;font-weight:600;color:#1d1d1d;text-align:center;background:#eee;padding:20px;border:3px solid #000;border-radius:10px;box-shadow:0 0 10px #00000080;min-width:300px}.result .buttons{display:flex;justify-content:center;margin-top:.5rem;gap:.5rem}.result .buttons .button{display:flex;gap:.3rem;font-size:1rem}.result .buttons .button span{font-size:1.5rem}