@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}}