@font-face{font-family:Tiempos Headline;src:url(/fonts/tiempos-headline-vf-roman.woff2)format("woff2");font-weight:300 900;font-style:normal;font-display:swap}@font-face{font-family:Tiempos Fine;src:url(/fonts/tiempos-fine-vf-roman.woff2)format("woff2");font-weight:300 900;font-style:normal;font-display:swap}:root{--bg:#fafaf7;--paper:#fff;--ink:#111110;--body:#2a2925;--muted-ink:#5a5852;--hair:#1111101f;--hair-2:#1111100f;--ink-block:#14130f;--blue:#0d6efd;--ok:#1f7a4d;--ok-bg:#eaf3ec;--down:#b91c1c;--down-bg:#fbe9e7;--idle-bg:#f2f1ec;--radius:2px;--font-serif:"Tiempos Headline", Georgia, "Times New Roman", serif;--font-serif-fine:"Tiempos Fine", Georgia, "Times New Roman", serif;--font-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace}*{box-sizing:border-box}html,body{margin:0}body{min-height:100dvh;font-family:var(--font-sans);background:var(--bg);color:var(--body);place-items:center;padding:24px 16px;display:grid}main{width:100%;max-width:880px}.sheet{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);grid-template-columns:320px 1fr;animation:.48s cubic-bezier(.2,.7,.2,1) both sheet-in;display:grid;overflow:hidden}@keyframes sheet-in{0%{opacity:0;transform:translateY(10px)}}.summary{background:var(--ink-block);color:#fafaf7;flex-direction:column;gap:6px;padding:32px 28px;display:flex}.brand{font-family:var(--font-serif);letter-spacing:.01em;font-size:15px;font-weight:600}.merchant{letter-spacing:.12em;text-transform:uppercase;color:#a8a59c;margin-top:22px;font-size:12px;font-weight:500}.amount{font-family:var(--font-serif-fine);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:4px 0 18px;font-size:46px;font-weight:500}.amount .currency{font-family:var(--font-mono);color:#a8a59c;letter-spacing:.06em;margin-left:8px;font-size:15px;font-weight:400}.meta{font-family:var(--font-mono);color:#a8a59c;word-break:break-all;border-top:1px solid #fafaf724;gap:6px;margin-top:auto;padding-top:14px;font-size:11px;display:grid}.meta b{color:#e6e4dd;font-weight:500}.pci{color:#a8a59c;margin-top:16px;font-size:12px;line-height:1.5}.pane{background:var(--paper);flex-direction:column;min-height:420px;padding:32px 32px 28px;display:flex}.pane-title{font-family:var(--font-serif);color:var(--ink);margin:0 0 18px;font-size:18px;font-weight:500}.fields{grid-template-columns:1fr 1fr 1fr;gap:14px 12px;display:grid}.field-cardNumber,.field-nameOnCard{grid-column:1/-1}.field span{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-ink);margin-bottom:6px;font-size:11px;font-weight:500;display:block}.field-slot{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);height:46px;padding:2px 4px;overflow:hidden}.loading .field-slot{background:linear-gradient(100deg, var(--idle-bg) 40%, var(--bg) 50%, var(--idle-bg) 60%);border-color:var(--hair-2);background-size:200% 100%;animation:1.4s linear infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.field-slot iframe{border:0;width:100%;height:100%}.pay{width:100%;font:inherit;border-radius:var(--radius);border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;margin-top:22px;padding:13px 18px;font-size:14px;font-weight:600;transition:opacity .12s}.pay:hover:enabled{opacity:.88}.pay:disabled{opacity:.45;cursor:default}button:focus-visible,details summary:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--radius)}.fineprint{color:var(--muted-ink);margin-top:14px;font-size:12px;line-height:1.55}.state{text-align:center;margin:auto 0;padding:24px 8px}.state h2{font-family:var(--font-serif);color:var(--ink);margin:0 0 8px;font-size:22px;font-weight:500}.state p{color:var(--muted-ink);margin:0;font-size:14px;line-height:1.55}.error-note{color:var(--down);margin-top:18px;font-size:13px;line-height:1.5}details.trace{text-align:left;margin-top:12px}details.trace summary{color:var(--muted-ink);cursor:pointer;font-size:12px}details.trace pre{font-family:var(--font-mono);background:var(--idle-bg);border:1px solid var(--hair);border-radius:var(--radius);white-space:pre-wrap;word-break:break-word;max-height:180px;padding:10px 12px;font-size:11px;line-height:1.5;overflow:auto}.receipt{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:330px;margin:auto;padding:26px 24px 30px;animation:.4s cubic-bezier(.2,.7,.2,1) both receipt-in;position:relative;-webkit-mask-image:radial-gradient(6px at 8px 100%,#0000 5.5px,#000 6px);mask-image:radial-gradient(6px at 8px 100%,#0000 5.5px,#000 6px);-webkit-mask-size:16px 100%;mask-size:16px 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}@keyframes receipt-in{0%{opacity:0;transform:translateY(8px)}}.receipt h2{font-family:var(--font-serif);color:var(--ink);margin:0 0 16px;font-size:19px;font-weight:500}.receipt dl{font-family:var(--font-mono);gap:8px;margin:0;font-size:11.5px;display:grid}.receipt .row{border-bottom:1px dotted var(--hair);justify-content:space-between;gap:12px;padding-bottom:7px;display:flex}.receipt dt{color:var(--muted-ink)}.receipt dd{text-align:right;word-break:break-all;color:var(--body);margin:0}.stamp{font-family:var(--font-mono);letter-spacing:.12em;border:1.5px solid var(--ok);border-radius:var(--radius);color:var(--ok);background:var(--ok-bg);padding:5px 10px;font-size:12px;font-weight:600;animation:.26s cubic-bezier(.2,1.6,.4,1) .22s both stamp-in;position:absolute;top:16px;right:14px;transform:rotate(-7deg)}.stamp.declined,.stamp.expired{border-color:var(--down);color:var(--down);background:var(--down-bg)}@keyframes stamp-in{0%{opacity:0;transform:rotate(-7deg)scale(1.7)}}.dev-card{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);margin-bottom:16px;padding:28px 32px}.dev-card h1{font-family:var(--font-serif);color:var(--ink);margin:0 0 4px;font-size:20px;font-weight:500}.dev-card p{color:var(--muted-ink);margin:0;font-size:13px;line-height:1.5}@media (max-width:720px){body{align-items:start;padding:12px 10px}.sheet{grid-template-columns:1fr}.summary{padding:22px 22px 18px}.amount{margin-bottom:4px;font-size:36px}.meta{margin-top:12px}.pane{min-height:0;padding:22px 20px}.fields{grid-template-columns:1fr 1fr}.field-securityCode{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.sheet,.receipt,.stamp,.loading .field-slot{animation:none}.pay{transition:none}}
