@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap";*{font-family:Poppins,sans-serif;margin:0;padding:0;overscroll-behavior:none;box-sizing:border-box;user-select:none}a{all:unset;cursor:pointer}body{overflow:hidden;color:#d9d9d9;background:#0d0d0d}.wrapper{height:100vh;height:100svh;overflow:hidden;width:100%;position:relative}button{all:unset;cursor:pointer}.demo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;font-size:calc(1.5vw + 1.5rem);white-space:nowrap;opacity:0}header{position:absolute;top:0;width:100%;height:64px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 16px;font-size:1.5rem;z-index:10;transform:translateY(-20%);opacity:0}header .console{cursor:pointer}header .menu{cursor:pointer}header.visible{opacity:1;transform:translateY(0);transition:all .3s ease-in}.main-wrapper{display:flex;flex-direction:row;justify-content:start;align-items:center;height:100%;width:100%;overflow:hidden}.main-wrapper .console-wrapper{height:100%;width:0%;display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;transition:all .3s ease-in-out;will-change:width;z-index:2}.main-wrapper .console-wrapper.active{width:clamp(0%,70%,600px)}.main-wrapper .console-wrapper .console{height:70%;width:90%;margin:16px;padding:20px;border:3px rgba(241,241,241,.2) solid}.main-wrapper .console-wrapper .console .zone{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:start;overflow:hidden;white-space:nowrap;-webkit-mask-image:-webkit-gradient(linear,center 20%,center 5%,from(rgb(0,0,0)),to(rgba(0,0,0,0)));gap:10px}.main-wrapper .console-wrapper .console .zone .el{display:flex;flex-direction:row;justify-content:start;align-items:start;gap:5px;font-size:.8rem}.main-wrapper .console-wrapper .console .zone .el .time{opacity:.7}.main-wrapper .console-wrapper .console .zone .el.success{color:#01b701}.main-wrapper .experience-wrapper{height:100%;width:100%;position:relative}.main-wrapper .menu-wrapper{background:#1f1f1f;height:100%;width:0%;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;transition:all .3s ease-in-out;will-change:width;z-index:2}.main-wrapper .menu-wrapper.active{width:clamp(0%,70%,600px)}.main-wrapper .menu-wrapper nav{display:flex;flex-direction:column;justify-content:center;gap:8px}.main-wrapper .menu-wrapper nav a{display:flex;gap:4px;align-items:baseline;opacity:.5;transition:all .2s ease}.main-wrapper .menu-wrapper nav a .number{font-size:2.5rem;font-weight:800;color:transparent;-webkit-text-stroke:hsl(0,0%,85%) 1px}.main-wrapper .menu-wrapper nav a .text{font-size:1.5rem}.main-wrapper .menu-wrapper nav a.active{opacity:1;transform:translate(20px)}.help{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;justify-content:end;align-items:end;gap:16px;opacity:0;transform:translate(30%)}.help.visible{opacity:1;transform:translate(0);transition:all .3s .2s ease-in}.help-button{border:hsl(0,0%,85%) 2px solid;height:40px;aspect-ratio:1;border-radius:100%;display:grid;place-items:center;color:#d9d9d9;font-size:1.5rem;line-height:1.5rem;padding-left:2px}.help .commands{background:#1f1f1f;padding:12px;opacity:0;display:flex;flex-direction:column;justify-content:start;align-items:start;gap:8px;border-radius:10px}.help .commands .command{display:flex;flex-direction:row;justify-content:start;align-items:start;gap:4px}.help .commands .command .icon{padding:0 8px;background:#0d0d0d;border-radius:5px}.help .commands.active{opacity:1}.controls{position:absolute;left:50%;transform:translate(-50%);bottom:8%;display:flex;flex-direction:wrap;justify-content:center;align-items:center;gap:16px;opacity:0}.controls.active{bottom:10%;opacity:1;transition:all .3s .1s ease-in}.controls .button{font-size:1.5rem;font-weight:300;padding-block:10px;padding-inline:24px;text-transform:uppercase;border:hsl(0,0%,85%) 3px solid}.controls .button.randomize{color:#d9d9d9}.controls .button.solve{background:hsl(0,0%,85%);color:#0d0d0d;font-weight:400}.controls .button:disabled{opacity:.5}.webgl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vmin;aspect-ratio:1;outline:none;z-index:-1}@media screen and (max-width: 600px){.controls{bottom:3%}.controls.active{bottom:5%}.controls .button{font-size:1.2rem;padding-block:8px}.main-wrapper{flex-direction:column}.main-wrapper .console-wrapper{order:2;height:0%;width:100%;align-items:center;will-change:height}.main-wrapper .console-wrapper.active{height:70%;width:100%}.main-wrapper .console-wrapper .console{height:90%;width:90%}.main-wrapper .menu-wrapper{position:absolute;right:0;top:0;width:100%;transform:translate(100%)}.main-wrapper .menu-wrapper.active{width:100%;transform:translate(0);transition:all .5s ease-in-out}.help{display:none}.webgl{height:150vmin;top:60%}.webgl.menu{transform:translateY(100%)}}