:root{--primary-color: #007aff;--secondary-color: #f2f2f7;--success-color: #34c759;--error-color: #ff3b30;--text-color: #1d1d1f;--text-secondary: #86868b;--background-color: #ffffff;--animation-duration: .4s}*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%;width:100%;overflow:hidden}body{background-color:var(--background-color);color:var(--text-color);line-height:1.5;display:flex;flex-direction:column;width:100%}#desktop-blocker{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}.desktop-blocker-card{background:#fff;color:#111;width:min(520px,90vw);border-radius:16px;padding:24px;text-align:center;box-shadow:0 20px 60px #00000059}.desktop-blocker-card h2{font-size:clamp(18px,4vw,24px);margin-bottom:8px}.desktop-blocker-card p{color:#555;font-size:clamp(13px,3vw,15px);margin-bottom:16px}#desktop-qr{width:min(280px,70vw);height:auto;display:block;margin:0 auto 8px}.desktop-fallback-url{word-break:break-all;font-size:12px;color:#888}.container{flex:1;max-width:100%;width:100%;margin:0 auto;padding:0;display:flex;flex-direction:column;position:relative;overflow:hidden;height:100vh}.main-content{flex:1;position:relative;display:flex;flex-direction:column;height:calc(100vh - 70px);width:100%;overflow:hidden}.step-container{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1vh 2vw;opacity:0;transform:translate(100%);transition:opacity var(--animation-duration) ease-in-out,transform var(--animation-duration) ease-in-out;z-index:1;box-sizing:border-box;overflow:hidden;will-change:transform,opacity}.step-container.active{opacity:1;transform:translate(0);z-index:10}.step-container.previous,.step-container.pre-enter-left{transform:translate(-100%)}.step-container.pre-enter-right{transform:translate(100%)}.instructions-container{max-width:100%;text-align:center;margin-bottom:1vh;width:100%}.instruction-title{font-size:clamp(16px,5vw,20px);font-weight:600;margin-bottom:1vh}.instruction-description{color:var(--text-secondary);font-size:clamp(13px,3vw,15px);line-height:1.4;margin-bottom:1vh;padding:0 2vw}.visual-guide{position:relative;width:90%;max-width:280px;height:45vh;max-height:320px;margin:1vh auto;border-radius:16px;background-color:var(--secondary-color);overflow:hidden;box-shadow:0 10px 20px #0000001a;display:flex;justify-content:center;align-items:center}.animation-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:20px}.visual-guide,.animation-container{overflow:visible}.tutorial-video{width:100%;height:100%;object-fit:cover;border-radius:12px}.paper-outline{position:relative;width:min(180px,40vw);height:calc(min(180px,40vw)*1.414);border:2px dashed var(--primary-color);border-radius:8px;animation:pulse 2s infinite;margin:0 auto}.foot-icon{position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:87%;height:80%;max-height:90%;opacity:.6}#step3 .foot-icon{display:block}@keyframes pulse{0%{box-shadow:0 0 #007aff66}70%{box-shadow:0 0 0 10px #007aff00}to{box-shadow:0 0 #007aff00}}.camera-container{position:relative;width:90%;max-width:95vw;aspect-ratio:1 / 1.414;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 10px 20px #0000001a;max-height:60vh}.camera-view-container{position:relative;width:100%;height:100%;overflow:hidden;transform:translateZ(0);will-change:transform}#camera-view,#captured-image{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}.camera-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#0003;z-index:999;transform:translateZ(0);will-change:transform;pointer-events:none}.camera-guide{position:relative;width:min(65%,65vh / 1.414);aspect-ratio:1 / 1.414;border:2px solid white;border-radius:8px;box-shadow:0 0 0 1000px #0000004d}.tilt-badge{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#0f0f0f8c;color:#fff;padding:6px 10px;font-size:12px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 18px #00000040}.tilt-badge.ok{background:#24b156d9}.tilt-badge.warn{background:#ff3b30d9}.tilt-badge .separator{opacity:.7}.tilt-badge .tilt-info{display:inline-flex;gap:6px;align-items:center}.tilt-dial{--angle: 0deg;--progress: 0deg;--dial-size: 22px;--dial-color: var(--primary-color);width:var(--dial-size);height:var(--dial-size);position:relative;display:grid;place-items:center}.tilt-dial-ring{width:100%;height:100%;border-radius:50%;background:conic-gradient(from -90deg,var(--dial-color) 0deg,var(--dial-color) var(--progress),rgba(255,255,255,.15) var(--progress));transition:background .2s ease;position:relative}.tilt-dial-center{position:absolute;width:calc(var(--dial-size) - 6px);height:calc(var(--dial-size) - 6px);border-radius:50%;background:#0000008c;box-shadow:inset 0 0 0 1px #ffffff0f}.capture-button.disabled{opacity:.5;pointer-events:none}.capture-button{position:static;margin:0;width:40px;height:40px;border-radius:50%;background-color:#fff;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px #0003;cursor:pointer;transition:transform .2s ease;z-index:2}.capture-button:hover{transform:scale(1.05)}.inner-circle{width:34px;height:34px;border-radius:50%;border:2px solid #ccc}.controls{width:100%;text-align:center;padding:8px;bottom:0;left:0;background-color:var(--background-color);box-shadow:0 -2px 8px #0000001a;z-index:100;height:55px;display:flex;justify-content:center;align-items:center;position:fixed;overflow:visible}.controls .capture-button{position:absolute;left:50%;transform:translate(-50%)}body.step-4 .controls{justify-content:flex-start}.btn{display:inline-block;padding:8px 16px;background-color:var(--primary-color);color:#fff;border:none;border-radius:18px;font-size:clamp(12px,3vw,14px);font-weight:600;cursor:pointer;transition:all .2s ease;margin:0 5px}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.btn:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.btn-secondary{background-color:transparent;color:var(--primary-color)}.btn-cart{background-color:var(--success-color);color:#fff;margin-top:2vh;padding:12px 20px;font-size:clamp(14px,3.5vw,16px);font-weight:700;border-radius:20px;transition:all .3s ease;box-shadow:0 4px 12px #34c7594d}.btn-cart:hover{background-color:#28a745;transform:translateY(-3px);box-shadow:0 6px 16px #34c75966}.btn-cart:active{transform:translateY(-1px);box-shadow:0 4px 12px #34c7594d}.btn-cart svg{margin-right:8px}.btn-icon{display:inline-flex;align-items:center;justify-content:center}.btn-icon svg{margin-right:6px}.file-input{display:none}.progress-dots{display:flex;justify-content:center;margin-top:1vh}.dot{width:8px;height:8px;border-radius:50%;background-color:#d1d1d6;margin:0 5px;transition:all .3s ease}.dot.active{background-color:var(--primary-color);width:16px;border-radius:4px}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%}.loading-spinner{width:50px;height:50px;border:3px solid rgba(0,122,255,.2);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:clamp(14px,3vw,16px);color:var(--text-color);margin-top:2vh}.result-container{text-align:center;max-width:100%;padding:0 5vw;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;max-height:100%}.result-animation{width:70px;height:70px;margin:0 auto 2vh;position:relative}.result-animation .checkmark,.result-animation .crossmark,.result-animation .infomark{display:none}.result-animation.success .checkmark,.result-animation.error .crossmark,.result-animation.neutral .infomark{display:block}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:2;stroke:var(--success-color);stroke-miterlimit:10;box-shadow:inset 0 0 0 var(--success-color);animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--success-color);fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}.crossmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:2;stroke:var(--error-color);stroke-miterlimit:10;box-shadow:inset 0 0 0 var(--error-color);animation:fill-error .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.crossmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--error-color);fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.crossmark__cross{stroke-linecap:round;stroke:var(--error-color);stroke-dasharray:56;stroke-dashoffset:56;animation:stroke .5s cubic-bezier(.65,0,.45,1) .7s forwards}.infomark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:2;stroke:#6c757d;stroke-miterlimit:10;box-shadow:inset 0 0 #6c757d;animation:fill-info .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.infomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#6c757d;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.infomark__i{stroke-linecap:round;stroke:#6c757d;stroke-dasharray:30;stroke-dashoffset:30;animation:stroke .4s cubic-bezier(.65,0,.45,1) .7s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #fff}}@keyframes fill-error{to{box-shadow:inset 0 0 0 30px #fff}}@keyframes fill-info{to{box-shadow:inset 0 0 0 30px #fff}}.result-title{font-size:clamp(18px,5vw,24px);font-weight:700;margin-bottom:1vh}.result-value{font-size:clamp(14px,4.5vw,18px);font-weight:700;color:var(--primary-color);margin:.5vh 0}.result-subtitle{font-size:clamp(12px,2.6vw,13px);color:var(--text-secondary);margin-bottom:.5vh}.size-table{margin:1vh auto;width:100%;max-width:250px;border-collapse:collapse}.size-table th{padding:min(8px,1vh);text-align:left;border-bottom:1px solid #e5e5ea;font-weight:600;color:var(--text-secondary);font-size:clamp(13px,3vw,15px)}.size-table td{padding:min(8px,1vh);border-bottom:1px solid #e5e5ea;font-size:clamp(13px,3vw,15px)}.size-table tr:last-child td{border-bottom:none}.size-display{text-align:center;margin:3vh 0}.size-label{font-size:clamp(16px,4vw,20px);color:var(--text-secondary);margin-bottom:1vh;font-weight:500}.size-badge{display:inline-flex;align-items:center;justify-content:center;width:clamp(120px,25vw,180px);height:clamp(120px,25vw,180px);border-radius:50%;background:linear-gradient(135deg,var(--primary-color),#0056b3);color:#fff;font-size:clamp(36px,12vw,64px);font-weight:800;letter-spacing:1px;box-shadow:0 8px 24px #007aff4d;margin:2vh auto;position:relative;overflow:hidden}.size-badge:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);animation:shine 3s infinite}.size-brand{font-size:clamp(14px,3.5vw,18px);color:var(--text-secondary);font-weight:600;letter-spacing:.5px;margin-top:1vh}@keyframes shine{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}50%{transform:translate(100%) translateY(100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}.debug-measurements{background:#00000008;border-radius:8px;padding:1vh;margin:2vh 0;border-left:3px solid var(--text-secondary)}.debug-measurements .result-subtitle{font-size:clamp(11px,2.5vw,12px);opacity:.8}.debug-measurements .result-value{font-size:clamp(12px,3.5vw,14px);font-weight:600}.error-message{color:var(--error-color);background-color:#ff3b301a;padding:10px;border-radius:10px;margin:1vh auto;max-width:280px;text-align:center;display:none;font-size:clamp(12px,3vw,14px)}.text-error{color:var(--error-color);font-weight:700}.text-success{color:var(--success-color)}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}.fade-in-up{animation:fadeInUp .6s ease}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}@media (min-width: 768px){.camera-container{max-width:500px;max-height:707px;height:60vh}}@media (min-width: 1024px){.camera-container{max-width:600px;max-height:848px;height:65vh}}@media (max-width: 375px),(max-height: 640px){.main-content{height:calc(100vh - 50px)}.controls{height:50px;padding:6px}.btn{padding:5px 10px;font-size:clamp(11px,2.8vw,13px)}.visual-guide{height:40vh}.capture-button{width:36px;height:36px;margin:.5vh auto}.inner-circle{width:30px;height:30px}}@media (max-height: 500px){.visual-guide{height:35vh}.camera-container{max-height:50vh}.camera-guide{width:65%}.result-animation{width:50px;height:50px;margin-bottom:1vh}.instruction-description{margin-bottom:.5vh}.progress-dots{margin-top:.5vh}.dot{width:6px;height:6px}.dot.active{width:12px}.controls{height:45px;padding:5px}.capture-button{width:34px;height:34px}.inner-circle{width:28px;height:28px}}@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2),only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3),only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){.controls{height:45px;padding:5px;bottom:env(safe-area-inset-bottom,0px)}.main-content{height:calc(100vh - 45px - env(safe-area-inset-bottom,0px))}.capture-button{width:34px;height:34px;margin:.3vh auto}.inner-circle{width:28px;height:28px}.btn{padding:4px 8px;font-size:12px}}@media (max-width: 320px) and (max-height: 568px){.visual-guide{height:45vh}.paper-outline{width:min(140px,38vw);height:calc(min(140px,38vw)*1.414)}.controls{height:42px;padding:4px}.capture-button{width:32px;height:32px}.inner-circle{width:26px;height:26px}}.contact-point{position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:80px;height:25px;background-color:#ff3b304d;border:2px dashed var(--error-color);border-bottom:none;border-radius:5px 5px 0 0;animation:pulse-highlight 1.5s infinite;z-index:5}@keyframes pulse-highlight{0%{opacity:.4}50%{opacity:.9}to{opacity:.4}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}