#main-container{display:flex;align-items:flex-start;background:#f3f3f3;height:100vh}#canvas-container{position:relative;flex:1 0 0;height:100%;isolation:isolate}#canvas-container canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.canvas-mask{position:absolute;width:100%;bottom:0;left:50%;transform:translate(-50%,-50%);z-index:-1;width:73rem}#loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000090;z-index:1;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:clamp(12px,1.5rem,30px);transition:opacity .5s var(--ease),visibility .5s var(--ease)}#loading-overlay.not-active{opacity:0;visibility:hidden}#controls-container{flex-shrink:0;height:calc(100vh - 18rem);background:#fff;margin-top:11.5rem;padding:5rem 4rem;border-radius:2rem;margin-right:7rem;width:80rem}.controls-content{width:calc(100% - 8rem);height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:3rem;width:100%}.controls-header{display:grid;gap:4rem;width:100%;max-width:100%}.controls-header h2{color:#222;font-size:clamp(20px,4rem,60px)}[data-drag-bounds]{width:100%;overflow:hidden}.tabs{position:relative;display:flex;gap:2rem;white-space:nowrap;padding-bottom:.5rem;width:fit-content}.tabs:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%,-.5rem);width:100%;height:1px;background:#dadada}.tab-btn{position:relative;z-index:1;padding-block:1.5rem;flex-shrink:0;padding-inline:2rem;color:#000;font-size:clamp(14px,2rem,30px);font-weight:300;line-height:125%;letter-spacing:1px}.tab-btn:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;height:1px;background:#000;opacity:0}.tab-btn.active:after{opacity:1}#tab-content-wrapper{overflow:auto;height:100%}.tab-content{display:none;gap:1.5rem;height:100%;align-content:start}.tab-content.active{display:grid}.tab-content h3{color:#222;font-size:clamp(12px,2rem,30px);font-weight:300;line-height:150%}.tab-content h3 span{color:#b80000}.options-grid,.length-grid{display:flex;gap:1.5rem;flex-wrap:wrap}.opt-wrapper{display:flex;flex-direction:column;gap:1.5rem}.opt-wrapper span{color:#000;font-size:clamp(8px,1.5rem,25px);margin-left:1.5rem;font-weight:400}.opt-btn{padding:1.5rem;border-radius:1.5rem;border:1.284px solid transparent;transition:all .3s}.opt-btn.selected{border-color:#a3a3a3}.opt-btn img{width:10rem;height:9rem;border-radius:2rem;pointer-events:none}.opt-check,.length-btn{position:relative;padding:2rem 2.5rem;border-radius:1.3rem;border:.667px solid #acacac;background:#f5f5f5;min-width:9rem;color:#222;font-size:clamp(10px,2rem,30px);overflow:hidden;transition:background .3s var(--ease)}.length-btn{min-width:12rem}.opt-check:after,.length-btn:after{content:"";position:absolute;bottom:0;right:0;background:#000;color:#fff;width:3rem;height:3rem;border-top-left-radius:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l2 2 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:1rem;transform:scale(0);transition:transform .4s var(--ease);transform-origin:right bottom}.opt-check.selected,.length-btn.selected{transform:scale(1);background:transparent}.opt-check.selected:after,.length-btn.selected:after{transform:scale(1)}#tab-summary h3{color:#000;font-size:clamp(12px,3.4rem,30px);font-weight:300}.summary-container{display:flex;flex-direction:column;gap:3rem;width:100%}.summary-row{display:flex;align-items:center;gap:5rem}.sum-label{color:#000;font-size:clamp(10px,1.4rem,30px);font-weight:300;text-transform:uppercase;width:15rem}.sum-value{color:#6d6d6d;font-size:clamp(9px,1.4rem,30px)}.sum-price{color:#000;font-size:clamp(10px,1.6rem,30px);font-weight:300;margin-left:auto}.summary-total-line{width:100%;height:1px;background:#f4f4f4;flex:1 0 0;margin-top:auto}#controls-footer{width:100%}.footer-subtotal{display:flex;justify-content:space-between;align-items:center;padding-bottom:3rem;border-bottom:1px solid #222}.footer-subtotal span,.total-price{color:#000;font-size:clamp(12px,3rem,30px);font-weight:400;line-height:83.333%;letter-spacing:1.5px}.total-price{font-weight:300}.footer-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem}.nav-btn-text{display:flex;align-items:center;gap:2rem}.nav-btn-text.is--previous{display:none}.nav-btn-text span{color:#000;font-size:calc(12px,2rem,30px);font-weight:300;line-height:125%;letter-spacing:1px}.nav-btn-text svg{width:1rem;height:auto;flex-shrink:0}.nav-btn-pill{display:flex;align-items:center;gap:1rem;padding:1.5rem 3rem;border-radius:5rem;background:#000;color:#fff;font-size:clamp(12px,1.6rem,30px);font-weight:500}.nav-btn-pill svg{width:1.6rem;height:auto;flex-shrink:0}.nav-btn-pill.hidden{display:none}.hidden{display:none!important}#tab-form{height:100%;display:none;justify-content:center;align-items:center;padding-inline:12rem}#tab-form.active{display:flex}.form{display:flex;flex-direction:column;gap:2rem}.form .form-row{display:flex;gap:1.5rem;width:100%}.form .form-field{flex:1 0 0}.form .form-field label{color:#000;font-size:clamp(10px,1.4rem,30px);font-weight:300;line-height:134%}.form .form-field span{color:#b80000}.form .form-field input{color:#000;font-size:clamp(10px,1.6rem,30px);font-weight:300;line-height:134%;padding:1rem 2rem;border-radius:1rem;border:1px solid #d6d6d6}.form .form-field{display:flex;flex-direction:column;gap:.5rem}#tab-sent{display:none}#tab-sent.active{display:block;height:100%}.tab-sent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5rem;height:100%}.tab-sent__h4{color:#000;text-align:center;font-size:3rem;font-weight:300;line-height:134%;width:34rem}.tab-sent__icon{width:8.5rem;height:8.5rem}.units{position:absolute;left:50%;top:30rem;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1rem}.units h3{color:#000;font-size:clamp(25px,5.2rem,70px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s var(--ease),visibility .5s var(--ease),transform .5s var(--ease);transition-delay:0s}.units span{color:#000;font-size:clamp(12px,2rem,30px);font-weight:300;line-height:1.25;letter-spacing:1px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s var(--ease),visibility .5s var(--ease),transform .5s var(--ease);transition-delay:.1s}.units.is--active h3,.units.is--active span{opacity:1;visibility:visible;transform:translateY(0)}@media (max-height: 1000px){#controls-container{height:calc(100vh - 20rem)}.controls-content{gap:3rem}.controls-header{gap:2rem}.controls-header h2{font-size:clamp(20px,3rem,60px)}}.touch-container{display:none}@media (orientation: portrait),(max-width: 1099px){#canvas-container,#controls-container{display:none}.touch-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem;height:100%;padding-inline:1.5rem}.touch-container .touch-container__icon{width:12.5rem;height:12.5rem}.touch-container .touch-container__h3{color:#222;text-align:center;font-size:2.4rem}.touch-container .touch-container__p{color:#6d6d6d;text-align:center;font-size:1.4rem;font-weight:300;line-height:150%}}