:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;width:100dvw}@media screen and (max-width:680px){#root{flex-direction:column}}html{overflow:hidden}aside{z-index:4;padding:12px;background-color:#fff;flex:1;max-width:528px;height:100dvh;margin:0;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;justify-content:space-between;overflow:auto}@media screen and (max-width:680px){aside{max-width:initial}}aside>*{display:flex;flex-direction:column;gap:16px}p{margin:0}main{position:relative;flex:1;overflow:hidden}.preview{background-color:#546982;flex:1;height:100dvh;position:relative;display:flex;flex-direction:column;gap:40px;justify-content:center;align-items:center}@media screen and (max-width:680px){.preview{height:fit-content}}body{padding:0;margin:0;background-color:grain;overflow:hidden}.ball{background:#fff;background:radial-gradient(at left top,#fff,#898989)}.image-upload-btn{border:1px dashed #87919d;width:100%;height:200px;background-color:#f4f3f3;cursor:pointer}@media screen and (max-width:680px){.image-upload-btn{display:none}}.image-upload-btn--mobile{flex:1}@media screen and (min-width:681px){.image-upload-btn--mobile{display:none}}.image-upload-btn:hover{background-color:#ecebeb}.image-upload-btn:active{background-color:#e7e7e7}@media screen and (max-width:680px){.payment-btn:not(.payment-btn--mobile){display:none}}.payment-btn--mobile{margin:40px 12px 12px}@media screen and (min-width:681px){.payment-btn--mobile{display:none}}.continue-btn{cursor:pointer;border-radius:8px;padding:0 12px;height:40px;background:#2ea44f;outline:0;border:0;font-weight:700;color:#fff;text-wrap:balance}.continue-btn--with-loading{display:flex;align-items:center;gap:12px}.continue-btn--big{height:50px}.continue-btn:hover{background:#278f45}.continue-btn:active{background:#227e3c}button:disabled{background:#d3d3d3!important;cursor:not-allowed}.faded-btn{cursor:pointer;border-radius:8px;padding:0 12px;height:40px;background:#789;outline:0;border:0;font-weight:700;color:#fff;text-wrap:balance}.faded-btn:hover{background:#61707e}.btns{display:flex;width:100%;gap:16px}h1{margin:0}h2{margin:0;font-size:1.25rem;font-weight:400}.image-upload-input{display:none}.top-bar-btns{position:absolute;top:0;left:0;width:100%;z-index:4;padding:12px}.bottom-bar-btns{width:100%;bottom:0;left:0;padding:12px;box-sizing:border-box;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:12px;position:absolute;align-items:end}.bottom-selector{flex:1;display:flex;gap:12px}.bottom-selector-entry{font-weight:700;width:50px;height:50px;background-color:#d3d3d3;display:flex;justify-content:center;align-items:center;outline:none;box-shadow:none;border:0;cursor:pointer;background-size:cover;border-radius:50%}.bottom-selector-entry:hover{background-color:#c0bdbd}#container{z-index:2;height:100%;max-height:400px;width:auto;aspect-ratio:1/1;position:relative;overflow:hidden;border-radius:50%;background-size:cover}@media screen and (max-width:680px){#container{width:min(80%,300px);height:auto}}#target{position:absolute;background-size:100% 100%}#target-outline{z-index:3;position:absolute;border:1px dashed crimson}#target-out-of-bounds{z-index:1;position:absolute;opacity:.4;background-size:100% 100%}.zoom-anchor{position:absolute;width:20px;height:20px;border-radius:50%;background-color:#91112a;box-shadow:#959da533 0 8px 24px}.product-picture-render-area{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.ReactModal__Overlay{display:flex;align-items:center;justify-content:center}.ReactModal__Content{height:fit-content;max-width:900px;display:flex;flex-direction:column;gap:12px;position:static!important}.info{padding:12px;background:#e1e1e1;display:flex;flex-direction:column;gap:16px;border-radius:8px}.modal-btns{display:flex;gap:12px}.color-picker-and-label{display:flex;flex-direction:column;gap:8px}.color-picker-and-label label{color:#fff;mix-blend-mode:difference}.loading-indicator{width:20px;height:20px;border-radius:50%;box-sizing:border-box;animation:spin 3s linear infinite,double-spin 1.5s ease-in-out infinite;animation-composition:add;border-style:solid;border-color:gray transparent transparent transparent;transform-origin:center;display:inline-block}@keyframes double-spin{to{transform:rotate(720deg)}}@keyframes spin{to{transform:rotate(360deg)}}