@font-face{font-family:Poppins;src:url('assets/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{--paper:#FFFFFF;--ink:#0F0DB8;--text:#3C3B5C;--muted:#77758f;--accent:#F5F3FE;--line:#e5dff8;--blue:#0000FE;--violet:#644BDD;--pink:#FB36A2;--brand-gradient:linear-gradient(90deg,#0000FE,#644BDD,#FB36A2)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--text);font-family:Poppins,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{opacity:.35;cursor:default}button,a,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--violet);outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button.primary,button.secondary{display:inline-flex;align-items:center;justify-content:center;gap:22px;border:1px solid var(--line);border-radius:12px;padding:14px 22px;font-size:14px;font-weight:600}.primary{background:var(--blue);color:white;border-color:var(--blue)!important}.primary:hover{background:#0F0DB8}.primary span{font-size:22px;font-weight:400}.secondary{background:transparent;color:var(--ink)}.secondary:hover{background:var(--accent)}.text-button{border:0;background:none;color:var(--ink);padding:10px 0;font-size:12px}.text-button:hover{text-decoration:underline}.icon-button{background:transparent;border:1px solid var(--line);border-radius:6px;width:40px;min-height:40px;font-size:23px;color:var(--ink)}
.site-header{height:84px;display:flex;align-items:center;max-width:1440px;margin:auto;padding:0 6%;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;line-height:1;text-decoration:none}.brand img{display:block;width:200px;height:auto}.campaign-name{margin-left:auto;color:var(--violet);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--line);border-radius:20px;padding:8px 13px}main{max-width:1440px;margin:auto}.welcome{min-height:calc(100svh - 155px);padding:60px 24px 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center}.welcome h1{color:var(--ink);font-size:54px;font-weight:700;letter-spacing:-2px;line-height:1.1;margin:0 0 8px}.welcome h1 em{font-family:inherit;font-weight:inherit;font-style:normal}.hero-actions{display:flex;gap:12px}.hero-actions button{min-width:180px;min-height:58px}.welcome .text-button{color:var(--muted);padding:0;min-height:32px}footer{max-width:1440px;margin:auto;min-height:71px;display:flex;justify-content:center;align-items:center;padding:18px 6%;border-top:1px solid var(--line)}footer p{margin:0;font-size:11px;color:var(--muted)}
.editor{padding:25px 6% 35px}.editor-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.editor-top h1{color:var(--ink);font-size:25px;font-weight:600;letter-spacing:-.7px;margin:0}.editor-header-actions{display:flex;gap:8px}.compact{padding:10px 15px!important}.editor-header-actions #quick-download{display:none}.studio{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:35px;align-items:start}.workspace{min-width:0}.canvas-toolbar{display:flex;justify-content:flex-end;align-items:center;padding-bottom:10px}.canvas-toolbar>div{display:flex;gap:6px}.canvas-wrap{height:560px;background:var(--accent);border-radius:10px;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;touch-action:none}canvas{display:block;max-width:100%;max-height:100%;touch-action:none;outline-offset:-4px!important}.loading{position:absolute;background:#fffffff5;padding:16px 22px;border-radius:8px;font-size:13px}.canvas-bottom{padding:12px 0;font-size:11px;color:var(--muted);min-height:37px}.tools{padding-top:5px}.tools-heading{margin-bottom:14px}h2,h3{color:var(--ink);margin:0;font-size:14px;font-weight:600}.catalog{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.style-button{min-width:0;aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:transparent;padding:7px;position:relative}.style-button:hover{background:var(--accent)}.style-button[aria-pressed=true]{background:var(--accent);border-color:var(--violet)}.style-button svg{display:block;width:100%;height:100%}.tool-section{border-top:1px solid var(--line);padding-top:17px;margin-top:18px}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-label h3{font-size:12px}.colors{display:flex;flex-wrap:wrap;gap:10px}.color-button{width:27px;height:27px;min-height:27px;border:1px solid #0002;border-radius:50%;padding:0;position:relative}.color-button[aria-pressed=true]:after{content:'';position:absolute;inset:-4px;border:1px solid var(--ink);border-radius:50%}.adjustments .section-label{justify-content:flex-end;margin-bottom:0}.danger{color:#b91b79;font-size:11px;min-height:32px;padding:0}.adjustments label{font-size:11px;display:flex;justify-content:space-between;margin:9px 0 4px}input[type=range]{width:100%;accent-color:var(--blue);height:28px;margin:0;cursor:pointer}.extra-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}.extra-actions .secondary{padding:10px 8px;font-size:11px;gap:0}.detect{width:100%;font-size:11px;margin:4px 0}.download-area{border-top:1px solid var(--line);padding-top:16px;margin-top:8px}.format-label{font-size:11px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}select{border:1px solid var(--line);padding:8px;border-radius:5px;background:transparent;color:var(--ink);font-size:11px;min-height:36px}.download-area .primary{width:100%;justify-content:space-between}.download-area>.text-button{width:100%}.status{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 20px;background:var(--ink);color:white;box-shadow:0 4px 25px #0002;border-radius:8px;font-size:13px;max-width:calc(100% - 30px);width:max-content;z-index:20;line-height:1.5}
dialog{border:1px solid var(--line);border-radius:12px;padding:26px;width:min(430px,calc(100% - 24px));background:var(--paper);color:var(--ink)}dialog::backdrop{background:#14123980}dialog h2{font-size:18px}dialog p{line-height:1.6;font-size:13px}dialog form>div{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}#camera-dialog{width:min(640px,calc(100% - 24px))}.camera-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}#camera-video{display:block;width:100%;max-height:55svh;object-fit:contain;background:#141239;border-radius:8px}#camera-status{font-size:12px;color:var(--muted)}#camera-status:empty{display:none}#take-shot{width:100%;margin-top:16px}#camera-upload{width:100%}
@media(max-width:1000px){.studio{grid-template-columns:minmax(0,1fr) 290px;gap:22px}.canvas-wrap{height:480px}.catalog{gap:5px}.style-button{padding:5px}}
@media(max-width:700px){html{scroll-padding-top:80px}.site-header{height:70px}.brand img{width:158px}.campaign-name{font-size:9px;padding:7px 10px;letter-spacing:1px}.welcome{min-height:calc(100svh - 135px);padding:42px 24px 60px;gap:24px}.welcome h1{font-size:clamp(30px,8.4vw,40px);letter-spacing:-1.3px;margin-bottom:3px}.hero-actions{width:min(100%,330px);flex-direction:column;gap:12px}.hero-actions button{width:100%;justify-content:space-between;padding:16px 21px;font-size:15px}.welcome .text-button{font-size:11px}footer{min-height:65px}footer p{font-size:10px}.editor{padding:14px 5% 20px}.editor-top{position:sticky;top:0;background:var(--paper);z-index:5;padding:10px 0;margin-top:-10px;margin-bottom:12px}.editor-top h1{font-size:23px}.editor-header-actions #new-photo{padding:9px 12px!important;font-size:11px!important}.editor-header-actions #quick-download{display:inline-flex;min-width:44px;min-height:44px;padding:8px;border-radius:8px;font-size:22px}.studio{grid-template-columns:1fr;gap:10px}.canvas-wrap{height:min(55svh,480px);min-height:220px}.canvas-toolbar{padding-bottom:8px}.canvas-toolbar .icon-button{width:44px;min-height:44px}.canvas-bottom{padding:10px 0;font-size:10px;min-height:32px}.tools{padding:15px 0 0;border-top:1px solid var(--line)}.catalog{grid-template-columns:repeat(6,1fr);gap:8px}.style-button{max-height:58px;aspect-ratio:1.3;padding:7px}.tool-section{padding-top:15px;margin-top:17px}.colors{gap:17px;padding:5px}.color-button:before{content:'';position:absolute;inset:-9px}.extra-actions .secondary{font-size:12px}.download-area{padding-bottom:env(safe-area-inset-bottom,0px)}.download-area .primary{min-height:54px}.status{bottom:calc(15px + env(safe-area-inset-bottom,0px));font-size:12px}.adjustments input{height:32px}.adjustments label{font-size:12px}.danger{min-height:44px}.format-label select{min-height:44px}}

.sample-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(100%,440px);margin-top:4px}
.sample-card{position:relative;display:block;min-width:0;min-height:44px;padding:0;overflow:hidden;aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:var(--accent)}
.sample-card img{display:block;width:100%;height:100%;object-fit:cover}
.sample-card>span{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fffffff0;color:var(--ink);font-size:15px;line-height:1}
.sample-card:hover{border-color:var(--ink)}.sample-card[aria-busy=true]{opacity:.6}
@media(max-width:700px){.welcome{gap:24px;padding-top:32px;padding-bottom:40px}.sample-gallery{width:min(100%,330px);gap:9px;margin-top:4px}.sample-card{border-radius:9px}.sample-card>span{right:4px;bottom:4px;width:18px;height:18px;font-size:13px}}

body{position:relative;min-height:100svh}body:before,body:after{content:"";position:absolute;left:0;right:0;height:4px;background:var(--brand-gradient);z-index:30;pointer-events:none}body:before{top:0}body:after{bottom:0}.site-header{height:94px}.welcome{min-height:calc(100svh - 165px)}.hero-actions .secondary{border-color:var(--violet)}@media(max-width:700px){.site-header{height:80px}.welcome{min-height:calc(100svh - 145px)}}

.campaign-heading{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:600px}
.welcome .campaign-heading h1{font-size:clamp(64px,7vw,88px);line-height:1.05;font-weight:700;letter-spacing:-3px;margin:0;color:var(--ink)}
.campaign-heading p{margin:0;font-size:15px;line-height:1.6;color:var(--text);max-width:420px}
.welcome{gap:30px;padding-top:36px;padding-bottom:44px}
.sample-gallery{width:min(100%,660px);gap:14px;margin-top:0}
.sample-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:700px){.welcome{gap:23px;padding:26px 24px 32px;justify-content:center}.welcome .campaign-heading h1{font-size:clamp(43px,12vw,58px);letter-spacing:-2px}.campaign-heading{gap:8px}.campaign-heading p{font-size:12px;max-width:270px}.sample-gallery{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,300px);gap:10px}.sample-card{border-radius:12px}.sample-card>span{width:22px;height:22px;right:7px;bottom:7px;font-size:15px}}

.status.download-success{top:calc(20px + env(safe-area-inset-top,0px));bottom:auto;background:var(--ink);border:2px solid var(--violet);padding:20px 24px;font-size:15px;font-weight:600;box-shadow:0 8px 36px #14123940;text-align:center;max-width:calc(100% - 32px);animation:download-notice .2s ease-out}@keyframes download-notice{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.status.download-success{animation:none}}

/* Campaign messages surround the photo experience without adding sections. */
.welcome{position:relative;isolation:isolate;overflow:hidden}.welcome>.campaign-heading,.welcome>.hero-actions,.welcome>.sample-gallery{position:relative;z-index:1}
.campaign-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none}
.ambient-message{position:absolute;width:155px;margin:0;font-size:18px;font-weight:600;line-height:1.55;letter-spacing:-.4px;text-align:left;color:var(--violet);opacity:.72;animation:ambient-drift 10s ease-in-out infinite alternate}
.ambient-1{left:4%;top:17%;transform:rotate(-7deg)}.ambient-2{right:3%;top:21%;transform:rotate(6deg);color:var(--pink);animation-delay:-3s}.ambient-3{left:2%;top:52%;transform:rotate(-5deg);font-size:16px;animation-delay:-6s}.ambient-4{right:3%;top:56%;transform:rotate(5deg);animation-delay:-2s}.ambient-5{left:7%;bottom:8%;transform:rotate(4deg);font-size:15px;animation-delay:-5s}.ambient-6{right:5%;bottom:7%;transform:rotate(-5deg);font-size:15px;color:var(--pink);animation-delay:-7s}
@keyframes ambient-drift{from{translate:0 -4px}to{translate:0 5px}}
@media(max-width:1150px){.ambient-message{width:115px;font-size:14px}.ambient-3,.ambient-5,.ambient-6{font-size:12px}.ambient-1,.ambient-3{left:2%}.ambient-2,.ambient-4{right:2%}.ambient-5{left:4%}.ambient-6{right:3%}}
@media(min-width:701px) and (max-width:1000px){.ambient-1,.ambient-3,.ambient-4,.ambient-5,.ambient-6{display:none}.ambient-2{width:100%;right:0;top:auto;bottom:14px;transform:none;text-align:center;font-size:12px}.welcome{padding-bottom:60px}}
@media(max-width:700px){
 .welcome{min-height:calc(100svh - 145px);padding:66px 24px 50px;gap:20px}
 .sample-gallery{width:min(100%,280px)}
 .campaign-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none}
 .ambient-message{position:absolute;inset:auto;display:none;width:42%;margin:0;font-size:12px!important;font-weight:600;letter-spacing:0;line-height:1.6;opacity:.92;animation:ambient-drift 9s ease-in-out infinite alternate;translate:none}
 .ambient-1{display:block;left:5%;top:10px;transform:rotate(-5deg);text-align:left;color:var(--violet)}
 .ambient-4{display:block;right:5%;top:13px;transform:rotate(4deg);text-align:right;color:var(--violet);animation-delay:-4s}
 .ambient-2{display:block;left:8%;right:8%;bottom:12px;width:auto;transform:rotate(-2deg);text-align:center;color:#BF2582;animation-delay:-2s}
}
@media(max-width:700px) and (max-height:740px){
 .welcome{padding-top:58px;padding-bottom:46px;gap:16px}
 .hero-actions{flex-direction:row;width:100%;max-width:330px;gap:10px}
 .hero-actions button{min-width:0;min-height:54px;padding:12px;font-size:12px;gap:8px;justify-content:space-between}
 .sample-gallery{width:min(100%,clamp(150px,calc(100svh - 440px),260px))}
}
@media(max-width:700px) and (max-height:600px){.welcome .campaign-heading h1{font-size:38px}.campaign-heading p{font-size:11px}.ambient-message{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.ambient-message{animation:none;translate:none}}

/* Keep the photo and all mustache styles together in the first mobile view. */
@media(max-width:700px){
 .editor-top{padding:6px 0;margin-top:-6px;margin-bottom:8px}
 .workspace{position:relative}
 .canvas-wrap{height:clamp(160px,calc(100svh - 400px),360px);min-height:0}
 .canvas-toolbar{position:absolute;top:8px;right:8px;z-index:2;padding:0}
 .canvas-toolbar .icon-button{background:#fffffff2;box-shadow:0 2px 8px #1412390d}
 .canvas-bottom{display:none}
 .tools{padding-top:10px}
 .tools-heading{margin-bottom:10px}
 .catalog{gap:6px}
 .style-button{height:44px;min-height:44px;max-height:none;aspect-ratio:auto;padding:6px}
}

/* Branded output is previewed separately so the mobile style picker stays visible. */
#export-dialog{width:min(560px,calc(100% - 24px));max-height:calc(100svh - 24px);padding:20px;overflow-y:auto;overscroll-behavior:contain}
.export-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.export-heading h2{font-size:19px}.export-heading .icon-button{width:44px;height:44px;flex:none}
.message-label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:14px}.message-label select{width:100%;min-width:0;min-height:44px;background:white;font-size:12px;color:var(--text);font-weight:400}
.export-preview-wrap{display:flex;align-items:center;justify-content:center;position:relative;background:var(--accent);border:1px solid var(--line);border-radius:8px;min-height:120px;overflow:hidden;padding:10px}
#export-preview{display:block;max-width:100%;max-height:48svh;width:auto;height:auto;object-fit:contain}
#export-progress{position:absolute;inset:0;display:grid;place-items:center;background:#fffffff2;padding:20px;text-align:center;font-size:12px;margin:0}
.export-controls{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin-top:16px}.export-controls .format-label{gap:10px;margin:0}.export-controls .primary{min-height:48px;font-size:13px;padding:12px 16px;gap:14px}.export-controls>#share{grid-column:1/-1;padding:0;min-height:40px}.export-controls select{min-height:44px}.status{z-index:40}
@media(max-width:700px){#export-dialog{padding:16px}.export-preview-wrap{padding:6px}#export-preview{max-height:43svh}.export-controls{grid-template-columns:1fr;gap:12px;margin-top:12px}.export-controls .format-label{justify-content:space-between}.export-controls .primary{width:100%}.message-label select{font-size:12px}.export-heading{margin-bottom:10px}}

#export-confirmation{grid-column:1/-1;margin:0;padding:12px;border-radius:8px;background:var(--accent);color:var(--ink);font-size:12px;line-height:1.6;text-align:center}

.photo-source-actions{display:grid;grid-template-columns:1fr;gap:12px}.photo-source-actions button{width:100%;justify-content:space-between;min-height:52px}#photo-source-dialog #replace-warning{font-size:12px;color:var(--muted);margin:0 0 18px}#cancel-photo-source{width:100%;margin-top:8px;min-height:44px}