/* ZGate sign-in scene (USDT payment story). GENERATED by tools/gen-pay-scene.py; do not edit by hand.
   Loaded after the shared Signature bundle (signin.css); reuses its stage, floor, caption and motion policy. Fictional data only. */
.zsi-root .zgs-art { --zg-ink: #eef2ff; --zg-muted: #8b97b5; --zg-faint: #5b6684; --zg-blue: #4d8dff; --zg-cyan: #5fd8ff; --zg-teal: #3be0b0; --zg-gold: #f0b90b;
  --zg-line: rgba(140, 170, 240, .2); }
.zsi-root .zgs-camera { position: absolute; inset: 0; transform-style: preserve-3d; animation: zgs-camera 24.0s linear infinite; }
.zsi-root .zgs-shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 3, 14, .85), rgba(0, 3, 14, .35) 60%, transparent); }
.zsi-root .zgs-shadow-panel { left: 60px; top: 488px; width: 380px; height: 120px; transform: translateZ(-30px) rotateX(80deg); opacity: .7; }
.zsi-root .zgs-shadow-side { left: 430px; top: 440px; width: 260px; height: 100px; transform: translateZ(-20px) rotateX(80deg); opacity: .45; }
/* gateway panel */
.zsi-root .zgs-panel { position: absolute; left: 66px; top: 64px; width: 336px; height: 452px; transform-style: preserve-3d; transform: rotateY(13deg) translateZ(10px); }
.zsi-root .zgs-obj { position: absolute; inset: 0; transform-style: preserve-3d; animation: zsi-sig-float 8s ease-in-out infinite alternate; }
.zsi-root .zgs-edge, .zsi-root .zgs-m-edge, .zsi-root .zgs-phone-edge { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(160deg, #0d1a3a, #050a18); transform: translateZ(-8px); box-shadow: 0 46px 90px rgba(0, 0, 0, .55); }
.zsi-root .zgs-face, .zsi-root .zgs-m-face { position: absolute; inset: 0; border-radius: 22px; border: 1px solid var(--zg-line); overflow: hidden;
  background: radial-gradient(90% 60% at 80% 0%, rgba(77, 141, 255, .18), transparent 62%), linear-gradient(165deg, rgba(19, 33, 70, .97), rgba(7, 13, 30, .99));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(2, 6, 20, .5); }
.zsi-root .zgs-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .06) 45%, transparent 60%); pointer-events: none; }
.zsi-root .zgs-head { position: absolute; left: 20px; right: 18px; top: 18px; display: flex; align-items: center; gap: 11px; }
.zsi-root .zgs-logo { height: 28px; width: auto; display: block; }
.zsi-root .zgs-head-t { display: grid; gap: 4px; flex: 1; min-width: 0; }
.zsi-root .zgs-k { font-family: var(--brand); font-size: 12.5px; letter-spacing: .16em; color: var(--zg-ink); white-space: nowrap; }
.zsi-root .zgs-sub { font-family: var(--ui); font-size: 10.5px; color: var(--zg-muted); letter-spacing: .02em; }
.zsi-root .zgs-sim { font-family: var(--brand); font-size: 8.5px; letter-spacing: .16em; color: #ffd56a; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255, 205, 90, .4); background: rgba(255, 205, 90, .08); }
.zsi-root .zgs-amount { position: absolute; left: 20px; right: 20px; top: 70px; display: grid; gap: 4px; }
.zsi-root .zgs-cap { font-family: var(--brand); font-size: 9px; letter-spacing: .2em; color: var(--zg-muted); text-transform: uppercase; }
.zsi-root .zgs-amt { display: flex; align-items: baseline; gap: 8px; }
.zsi-root .zgs-amt b { font-family: var(--ui); font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.zsi-root .zgs-amt span { font-family: var(--brand); font-size: 13px; letter-spacing: .14em; color: var(--zg-teal); }
.zsi-root .zgs-net { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 4px 10px; border-radius: 999px; font-family: var(--ui); font-size: 11px; font-weight: 600; color: #f5d27a;
  background: rgba(240, 185, 11, .08); border: 1px solid rgba(240, 185, 11, .3); }
.zsi-root .zgs-net i { width: 7px; height: 7px; border-radius: 50%; background: var(--zg-gold); box-shadow: 0 0 8px rgba(240, 185, 11, .7); }
.zsi-root .zgs-qrbox { position: absolute; left: 50%; top: 176px; width: 164px; height: 164px; margin-left: -82px; border-radius: 14px; background: #f4f7ff; padding: 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 14px 40px rgba(0, 0, 0, .45); }
.zsi-root .zgs-qr { display: block; width: 100%; height: 100%; } .zsi-root .zgs-qrbox > .zgs-qr { animation: zgs-qr-dim 24.0s linear infinite; }
.zsi-root .zgs-qr-m { fill: #0b1530; } .zsi-root .zgs-qr-ring rect { fill: none; stroke: #0b1530; stroke-width: 1; } .zsi-root .zgs-qr-ring .zgs-qr-eye { fill: #0b1530; stroke: none; }
.zsi-root .zgs-qr-demo-bg { fill: #3b7bff; } .zsi-root .zgs-qr-demo { font: 700 2.1px var(--ui); fill: #fff; letter-spacing: .25px; }
.zsi-root .zgs-corner { position: absolute; width: 26px; height: 26px; border: 3px solid rgba(140, 170, 240, .55); animation: zgs-corner 24.0s linear infinite; }
.zsi-root .zgs-corner.c1 { left: -9px; top: -9px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.zsi-root .zgs-corner.c2 { right: -9px; top: -9px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.zsi-root .zgs-corner.c3 { left: -9px; bottom: -9px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.zsi-root .zgs-corner.c4 { right: -9px; bottom: -9px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.zsi-root .zgs-qr-scan { position: absolute; left: 4px; right: 4px; top: 6px; height: 3px; border-radius: 2px; background: var(--zg-cyan); box-shadow: 0 0 14px 3px rgba(95, 216, 255, .7); animation: zgs-qr-scan 24.0s linear infinite; }
.zsi-root .zgs-paid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; animation: zgs-paid 24.0s linear infinite; }
.zsi-root .zgs-paid-ring { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #10b981; box-shadow: 0 0 0 8px rgba(16, 185, 129, .18), 0 10px 26px rgba(16, 185, 129, .45); margin-bottom: 6px; }
.zsi-root .zgs-paid-ring svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zsi-root .zgs-paid b { font-family: var(--ui); font-size: 14px; color: #0b1530; } .zsi-root .zgs-paid span { font-family: var(--ui); font-size: 11.5px; color: #3c4a6b; }
.zsi-root .zgs-arrive { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid var(--zg-teal); animation: zgs-arrive 24.0s linear infinite; }
.zsi-root .zgs-status { position: absolute; left: 18px; right: 18px; top: 362px; height: 52px; }
.zsi-root .zgs-st { position: absolute; inset: 0; display: flex; align-items: center; gap: 11px; padding: 0 13px; border-radius: 13px; border: 1px solid var(--zg-line); background: rgba(255, 255, 255, .035); overflow: hidden; }
.zsi-root .zgs-st-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: rgba(140, 170, 240, .12); color: #9cc0ff; }
.zsi-root .zgs-st-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zsi-root .zgs-st-t { display: grid; gap: 2px; } .zsi-root .zgs-st-t b { font-family: var(--ui); font-size: 13px; line-height: 1.35em; font-weight: 600; color: var(--zg-ink); }
.zsi-root .zgs-st-t small { font-family: var(--ui); font-size: 10.5px; color: var(--zg-muted); }
.zsi-root .zgs-st-wait { animation: zgs-st-wait 24.0s linear infinite; } .zsi-root .zgs-st-det { animation: zgs-st-det 24.0s linear infinite; border-color: rgba(77, 141, 255, .45); } .zsi-root .zgs-st-det .zgs-st-ic { color: #fff; background: var(--zg-blue); }
.zsi-root .zgs-st-conf { animation: zgs-st-conf 24.0s linear infinite; border-color: rgba(95, 216, 255, .4); } .zsi-root .zgs-st-conf .zgs-st-ic { color: var(--zg-cyan); background: rgba(95, 216, 255, .14); }
.zsi-root .zgs-st-ok { animation: zgs-st-ok 24.0s linear infinite; border-color: rgba(59, 224, 176, .5); background: rgba(59, 224, 176, .08); } .zsi-root .zgs-st-ok .zgs-st-ic { color: #fff; background: #10b981; }
.zsi-root .zgs-count { position: relative; display: inline-block; width: 1.3em; height: 1.35em; line-height: 1.35em; vertical-align: top; text-align: right; }
.zsi-root .zgs-n { position: absolute; right: 0; top: 0; line-height: 1.35em; font-weight: 700; color: var(--zg-cyan); }
.zsi-root .zgs-n-1 { animation: zgs-n-1 24.0s linear infinite; }.zsi-root .zgs-n-3 { animation: zgs-n-3 24.0s linear infinite; }.zsi-root .zgs-n-6 { animation: zgs-n-6 24.0s linear infinite; }.zsi-root .zgs-n-9 { animation: zgs-n-9 24.0s linear infinite; }.zsi-root .zgs-n-12 { animation: zgs-n-12 24.0s linear infinite; }.zsi-root .zgs-n-15 { animation: zgs-n-15 24.0s linear infinite; }
.zsi-root .zgs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(95, 216, 255, .12); }
.zsi-root .zgs-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--zg-blue), var(--zg-cyan)); transform-origin: 0 50%; animation: zgs-bar 24.0s linear infinite; }
.zsi-root .zgs-fine { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; font-family: var(--ui); font-size: 9.5px; letter-spacing: .04em; color: var(--zg-faint); }
/* blockchain strip */
.zsi-root .zgs-chain { position: absolute; left: 70px; top: 548px; width: 360px; transform: rotateY(13deg) translateZ(20px); }
.zsi-root .zgs-chain-k { display: block; font-family: var(--brand); font-size: 8.5px; letter-spacing: .2em; color: var(--zg-muted); text-transform: uppercase; margin: 0 0 8px 4px; animation: zgs-chain-k 24.0s linear infinite; }
.zsi-root .zgs-blocks { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.zsi-root .zgs-link { position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; z-index: 0; background: linear-gradient(90deg, rgba(77, 141, 255, .6), rgba(95, 216, 255, .8)); transform-origin: 0 50%; animation: zgs-link 24.0s linear infinite; }
.zsi-root .zgs-block { position: relative; z-index: 1; height: 44px; border-radius: 9px; border: 1px solid rgba(95, 216, 255, .45); background: rgba(77, 141, 255, .12);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.zsi-root .zgs-block span { font-family: var(--ui); font-size: 7.5px; color: var(--zg-muted); letter-spacing: .02em; }
.zsi-root .zgs-block-top { position: absolute; left: 7px; right: 7px; top: 7px; height: 11px; border-radius: 3px; background: linear-gradient(90deg, rgba(95, 216, 255, .5), rgba(77, 141, 255, .25)); }
.zsi-root .zgs-block-side { display: none; }
.zsi-root .zgs-block-0 { animation: zgs-block-0 24.0s linear infinite, zgs-block-ok 24.0s linear infinite; }
.zsi-root .zgs-block-1 { animation: zgs-block-1 24.0s linear infinite, zgs-block-ok 24.0s linear infinite; }
.zsi-root .zgs-block-2 { animation: zgs-block-2 24.0s linear infinite, zgs-block-ok 24.0s linear infinite; }
.zsi-root .zgs-block-3 { animation: zgs-block-3 24.0s linear infinite, zgs-block-ok 24.0s linear infinite; }
.zsi-root .zgs-block-4 { animation: zgs-block-4 24.0s linear infinite, zgs-block-ok 24.0s linear infinite; }
.zsi-root .zgs-block-5 { animation: zgs-block-5 24.0s linear infinite, zgs-block-ok 24.0s linear infinite; }

/* token in flight */
.zsi-root .zgs-coinpath { position: absolute; left: 556px; top: 330px; width: 0; height: 0; transform: translateZ(80px); }
.zsi-root .zgs-coin-x { position: absolute; animation: zgs-coin-x 24.0s linear infinite; } .zsi-root .zgs-coin-y { animation: zgs-coin-y 24.0s linear infinite; }
.zsi-root .zgs-coin { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; font: 700 21px var(--ui); color: #fff;
  background: radial-gradient(circle at 35% 30%, #5ef0c4, #26a17b 60%, #1a7a5c); box-shadow: 0 0 0 3px rgba(59, 224, 176, .25), 0 0 26px rgba(59, 224, 176, .7); }
/* phone */
.zsi-root .zgs-phone { position: absolute; left: 468px; top: 118px; width: 168px; height: 336px; transform-style: preserve-3d; animation: zgs-phone 24.0s linear infinite; }
.zsi-root .zgs-phone-obj { position: absolute; inset: 0; transform-style: preserve-3d; animation: zsi-sig-float 6s ease-in-out infinite alternate; }
.zsi-root .zgs-phone-edge { border-radius: 30px; transform: translateZ(-7px); background: linear-gradient(160deg, #2b3550, #0b1020); }
.zsi-root .zgs-phone-body { position: absolute; inset: 0; border-radius: 30px; padding: 7px; background: linear-gradient(150deg, #3a4560, #121828 40%, #1c2336); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px rgba(0, 0, 0, .55); }
.zsi-root .zgs-btn { position: absolute; right: -3px; width: 3px; border-radius: 2px; background: #2a3248; } .zsi-root .zgs-btn.b1 { top: 86px; height: 42px; } .zsi-root .zgs-btn.b2 { top: 140px; height: 26px; }
.zsi-root .zgs-screen { position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #0b1228, #050914); }
.zsi-root .zgs-island { position: absolute; left: 50%; top: 9px; width: 52px; height: 15px; margin-left: -26px; border-radius: 10px; background: #000; z-index: 3; }
.zsi-root .zgs-sc { position: absolute; inset: 0; padding: 36px 14px 16px; display: flex; flex-direction: column; align-items: center; }
.zsi-root .zgs-sc-k { font-family: var(--brand); font-size: 8.5px; letter-spacing: .18em; color: var(--zg-muted); text-transform: uppercase; }
.zsi-root .zgs-sc-scan { animation: zgs-sc-scan 24.0s linear infinite; background: radial-gradient(80% 50% at 50% 45%, rgba(77, 141, 255, .16), transparent 70%); }
.zsi-root .zgs-view { position: relative; width: 112px; height: 112px; margin-top: 30px; padding: 8px; border-radius: 10px; background: rgba(244, 247, 255, .92); transform: perspective(300px) rotateY(14deg); }
.zsi-root .zgs-vc { position: absolute; width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .85); animation: zgs-vc 24.0s linear infinite; }
.zsi-root .zgs-vc.v1 { left: -10px; top: -10px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; } .zsi-root .zgs-vc.v2 { right: -10px; top: -10px; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }
.zsi-root .zgs-vc.v3 { left: -10px; bottom: -10px; border-right: 0; border-top: 0; border-radius: 0 0 0 7px; } .zsi-root .zgs-vc.v4 { right: -10px; bottom: -10px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
.zsi-root .zgs-vline { position: absolute; left: -6px; right: -6px; top: 4px; height: 2px; background: var(--zg-cyan); box-shadow: 0 0 10px 2px rgba(95, 216, 255, .8); animation: zgs-vline 24.0s linear infinite; }
.zsi-root .zgs-found { display: inline-flex; align-items: center; gap: 6px; margin-top: 34px; padding: 6px 11px; border-radius: 999px; font: 600 11px var(--ui); color: #04261b; background: var(--zg-teal); animation: zgs-found 24.0s linear infinite; }
.zsi-root .zgs-found svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zsi-root .zgs-sc-send { animation: zgs-sc-send 24.0s linear infinite; align-items: stretch; }
.zsi-root .zgs-sc-send .zgs-sc-k { text-align: center; }
.zsi-root .zgs-send-cap { margin-top: 22px; font: 500 11px var(--ui); color: var(--zg-muted); text-align: center; }
.zsi-root .zgs-send-amt { font: 700 25px var(--ui); color: #fff; text-align: center; letter-spacing: -.02em; } .zsi-root .zgs-send-amt small { font-size: 11px; color: var(--zg-teal); letter-spacing: .06em; }
.zsi-root .zgs-rows { margin-top: 16px; display: grid; gap: 7px; }
.zsi-root .zgs-rows div { display: flex; justify-content: space-between; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid rgba(140, 170, 240, .14); font-family: var(--ui); font-size: 9.5px; }
.zsi-root .zgs-rows span { color: var(--zg-muted); } .zsi-root .zgs-rows b { color: var(--zg-ink); font-weight: 600; }
.zsi-root .zgs-send-btn { margin-top: auto; padding: 10px 0; border-radius: 12px; text-align: center; font: 600 11.5px var(--ui); color: #fff; background: linear-gradient(180deg, #4d8dff, #2f6bea); animation: zgs-send-btn 24.0s linear infinite; }
.zsi-root .zgs-sc-done { animation: zgs-sc-done 24.0s linear infinite; justify-content: center; gap: 6px; text-align: center; }
.zsi-root .zgs-done-ring { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #10b981; box-shadow: 0 0 0 9px rgba(16, 185, 129, .16); margin-bottom: 10px; animation: zgs-done-ring 24.0s linear infinite; }
.zsi-root .zgs-done-ring svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zsi-root .zgs-sc-done b { font: 600 13px var(--ui); color: #fff; } .zsi-root .zgs-sc-done span { font: 700 15px var(--ui); color: var(--zg-teal); } .zsi-root .zgs-sc-done small { font: 500 9.5px var(--ui); color: var(--zg-muted); }
/* merchant dashboard */
.zsi-root .zgs-merchant { position: absolute; left: 418px; top: 124px; width: 284px; height: 256px; transform-style: preserve-3d; animation: zgs-merchant 24.0s linear infinite; }
.zsi-root .zgs-m-obj { position: absolute; inset: 0; transform-style: preserve-3d; animation: zsi-sig-float 7s ease-in-out infinite alternate; animation-delay: -2s; }
.zsi-root .zgs-m-face { padding: 16px 16px 14px; display: flex; flex-direction: column; }
.zsi-root .zgs-m-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .zsi-root .zgs-m-head > div { display: grid; gap: 2px; flex: 1; }
.zsi-root .zgs-m-head b { font: 600 12px var(--ui); color: var(--zg-ink); } .zsi-root .zgs-m-head small { font: 500 10px var(--ui); color: var(--zg-muted); }
.zsi-root .zgs-m-mark { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font: 700 13px var(--ui); color: #fff; background: linear-gradient(140deg, #4d8dff, #7b5cff); }
.zsi-root .zgs-m-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--brand); font-size: 8px; letter-spacing: .16em; color: var(--zg-teal); }
.zsi-root .zgs-m-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--zg-teal); box-shadow: 0 0 8px var(--zg-teal); }
.zsi-root .zgs-m-bal { position: relative; height: 38px; display: flex; align-items: baseline; gap: 8px; margin: 2px 0 12px; }
.zsi-root .zgs-m-bal b { position: absolute; left: 0; top: 0; font: 700 28px var(--ui); color: #fff; letter-spacing: -.02em; }
.zsi-root .zgs-m-bal span { position: absolute; left: 128px; top: 12px; font-family: var(--brand); font-size: 11px; letter-spacing: .14em; color: var(--zg-muted); }
.zsi-root .zgs-bal-old { animation: zgs-bal-old 24.0s linear infinite; } .zsi-root .zgs-bal-new { animation: zgs-bal-new 24.0s linear infinite; }
.zsi-root .zgs-m-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid var(--zg-line); margin-top: 8px; }
.zsi-root .zgs-m-row > div { display: grid; gap: 1px; flex: 1; min-width: 0; } .zsi-root .zgs-m-row b { font: 600 11px var(--ui); color: var(--zg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zsi-root .zgs-m-row small { font: 500 9px var(--ui); color: var(--zg-muted); white-space: nowrap; }
.zsi-root .zgs-m-row em { flex: 0 0 auto; font: 700 11px var(--ui); font-style: normal; color: var(--zg-teal); white-space: nowrap; }
.zsi-root .zgs-m-ic { position: relative; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: rgba(16, 185, 129, .18); color: var(--zg-teal); }
.zsi-root .zgs-m-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.zsi-root .zgs-m-ic-hook { background: rgba(77, 141, 255, .18); color: #9cc0ff; }
.zsi-root .zgs-spin { position: absolute; inset: -3px; border-radius: 10px; border: 2px solid transparent; border-top-color: var(--zg-cyan); animation: zgs-spin 24.0s linear infinite, zgs-rot .8s linear infinite; }
@keyframes zgs-rot { to { transform: rotate(360deg); } }
.zsi-root .zgs-m-dep { animation: zgs-m-dep 24.0s linear infinite; } .zsi-root .zgs-m-hook { animation: zgs-m-hook 24.0s linear infinite; } .zsi-root .zgs-ok200 { animation: zgs-ok200 24.0s linear infinite; }
.zsi-root .zgs-toast { position: absolute; right: 18px; top: -16px; padding: 7px 13px; border-radius: 999px; font: 700 12.5px var(--ui); color: #04261b; background: var(--zg-teal); box-shadow: 0 10px 26px rgba(59, 224, 176, .45); transform: translateZ(30px); animation: zgs-toast 24.0s linear infinite; }
/* motion policy: the shared bundle pauses hidden tabs; reduced motion shows one meaningful still frame (confirmed and credited) */
.zsi-is-still .zsi-root .zsi-art-signature.zgs-art * { animation-delay: -19.5s !important; }
.zsi-is-still .zsi-root .zsi-art-signature.zgs-art .zsi-sig-intro { animation: none !important; }
@media (max-width: 1100px) { .zsi-root .zgs-chain-k { display: none; } }
@media (min-width: 1101px) { .zsi-root .zgs-art .zsi-sig-stage { margin-left: -360px; } }   /* this scene is centred (the shared card scene is offset) */
@keyframes zgs-camera { 0.000% { transform: rotateX(7deg) rotateY(-5deg) } 33.333% { transform: rotateX(6deg) rotateY(2deg) } 66.667% { transform: rotateX(7.5deg) rotateY(4deg) } 100.000% { transform: rotateX(7deg) rotateY(-5deg) } }
@keyframes zgs-st-wait { 0.000% { opacity: 1 } 45.833% { opacity: 1 } 47.292% { opacity: 0 } 93.333% { opacity: 0 } 94.792% { opacity: 1 } 100.000% { opacity: 1 } }
@keyframes zgs-st-det { 0.000% { opacity: 0 } 45.833% { opacity: 0 } 46.875% { opacity: 1 } 48.333% { opacity: 1 } 49.375% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-st-conf { 0.000% { opacity: 0 } 49.167% { opacity: 0 } 50.208% { opacity: 1 } 64.167% { opacity: 1 } 65.208% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-st-ok { 0.000% { opacity: 0 } 65.000% { opacity: 0 } 66.250% { opacity: 1 } 92.083% { opacity: 1 } 93.333% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-bar { 0.000% { transform: scaleX(.067) } 49.167% { transform: scaleX(.067) } 51.667% { transform: scaleX(0.200) } 54.167% { transform: scaleX(0.400) } 57.083% { transform: scaleX(0.600) } 60.000% { transform: scaleX(0.800) } 62.500% { transform: scaleX(1.000) } 65.000% { transform: scaleX(1) } 100.000% { transform: scaleX(.067) } }
@keyframes zgs-n-1 { 0.000% { opacity: 0 } 49.167% { opacity: 0 } 49.667% { opacity: 1 } 51.167% { opacity: 1 } 51.667% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-n-3 { 0.000% { opacity: 0 } 51.667% { opacity: 0 } 52.167% { opacity: 1 } 53.667% { opacity: 1 } 54.167% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-n-6 { 0.000% { opacity: 0 } 54.167% { opacity: 0 } 54.667% { opacity: 1 } 56.583% { opacity: 1 } 57.083% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-n-9 { 0.000% { opacity: 0 } 57.083% { opacity: 0 } 57.583% { opacity: 1 } 59.500% { opacity: 1 } 60.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-n-12 { 0.000% { opacity: 0 } 60.000% { opacity: 0 } 60.500% { opacity: 1 } 62.000% { opacity: 1 } 62.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-n-15 { 0.000% { opacity: 0 } 62.500% { opacity: 0 } 63.000% { opacity: 1 } 64.500% { opacity: 1 } 65.000% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-corner { 0.000% { opacity: .35; border-color: rgba(140,170,240,.55) } 17.083% { opacity: .35; border-color: rgba(140,170,240,.55) } 18.333% { opacity: 1; border-color: #5fd8ff } 27.083% { opacity: 1; border-color: #5fd8ff } 28.333% { opacity: .35; border-color: rgba(140,170,240,.55) } 100.000% { opacity: .35; border-color: rgba(140,170,240,.55) } }
@keyframes zgs-qr-scan { 0.000% { opacity: 0; transform: translateY(0) } 17.083% { opacity: 0; transform: translateY(0) } 17.917% { opacity: .9; transform: translateY(0) } 24.167% { opacity: .9; transform: translateY(150px) } 25.000% { opacity: 0; transform: translateY(150px) } 100.000% { opacity: 0; transform: translateY(0) } }
@keyframes zgs-paid { 0.000% { opacity: 0; transform: scale(.92) } 65.417% { opacity: 0; transform: scale(.92) } 67.292% { opacity: 1; transform: scale(1) } 91.250% { opacity: 1; transform: scale(1) } 93.125% { opacity: 0; transform: scale(.92) } 100.000% { opacity: 0; transform: scale(.92) } }
@keyframes zgs-qr-dim { 0.000% { opacity: 1 } 65.000% { opacity: 1 } 66.667% { opacity: .12 } 91.667% { opacity: .12 } 93.333% { opacity: 1 } 100.000% { opacity: 1 } }
@keyframes zgs-arrive { 0.000% { opacity: 0; transform: scale(.4) } 45.625% { opacity: 0; transform: scale(.4) } 46.250% { opacity: .85; transform: scale(1) } 49.583% { opacity: 0; transform: scale(1.6) } 100.000% { opacity: 0; transform: scale(.4) } }
@keyframes zgs-phone { 0.000% { opacity: 0; transform: translate3d(250px, 160px, 140px) rotateY(-46deg) rotateZ(10deg) } 10.000% { opacity: 0; transform: translate3d(250px, 160px, 140px) rotateY(-46deg) rotateZ(10deg); animation-timing-function: cubic-bezier(.22,.7,.2,1) } 16.667% { opacity: 1; transform: translate3d(0, 0, 60px) rotateY(-20deg) rotateZ(-2deg) } 17.083% { opacity: 1; transform: translate3d(-26px, 6px, 90px) rotateY(-28deg) rotateZ(-3deg) } 26.667% { opacity: 1; transform: translate3d(-26px, 6px, 90px) rotateY(-28deg) rotateZ(-3deg) } 28.333% { opacity: 1; transform: translate3d(0, 0, 60px) rotateY(-20deg) rotateZ(-2deg) } 65.833% { opacity: 1; transform: translate3d(0, 0, 60px) rotateY(-20deg) rotateZ(-2deg); animation-timing-function: cubic-bezier(.5,0,.75,.3) } 70.000% { opacity: 0; transform: translate3d(120px, 260px, 40px) rotateY(-30deg) rotateZ(6deg) } 100.000% { opacity: 0; transform: translate3d(250px, 160px, 140px) rotateY(-46deg) rotateZ(10deg) } }
@keyframes zgs-sc-scan { 0.000% { opacity: 0 } 0.000% { opacity: 0 } 1.250% { opacity: 1 } 27.500% { opacity: 1 } 28.750% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-sc-send { 0.000% { opacity: 0 } 27.500% { opacity: 0 } 28.750% { opacity: 1 } 39.167% { opacity: 1 } 40.417% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-sc-done { 0.000% { opacity: 0 } 39.167% { opacity: 0 } 40.417% { opacity: 1 } 70.833% { opacity: 1 } 72.083% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-vline { 0.000% { transform: translateY(0); opacity: 0 } 17.083% { transform: translateY(0); opacity: 0 } 17.708% { transform: translateY(0); opacity: 1 } 23.750% { transform: translateY(104px); opacity: 1 } 25.000% { transform: translateY(104px); opacity: 0 } 100.000% { transform: translateY(0); opacity: 0 } }
@keyframes zgs-vc { 0.000% { border-color: rgba(255,255,255,.85) } 24.583% { border-color: rgba(255,255,255,.85) } 25.417% { border-color: #3be0b0 } 27.500% { border-color: #3be0b0 } 28.333% { border-color: rgba(255,255,255,.85) } 100.000% { border-color: rgba(255,255,255,.85) } }
@keyframes zgs-found { 0.000% { opacity: 0; transform: translateY(8px) } 25.000% { opacity: 0; transform: translateY(8px) } 26.042% { opacity: 1; transform: translateY(0) } 27.500% { opacity: 1; transform: translateY(0) } 28.542% { opacity: 0; transform: translateY(8px) } 100.000% { opacity: 0; transform: translateY(8px) } }
@keyframes zgs-send-btn { 0.000% { transform: scale(1); box-shadow: 0 6px 18px rgba(59,123,255,.35) } 35.833% { transform: scale(1); box-shadow: 0 6px 18px rgba(59,123,255,.35) } 36.458% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(95,216,255,.25) } 37.708% { transform: scale(1); box-shadow: 0 6px 18px rgba(59,123,255,.35) } 100.000% { transform: scale(1); box-shadow: 0 6px 18px rgba(59,123,255,.35) } }
@keyframes zgs-done-ring { 0.000% { transform: scale(.6); opacity: 0 } 39.583% { transform: scale(.6); opacity: 0 } 41.250% { transform: scale(1.08); opacity: 1 } 42.500% { transform: scale(1); opacity: 1 } 72.500% { transform: scale(1); opacity: 1 } 72.917% { transform: scale(.6); opacity: 0 } 100.000% { transform: scale(.6); opacity: 0 } }
@keyframes zgs-coin-x { 0.000% { transform: translateX(0); opacity: 0 } 40.417% { transform: translateX(0); opacity: 0 } 41.042% { transform: translateX(0); opacity: 1 } 45.833% { transform: translateX(-318px); opacity: 1 } 46.333% { transform: translateX(-318px); opacity: 0 } 100.000% { transform: translateX(0); opacity: 0 } }
@keyframes zgs-coin-y { 0.000% { transform: translateY(0) scale(.7) } 40.417% { transform: translateY(0) scale(.7); animation-timing-function: cubic-bezier(.2,.6,.4,1) } 43.125% { transform: translateY(-120px) scale(1.15); animation-timing-function: cubic-bezier(.6,0,.8,.4) } 45.833% { transform: translateY(-26px) scale(.8) } 100.000% { transform: translateY(0) scale(.7) } }
@keyframes zgs-block-0 { 0.000% { opacity: 0; transform: translateY(10px) scale(.85) } 46.458% { opacity: 0; transform: translateY(10px) scale(.85) } 47.708% { opacity: 1; transform: translateY(0) scale(1) } 90.833% { opacity: 1; transform: translateY(0) scale(1) } 93.333% { opacity: 0; transform: translateY(0) scale(.96) } 100.000% { opacity: 0; transform: translateY(10px) scale(.85) } }
@keyframes zgs-block-1 { 0.000% { opacity: 0; transform: translateY(10px) scale(.85) } 49.042% { opacity: 0; transform: translateY(10px) scale(.85) } 50.292% { opacity: 1; transform: translateY(0) scale(1) } 90.833% { opacity: 1; transform: translateY(0) scale(1) } 93.333% { opacity: 0; transform: translateY(0) scale(.96) } 100.000% { opacity: 0; transform: translateY(10px) scale(.85) } }
@keyframes zgs-block-2 { 0.000% { opacity: 0; transform: translateY(10px) scale(.85) } 51.625% { opacity: 0; transform: translateY(10px) scale(.85) } 52.875% { opacity: 1; transform: translateY(0) scale(1) } 90.833% { opacity: 1; transform: translateY(0) scale(1) } 93.333% { opacity: 0; transform: translateY(0) scale(.96) } 100.000% { opacity: 0; transform: translateY(10px) scale(.85) } }
@keyframes zgs-block-3 { 0.000% { opacity: 0; transform: translateY(10px) scale(.85) } 54.208% { opacity: 0; transform: translateY(10px) scale(.85) } 55.458% { opacity: 1; transform: translateY(0) scale(1) } 90.833% { opacity: 1; transform: translateY(0) scale(1) } 93.333% { opacity: 0; transform: translateY(0) scale(.96) } 100.000% { opacity: 0; transform: translateY(10px) scale(.85) } }
@keyframes zgs-block-4 { 0.000% { opacity: 0; transform: translateY(10px) scale(.85) } 56.792% { opacity: 0; transform: translateY(10px) scale(.85) } 58.042% { opacity: 1; transform: translateY(0) scale(1) } 90.833% { opacity: 1; transform: translateY(0) scale(1) } 93.333% { opacity: 0; transform: translateY(0) scale(.96) } 100.000% { opacity: 0; transform: translateY(10px) scale(.85) } }
@keyframes zgs-block-5 { 0.000% { opacity: 0; transform: translateY(10px) scale(.85) } 59.375% { opacity: 0; transform: translateY(10px) scale(.85) } 60.625% { opacity: 1; transform: translateY(0) scale(1) } 90.833% { opacity: 1; transform: translateY(0) scale(1) } 93.333% { opacity: 0; transform: translateY(0) scale(.96) } 100.000% { opacity: 0; transform: translateY(10px) scale(.85) } }
@keyframes zgs-block-ok { 0.000% { border-color: rgba(95,216,255,.45); background: rgba(77,141,255,.12) } 65.000% { border-color: rgba(95,216,255,.45); background: rgba(77,141,255,.12) } 66.250% { border-color: rgba(59,224,176,.75); background: rgba(59,224,176,.13) } 90.833% { border-color: rgba(59,224,176,.75); background: rgba(59,224,176,.13) } 92.083% { border-color: rgba(95,216,255,.45); background: rgba(77,141,255,.12) } 100.000% { border-color: rgba(95,216,255,.45); background: rgba(77,141,255,.12) } }
@keyframes zgs-link { 0.000% { transform: scaleX(0) } 46.250% { transform: scaleX(0) } 60.625% { transform: scaleX(1) } 90.833% { transform: scaleX(1) } 93.333% { transform: scaleX(0) } 100.000% { transform: scaleX(0) } }
@keyframes zgs-chain-k { 0.000% { opacity: 0 } 45.833% { opacity: 0 } 47.500% { opacity: 1 } 90.833% { opacity: 1 } 92.500% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-merchant { 0.000% { opacity: 0; transform: translate3d(80px, 30px, -60px) rotateY(-30deg) } 68.333% { opacity: 0; transform: translate3d(80px, 30px, -60px) rotateY(-30deg); animation-timing-function: cubic-bezier(.22,.7,.2,1) } 71.667% { opacity: 1; transform: translate3d(0, 0, 40px) rotateY(-16deg) } 90.000% { opacity: 1; transform: translate3d(0, 0, 40px) rotateY(-16deg) } 93.750% { opacity: 0; transform: translate3d(40px, -20px, -40px) rotateY(-22deg) } 100.000% { opacity: 0; transform: translate3d(80px, 30px, -60px) rotateY(-30deg) } }
@keyframes zgs-m-dep { 0.000% { opacity: 0; transform: translateY(8px) } 71.667% { opacity: 0; transform: translateY(8px) } 73.125% { opacity: 1; transform: translateY(0) } 91.250% { opacity: 1; transform: translateY(0) } 92.708% { opacity: 0; transform: translateY(8px) } 100.000% { opacity: 0; transform: translateY(8px) } }
@keyframes zgs-m-hook { 0.000% { opacity: 0; transform: translateY(8px) } 76.667% { opacity: 0; transform: translateY(8px) } 78.125% { opacity: 1; transform: translateY(0) } 91.250% { opacity: 1; transform: translateY(0) } 92.708% { opacity: 0; transform: translateY(8px) } 100.000% { opacity: 0; transform: translateY(8px) } }
@keyframes zgs-bal-old { 0.000% { opacity: 1; transform: translateY(0) } 73.333% { opacity: 1; transform: translateY(0) } 74.583% { opacity: 0; transform: translateY(-14px) } 98.333% { opacity: 0; transform: translateY(-14px) } 99.583% { opacity: 1; transform: translateY(0) } 100.000% { opacity: 1; transform: translateY(0) } }
@keyframes zgs-bal-new { 0.000% { opacity: 0; transform: translateY(14px) } 73.333% { opacity: 0; transform: translateY(14px) } 74.583% { opacity: 1; transform: translateY(0) } 92.500% { opacity: 1; transform: translateY(0) } 93.750% { opacity: 0; transform: translateY(14px) } 100.000% { opacity: 0; transform: translateY(14px) } }
@keyframes zgs-ok200 { 0.000% { opacity: 0 } 78.750% { opacity: 0 } 79.792% { opacity: 1 } 91.250% { opacity: 1 } 92.292% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-spin { 0.000% { opacity: 0 } 76.667% { opacity: 0 } 77.292% { opacity: 1 } 78.750% { opacity: 1 } 79.375% { opacity: 0 } 100.000% { opacity: 0 } }
@keyframes zgs-toast { 0.000% { opacity: 0; transform: translateY(14px) } 72.083% { opacity: 0; transform: translateY(14px) } 73.333% { opacity: 1; transform: translateY(0) } 79.583% { opacity: 1; transform: translateY(-10px) } 81.667% { opacity: 0; transform: translateY(-22px) } 100.000% { opacity: 0; transform: translateY(14px) } }