/* zPAMM sign-in scene: master trade -> zPAMM Risk Engine -> follower, one calm 12 s loop. Hand-written; loaded after the
   shared Signature bundle (/signin/signin.css) and reuses its pane, stage, floor, caption and motion policy (zsi-is-still,
   zsi-is-paused). Transform / opacity only (plus offset-distance for the travelling trade event). Timeline (seconds):
   0.4 master trade appears · 1.2-2.6 event travels to the engine · 2.8-4.3 rule rows · 4.8 approved · 5.0-6.4 event travels
   to the follower · 6.4 follower trade · 7.0 executed · hold · 10.6-11.6 calm reset. Simulated data only. */
.zsi-root .zpm-host { display: contents; }
.zsi-root .zpm-art { --ink: #eef2ff; --muted: #8b97b5; --faint: #5b6684; --blue: #4d8dff; --cyan: #5fd8ff; --up: #2fcf98;
  --line: rgba(140, 170, 240, .2); --ui: Inter, ui-sans-serif, system-ui, sans-serif; --brand: "Bank Gothic", Inter, sans-serif; --T: 12s; }
.zsi-root .zpm-art .zsi-sig-stage { margin-left: -360px; }
.zsi-root .zpm-camera { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(9deg) rotateY(-7deg) rotateZ(.4deg); }
.zsi-root .zpm-art .zsi-sig-floor { transform: translateY(300px) rotateX(90deg); }

/* connection lines */
.zsi-root .zpm-wires { position: absolute; left: 0; top: 0; width: 720px; height: 640px; overflow: visible; }
.zsi-root .zpm-wire { fill: none; stroke: rgba(140, 170, 240, .22); stroke-width: 1.5; stroke-dasharray: 3 6; }
.zsi-root .zpm-wire-on { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .9; }
.zsi-root .zpm-wire-a { animation: zpm-wire-a var(--T) linear infinite; }
.zsi-root .zpm-wire-b { animation: zpm-wire-b var(--T) linear infinite; }
.zsi-root .zpm-port { fill: #0b1530; stroke: rgba(140, 170, 240, .55); stroke-width: 1.5; }
@keyframes zpm-wire-a { 0%, 10% { stroke-dashoffset: 100; opacity: .9; } 21.7% { stroke-dashoffset: 0; opacity: .9; } 88.3% { stroke-dashoffset: 0; opacity: .5; } 96.7%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes zpm-wire-b { 0%, 41.7% { stroke-dashoffset: 100; opacity: .9; } 53.3% { stroke-dashoffset: 0; opacity: .9; } 88.3% { stroke-dashoffset: 0; opacity: .5; } 96.7%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* the travelling trade event */
.zsi-root .zpm-token { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(77, 141, 255, .35), 0 0 14px rgba(77, 141, 255, .55); offset-rotate: 0deg; offset-anchor: 50% 50%; opacity: 0; }
.zsi-root .zpm-token-a { offset-path: path('M168 222 C168 296 130 336 196 336'); animation: zpm-token-a var(--T) cubic-bezier(.45, 0, .25, 1) infinite; }
.zsi-root .zpm-token-b { offset-path: path('M524 336 C584 336 552 380 552 452'); animation: zpm-token-b var(--T) cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes zpm-token-a { 0%, 9.5% { offset-distance: 0%; opacity: 0; } 10% { offset-distance: 0%; opacity: 1; } 21.7% { offset-distance: 100%; opacity: 1; } 23%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes zpm-token-b { 0%, 41.2% { offset-distance: 0%; opacity: 0; } 41.7% { offset-distance: 0%; opacity: 1; } 53.3% { offset-distance: 100%; opacity: 1; } 54.6%, 100% { offset-distance: 100%; opacity: 0; } }

/* cards */
.zsi-root .zpm-card, .zsi-root .zpm-engine { position: absolute; border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(90% 70% at 80% 0%, rgba(77, 141, 255, .13), transparent 60%), linear-gradient(165deg, rgba(18, 31, 66, .97), rgba(7, 13, 30, .99));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 26px 60px rgba(2, 6, 20, .5); color: var(--ink); font-family: var(--ui); }
.zsi-root .zpm-card { width: 280px; height: 172px; padding: 16px 18px; }
.zsi-root .zpm-master { left: 28px; top: 50px; }
.zsi-root .zpm-follower { left: 412px; top: 452px; }
.zsi-root .zpm-top { display: flex; align-items: center; gap: 8px; }
.zsi-root .zpm-role { font-family: var(--brand); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #cfe0ff; padding: 3px 8px; border-radius: 6px; background: rgba(77, 141, 255, .14); border: 1px solid rgba(77, 141, 255, .3); }
.zsi-root .zpm-role-f { color: #c9f5e4; background: rgba(47, 207, 152, .1); border-color: rgba(47, 207, 152, .3); }
.zsi-root .zpm-meta { white-space: nowrap; font-family: var(--brand); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.zsi-root .zpm-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--brand); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #cfe6ff; }
.zsi-root .zpm-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(47, 207, 152, .14); animation: zpm-blink 2.4s ease-in-out infinite; }
.zsi-root .zpm-acct { margin-top: 10px; font-family: var(--brand); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.zsi-root .zpm-trade { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(140, 170, 240, .12); opacity: 0; }
.zsi-root .zpm-sym { display: flex; align-items: center; gap: 10px; }
.zsi-root .zpm-sym b { font-family: var(--brand); font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--ink); }
.zsi-root .zpm-buy { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--up); background: rgba(47, 207, 152, .12); border: 1px solid rgba(47, 207, 152, .3); padding: 2px 7px; border-radius: 5px; }
.zsi-root .zpm-nums { display: flex; gap: 20px; margin-top: 9px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: #dfe7ff; }
.zsi-root .zpm-nums small { display: block; font-family: var(--brand); font-size: 8.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.zsi-root .zpm-m-trade { animation: zpm-m-trade var(--T) cubic-bezier(.2, .7, .2, 1) infinite; }
.zsi-root .zpm-f-trade { animation: zpm-f-trade var(--T) cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes zpm-m-trade { 0%, 3.3% { opacity: 0; transform: translateY(6px); } 7% { opacity: 1; transform: none; } 88.3% { opacity: 1; transform: none; } 96.7%, 100% { opacity: 0; transform: none; } }
@keyframes zpm-f-trade { 0%, 53.3% { opacity: 0; transform: translateY(6px); } 57% { opacity: 1; transform: none; } 88.3% { opacity: 1; transform: none; } 96.7%, 100% { opacity: 0; transform: none; } }
.zsi-root .zpm-chip { position: absolute; right: 16px; top: -13px; font-family: var(--brand); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #e6eeff;
  padding: 5px 10px; border-radius: 999px; background: #13234d; border: 1px solid rgba(77, 141, 255, .45); opacity: 0; }
.zsi-root .zpm-chip-new { animation: zpm-chip-new var(--T) ease-out infinite; }
@keyframes zpm-chip-new { 0%, 3.3% { opacity: 0; transform: translateY(6px); } 6.5% { opacity: 1; transform: none; } 20% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; transform: translateY(-4px); } }
.zsi-root .zpm-done { position: absolute; right: 12px; top: 86px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--brand); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #c9f5e4;
  padding: 4px 9px 4px 5px; border-radius: 999px; background: #0d2a2a; border: 1px solid rgba(47, 207, 152, .45); box-shadow: 0 8px 20px rgba(2, 6, 20, .45); white-space: nowrap; opacity: 0; animation: zpm-done var(--T) cubic-bezier(.2, .8, .2, 1) infinite; }
.zsi-root .zpm-done svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--up); fill: none; stroke: #062218; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zsi-root .zpm-done small { font-family: var(--ui); font-size: 10.5px; letter-spacing: 0; color: var(--muted); text-transform: none; }
@keyframes zpm-done { 0%, 58.3% { opacity: 0; transform: scale(.85); } 61% { opacity: 1; transform: scale(1.04); } 62.5% { opacity: 1; transform: scale(1); } 88.3% { opacity: 1; transform: scale(1); } 96.7%, 100% { opacity: 0; transform: scale(1); } }

/* risk engine */
.zsi-root .zpm-engine { left: 196px; top: 246px; width: 328px; height: 180px; padding: 15px 18px; border-color: rgba(120, 160, 255, .28);
  background: radial-gradient(100% 80% at 50% 0%, rgba(77, 141, 255, .2), transparent 62%), linear-gradient(165deg, rgba(20, 36, 78, .98), rgba(8, 15, 34, .99)); }
.zsi-root .zpm-engine::after { content: ""; position: absolute; inset: -1px; border-radius: 18px; border: 1px solid rgba(95, 216, 255, .5); opacity: 0; animation: zpm-eng-ring var(--T) ease-in-out infinite; pointer-events: none; }
@keyframes zpm-eng-ring { 0%, 21% { opacity: 0; } 24% { opacity: .9; } 40% { opacity: .6; } 46%, 100% { opacity: 0; } }
.zsi-root .zpm-eng-head { position: relative; display: flex; align-items: center; gap: 10px; height: 30px; }
.zsi-root .zpm-eng-ic { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(77, 141, 255, .16); border: 1px solid rgba(77, 141, 255, .32); }
.zsi-root .zpm-eng-ic svg { width: 15px; height: 15px; fill: none; stroke: #9cc0ff; stroke-width: 1.8; stroke-linecap: round; }
.zsi-root .zpm-eng-name { display: grid; gap: 1px; font-family: var(--brand); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; line-height: 1.15; }
.zsi-root .zpm-eng-name small { font-size: 8.5px; font-weight: 400; letter-spacing: .2em; color: var(--muted); }
.zsi-root .zpm-pill { position: absolute; right: 0; top: 6px; font-family: var(--brand); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; opacity: 0; }
.zsi-root .zpm-pill-eval { color: #cfe0ff; background: rgba(77, 141, 255, .14); border: 1px solid rgba(77, 141, 255, .34); animation: zpm-pill-eval var(--T) linear infinite; }
.zsi-root .zpm-pill-ok { color: #c9f5e4; background: rgba(47, 207, 152, .1); border: 1px solid rgba(47, 207, 152, .32); animation: zpm-pill-ok var(--T) linear infinite; }
@keyframes zpm-pill-eval { 0%, 21.7% { opacity: 0; } 23.3% { opacity: 1; } 39% { opacity: 1; } 40.5%, 100% { opacity: 0; } }
@keyframes zpm-pill-ok { 0%, 40% { opacity: 0; } 41.5% { opacity: 1; } 88.3% { opacity: 1; } 96.7%, 100% { opacity: 0; } }
.zsi-root .zpm-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.zsi-root .zpm-rows li { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); opacity: .18; }
.zsi-root .zpm-rows li span { font-family: var(--brand); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.zsi-root .zpm-rows li b { font-weight: 600; color: #e6edff; font-variant-numeric: tabular-nums; }
.zsi-root .zpm-rows li s { color: var(--faint); text-decoration-color: rgba(240, 102, 122, .7); }
.zsi-root .zpm-r1 { animation: zpm-r1 var(--T) ease-out infinite; } .zsi-root .zpm-r2 { animation: zpm-r2 var(--T) ease-out infinite; }
.zsi-root .zpm-r3 { animation: zpm-r3 var(--T) ease-out infinite; } .zsi-root .zpm-r4 { animation: zpm-r4 var(--T) ease-out infinite; }
@keyframes zpm-r1 { 0%, 23.3% { opacity: .18; transform: translateX(-4px); } 26.5% { opacity: 1; transform: none; } 88.3% { opacity: 1; transform: none; } 96.7%, 100% { opacity: .18; transform: none; } }
@keyframes zpm-r2 { 0%, 27.5% { opacity: .18; transform: translateX(-4px); } 30.7% { opacity: 1; transform: none; } 88.3% { opacity: 1; transform: none; } 96.7%, 100% { opacity: .18; transform: none; } }
@keyframes zpm-r3 { 0%, 31.7% { opacity: .18; transform: translateX(-4px); } 34.9% { opacity: 1; transform: none; } 88.3% { opacity: 1; transform: none; } 96.7%, 100% { opacity: .18; transform: none; } }
@keyframes zpm-r4 { 0%, 35.8% { opacity: .18; transform: translateX(-4px); } 39% { opacity: 1; transform: none; } 88.3% { opacity: 1; transform: none; } 96.7%, 100% { opacity: .18; transform: none; } }
.zsi-root .zpm-bar { position: absolute; left: 18px; right: 18px; bottom: 14px; height: 3px; border-radius: 2px; background: rgba(140, 170, 240, .14); overflow: hidden; }
.zsi-root .zpm-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform-origin: 0 50%; transform: scaleX(0); animation: zpm-bar var(--T) linear infinite; }
@keyframes zpm-bar { 0%, 23.3% { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); opacity: 1; } 88.3% { transform: scaleX(1); opacity: 1; } 96.7%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes zpm-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

@media (max-width: 1100px) { .zsi-root .zpm-meta { display: none; } }
/* reduced motion: one still frame of the final state (trade executed); hidden tab: paused (shared policy) */
.zsi-is-still .zsi-root .zpm-art *, .zsi-is-still .zsi-root .zpm-art *::after { animation-play-state: paused !important; animation-delay: -8.4s !important; }
.zsi-is-still .zsi-root .zpm-art .zsi-sig-intro, .zsi-is-still .zsi-root .zpm-art .zpm-live i { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .zsi-root .zpm-art *, .zsi-root .zpm-art *::after { animation-play-state: paused !important; animation-delay: -8.4s !important; }
  .zsi-root .zpm-art .zsi-sig-intro, .zsi-root .zpm-art .zpm-live i { animation: none !important; }
}
/* phones: 16 px inputs (no focus zoom on iOS); the "how to get access" line under the form */
@media (max-width: 760px) { .zsi-root .zsi-field input { font-size: 16px; } }
.zsi-root .zpl-access { margin: -6px 0 0; font-size: 13px; color: var(--muted); }