@font-face{font-family:SuisseMono;src:url(/assets/SuisseIntlMono-Regular-WebS-12hCXZbU.woff2) format("woff2"),url(/assets/SuisseIntlMono-Regular-WebS-BGV2cq1u.woff) format("woff"),url(/assets/SuisseIntlMono-Regular-CeQPhom3.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}*{margin:0;padding:0}*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{font-family:SuisseMono,monospace;font-weight:400;font-size:1.3rem;line-height:1.3;letter-spacing:-.02em;text-transform:uppercase;background-color:#e6e6e6;min-height:100vh}.main{padding:3rem;display:grid;grid-template-columns:repeat(12,1fr);column-gap:3rem;height:100vh;overflow:hidden}.controls{grid-column:span 3;display:grid;grid-template-rows:repeat(4,min-content) 1fr;background-color:#fff;border-radius:3rem;padding:3rem}.controls-title{margin-top:0;padding-bottom:3rem;border-bottom:solid 1px #f4f5f5}.controls-colors{padding-top:2rem}.colors-text{display:grid;grid-template-columns:repeat(2,auto);justify-content:space-between;align-items:center;padding-bottom:1.3rem}.color-name{position:relative;padding:.1rem .6rem}.color-selector{display:flex;gap:.8rem;margin:.3rem;padding-bottom:3rem;border-bottom:solid 1px #f4f5f5}.btn-color{border:none;width:4.4rem;height:4.4rem;border-radius:1rem;cursor:pointer}.btn-color:focus-visible,.btn:focus-visible,.btn-box-icons:focus-visible,.text-input-input:focus-visible{outline:2px solid #12161c;outline-offset:3px}.selected-color{outline-offset:3px}.controls-ropes{padding-top:2rem;border-bottom:solid 1px #f4f5f5}.controls-slider{display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem}.controls-boxes{padding-top:2rem;border-bottom:solid 1px #f4f5f5}.controls-text{padding-top:2rem}.canvas-container{grid-column:span 9}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:.6rem;background:#f4f5f5;border-radius:.3rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:.2rem;height:1.6rem;background:#12161c;margin-top:-.5rem}.custom-slider{position:relative;display:flex;align-items:center;gap:.3rem;cursor:pointer;width:100%}.custom-slider input[type=range]{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.slider-track-left,.slider-track-right{height:.6rem;border-radius:.3rem}.slider-track-left{flex:var(--left);background:#12161c}.slider-track-right{flex:var(--right);background:#f4f5f5}.slider-thumb{width:.2rem;height:1.6rem;background:#12161c;border-radius:.1rem;flex-shrink:0}.controls-download{justify-self:center;margin-top:auto;padding-bottom:3rem}.btn{background-color:#f4f5f5;color:#12161c;border:none;border-radius:5rem;font-family:SuisseMono;font-weight:400;font-size:1.3rem;line-height:1.3;letter-spacing:-.02em;text-transform:uppercase;padding:.6rem 1.2rem;cursor:pointer;transition:all .2s}.btn:hover{cursor:pointer}.btn-download{display:flex;gap:.45rem;align-items:center}.download-dot{width:.8rem;height:.8rem;border-radius:100px;background-color:#10e41a}.canvas-container{display:grid;grid-template-rows:1fr min-content;min-height:0;z-index:10;position:relative}.canvas-wrapper{min-height:0;overflow:hidden;margin-bottom:3rem}#boxes-canvas{display:block;touch-action:none}.box-controls{justify-self:center;display:flex;gap:1.5rem;justify-content:center;align-items:center;background-color:#fff;padding:.4rem .4rem .4rem 2.5rem;border-radius:100px}.box-controls-create-mode{padding:.4rem}.btn-add-box{display:flex;gap:1.5rem;justify-content:center;align-items:center;background-color:#fff;padding:.4rem .4rem .4rem 2.5rem}.btn-box-controls{width:4.5rem;height:4.5rem;position:relative}.plus-symbol-1,.plus-symbol-2{position:absolute;top:50%;left:50%;transform-origin:center;transition:transform .25s ease,width .25s ease,height .25s ease}.plus-symbol-1{background-color:#12161c;width:10px;height:1px;transform:translate(-50%,-50%) rotate(0)}.plus-symbol-2{background-color:#12161c;width:1px;height:10px;transform:translate(-50%,-50%) rotate(0)}.btn-box-controls.active .plus-symbol-1{width:20px;transform:translate(-50%,-50%) rotate(45deg)}.btn-box-controls.active .plus-symbol-2{height:20px;transform:translate(-50%,-50%) rotate(45deg)}.controls-box-divider{border-right:solid 1.5px #f4f5f5;height:3.3rem}.box-controls-icons{display:flex;gap:1rem}.btn-box-icons{background-color:transparent;border:none;display:flex;flex-direction:column;align-items:center;position:relative}.btn-box-icons:hover{cursor:pointer}.selected-icon{width:.4rem;height:.4rem;background-color:#10e41a;border-radius:100px;position:absolute;bottom:-.3rem}.text-input{width:40rem;position:absolute;bottom:6.3rem;left:50%;transform:translate(-50%);background-color:#fff;border-radius:3rem;padding:2rem;display:flex;flex-direction:column;gap:1rem;font-family:SuisseMono;font-weight:400;font-size:1.3rem;line-height:1.3;letter-spacing:-.02em}.text-input-top{display:flex;gap:.3rem}.text-input-bottom{display:flex}.text-input-number{border:1px solid #f4f5f5;border-radius:10rem;width:3.2rem;height:3.2rem;text-align:center;justify-content:center;padding-top:.7rem}.text-input-input{border:1px solid #f4f5f5;border-radius:10rem;padding:.8rem 1.4rem;text-transform:uppercase;width:100%}.text-input-input::placeholder{color:#e6e6e6}.text-input-input:focus{border:1px solid #f4f5f5}@media(max-width:900px){body{min-width:32rem}.main{grid-template-columns:1fr;gap:2rem;height:auto;min-height:100vh;overflow:visible;padding:1.5rem}.controls,.canvas-container{grid-column:1}.controls{padding:2rem}.canvas-container{min-height:70vh}.text-input{width:min(40rem,calc(100% - 2rem))}}