:root{--pin-primary:#171717;--pin-bg:#fff;--pin-surface:#fafafa;--pin-key-text:#222;--pin-dot-filled:#171717;--pin-dot-empty:#ddd;--pin-title:#171717;--pin-subtitle:#777;--pin-radius:10px;--pin-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--pin-key-shape:rounded;font-family:var(--pin-font);color:var(--pin-title);background:var(--pin-bg);font-synthesis:none}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,input:focus-visible{outline:2px solid #555;outline-offset:4px}.payment-card{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:1.586;border-radius:17px;padding:23px;color:#eee;background:repeating-linear-gradient(105deg,transparent 0,rgba(255,255,255,.018) 1px,transparent 2px,transparent 4px),radial-gradient(ellipse at 10% 0%,#626262,#272727 40%,#101010 85%);border:1px solid #666;box-shadow:inset 0 1px 1px #aaa,inset 0 -2px 2px #000,0 22px 24px -16px #0009,0 5px 8px #0002;display:flex;flex-direction:column;justify-content:space-between;text-shadow:0 1px 1px #000;-webkit-user-select:none;user-select:none}.payment-card:after{content:"";position:absolute;width:290px;height:290px;border:1px solid #ffffff0c;border-radius:50%;right:-120px;top:-80px;box-shadow:0 0 0 25px #ffffff03,0 0 0 50px #ffffff03;z-index:-1}.card-glint{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(125deg,transparent 25%,#ffffff10 26%,transparent 65%);pointer-events:none}.card-top,.card-bottom,.chip-line{display:flex;align-items:center;justify-content:space-between}.card-brand{font-size:12px;font-weight:700;letter-spacing:2px}.card-scheme{font-size:8px;text-transform:uppercase;letter-spacing:2px;color:#bbb}.chip-line{justify-content:flex-start;gap:14px}.contactless{font:18px monospace;letter-spacing:-5px;transform:rotate(-10deg);color:#bbb}.card-pan{display:flex;justify-content:space-between;font:clamp(12px,4vw,18px) monospace;letter-spacing:1px;color:#ddd;text-shadow:0 -1px #fff6,0 2px 2px #000}.card-bottom small{font-size:6px;color:#aaa;letter-spacing:1.8px;display:block;margin-bottom:5px}.card-bottom strong{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500}.network{font-weight:800;font-style:italic;font-size:17px}.mastercard{display:flex}.mastercard i{width:25px;height:25px;border:1px solid #ddd;border-radius:50%;background:#ffffff25}.mastercard i+i{margin-left:-10px;background:#fff5}.compact{max-width:300px;margin:auto}.confirmation-form,.pin-form{width:100%;padding:0 26px 24px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2.1px;color:#777}h1{font-size:25px;line-height:1.2;letter-spacing:-.9px;margin:10px 0}p{font-size:12px;line-height:1.6;color:#777}.pan-field{margin:25px 0}.pan-field label{font-size:12px;font-weight:600}.pan-field p{font-size:11px;margin:7px 0 12px}.pan-input-wrap{display:flex;align-items:center;border:1px solid #ccc;border-radius:10px;background:#fafafa;padding-right:15px;gap:10px}.pan-input-wrap input{min-width:0;width:100%;height:49px;border:0;background:transparent;padding:12px;letter-spacing:4px}.pan-input-wrap span{font:14px monospace;color:#888;letter-spacing:2px}.primary-button{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid #111;background:linear-gradient(#292929,#101010);color:#fff;padding:16px 18px;border-radius:10px;font-size:12px;font-weight:600;box-shadow:0 2px 3px #0002;margin-top:22px}.primary-button:hover:enabled{background:#333}.primary-button span{font-size:18px;line-height:12px}.security-note{text-align:center;font-size:9px;letter-spacing:.4px;color:#888;margin-top:20px}.step-track{display:flex;justify-content:space-between;padding:0 0 25px;gap:8px}.step-track>span{display:flex;align-items:center;gap:5px;font-size:8px;color:#aaa}.step-track b{display:grid;place-items:center;border:1px solid #ddd;width:18px;height:18px;border-radius:50%;font-size:9px}.step-track .active{color:#222}.step-track .active b{background:#222;color:#fff;border-color:#222}.pin-digits{display:flex;justify-content:center;gap:12px;margin-top:20px}.pin-digit{width:54px;min-width:0;height:60px;text-align:center;border:1px solid #ccc;background:#fafafa;border-radius:10px;font-size:25px;padding:0}.pin-digit[aria-invalid=true]{border-color:#333}.pin-digit:focus{background:#fff;border-color:#333}.field-help{font-size:10px;text-align:center;min-height:32px;margin:10px 0}.number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.number-pad button{height:42px;border:1px solid #eee;border-radius:8px;background:#fafafa;color:#222;font-size:19px}.number-pad button:nth-child(10){font-size:10px}.number-pad button:hover{background:#eaeaea}.number-pad button:active{transform:scale(.96)}.text-button{display:block;margin:15px auto 0;border:0;background:none;color:#666;font-size:11px;text-decoration:underline}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:340px){.payment-card{padding:18px}.card-brand{font-size:10px}.confirmation-form,.pin-form{padding-left:20px;padding-right:20px}h1{font-size:22px}}.pan-input-wrap .pan-prefix{padding-left:12px;font-size:12px;letter-spacing:1px}.pan-input-wrap:has(.pan-prefix){gap:5px}.pan-input-wrap:has(.pan-prefix) input{padding-left:4px;letter-spacing:3px}.pan-fieldset{border:0;padding:0;min-width:0}.pan-fieldset legend{font-size:12px;font-weight:600;padding:0}.pan-digit-boxes{display:grid;gap:6px;width:100%}.pan-digit{width:100%;min-width:0;height:48px;text-align:center;padding:0;border:1px solid #ccc;border-radius:7px;background:#fafafa;color:#171717;font-size:20px}.pan-digit:focus{background:#fff;border-color:#333}@media(max-width:340px){.pan-digit-boxes{gap:4px}.pan-digit{height:44px;font-size:18px}}.pan-number-entry{display:flex;align-items:center;gap:8px;width:100%}.pan-visible-digits{flex:none;font-family:monospace;font-size:12px;letter-spacing:1px;color:#555}.pan-number-entry .pan-digit-boxes{flex:1;min-width:0;gap:3px}.pan-number-entry .pan-digit{height:40px;border-radius:5px;font-size:16px}.pan-number-entry .pan-digit:nth-child(4){border-right-color:#777}@media(max-width:340px){.pan-number-entry{gap:5px}.pan-visible-digits{font-size:10px;letter-spacing:0}.pan-number-entry .pan-digit-boxes{gap:2px}.pan-number-entry .pan-digit{height:38px;font-size:14px}}.unionpay-mark{display:inline-block;padding:6px 8px;border:1px solid #aaa;border-radius:5px;background:linear-gradient(115deg,#ffffff18,#ffffff05);color:#eee;font-size:13px;font-weight:700;font-style:italic;letter-spacing:-.5px;box-shadow:inset 0 1px #ffffff20}.frame-toolbar{width:100%;display:flex;justify-content:flex-end;padding:10px 14px 0}.frame-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ddd;border-radius:50%;background:#fff;color:#333;font-size:24px;line-height:1}.frame-close:hover{background:#f3f3f3}h1{color:var(--pin-title)}p,.eyebrow,.security-note,.field-help,.text-button,.pan-visible-digits{color:var(--pin-subtitle)}.primary-button{background:var(--pin-primary);border-color:var(--pin-primary);border-radius:var(--pin-radius)}.primary-button:hover:enabled{background:var(--pin-primary);filter:brightness(.9)}.step-track .active{color:var(--pin-title)}.step-track .active b{background:var(--pin-primary);border-color:var(--pin-primary)}.pin-digit,.pan-digit{background:var(--pin-surface);color:var(--pin-dot-filled);border-color:var(--pin-dot-empty);border-radius:var(--pin-radius)}.pin-digit.has-value,.pan-digit.has-value{border-color:var(--pin-dot-filled)}.pin-digit:focus,.pan-digit:focus{background:var(--pin-surface);border-color:var(--pin-primary)}.pin-digit[aria-invalid=true]{border-color:var(--pin-primary)}.number-pad button{background:var(--pin-surface);color:var(--pin-key-text);border-radius:var(--pin-radius)}.number-pad button:hover{background:var(--pin-surface);filter:brightness(.95)}.frame-close{background:var(--pin-bg);color:var(--pin-title);border-radius:var(--pin-radius)}.frame-close:hover{background:var(--pin-surface)}button:focus-visible,input:focus-visible{outline-color:var(--pin-primary)}:root[data-pin-key-shape=square] .number-pad button{border-radius:0}:root[data-pin-key-shape=circle] .number-pad button{width:42px;justify-self:center;border-radius:50%}