*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}html,body{overflow:hidden;height:100%;width:100%;position:fixed;touch-action:none}.root-container{width:100vw;height:100vh;border:none;display:flex;background-color:#ebebeb;justify-content:center;align-items:center;touch-action:none}.iframe-container{width:100vw;height:100vh;border:none;display:flex;background-color:#ebebeb;justify-content:flex-end;align-items:center;touch-action:none}.main-container{display:flex;flex-direction:column;background-color:#fff;width:100%;max-width:400px;height:100%;max-height:90vh;border:none;border-radius:24px;overflow:hidden;position:relative}.marginRight{margin-right:50px}.header{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 10px;flex-shrink:0}.qr-code-container,.close-container{width:32px;height:32px;background-color:#fafafa;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:opacity .2s}.qr-code-container:hover,.close-container:hover{opacity:.8}.qr-code,.close-icon{width:20px;height:20px}.title{font-size:20px;font-weight:600;margin:0}.content,.pose-content{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;padding:0 20px;overflow-y:auto}.content-title{font-size:14px;font-weight:400;margin-top:10px;text-align:center}.card-container{display:flex;flex-direction:column;background-color:#eaeaea;width:100%;border:2px dashed #bfbfbf;border-radius:16px;margin-top:20px;-webkit-user-select:none;user-select:none}.card-icon{flex:1;width:40px;height:40px;-webkit-user-select:none;user-select:none;pointer-events:none;margin:30px 0 0 20px}.card-description{text-align:center;font-size:12px;font-weight:500;margin:10px}.card-dragger{margin-top:15px;touch-action:none;cursor:ns-resize;display:flex;justify-content:center;align-items:center;width:50px;height:50px}.drag-icon{width:35px;height:35px;-webkit-user-select:none;user-select:none;pointer-events:none}.qr-popup-wrapper{position:absolute;bottom:0;right:20px;margin-bottom:100px;display:flex;flex-direction:column;align-items:flex-end;z-index:100}.slide-up{animation:slideUp 1.3s cubic-bezier(.16,1,.3,1) forwards}.slide-down{animation:slideDown 1.3s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{transform:translateY(150%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(150%);opacity:0}}.qr-popup-close-btn{width:24px;height:24px;background-color:#1e1e1e;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;margin-bottom:8px;box-shadow:0 2px 5px #0003}.qr-popup-close-btn img{width:10px;height:10px;filter:brightness(0) invert(1)}.qr-popup-content{background:#fff;border:6px solid #FAFAFA;border-radius:12px;box-shadow:0 1px 12px #00000026;display:flex;flex-direction:column;align-items:center;width:130px;padding:2px}.qr-popup-text{font-size:9px;text-align:center;color:#555;margin:0 0 8px;font-weight:500}.qr-popup-img{width:90%}.ring-size-container{display:flex;justify-content:space-around;align-items:center;width:100%;margin-top:20px}.ring-size-labels-container{display:flex;flex-direction:column;align-items:center;gap:4px}.ring-size-label{font-size:12px;color:#666;margin:0}.ring-size-number{font-size:18px;font-weight:600;margin:0}.ring-display-wrapper{height:300px;width:100%;display:flex;justify-content:center;align-items:center;flex:1}.ring-circle{border:3px solid #1e1e1e;border-radius:50%}.ring-range-container{width:100%;display:flex;flex-direction:column;align-items:center}.ring-slider-wrapper{width:90%;display:flex;flex-direction:column;align-items:center;margin-bottom:10px;gap:20px;flex:1}.ring-slider{-webkit-appearance:none;width:100%;height:20px;border-radius:10px;outline:none;opacity:1;transition:opacity .2s;cursor:pointer;background:#c2c2c2}.ring-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:50px;height:30px;border-radius:20px;background:var(--thumb-bg, #000);cursor:pointer;border:3px solid #c2c2c2}.ring-slider::-moz-range-thumb{appearance:none;width:50px;height:30px;border-radius:38%;background:var(--thumb-bg, #000);cursor:pointer;border:3px solid #c2c2c2}.ring-slider-dots{display:flex;justify-content:space-between;width:100%;padding:0 10px;box-sizing:border-box}.slider-dot{width:6px;height:6px;border-radius:50%;background-color:#d3d3d3;transition:background-color .1s ease}.slider-dot.active{background-color:#000}.ring-range-description{font-size:12px;font-weight:300;text-align:center;color:#555;margin:13px 0 10px;line-height:1.4}.ring-size{font-size:24px;font-weight:700;margin:10px 0}.footer{width:100%;padding:20px;background-color:transparent;flex-shrink:0;z-index:101}.primary-button{width:100%;height:50px;border:none;background-color:var(--btn-bg, #1e1e1e);border-radius:var(--btn-border-radius, 12px);color:#fff;font-size:16px;font-weight:500;cursor:pointer;transition:opacity .2s}.primary-button:hover{opacity:.9}.footer-text{font-family:Poppins,sans-serif;font-size:11px;font-weight:400;color:#888;text-align:center;margin-top:12px}@media(max-width:768px){.main-container{max-width:100vw;max-height:100svh;height:100svh;border-radius:0}.marginRight{margin-right:0}.root-container{align-items:flex-start;background-color:#fff}.ring-display-wrapper{height:250px}.desktop-only-icon{visibility:hidden;pointer-events:none}.qr-popup-wrapper{display:none!important}}.loading-outer{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;will-change:opacity;contain:layout style paint}.loading-background-dim{background:#fff6}.loading-outer span{font-size:18px;font-weight:500;color:#000;margin-bottom:20px;will-change:contents;backface-visibility:hidden;-webkit-font-smoothing:antialiased}.loader-dots{display:flex;gap:8px;will-change:transform;transform:translateZ(0)}.loader-dots div{width:10px;height:10px;border-radius:50%;background:#d3d3d3;will-change:transform,background-color;transform:translateZ(0);backface-visibility:hidden;animation:bounce .9s ease-in-out infinite}.loader-dots div:nth-child(1){animation-delay:0s}.loader-dots div:nth-child(2){animation-delay:.3s}.loader-dots div:nth-child(3){animation-delay:.6s}@keyframes bounce{0%,80%,to{transform:translateY(0) translateZ(0);background-color:#d3d3d3}40%{transform:translateY(-6px) translateZ(0);background-color:var(--dot-bg, rgb(93, 95, 95))}}@media(prefers-reduced-motion:no-preference){.loader-dots div{animation-timing-function:cubic-bezier(.45,.05,.55,.95)}}
