@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=League+Spartan:wght@100..900&display=swap";:root{--bg: #fbfbfd;--surface: #ffffff;--surface-muted: #f7f8fa;--border: #eaecef;--border-strong: #d0d5dd;--text: #0f172a;--text-sub: #64748b;--text-mute: #94a3b8;--accent: #0d529c;--accent-hover: #0a4380;--accent-soft: #eaf2fb;--danger: #ef4444;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);--shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);--shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);--ring: 0 0 0 3px rgba(13, 82, 156, .12);font-family:Inter,League Spartan,system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%}.app-container{max-width:1180px;margin:0 auto;padding:3rem 2rem;display:grid;grid-template-columns:400px 1fr;grid-template-areas:"logo  desc" "bubble prev" "form   prev";gap:2rem 3.5rem;align-items:start}.logo-section{grid-area:logo}.form-section{grid-area:form;display:flex;flex-direction:column;gap:1.25rem}.preview-section{grid-area:prev;display:flex;flex-direction:column;gap:1.25rem;align-items:center}.panel-logo{max-width:220px;height:auto;display:block}.header-description{grid-area:desc;max-width:600px}.header-description h2{font-family:League Spartan,sans-serif;font-size:1.75rem;font-weight:700;letter-spacing:-.02em;color:var(--text);margin-bottom:.5rem;line-height:1.15}.header-description p{font-size:.95rem;color:var(--text-sub);line-height:1.6}.config-card{grid-area:bubble;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:1.5rem}.config-title{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);display:flex;align-items:center;gap:.5rem}.config-title i{color:var(--accent);font-size:.9rem}.config-grid,.config-col{display:flex;flex-direction:column;gap:1.25rem}.config-group{display:flex;flex-direction:column;gap:.45rem}.config-label{font-size:.78rem;font-weight:600;color:var(--text-sub);display:flex;align-items:center;gap:.4rem;letter-spacing:.01em}.config-label i{color:var(--text-mute);font-size:.85rem}.config-input{width:100%;padding:.7rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);font-family:inherit;font-size:.95rem;font-weight:500;color:var(--text);transition:border-color .15s,box-shadow .15s;outline:none}.config-input::placeholder{color:var(--text-mute);font-weight:400}.config-input:hover{border-color:var(--border-strong)}.config-input:focus{border-color:var(--accent);box-shadow:var(--ring)}.bubble-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;padding:.7rem 2.5rem .7rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--border);background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.75' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;font-family:inherit;font-size:.95rem;font-weight:500;color:var(--text);cursor:pointer;outline:none;transition:border-color .15s,box-shadow .15s}.bubble-select:hover{border-color:var(--border-strong)}.bubble-select:focus{border-color:var(--accent);box-shadow:var(--ring)}.dropzone{border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 1.5rem;text-align:center;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s,box-shadow .15s;display:flex;flex-direction:column;align-items:center;gap:.5rem}.dropzone:hover{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--shadow-xs)}.dropzone.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--ring)}.dropzone p{font-size:.9rem;color:var(--text-sub);line-height:1.5}.dropzone .highlight{color:var(--accent);font-weight:600}.drop-icon-fa{font-size:1.5rem;color:var(--accent);background:var(--accent-soft);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.format-tabs{display:flex;gap:.35rem;width:100%;max-width:600px;padding:.35rem;background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius)}.format-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.55rem .5rem;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;color:var(--text-sub);transition:background .15s,color .15s}.format-tab:hover{color:var(--text);background:#00000008}.format-tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)}.format-tab-label{font-size:.82rem;font-weight:600;letter-spacing:-.005em}.format-tab-dim{font-size:.7rem;color:var(--text-mute);font-variant-numeric:tabular-nums}.preview-container{width:100%;max-width:600px;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface-muted);border:1px solid var(--border);box-shadow:var(--shadow-md)}.capture-area{position:absolute;top:0;left:0;transform-origin:top left}.cloud-bubble-wrapper{position:absolute;z-index:20;pointer-events:none;overflow:hidden;container-type:inline-size}.cloud-bubble-main{display:block;height:auto}.cloud-bubble-text{position:absolute;top:15%;left:8%;right:25%;bottom:35%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:2.8rem;font-weight:700;color:#1a1a2e;line-height:1.2;text-transform:uppercase;font-family:League Spartan,sans-serif;white-space:normal;overflow-wrap:break-word;word-break:break-word;overflow:hidden;pointer-events:none}.user-info-overlay{position:absolute;z-index:30;display:flex;flex-direction:column;gap:4px;pointer-events:none}.user-info-name{font-size:2.2rem;font-weight:700;color:#fff;text-transform:uppercase;line-height:1.1;overflow-wrap:break-word;font-family:League Spartan,sans-serif}.user-info-company{font-size:1.4rem;font-weight:400;color:#ffffffe6;line-height:1.1;font-family:League Spartan,sans-serif}.bg-full{display:block}.photo-circle-container{position:absolute;border-radius:50%;overflow:hidden;z-index:5}.photo-circle-placeholder{width:100%;height:100%;background:transparent}.image-preview-zone{display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xs)}.thumbnail-wrapper{width:96px;height:96px;border-radius:50%;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--surface-muted)}.user-thumbnail{width:100%;height:100%;object-fit:cover}.controls-group{width:100%;display:flex;flex-direction:column;gap:1rem}.slider-control{display:flex;flex-direction:column;gap:.4rem}.slider-control label{font-size:.78rem;font-weight:500;color:var(--text-sub);display:flex;justify-content:space-between}.slider-control input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer}.slider-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--surface);border:1.5px solid var(--accent);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .1s}.slider-control input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--surface);border:1.5px solid var(--accent);box-shadow:var(--shadow-sm);cursor:pointer}.slider-control input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}.slider-control input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}.button-group-preview{display:flex;gap:.6rem;width:100%}.btn-secondary,.btn-delete{flex:1;padding:.6rem 1rem;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;font-weight:500;font-size:.88rem;transition:all .15s;border:1px solid var(--border);background:var(--surface);color:var(--text)}.btn-secondary:hover{border-color:var(--border-strong);background:var(--surface-muted)}.btn-delete{color:var(--danger)}.btn-delete:hover{background:#fef2f2;border-color:#fecaca}.btn-primary{background:var(--accent);color:#fff;border:1px solid var(--accent);padding:.95rem 1.8rem;font-family:inherit;font-size:.98rem;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;width:100%;max-width:600px;display:flex;align-items:center;justify-content:center;gap:.6rem;box-shadow:var(--shadow-sm);letter-spacing:-.005em}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--shadow-md)}.btn-primary:active:not(:disabled){transform:translateY(1px);box-shadow:var(--shadow-xs)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.landing{max-width:960px;margin:0 auto;padding:5rem 2rem 3rem}.landing-hero{text-align:center;margin-bottom:5rem}.landing-eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:.4rem .9rem;border-radius:999px;margin-bottom:1.75rem}.landing-headline{font-family:League Spartan,sans-serif;font-size:clamp(2.25rem,5vw,3.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--text);margin-bottom:1.5rem}.landing-sub{max-width:580px;margin:0 auto 2.5rem;font-size:1.05rem;color:var(--text-sub);line-height:1.6}.landing-cta{display:flex;justify-content:center}.landing-primary{width:auto;max-width:none;padding:.85rem 1.75rem;font-size:.95rem}.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:4rem}.landing-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem 1.5rem;box-shadow:var(--shadow-xs);transition:box-shadow .2s,transform .2s}.landing-step:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.landing-step-icon{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1.1rem}.landing-step h3{font-family:League Spartan,sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:.45rem}.landing-step p{font-size:.9rem;color:var(--text-sub);line-height:1.55}.landing-step code{font-family:SF Mono,Menlo,Consolas,monospace;font-size:.82em;background:var(--surface-muted);padding:.1em .35em;border-radius:4px;color:var(--text);border:1px solid var(--border)}.landing-footer{text-align:center;font-size:.8rem;color:var(--text-mute);padding-top:2rem;border-top:1px solid var(--border)}.not-found{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}.not-found-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:3rem 2.5rem;max-width:440px;text-align:center;box-shadow:var(--shadow-sm)}.not-found-icon{font-size:2.25rem;color:var(--text-mute);margin-bottom:1.25rem;display:block}.not-found-card h2{font-family:League Spartan,sans-serif;font-size:1.3rem;font-weight:600;margin-bottom:.6rem;color:var(--text)}.not-found-card p{font-size:.92rem;color:var(--text-sub);line-height:1.55;margin-bottom:1.75rem}.not-found-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);text-decoration:none;font-size:.88rem;font-weight:500;transition:color .15s}.not-found-link:hover{color:var(--accent-hover)}@media (max-width: 900px){.landing{padding:3rem 1.25rem 2rem}.landing-hero{margin-bottom:3rem}.landing-steps{grid-template-columns:1fr;gap:1rem}.app-container{grid-template-columns:1fr;grid-template-areas:"logo" "desc" "bubble" "form" "prev";gap:1.5rem;padding:2rem 1rem}.panel-logo{max-width:160px}.header-description h2{font-size:1.5rem}}