@import "https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Geist+Mono:wght@400&display=swap";
.light{--surface-neutral:#fafafa;--container-grey:#f0f0f0;--container-white:#fff;--container-dark:#1f1f1f;--component-grey:#e5e5e5;--component-white:#fff;--component-dark:#1f1f1f;--component-inversed:#fff;--component-accent:#1f6028;--content-dark:#1f1f1f;--content-grey:#757575;--content-inversed:#fff;--content-accent:#1f6028;--border-dark:#1f1f1f;--border-grey:#e5e5e5;--border-light-grey:#f0f0f0;--state-dark-hover:#0000000a;--state-dark-pressed:#00000014;--state-light-hover:#ffffff0a;--state-light-pressed:#ffffff14;--disabled-container:#0000000f;--disabled-text:#0006;--shadow-container:0px 0px .5px #0000001f, 0px 2px 6px #00000014;--shadow-elevated:0px 0px 1px #0000001f, 0px 2px 12px #00000014;--elevation-border-container:none;--elevation-border-elevated:none}.dark{--surface-neutral:#0f0f0f;--container-grey:#1a1a1a;--container-white:#1a1a1a;--container-dark:#f5f5f5;--component-grey:#242424;--component-white:#242424;--component-dark:#f5f5f5;--component-inversed:#f5f5f5;--component-accent:#1f6028;--content-dark:#f5f5f5;--content-grey:#949494;--content-inversed:#1f1f1f;--content-accent:#1f6028;--border-dark:#f5f5f5;--border-grey:#2e2e2e;--border-light-grey:#242424;--state-dark-hover:#ffffff0a;--state-dark-pressed:#ffffff14;--state-light-hover:#0000000a;--state-light-pressed:#00000014;--disabled-container:#ffffff1a;--disabled-text:#fff6;--shadow-container:none;--shadow-elevated:none;--elevation-border-container:1px solid var(--border-light-grey);--elevation-border-elevated:1px solid var(--border-grey)}:root{--card-chip-from:#f4dfa3;--card-chip-mid:#d3ac5e;--card-chip-shadow:#b8934a;--card-chip-to:#e8cd83;--network-mastercard-red:#eb001b;--network-mastercard-yellow:#f79e1b}
.scene{-webkit-font-smoothing:antialiased;background-repeat:repeat;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:100vh;font-family:Geist,sans-serif;display:flex}.scene.light{background-color:#fafafa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='0.5' cy='0.5' r='0.5' fill='%23B3B3B3'/%3E%3C/svg%3E")}.scene.dark{background-color:var(--surface-neutral);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='0.5' cy='0.5' r='0.5' fill='%23333333'/%3E%3C/svg%3E")}.scene *{box-sizing:border-box}.scene-row{justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex;position:relative}.control-panel{background:var(--container-white);width:240px;box-shadow:var(--shadow-elevated);border:var(--elevation-border-elevated);border-radius:20px;flex-direction:column;display:flex;position:absolute;top:24px;right:24px;overflow:hidden}.control-panel-header{border-bottom:1px solid var(--border-light-grey);cursor:pointer;background:0 0;border-top:none;border-left:none;border-right:none;justify-content:space-between;align-items:center;width:100%;padding:20px;display:flex}.control-panel.closed .control-panel-header{border-bottom:none}.control-panel-title{color:var(--content-dark);font-family:Geist,sans-serif;font-size:14px;font-weight:500}.control-panel-chevron{color:var(--content-grey);justify-content:center;align-items:center;transition:transform .25s cubic-bezier(.25,.46,.45,.94),color .15s ease-out;display:flex}.control-panel-header:hover .control-panel-chevron{color:var(--content-dark)}.control-panel.open .control-panel-chevron{transform:rotate(180deg)}.control-panel-body{flex-direction:column;max-height:0;transition:max-height .35s cubic-bezier(.25,.46,.45,.94);display:flex;overflow:hidden}.control-panel.open .control-panel-body{max-height:900px}.control-panel-section{border-bottom:1px solid var(--border-light-grey);flex-direction:column;gap:8px;padding:20px;display:flex;position:relative}.control-panel-section:last-child{border-bottom:none}.control-panel-label{color:var(--content-dark);font-family:Geist,sans-serif;font-size:14px;font-weight:500}.select{background:var(--component-white);border:1px solid var(--border-grey);width:100%;height:44px;color:var(--content-dark);cursor:pointer;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px;font-family:Geist,sans-serif;font-size:14px;font-weight:500;transition:background .15s ease-out;display:flex}.select:hover{background:var(--state-dark-hover)}.select svg{color:var(--content-grey);flex-shrink:0;transition:transform .2s cubic-bezier(.25,.46,.45,.94),color .15s ease-out}.select:hover svg{color:var(--content-dark)}.select.open svg{transform:rotate(180deg)}.select-dropdown{z-index:50;background:var(--component-white);box-shadow:var(--shadow-container);border-radius:12px;flex-direction:column;gap:2px;padding:4px;display:flex;position:fixed}.select-dropdown-item{height:44px;color:var(--content-dark);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;justify-content:space-between;align-items:center;padding:12px 8px;font-family:Geist,sans-serif;font-size:14px;font-weight:500;transition:background .15s ease-out;display:flex}.select-dropdown-item:hover{background:var(--state-dark-hover)}.select-dropdown-item svg{color:var(--content-dark);flex-shrink:0}.picker{justify-content:space-between;display:flex}.picker-swatch{cursor:pointer;background:0 0;border:1.6px solid #0000;border-radius:9999px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:border-color .15s ease-out,transform .15s cubic-bezier(.25,.46,.45,.94);display:flex}.picker-swatch:hover{transform:scale(1.1)}.picker-swatch:active{transform:scale(.92)}.picker-swatch[data-selected=true]{border-color:var(--border-grey)}.picker-swatch-dot{border-radius:9999px;width:34px;height:34px;transition:transform .15s cubic-bezier(.25,.46,.45,.94);display:block}.picker-swatch[data-selected=true] .picker-swatch-dot{transform:scale(1)}.picker-swatch-dot[data-wheel=true]{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker{z-index:60;background:var(--component-white);border:var(--elevation-border-elevated);width:216px;box-shadow:var(--shadow-container);border-radius:12px;flex-direction:column;gap:8px;padding:8px;display:flex;position:fixed}.color-picker-sv{cursor:crosshair;touch-action:none;background:linear-gradient(to top, #000, #0000), linear-gradient(to right, #fff, var(--hue));border-radius:8px;height:132px;position:relative}.color-picker-hue{cursor:ew-resize;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:9999px;height:12px;position:relative}.color-picker-handle{pointer-events:none;border:2px solid #fff;border-radius:9999px;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;box-shadow:0 0 0 1px #00000047}.color-picker-row{align-items:center;gap:8px;display:flex}.color-picker-preview{border:1px solid var(--border-grey);border-radius:8px;flex-shrink:0;width:28px;height:28px}.color-picker-hex{background:var(--component-white);border:1px solid var(--border-grey);min-width:0;height:28px;color:var(--content-dark);text-transform:lowercase;border-radius:8px;flex:1;padding:0 8px;font-family:Geist Mono,ui-monospace,monospace;font-size:13px}.color-picker-hex:focus{border-color:var(--border-dark);outline:none}.color-picker-hex[data-invalid=true]{color:var(--content-grey)}.card-shell{justify-content:center;align-items:center;display:flex;position:relative}.card-stage{touch-action:none;justify-content:center;align-items:center;width:378px;height:245px;display:flex;position:relative}.card{cursor:pointer;width:356px;height:225px;transform-style:preserve-3d;filter:drop-shadow(0 18px 32px #0000002e)drop-shadow(0 4px 10px #00000024);border-radius:18px;transition:filter .6s cubic-bezier(.25,.46,.45,.94);position:relative}.card.ontop{filter:drop-shadow(0 28px 48px #00000038)drop-shadow(0 6px 14px #00000029)}.card-tilt{width:100%;height:100%;transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));will-change:transform;transition:transform 1s cubic-bezier(.22,1,.36,1)}.card-tilt.tilting{transition:transform .4s cubic-bezier(.22,1,.36,1)}.card-inner{width:100%;height:100%;transform-style:preserve-3d;border-radius:18px;transition:transform .5s cubic-bezier(.25,.46,.45,.94);position:relative}.card-inner.flipped{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:18px;position:absolute;inset:0;overflow:hidden}.card-front{background:linear-gradient(135deg, var(--metal-from) 0%, var(--metal-to) 100%);box-shadow:inset -1px -1px #0000008c,inset 1px 1px 1px #ffffff8c}.card-back{background:linear-gradient(135deg, var(--metal-from) 0%, var(--metal-to) 100%);flex-direction:column;justify-content:space-between;padding:18px 0;display:flex;transform:rotateY(180deg)}.metal-canvas{z-index:0;pointer-events:none;border-radius:18px;width:100%;height:100%;position:absolute;inset:0}.card-chip{z-index:2;background:linear-gradient(135deg, var(--card-chip-from) 0%, var(--card-chip-mid) 40%, var(--card-chip-shadow) 60%, var(--card-chip-to) 100%);border-radius:6px;width:43px;height:31px;position:absolute;top:50%;left:25px;overflow:hidden;transform:translateY(-50%);box-shadow:inset 0 0 0 1px #00000026,0 1px 1px #00000040}.card-chip:before{content:"";background:linear-gradient(#0000002e 0 0) 0 34%/100% 1px no-repeat,linear-gradient(#0000002e 0 0) 0 66%/100% 1px no-repeat,linear-gradient(90deg,#0000002e 0 0) 32% 0/1px 100% no-repeat,linear-gradient(90deg,#0000002e 0 0) 68% 0/1px 100% no-repeat;position:absolute;inset:0}.card-logo{z-index:2;letter-spacing:.02em;color:#ffffffd9;text-shadow:0 1px 1px #0003;font-family:Geist,sans-serif;font-size:14px;font-weight:500;position:absolute;top:22px;left:25px}.card-network{z-index:2;width:49px;height:29px;position:absolute;bottom:20px;right:22px}.card-network .circle-red{background:var(--network-mastercard-red);border-radius:50%;width:29px;height:29px;position:absolute;top:0;left:0}.card-network .circle-yellow{background:var(--network-mastercard-yellow);border-radius:50%;width:29px;height:29px;position:absolute;top:0;left:16px}.card-logo-img{z-index:2;object-fit:contain;object-position:left center;max-width:78px;max-height:27px;position:absolute;top:20px;left:25px}.card-network-img{z-index:2;object-fit:contain;object-position:right center;max-width:78px;max-height:27px;position:absolute;bottom:18px;right:22px}.upload-row{border:1px solid var(--border-grey);background:var(--component-white);cursor:pointer;border-radius:12px;align-items:center;gap:6px;width:100%;min-height:44px;padding:12px;transition:background .15s ease-out;display:flex}.upload-row:not(.has-file):hover{background:var(--state-dark-hover)}.upload-row.has-file{cursor:default}.upload-preview{background:var(--container-grey);width:26px;height:26px;color:var(--content-grey);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.upload-row:not(.has-file) .upload-preview{width:20px;height:20px;color:var(--content-dark);background:0 0}.upload-preview img{object-fit:contain;width:100%;height:100%;padding:3px}.upload-filename{min-width:0;color:var(--content-dark);text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:Geist,sans-serif;font-size:14px;font-weight:500;overflow:hidden}.upload-placeholder{color:var(--content-dark);text-align:left;flex:1;font-family:Geist,sans-serif;font-size:14px;font-weight:500}.upload-remove{color:var(--content-grey);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:color .15s ease-out;display:flex}.upload-remove:hover{color:var(--content-dark)}.control-panel-section.no-border{border-bottom:none}.reset-btn{border:1px solid var(--border-grey);background:var(--component-white);width:100%;height:44px;color:var(--content-dark);cursor:pointer;border-radius:9999px;justify-content:center;align-items:center;gap:6px;font-family:Geist,sans-serif;font-size:14px;font-weight:500;transition:background .15s ease-out;display:flex}.reset-btn:hover{background:var(--state-dark-hover)}.reset-btn:active{background:var(--state-dark-pressed)}.card-stripe{z-index:2;background:#00000061;flex-shrink:0;width:100%;height:45px;position:relative}.card-back-details{z-index:3;will-change:filter;flex-direction:column;flex-shrink:0;gap:13px;padding:0 18px;display:flex;position:relative}.card-back-name-number{flex-direction:column;gap:2px;width:153px;display:flex}.card-back-label{color:#ffffffb3;font-family:Geist,sans-serif;font-size:13px}.card-back-number{color:#fff;font-variant-numeric:tabular-nums;font-family:Geist Mono,monospace;font-size:13px;transition:color .8s}.card-back-addinfo{white-space:nowrap;justify-content:space-between;align-items:center;width:153px;display:flex}.card-back-exp,.card-back-cvc{align-items:center;gap:4px;font-family:Geist Mono,monospace;font-size:13px;display:flex}.card-back-mono{color:#fff;font-family:Geist Mono,monospace;font-size:13px;transition:color .8s}.card-back.frozen .card-back-number,.card-back.frozen .card-back-mono{color:#ffffffb3}.digit-slot{vertical-align:bottom;height:1.35em;line-height:1.35em;display:inline-block;position:relative;overflow:hidden}.digit-track{transition:transform .48s cubic-bezier(.25,.46,.45,.94);display:block;transform:translateY(-50%)}.digit-track.rolled{transform:translateY(0%)}.digit-row{height:1.35em;line-height:1.35em;display:block}.freeze-canvas{z-index:5;pointer-events:none;border-radius:18px;width:100%;height:100%;position:absolute;inset:0}.card-inner-shadow{pointer-events:none;z-index:4;border-radius:18px;position:absolute;inset:0;box-shadow:inset -1px -1px #00000047,inset 1px 1px 1px #ffffff26}.actions{white-space:nowrap;gap:12px;display:flex;position:absolute;top:calc(100% + 38px);left:50%;transform:translate(-50%)}.pill{background:var(--component-white);border:1px solid var(--border-grey);letter-spacing:-.28px;height:44px;color:var(--content-dark);cursor:pointer;opacity:0;pointer-events:none;border-radius:9999px;padding:0 20px;font-family:Geist,sans-serif;font-size:14px;font-weight:500;transition:opacity .26s ease-out,transform .44s cubic-bezier(.22,1,.36,1),background .15s ease-out,border-color .3s ease-out,color .3s ease-out;transform:translateY(12px)}.actions.open .pill{opacity:1;pointer-events:auto;transform:translateY(0)}.actions.open .pill:nth-child(2){transition-delay:60ms}.actions.open .pill:nth-child(3){transition-delay:.12s}.actions.open .pill:hover{background:color-mix(in srgb, var(--component-white), var(--content-dark) 4%)}.actions.open .pill:active{background:color-mix(in srgb, var(--component-white), var(--content-dark) 8%);transform:translateY(0)scale(.97)}.actions.open .pill.disabled{color:var(--disabled-text);pointer-events:none;border-color:#0000}