.button{white-space:nowrap;cursor:pointer;border:none;border-radius:40px;outline:none;flex-shrink:0;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:600;transition:all .15s;display:inline-flex}.button:disabled{pointer-events:none;opacity:.5}.button:focus-visible{outline-offset:2px;border-color:#a3a3a3;outline:3px solid #a3a3a380}.dark .button:focus-visible{outline-offset:2px;border-color:#525252;outline:3px solid #52525280}.button svg{pointer-events:none;flex-shrink:0;width:16px;height:16px}.button-default{color:#fafafa;background:linear-gradient(#333,#111);border:2px solid #0a0a0a}.button-default:hover{background-color:#171717e6}.dark .button-default{color:#111;background:linear-gradient(#fff,#aaa)}.dark .button-default:hover{background:linear-gradient(#fff,#fafafa)}.button-destructive{color:#fff;background-color:#ef4444}.button-destructive:hover{background-color:#ef4444e6}.dark .button-destructive{background-color:#ef444499}.dark .button-destructive:hover{background-color:#ef4444b3}.button-outline{background-color:#fff;border:1px solid #e5e5e5;box-shadow:0 1px 2px #0000000d}.button-outline:hover{color:#171717;background-color:#f5f5f5}.dark .button-outline{color:#fafafa;background-color:#2626264d;border-color:#262626}.dark .button-outline:hover{color:#fff;background-color:#333}.button-secondary{color:#171717;background-color:#f5f5f5}.button-secondary:hover{background-color:#f5f5f5cc}.dark .button-secondary{color:#fafafa;background-color:#262626}.dark .button-secondary:hover{background-color:#262626cc}.button-ghost{background-color:#0000}.button-ghost:hover{color:#171717;background-color:#f5f5f5}.dark .button-ghost:hover{background-color:#26262680}.button-link{color:#171717;text-underline-offset:4px;background-color:#0000;text-decoration:underline}.button-link:hover{text-decoration:underline}.dark .button-link{color:#fafafa}.button-size-xs{gap:6px;padding:6px 12px;font-size:12px}.button-size-xs svg{width:12px;height:12px}.button-size-sm{gap:6px;padding:8px 16px;font-size:14px}.button-size-sm svg{width:14px;height:14px}.button-size-default{padding:12px 24px;font-size:16px}.button-size-l{gap:10px;padding:14px 28px;font-size:18px}.button-size-l svg{width:18px;height:18px}.button-size-xl{gap:12px;padding:16px 32px;font-size:20px}.button-size-xl svg{width:20px;height:20px}.button-size-xxl{gap:14px;padding:20px 40px;font-size:24px}.button-size-xxl svg{width:24px;height:24px}.button-size-icon{width:42px;height:42px;padding:0}.button-size-icon-sm{width:32px;height:32px;padding:0}.button-size-icon-lg{width:40px;height:40px;padding:0}
.animated-logo{border:2.5px solid #aaa;border-radius:6px;width:24px;height:24px;position:relative}.animated-logo-squircle{background-color:#000;border-radius:2px;width:8px;height:8px;transition:all .2s ease-out;position:absolute}.dark .animated-logo-squircle{background-color:#fff}
.carousel-rows{flex-direction:column;gap:32px;width:100%;padding-top:60px;display:flex}.carousel-container{width:100%;position:relative;overflow:hidden}.carousel-track{will-change:transform;gap:32px;display:flex}.carousel-item-wrapper{flex-direction:column;flex-shrink:0;align-items:center;gap:12px;display:flex}.carousel-item{background-color:#fff;border:1px solid #ddd;border-radius:20px;align-items:center;height:400px;display:flex;overflow:hidden}.dark .carousel-item{background-color:#171717;box-shadow:0 4px 20px #0000004d}.carousel-author{color:#737373;align-items:center;gap:8px;padding-bottom:4px;font-size:14px;text-decoration:none;transition:color .15s;display:flex}.carousel-author:hover{color:#0a0a0a}.carousel-author:hover .carousel-author-avatar{transform:scale(1.1)}.dark .carousel-author{color:#a3a3a3}.dark .carousel-author:hover{color:#fafafa}.carousel-author-avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:24px;height:24px;transition:transform .15s}.carousel-author-avatar-placeholder{color:#fff;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:flex}.carousel-author-prefix{color:#a3a3a3;font-weight:400}.carousel-author-name{font-weight:500}@media (max-width:768px){.carousel-item{height:300px}.carousel-rows{gap:24px}.carousel-author{font-size:12px}}
.modal-overlay{z-index:9999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#00000080;justify-content:center;align-items:baseline;padding:16px;display:flex;position:fixed;inset:0}.modal-content{background-color:#fff;border-radius:32px;width:100%;max-width:440px;margin-top:200px;padding:48px 32px 32px;position:relative;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.dark .modal-content{background-color:#0a0a0a;border:1px solid #262626}.modal-close{cursor:pointer;color:#737373;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex;position:absolute;top:16px;right:16px}.modal-close:hover{color:#0a0a0a}.dark .modal-close:hover{color:#fafafa}.modal-body{text-align:center;flex-direction:column;align-items:center;gap:0;display:flex}.modal-logo{width:32px;height:32px}.modal-logo .animated-logo{border:3px solid #aaa;border-radius:6px;width:32px;height:32px;position:relative}.modal-logo .animated-logo-squircle{background-color:#000;border-radius:3px;width:10px;height:10px;position:absolute}.dark .modal-logo .animated-logo-squircle{background-color:#fff}.modal-title{color:#0a0a0a;margin:28px 0 0;padding-bottom:4px;font-size:24px;font-weight:600}.dark .modal-title{color:#fafafa}.modal-description{color:#737373;margin-bottom:36px;font-size:14px}.google-button-wrapper{width:100%}.google-icon{width:20px;height:20px}.modal-helper-text{color:#999;margin-top:12px;margin-bottom:0;font-size:12px}.modal-content-upgrade{max-height:80vh;margin-top:60px;overflow:hidden scroll}
.container{background-color:#fff;max-width:none;min-height:100vh}.dark .container{background-color:#0a0a0a}.file-input{display:none}.main-content{margin-left:auto;margin-right:auto;padding-top:40px;padding-bottom:40px}.content-wrapper{max-width:1280px;margin-left:auto;margin-right:auto}.hero-section{text-align:center;padding-bottom:68px;position:relative}.hero-title{color:#0a0a0a;letter-spacing:-2px;max-width:900px;margin:auto;padding-top:32px;padding-bottom:24px;font-size:72px;font-weight:900;line-height:1}.hero-section .hero-title{opacity:0;animation:.4s ease-out .1s forwards landingFadeIn}.dark .hero-title{color:#fafafa}.hero-description{color:#888;letter-spacing:-.2px;max-width:600px;margin:0 auto;font-size:20px;line-height:1.6}.hero-section .hero-description{opacity:0;animation:.4s ease-out .2s forwards landingFadeIn}.dark .hero-description{color:#a3a3a3}@media (max-width:768px){.hero-title{font-size:36px}.hero-description{font-size:16px}}.grid-layout{justify-items:center;gap:40px;display:grid}.grid-layout.has-image,.grid-layout.user-logged-in{justify-items:stretch}@media (min-width:1024px){.grid-layout.has-image,.grid-layout.user-logged-in{grid-template-columns:1fr 400px}}.preview-section{flex-direction:column;gap:0;width:100%;max-width:100%;display:flex}.grid-layout.has-image .preview-section,.grid-layout.user-logged-in .preview-section{max-width:none}.section-header-with-actions{opacity:0;justify-content:space-between;align-items:end;padding-bottom:12px;animation:.4s ease-out forwards landingFadeIn;display:flex}.section-header{color:#0a0a0a;align-items:center;font-size:18px;font-weight:600;display:flex}.dark .section-header{color:#fafafa}.section-icon{margin-top:0;margin-right:8px;display:inline-block}.upload-card{cursor:pointer;opacity:0;background-color:#f5f5f5;border:1px solid #ddd;border-radius:20px;transition:all .15s;animation:.4s ease-out .3s forwards landingFadeIn;position:relative;overflow:hidden}.upload-card:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(90deg,#0000,#0000000d,#0000);width:100%;height:100%;animation:4s ease-in-out infinite uploadShimmer;position:absolute;top:0;left:-100%}@keyframes uploadShimmer{0%{left:-100%}50%{left:100%}to{left:100%}}.dark .upload-card{background-color:#171717;border-color:#262626}.dark .upload-card:before{background:linear-gradient(90deg,#0000,#ffffff0d,#0000)}.upload-card.dragging{background-color:#e5e5e5;border-color:#171717}.dark .upload-card.dragging{background-color:#262626;border-color:#fafafa}.upload-content{flex-direction:column;justify-content:center;align-items:center;min-height:500px;padding:48px;display:flex}.upload-icon-wrapper{background-color:#e5e5e5;border-radius:9999px;margin-bottom:16px;padding:24px}.dark .upload-icon-wrapper{background-color:#262626}.upload-title{color:#0a0a0a;margin-bottom:8px;font-size:20px;font-weight:600}.dark .upload-title{color:#fafafa}.upload-description{color:#737373;text-align:center;margin-bottom:24px}.preview-container{cursor:pointer;background-color:#f5f5f5;border:1px solid #e5e5e5;border-radius:20px;width:fit-content;display:inline-flex;position:relative;overflow:hidden}.dark .preview-container{background-color:#171717;border-color:#262626}.drag-overlay{z-index:10;pointer-events:none;background-color:#1717171a;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.dark .drag-overlay{background-color:#fafafa1a}.drag-message{background-color:#ffffffe6;border-radius:8px;padding:8px 16px;box-shadow:0 4px 12px #00000026}.dark .drag-message{background-color:#0a0a0ae6}.drag-message-text{color:#0a0a0a;font-size:14px;font-weight:500}.dark .drag-message-text{color:#fafafa}.export-wrapper{box-shadow:none;border:none;border-radius:0;display:inline-block}.image-wrapper{display:inline-block;overflow:hidden}.frame-image{max-width:100%;height:auto;max-height:70vh;display:block}.action-grid{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px;padding:0 4px;display:grid}.action-grid .button-outline{border-color:#ddd}.dark .action-grid .button-outline{border-color:#404040}@media (min-width:1024px){.action-grid{align-items:flex-start;display:flex}}.action-button-wrapper{flex-direction:column;flex:1;display:flex}.action-button-wrapper .action-button{width:100%}.action-button{flex:1}.action-helper-text{color:#aaa;text-align:center;margin-top:12px;margin-bottom:0;font-size:12px}.controls-header{opacity:0;animation:.4s ease-out forwards landingFadeIn}.mobile-controls{margin-top:32px;display:none}@media (max-width:1023px){.grid-layout.has-image .mobile-controls,.grid-layout.user-logged-in .mobile-controls{display:block}}.mobile-controls-grid{grid-template-columns:1fr;gap:16px;display:grid}@media (min-width:768px){.mobile-controls-grid{grid-template-columns:repeat(2,1fr)}}.desktop-controls{display:none}@media (min-width:1024px){.grid-layout.has-image .desktop-controls,.grid-layout.user-logged-in .desktop-controls{display:block}.desktop-controls .control-group-header,.desktop-controls .control-row,.desktop-controls .slider-row{opacity:0;animation:.3s ease-out forwards slideInControls}.desktop-controls .control-group:first-child .control-group-header{animation-delay:0s}.desktop-controls .control-group:first-child .control-row:first-child,.desktop-controls .control-group:first-child .slider-row:first-child{animation-delay:80ms}.desktop-controls .control-group:first-child .control-row:nth-child(2),.desktop-controls .control-group:first-child .slider-row:nth-child(2){animation-delay:.16s}.desktop-controls .control-group:first-child .control-row:nth-child(3),.desktop-controls .control-group:first-child .slider-row:nth-child(3){animation-delay:.24s}.desktop-controls .control-divider:nth-child(2) .control-group-header{animation-delay:.32s}.desktop-controls .control-divider:nth-child(2) .control-row:first-child,.desktop-controls .control-divider:nth-child(2) .slider-row:first-child{animation-delay:.4s}.desktop-controls .control-divider:nth-child(2) .control-row:nth-child(2),.desktop-controls .control-divider:nth-child(2) .slider-row:nth-child(2){animation-delay:.48s}.desktop-controls .control-divider:nth-child(3) .control-group-header{animation-delay:.56s}.desktop-controls .control-divider:nth-child(3) .control-row:first-child,.desktop-controls .control-divider:nth-child(3) .slider-row:first-child{animation-delay:.64s}.desktop-controls .control-divider:nth-child(3) .control-row:nth-child(2),.desktop-controls .control-divider:nth-child(3) .slider-row:nth-child(2){animation-delay:.72s}.desktop-controls .control-divider:nth-child(4) .control-group-header{animation-delay:.8s}.desktop-controls .control-divider:nth-child(4) .control-row:first-child,.desktop-controls .control-divider:nth-child(4) .slider-row:first-child{animation-delay:.88s}.desktop-controls .control-divider:nth-child(4) .control-row:nth-child(2),.desktop-controls .control-divider:nth-child(4) .slider-row:nth-child(2){animation-delay:.96s}.desktop-controls .alignment-card .alignment-header{opacity:0;animation:.3s ease-out 1.04s forwards slideInControls}.desktop-controls .alignment-cell{opacity:0;animation:.3s ease-out forwards slideInControls}.desktop-controls .alignment-cell:first-child{animation-delay:1.12s}.desktop-controls .alignment-cell:nth-child(2){animation-delay:1.2s}.desktop-controls .alignment-cell:nth-child(3){animation-delay:1.28s}.desktop-controls .alignment-cell:nth-child(4){animation-delay:1.36s}.desktop-controls .alignment-cell:nth-child(5){animation-delay:1.44s}.desktop-controls .alignment-cell:nth-child(6){animation-delay:1.52s}.desktop-controls .alignment-cell:nth-child(7){animation-delay:1.6s}.desktop-controls .alignment-cell:nth-child(8){animation-delay:1.68s}.desktop-controls .alignment-cell:nth-child(9){animation-delay:1.76s}@keyframes slideInControls{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}}@keyframes landingFadeIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.color-picker{cursor:pointer;border:3px solid #ddd;border-radius:8px;flex-shrink:0;width:32px;min-width:32px;height:32px;position:relative;overflow:hidden}.dark .color-picker{border-color:#404040}.color-picker-input{cursor:pointer;border:none;width:150%;height:150%;padding:0;position:absolute;top:-25%;left:-25%}.spinner{border:2px solid #0000001a;border-top-color:currentColor;border-radius:50%;animation:.6s linear infinite spin;display:inline-block}.dark .spinner{border-color:currentColor #ffffff1a #ffffff1a}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width:768px) and (max-width:1023px){.alignment-card{margin-top:0}}
.nav{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;background-color:#fffffff2;border-bottom:1px solid #e5e5e5;animation:.4s ease-out forwards landingFadeIn;position:sticky;top:0}.dark .nav{background-color:#0a0a0af2;border-bottom-color:#262626}.nav-container{max-width:1280px;margin-left:auto;margin-right:auto}@media (max-width:1279px){.nav-container{padding-left:24px;padding-right:24px}}.nav-inner{justify-content:space-between;align-items:center;height:64px;display:flex}.nav-left{align-items:center;gap:24px;display:flex}.logo{letter-spacing:-.025em;color:#0a0a0a;align-items:center;gap:8px;font-size:20px;font-weight:700;display:flex}.dark .logo{color:#fafafa}.nav-actions{align-items:center;gap:12px;display:flex}.nav-link{color:#0a0a0a;background-color:#f7f7f7;border-radius:40px;padding:8px 16px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s}.nav-link:hover{background-color:#f5f5f5}.dark .nav-link{color:#fafafa;background-color:#222}.dark .nav-link:hover{background-color:#404040}.usage-counter{color:#333;margin-right:12px;font-size:14px;font-weight:600}.dark .usage-counter{color:#fafafa}.user-menu-wrapper{position:relative}.user-menu-trigger{cursor:pointer;background-color:#fff;border:1px solid #ddd;border-radius:40px;align-items:center;gap:8px;padding:4px 12px 4px 4px;transition:background-color .15s;display:flex;position:relative}.user-lifetime-badge{color:#fff;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;background:#000;border:1px solid #000;border-radius:16px;flex-shrink:0;padding:0 5px;font-family:inherit;font-size:8px;font-weight:600;display:block;position:absolute;top:26px;left:20px;transform:translate(-50%)}.dark .user-lifetime-badge{color:#000;background:#fff;border-color:#fff}.user-menu-trigger:hover{background-color:#f5f5f5}.dark .user-menu-trigger{background-color:#0a0a0a;border-color:#262626}.dark .user-menu-trigger:hover{background-color:#171717}.user-avatar{object-fit:cover;border-radius:50%;width:32px;height:32px}.user-name{color:#0a0a0a;text-overflow:ellipsis;white-space:nowrap;max-width:150px;font-size:14px;font-weight:600;overflow:hidden}.dark .user-name{color:#fafafa}.user-dropdown{z-index:100;transform-origin:100% 0;background-color:#fff;border:1px solid #e5e5e5;border-radius:12px;min-width:200px;padding:8px;font-weight:600;animation:.2s ease-out dropdownSlideIn;position:absolute;top:48px;right:0;overflow:hidden;box-shadow:0 4px 6px #0000001a}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.dark .user-dropdown{background-color:#171717;border-color:#262626}.user-dropdown-item{text-align:left;color:#0a0a0a;cursor:pointer;background-color:#0000;border:none;border-radius:8px;align-items:center;gap:8px;width:100%;padding:10px 12px;font-size:14px;transition:background-color .15s;display:flex}.user-dropdown-item:hover{background-color:#f5f5f5}.dark .user-dropdown-item{color:#fafafa}.dark .user-dropdown-item:hover{background-color:#262626}.user-email-item{cursor:default;color:#737373;text-overflow:ellipsis;white-space:nowrap;border-bottom:none;margin-bottom:4px;font-size:13px;overflow:hidden}.user-email-item:hover{background-color:#0000}.dark .user-email-item{color:#a3a3a3}.dark .user-email-item:hover{background-color:#0000}.logout-item{color:#ef4444}.logout-item:hover{background-color:#fef2f2}.dark .logout-item{color:#f87171}.dark .logout-item:hover{background-color:#450a0a}.dark-mode-button{cursor:pointer;background-color:#0000;flex-shrink:0}@keyframes landingFadeIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}