@import"https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600;700&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{overflow-x:hidden;width:100%}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;width:100%;overflow-x:hidden;box-sizing:border-box}*{box-sizing:border-box;max-width:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%;max-width:1440px;margin:0 auto;padding:1rem;text-align:center;box-sizing:border-box;overflow-x:hidden}body{background-color:#e5e5e5;background-image:radial-gradient(rgba(120,120,120,.2) 1px,transparent 1px);background-size:25px 25px;color:#2d3748;margin:0;padding:0;min-height:100vh;width:100%;overflow-x:hidden}.app-container{display:flex;flex-direction:column;min-height:80vh;gap:2rem;width:100%;max-width:100vw;padding:1rem;box-sizing:border-box;overflow-x:hidden;position:relative}.app-title{position:fixed;bottom:2.5rem;left:1rem;font-size:1.2rem;font-weight:500;color:#2d374899;text-shadow:none;margin:0;padding:0;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none}.copyright{position:fixed;bottom:1rem;left:1rem;font-size:.8rem;font-weight:400;color:#2d374866;margin:0;padding:0;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none}.content-container{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:3rem;flex:1;width:100%;max-width:100%;flex-wrap:wrap;padding:1rem;box-sizing:border-box}@media (max-width: 1024px){.content-container{flex-direction:column;gap:2rem;width:100%;padding:1rem}}@media (max-width: 768px){.content-container,.app-container{padding:.5rem}}button{background:#4a90e2;color:#fff;border:none;border-radius:8px;padding:.75em 1.5em;font-size:1em;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 6px #4a90e233}button:hover{background:#3a80d2;transform:translateY(-2px);box-shadow:0 6px 8px #4a90e24d}button:focus{outline:none;box-shadow:0 0 0 3px #4a90e266}input,select{width:100%;padding:.75rem;border:1px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:border-color .2s;background-color:#fff;color:#2d3748}input:focus,select:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e233}.form-group{margin-bottom:1.5rem}label{display:block;margin-bottom:.5rem;font-weight:500;text-align:left}.card-preview{width:500px;height:400px;position:relative;background-color:#ffffff0d;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #0000001a;transition:transform .3s ease}.card-preview:hover{transform:scale(1.02)}.card-preview-container{width:500px;perspective:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}.business-card{width:100%;height:300px;position:relative;transform-style:preserve-3d;cursor:pointer;box-shadow:0 15px 40px #00000026,0 5px 15px #0000001a;border-radius:12px;font-family:Libre Franklin,sans-serif;will-change:transform;transition:transform .6s cubic-bezier(.175,.885,.32,1.275)}.business-card:hover{box-shadow:0 20px 50px #00000040,0 10px 20px #00000026}.business-card.perspective-active{transition:transform .1s ease-out}.business-card.flipped{will-change:transform}.card-side{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:12px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:25px;box-sizing:border-box}.card-front{background-color:#fff;color:#333}.card-back{background-color:#fff;color:#333;transform:rotateY(180deg)}.card-content{text-align:center;padding-top:70px;z-index:1;position:relative;font-family:Libre Franklin,sans-serif}.card-name{font-size:2.1rem;font-weight:700;margin-bottom:10px;letter-spacing:-.5px;text-shadow:0 1px 2px rgba(0,0,0,.1);font-family:Libre Franklin,sans-serif}.card-divider{width:40px;height:4px;background-color:#fffc;margin:10px auto 14px;border-radius:2px}.card-title{font-size:1.1rem;font-weight:400;margin-bottom:14px;font-style:italic;opacity:.9;letter-spacing:.5px;font-family:Libre Franklin,sans-serif}.card-company{font-size:1.6rem;font-weight:600;margin-top:6px;letter-spacing:.5px;font-family:Libre Franklin,sans-serif}.card-pattern{mix-blend-mode:soft-light}.card-accent{position:absolute;height:10px;width:100%;bottom:0;left:0;opacity:.7}.contact-info{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:-10px}.contact-item{font-size:1rem;display:flex;align-items:center;gap:10px;font-weight:500;font-family:Libre Franklin,sans-serif;letter-spacing:.3px}.contact-icon{display:flex;align-items:center;justify-content:center}.contact-icon-svg{width:18px;height:18px;opacity:.9}.contact-text{font-weight:500}.contact-address{font-size:.95rem;margin-top:10px;font-style:italic;text-align:center;max-width:90%;line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:Libre Franklin,sans-serif}.company-logo{object-fit:contain;z-index:2;filter:drop-shadow(0 2px 5px rgba(0,0,0,.15));transition:transform .3s ease}.company-logo:hover{transform:scale(1.05)}.flip-instruction-container{display:flex;flex-direction:column;align-items:center;margin-top:14px;gap:8px}.flip-button{--border-width: clamp(1px, .0625em, 4px);all:unset;cursor:pointer;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);pointer-events:auto;z-index:3;background:linear-gradient(-75deg,#ffffff1a,#ffffff4d,#ffffff1a);border-radius:999vw;box-shadow:0 .15em .3em #0000000a,0 .05em .1em #00000005,inset 0 0 0 1px #fff3,inset 0 .5em 1em #ffffff1a;backdrop-filter:blur(clamp(1px,.125em,4px));-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--anim--hover-time) var(--anim--hover-ease);padding:.6rem 1.2rem;font-weight:600;font-family:Libre Franklin,sans-serif;font-size:var(--button-size);color:#323232;text-shadow:0 .05em .05em rgba(255,255,255,.5)}.flip-button:after{content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;border-radius:999vw;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,#ffffff80,#ffffff80);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #ffffff80}.flip-button:hover{transform:scale(.975);backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);box-shadow:0 .2em .4em #0000000f,0 .1em .2em #00000008,inset 0 0 0 1px #ffffff40,inset 0 .75em 1.5em #ffffff26;background:linear-gradient(-75deg,#ffffff26,#ffffff59,#ffffff26)}.flip-button:hover:after{--angle-1: -125deg}.flip-button:active{box-shadow:0 .05em .1em #00000005,inset 0 .05em .1em #00000008,inset 0 0 0 1px #fff3;transform:translateY(1px)}.flip-helper-text{font-size:.85rem;color:#666;margin:0;font-style:italic;font-family:Libre Franklin,sans-serif}.back-content{padding-top:40px}.settings-panel-container{position:relative;width:380px;max-width:100%;perspective:1000px}.settings-panel{--border-width: clamp(1px, .0625em, 4px);--blur: 8px;--angle-1: -75deg;--angle-2: -45deg;--shadow-offset: 1.25em;--white0: hsla(0, 0%, 100%, 0);--white50: hsla(0, 0%, 100%, .05);--white100: hsla(0, 0%, 100%, .1);--white200: hsla(0, 0%, 100%, .2);--white300: hsla(0, 0%, 100%, .3);--white400: hsla(0, 0%, 100%, .4);--white500: hsla(0, 0%, 100%, .5);width:100%;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));background-color:#ffffff40;background-image:linear-gradient(-75deg,#ffffff1a,#ffffff26,#ffffff0d);border-radius:20px;padding:2rem;box-shadow:0 .2em .4em #00000005,inset 0 0 0 1px #fff6;max-height:600px;overflow-y:auto;font-family:Libre Franklin,sans-serif;position:relative;color:#323232;transition:all var(--anim--hover-time) var(--anim--hover-ease);transform:translateZ(0);scrollbar-width:thin;scrollbar-color:rgba(100,100,100,.2) rgba(255,255,255,.1)}.settings-panel::-webkit-scrollbar{width:6px}.settings-panel::-webkit-scrollbar-track{background:#ffffff1a;border-radius:10px;margin:10px 0}.settings-panel::-webkit-scrollbar-thumb{background:#64646433;border-radius:10px;transition:background .3s ease}.settings-panel::-webkit-scrollbar-thumb:hover{background:#64646466}.settings-panel:before,.settings-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit}.settings-panel:before{border:var(--border-width) solid rgba(255,255,255,.7);mask-image:linear-gradient(135deg,#fff,#fff0 50%);-webkit-mask-image:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,0) 50%);z-index:0}.settings-panel:after{border:var(--border-width) solid rgba(0,0,0,.1);mask-image:linear-gradient(135deg,#fff0 50%,#fff);-webkit-mask-image:linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,1));z-index:0;background:none;box-shadow:none}.settings-tabs{display:flex;justify-content:space-between;margin-bottom:1.5rem;position:relative;z-index:1;gap:8px}.tab-button{flex:1;padding:8px 16px;background:linear-gradient(-75deg,#ffffff1a,#fff3,#ffffff1a);border:none;border-radius:12px;font-family:Libre Franklin,sans-serif;font-size:.95rem;font-weight:600;color:#505050cc;cursor:pointer;transition:all .3s ease;position:relative;box-shadow:inset 0 .06em .06em #00000008,inset 0 -.06em .06em #ffffff80,0 .1em .05em -.05em #0000000d}.tab-button:hover{background:linear-gradient(-75deg,#ffffff26,#ffffff4d,#ffffff26);color:#3c3c3cf2;transform:translateY(-1px)}.tab-button.active{background:linear-gradient(-75deg,#fff3,#fff6,#fff3);color:#323232;box-shadow:inset 0 .06em .06em #00000008,inset 0 -.06em .06em #ffffff80,0 .15em .1em -.1em #0000001a,0 0 .05em .15em inset #fff6;text-shadow:0 .03em .03em rgba(255,255,255,.5)}.tab-button:focus{outline:none;box-shadow:inset 0 .06em .06em #00000008,inset 0 -.06em .06em #ffffff80,0 0 .05em .15em inset #fff6,0 0 0 2px #ffffff80}.settings-section{margin-bottom:1.5rem;position:relative;z-index:1}.section-title{font-size:1.1rem;margin-bottom:1rem;color:#3c3c3ce6;font-weight:600;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.3);text-shadow:0 .03em .03em rgba(255,255,255,.5);position:relative}.section-title:after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:40px;background:linear-gradient(90deg,#50505099,#50505000);border-radius:3px}.settings-panel h2{position:relative;z-index:1;color:#323232;margin-bottom:1.5rem;font-weight:600;letter-spacing:.5px;text-shadow:0 .05em .05em rgba(255,255,255,.5);text-align:center}.form-group{position:relative;z-index:1;margin-bottom:1.2rem}.settings-panel label{display:block;margin-bottom:.5rem;color:#323232;font-weight:500;position:relative;z-index:1;text-shadow:0 .03em .03em rgba(255,255,255,.5);font-size:.9rem}.settings-panel input,.settings-panel select{--input-border-width: 1px;background:linear-gradient(-75deg,#ffffff26,#ffffff59,#ffffff26);border:none;border-radius:12px;padding:.8rem .9rem;width:100%;color:#323232;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:all .3s ease;box-shadow:inset 0 .06em .06em #0000000d,inset 0 -.06em .06em #ffffff80,0 .1em .05em -.05em #0000001a;position:relative;font-family:Libre Franklin,sans-serif}.settings-panel input::placeholder{color:#64646480}.settings-panel input:focus::placeholder{color:#6464644d}.settings-panel input:before,.settings-panel select:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;padding:var(--input-border-width);background:linear-gradient(180deg,#ffffffb3,#ffffff4d);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:0;pointer-events:none}.settings-panel input:focus,.settings-panel select:focus{outline:none;box-shadow:inset 0 .06em .06em #00000008,inset 0 -.06em .06em #ffffff80,0 .15em .05em -.1em #0000001a,0 0 .05em .15em inset #fff6,0 0 0 2px #ffffff80;transform:scale(1.005);background:linear-gradient(-75deg,#fff3,#fff6,#fff3)}.color-input-container{display:flex;align-items:center;gap:10px}.color-input-container input[type=color]{width:50px;height:40px;padding:2px;background:linear-gradient(-75deg,#ffffff26,#ffffff59,#ffffff26);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.color-input-container input[type=color]:hover{transform:scale(1.05);box-shadow:0 4px 12px -2px #00000026}.color-value{font-family:monospace;background:linear-gradient(-75deg,#ffffff26,#ffffff59,#ffffff26);padding:4px 8px;border-radius:8px;font-size:.9em}.logo-upload-container{background:linear-gradient(-75deg,#ffffff1a,#ffffff40,#ffffff1a);border-radius:12px;padding:1rem;box-shadow:inset 0 .06em .06em #0000000d,inset 0 -.06em .06em #ffffff80,0 .1em .05em -.05em #0000001a}.logo-upload-button-container{position:relative}.logo-upload-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.upload-label{display:inline-block;cursor:pointer;background:linear-gradient(-75deg,#ffffff1a,#ffffff4d,#ffffff1a);color:#3c3c3ce6;padding:10px 16px;border-radius:8px;font-weight:500;text-align:center;box-shadow:inset 0 .06em .06em #00000008,inset 0 -.06em .06em #ffffff80,0 .1em .05em -.05em #0000001a;transition:all .2s ease}.upload-label:hover{background:linear-gradient(-75deg,#ffffff26,#ffffff59,#ffffff26);transform:translateY(-1px);box-shadow:inset 0 .06em .06em #00000008,inset 0 -.06em .06em #ffffff80,0 .15em .1em -.1em #0000001a}.upload-label:active{transform:translateY(1px)}.logo-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:.8rem;margin-top:.8rem;border-top:1px solid rgba(255,255,255,.3)}.logo-preview img{max-width:100px;max-height:50px;border-radius:6px;box-shadow:0 2px 6px #0000001a;transition:transform .2s ease;background:#fff3;padding:6px}.logo-preview img:hover{transform:scale(1.05)}.action-buttons{position:relative;z-index:1;display:flex;justify-content:center;gap:1rem;margin-top:1.8rem}.export-button,.print-button,.remove-logo-btn{--border-width: clamp(1px, .0625em, 4px);all:unset;cursor:pointer;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);pointer-events:auto;z-index:3;background:linear-gradient(-75deg,#ffffff1a,#ffffff4d,#ffffff1a);border-radius:999vw;box-shadow:0 .15em .3em #0000000a,0 .05em .1em #00000005,inset 0 0 0 1px #fff3,inset 0 .5em 1em #ffffff1a;backdrop-filter:blur(clamp(1px,.125em,4px));-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--anim--hover-time) var(--anim--hover-ease);padding:.6rem 1.2rem;font-weight:600;font-family:Libre Franklin,sans-serif;font-size:var(--button-size);color:#323232;text-shadow:0 .05em .05em rgba(255,255,255,.5)}.export-button:after,.print-button:after,.remove-logo-btn:after{content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;border-radius:999vw;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,#ffffff80,#ffffff80);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #ffffff80}.export-button:hover,.print-button:hover,.remove-logo-btn:hover{transform:scale(.975);backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);box-shadow:0 .2em .4em #0000000f,0 .1em .2em #00000008,inset 0 0 0 1px #ffffff40,inset 0 .75em 1.5em #ffffff26;background:linear-gradient(-75deg,#ffffff26,#ffffff59,#ffffff26)}.export-button:hover:after,.print-button:hover:after,.remove-logo-btn:hover:after{--angle-1: -125deg}.export-button:active,.print-button:active,.remove-logo-btn:active{box-shadow:0 .05em .1em #00000005,inset 0 .05em .1em #00000008,inset 0 0 0 1px #fff3;transform:translateY(1px)}.remove-logo-btn{padding:.4rem .8rem;font-size:calc(var(--button-size) * .85);margin-left:.5rem}@property --angle-1{syntax: "<angle>"; inherits: false; initial-value: -75deg;}@property --angle-2{syntax: "<angle>"; inherits: false; initial-value: -45deg;}:root{--button-size: clamp(.8rem, 1vw, 1.2rem);--anim--hover-time: .4s;--anim--hover-ease: cubic-bezier(.25, 1, .5, 1)}.button-wrap{position:relative;z-index:2;border-radius:999vw;background:transparent;pointer-events:none;transition:all var(--anim--hover-time) var(--anim--hover-ease);margin:.5rem 0;display:inline-block}.button-shadow{--shadow-cuttoff-fix: .5em;position:absolute;width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);filter:blur(clamp(2px,.125em,12px));-webkit-filter:blur(clamp(2px,.125em,12px));overflow:visible;pointer-events:none}.button-shadow:after{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;border-radius:999vw;background:linear-gradient(180deg,#0000000f,#00000008);width:calc(100% - var(--shadow-cuttoff-fix) - .125em);height:calc(100% - var(--shadow-cuttoff-fix) - .125em);top:calc(var(--shadow-cuttoff-fix) - .125em);left:calc(var(--shadow-cuttoff-fix) - .125em);padding:.125em;box-sizing:border-box;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease);overflow:visible;opacity:1}.button-wrap:hover button{background:linear-gradient(-75deg,#ffffff26,#ffffff59,#ffffff26);color:#323232}@media (max-width: 1024px){.card-preview-container{width:450px}.business-card{height:270px}.settings-panel-container{width:90%;max-width:380px}.settings-panel{padding:1.5rem}}@media (max-width: 768px){.card-preview-container{width:100%;max-width:380px}.business-card{height:230px}.card-name{font-size:1.7rem}.card-title{font-size:1rem}.card-company{font-size:1.3rem}.settings-panel-container{width:100%;max-width:380px}.settings-panel{padding:1.5rem}.form-group{margin-bottom:1rem}.color-input-container{flex-wrap:wrap}.action-buttons{flex-direction:column;align-items:center;gap:.8rem}}@media (max-width: 480px){.card-preview-container{width:100%;max-width:320px}.business-card{height:200px}.card-name{font-size:1.5rem}.card-content{padding-top:60px}.settings-panel{padding:1.2rem}.settings-tabs{gap:4px}.tab-button{padding:8px 10px;font-size:.85rem}.section-title{font-size:1rem}.settings-panel label{font-size:.85rem}.settings-panel input,.settings-panel select{padding:.7rem;font-size:.9rem}.logo-upload-container{padding:.8rem}.logo-preview{flex-direction:column;align-items:flex-start}.logo-preview img{max-width:80px}.action-buttons{margin-top:1.2rem}.export-button,.print-button{padding:.5rem 1rem;font-size:.9rem}}@media (max-width: 360px){.settings-panel{padding:1rem}.settings-tabs{flex-direction:column;gap:6px}.tab-button{width:100%}.color-input-container{flex-direction:column;align-items:flex-start}.color-input-container input[type=color]{width:100%}}