:root{--red:#e3000b;--red-dark:#c3171f;--grey:#565655;--grey-light:#d6d6d5;--black:#1a1a1a;--blue:#004e72;--blue-light:#35aad6;--cam-gain:1.3}*{box-sizing:border-box}html,body{height:100%;color:var(--black);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;background:linear-gradient(#dfe7ee 0%,#f3f5f7 55%,#e9ecee 100%);margin:0;font-family:Open Sans,system-ui,sans-serif;overflow:hidden}#gl,#cam,#overlay,#hud{width:100%;height:100%;position:fixed;inset:0}#gl{z-index:1;display:block}#cam{z-index:2;object-fit:cover;transform:scaleX(-1) scale(var(--cam-gain));filter:grayscale(.35)contrast(1.05);opacity:1;pointer-events:none;transition:opacity 1.2s}#cam.hidden{opacity:0}#cam.assist{opacity:.42}#overlay{z-index:3;pointer-events:none}#hud{z-index:4;pointer-events:none}.topbar{justify-content:space-between;align-items:center;padding:28px 40px;display:flex;position:absolute;top:0;left:0;right:0}.brand{align-items:baseline;gap:14px;display:flex}.brand-name{letter-spacing:.08em;color:var(--red);font-size:26px;font-weight:800}.brand-sub{color:var(--grey);letter-spacing:.02em;font-size:16px;font-weight:600}.hands-status{color:var(--grey);background:#ffffffbf;border-radius:999px;align-items:center;gap:10px;padding:8px 16px;font-size:15px;font-weight:600;display:flex;box-shadow:0 2px 10px #0000000f}.hands-status .dot{background:#c2c2c1;border-radius:50%;width:12px;height:12px;transition:background .3s}.hands-status.on .dot{background:var(--red);box-shadow:0 0 0 4px #e3000b26}.step-card{opacity:0;max-width:760px;transition:opacity .5s,transform .5s;position:absolute;top:110px;left:40px;transform:translateY(10px)}.step-card.show{opacity:1;transform:translateY(0)}.step-label{letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px;font-size:15px;font-weight:700}.step-title{letter-spacing:-.01em;color:var(--black);margin:0;font-size:48px;font-weight:800;line-height:1.05}.step-fact{color:var(--grey);margin:14px 0 0;font-size:20px;font-weight:400;line-height:1.45}.hint{color:var(--black);opacity:0;background:#ffffffeb;border-radius:999px;align-items:center;gap:16px;max-width:min(900px,80vw);padding:18px 30px;font-size:24px;font-weight:600;transition:opacity .4s,transform .4s;display:flex;position:absolute;bottom:120px;left:50%;transform:translate(-50%,20px);box-shadow:0 12px 40px #0000001f}.hint.show{opacity:1;transform:translate(-50%)}.hint-icon{background:var(--red);border-radius:50%;flex:0 0 34px;width:34px;height:34px;position:relative}.hint-icon:after{content:"";background:#fff;border-radius:50%;position:absolute;inset:9px}.hint-icon.ok{background:var(--blue-light)}.cam-help{color:#fff;opacity:0;background:#1a1a1ad1;border-radius:18px;padding:20px 34px;font-size:26px;font-weight:600;transition:opacity .4s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cam-help.show{opacity:1}.progress{gap:8px;margin:0;padding:0;list-style:none;display:flex;position:absolute;bottom:36px;left:40px}.progress li{color:#8a8a89;letter-spacing:.02em;background:#ffffffb3;border-radius:999px;align-items:center;gap:8px;padding:9px 16px;font-size:14px;font-weight:600;transition:all .3s;display:flex}.progress li:before{content:"";background:#cfcfce;border-radius:50%;width:9px;height:9px}.progress li.done{color:var(--grey);background:#ffffffe6}.progress li.done:before{background:var(--grey)}.progress li.current{color:#fff;background:var(--red);box-shadow:0 6px 18px #e3000b4d}.progress li.current:before{background:#fff}.intro{justify-content:center;align-items:flex-end;padding-bottom:80px;transition:opacity .5s;display:flex;position:absolute;inset:0}.intro.hidden{opacity:0}.intro-card{text-align:center;background:#fffffff0;border-radius:28px;max-width:720px;padding:44px 56px 40px;box-shadow:0 30px 80px #0000002e}.intro-card h2{letter-spacing:-.01em;margin:22px 0 10px;font-size:40px;font-weight:800}.intro-card p{color:var(--grey);margin:0;font-size:21px;line-height:1.45}.pinch-demo{width:160px;height:90px;margin:0 auto;position:relative}.pd-dot{border:4px solid #fff;border-radius:50%;width:40px;height:40px;position:absolute;top:25px;box-shadow:0 3px 10px #0000002e}.pd-thumb{background:var(--red);animation:2.2s ease-in-out infinite pdThumb;left:20px}.pd-index{border-color:var(--red);background:#fff;animation:2.2s ease-in-out infinite pdIndex;right:20px}@keyframes pdThumb{0%,20%{transform:translate(0)}45%,65%{transform:translate(42px)}90%,to{transform:translate(0)}}@keyframes pdIndex{0%,20%{transform:translate(0)}45%,65%{transform:translate(-42px)}90%,to{transform:translate(0)}}.toast{background:var(--red);color:#fff;letter-spacing:.01em;opacity:0;border-radius:999px;padding:22px 44px;font-size:40px;font-weight:800;transition:opacity .25s,transform .35s cubic-bezier(.2,1.4,.4,1);position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)scale(.8);box-shadow:0 20px 60px #e3000b59}.toast.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.final{opacity:0;justify-content:flex-start;align-items:center;padding:0 0 60px 60px;transition:opacity .8s;display:flex;position:absolute;inset:0}.final.show{opacity:1}.final-card{text-align:left;background:#ffffffeb;border-radius:28px;width:620px;max-width:44vw;padding:36px 48px 34px;box-shadow:0 30px 80px #00000029}.final-kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-size:16px;font-weight:700}.final-title{letter-spacing:-.02em;margin:10px 0 12px;font-size:62px;font-weight:800;line-height:1}.final-title span{color:var(--red)}.final-text{color:var(--grey);margin:0;font-size:20px;line-height:1.5}.debug{color:#d6ffd6;white-space:pre;background:#1a1a1acc;border-radius:10px;margin:0;padding:12px 16px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;display:none;position:absolute;bottom:36px;right:40px}.debug.show{display:block}@media (max-height:820px){.step-title{font-size:42px}.step-fact{font-size:17px}.hint{font-size:20px;bottom:100px}}