@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;450;500;550;600;650;700&display=swap');
:root{font-family:'Be Vietnam Pro',Arial,sans-serif;color:#26242e;background:#f7f7fa;font-synthesis:none;font-size:14px;--purple:#7355db;--line:#e9e8ee;--muted:#777482;--soft:#f2effb}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button{border:0;background:none;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ad97f5;outline-offset:4px}[hidden]{display:none!important}.topbar{height:84px;padding:0 4.3%;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;font-size:27px;font-weight:650;letter-spacing:-1px}.brandmark{display:grid;grid-template-columns:12px 9px;grid-template-rows:10px 10px;gap:3px;background:var(--purple);padding:9px;border-radius:10px}.brandmark i{background:white;border-radius:1px}.brandmark i:first-child{grid-row:span 2}.brandtag{font-size:10px;letter-spacing:2px;font-weight:500;color:#8a8597;margin:5px 0 0 9px}.top-actions{display:flex;align-items:center;gap:24px}.languages{display:flex;gap:3px;background:#f3f2f6;padding:4px;border-radius:8px}.languages button{padding:6px 10px;font-size:12px;font-weight:600;border-radius:5px;color:var(--muted)}.languages .active{background:white;color:var(--purple);box-shadow:0 1px 4px #19102912}.primary{background:var(--purple);color:#fff;border:1px solid transparent;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:11px 18px;font-weight:550;transition:background .2s,transform .2s}.primary:not(:disabled):hover{background:#6243cd;transform:translateY(-1px)}.pill{font-size:11px;background:#ffffff26;padding:3px 6px;border-radius:4px}main{max-width:1536px;margin:auto;padding:34px 4.3% 0}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px;gap:24px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--purple);font-weight:600;margin:0 0 12px}h1{font-size:clamp(24px,2.35vw,34px);font-weight:550;letter-spacing:-1.2px;line-height:1.4;margin:0}.intro-note{font-size:14px;color:var(--muted);max-width:290px;line-height:1.8;margin:0 0 4px}.steps{display:flex;align-items:center;gap:18px;margin-bottom:30px;padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:12px}.steps button{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:13px}.steps b{background:#f0edf8;color:var(--purple);width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:500}.steps button:first-child b{background:var(--purple);color:white}.step-line{height:1px;background:var(--line);flex:1}.workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:13px}.settings{overflow:hidden}.settings section{padding:23px 21px;border-bottom:1px solid var(--line);scroll-margin:20px}.settings section:last-child{border-bottom:0}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}h2{font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px;margin:0}.section-number{color:#aaa4b8;font-size:11px;font-weight:500;letter-spacing:.6px}.count{font-size:11px;color:#918a9e;background:#f6f5f8;border-radius:5px;padding:4px 7px}.dropzone{width:100%;border:1.5px dashed #cec4e9;background:#faf8ff;border-radius:9px;display:flex;flex-direction:column;align-items:center;padding:19px 7px;gap:9px;transition:background .2s}.dropzone:hover,.dropzone.drag-over{background:#eee7ff;border-color:var(--purple)}.upload-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #ddd4f5;border-radius:10px;color:var(--purple);background:#fff;font-size:24px;margin-bottom:3px}.dropzone strong{font-size:12px;font-weight:550}.dropzone>span:last-child{font-size:10px;color:#91869e}.privacy{font-size:10px;text-align:center;color:#99929f;margin:13px 0 0}.privacy>span:first-child{font-size:15px}.photo-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px}.photo-list:empty{display:none}.photo-thumb{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;border:2px solid transparent}.photo-thumb.active{border-color:var(--purple)}.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}.photo-thumb .select-thumb{padding:0;width:100%;height:100%}.remove-photo{position:absolute;right:1px;top:1px;background:#24202bba;color:white;border-radius:50%;width:19px;height:19px;padding:0;line-height:18px;font-size:14px}.thumb-number{position:absolute;bottom:2px;left:3px;color:white;background:#0008;border-radius:3px;padding:0 3px;font-size:9px;pointer-events:none}.ratios{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ratio-button{border:1px solid var(--line);border-radius:8px;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:11px;color:#77717f}.ratio-button.active{border-color:var(--purple);background:#f8f5ff;color:var(--purple)}.ratio-shape{display:block;border:1.5px solid currentColor;border-radius:2px;max-width:24px;max-height:22px}.custom-ratio{display:flex;align-items:end;gap:7px;margin-top:12px}.custom-ratio label{flex:1;min-width:0;font-size:11px}.custom-ratio input{display:block;width:100%;border:1px solid var(--line);border-radius:5px;padding:7px;margin-top:5px}.custom-ratio button{font-size:11px;padding:9px 6px;background:var(--soft);border-radius:5px}.segmented{display:flex;gap:3px;background:#f5f4f7;border-radius:7px;padding:4px;margin-bottom:15px}.segmented button{flex:1;font-size:11px;padding:7px 2px;color:#88818f;border-radius:5px}.segmented .active{color:#292333;background:white;box-shadow:0 1px 4px #0000000b}.layout-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}.layout-button{min-width:0;padding:7px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:7px;align-items:center;color:#8a818f;font-size:10px}.layout-button svg{width:100%;height:43px;color:#d5cfdf}.layout-button.active{border-color:var(--purple);background:#f8f5ff;color:var(--purple)}.layout-button.active svg{color:#a38cde}.layout-button:hover{border-color:#b4a1e7}.small-note{color:#a09aa8;font-size:10px;margin:15px 0 0}.editor-column{display:flex;flex-direction:column;gap:18px;min-width:0}.editor{overflow:hidden}.editor-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:19px 23px;border-bottom:1px solid var(--line)}.editor-top>div{display:flex;align-items:center;gap:9px}.editor-top strong{font-size:12px;font-weight:500}.tiny-square{height:10px;width:10px;border:1px solid #9992a5;border-radius:2px}.editor-top>span{color:#898190;font-size:11px;font-variant-numeric:tabular-nums}.canvas-area{background-color:#eeedf2;background-image:radial-gradient(#d4d1dc .7px,transparent .7px);background-size:12px 12px;min-height:460px;height:clamp(400px,43vw,570px);position:relative;display:flex;justify-content:center;align-items:center;padding:32px}.canvas-wrap{box-shadow:0 8px 30px #3730471f;line-height:0;position:relative;max-width:100%;max-height:100%}#canvas{display:block;max-width:100%;max-height:100%;touch-action:none;cursor:grab}#canvas:active{cursor:grabbing}.empty-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:35px;text-align:center;background:#f3f1f66b;pointer-events:none}.empty-overlay>*{pointer-events:auto}.empty-icon{font-size:30px;color:var(--purple);background:white;border:1px solid #e8e1f8;box-shadow:0 4px 12px #71627c0c;padding:11px 17px;border-radius:14px}.empty-overlay h3{font-size:18px;max-width:330px;line-height:1.6;font-weight:550;margin:20px 0 7px}.empty-overlay p{font-size:12px;max-width:280px;line-height:1.8;color:#8a8196;margin:0 0 23px}.canvas-footer{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;gap:10px;font-size:11px;color:#938a9e}.drag-symbol{font-size:16px;margin-right:6px}.preview-label{font-size:9px;letter-spacing:1.1px;white-space:nowrap}.adjustment-panel{padding:22px}.adjustment-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.text-button{color:var(--purple);font-size:11px;padding:0}.adjustment-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}.control-group{min-width:0}.control-group>label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;margin-bottom:14px;color:#5e5769}.control-group output,.control-group label>span:last-child:not(:first-child){color:#9991a3;font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--purple);height:5px;cursor:pointer;margin:5px 0 8px}.range-labels{display:flex;justify-content:space-between;color:#9b94a5;font-size:9px}.swatches{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.swatch{width:23px;height:23px;background:var(--swatch);border:1px solid #ddd8e4;border-radius:50%;padding:0}.swatch.active{outline:2px solid var(--purple);outline-offset:3px}.custom-color{position:relative;width:25px;height:25px;border:1px dashed #bfb6cc;border-radius:50%;display:grid;place-items:center;color:#91889e;overflow:hidden;cursor:pointer}.custom-color input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.zoom-control{display:flex;align-items:center;gap:8px}.zoom-control button{background:#f6f4f9;border-radius:5px;min-width:26px;height:25px;padding:0}.zoom-control input{min-width:20px}.selected-label{color:#a49bad;font-size:9px;display:block;margin-top:7px}.export-panel{display:flex;align-items:center;justify-content:space-between;border:1px solid #e4dcf7;background:#f0ebfb;border-radius:12px;padding:20px 23px;gap:16px}.export-copy{display:flex;gap:13px;align-items:center}.quality-badge{background:#fff;color:var(--purple);border:1px solid #e3d9fa;border-radius:10px;width:42px;height:42px;display:grid;place-items:center;font-size:14px;font-weight:600}.export-copy h2{font-size:12px;font-weight:550}.export-copy p{font-size:10px;color:#9284a9;margin:7px 0 0}.export-actions{display:flex;gap:8px}.export-actions select{background:#fff;border:1px solid #dfd5f0;border-radius:8px;padding:7px;font-size:11px;color:#625477}.export-actions .primary{font-size:12px;white-space:nowrap}footer{display:flex;align-items:center;gap:18px;margin:30px 0 22px;color:#a7a1af;font-size:10px}footer>span:last-child{margin-left:auto}.footer-brand{color:#777080;font-size:16px;font-weight:600;letter-spacing:-.5px}.footer-brand span{font-size:8px;vertical-align:super}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);max-width:min(90vw,600px);padding:14px 22px;background:#292232;color:white;border-radius:10px;box-shadow:0 8px 30px #0002;opacity:0;pointer-events:none;transition:.2s;z-index:10;font-size:13px;line-height:1.7}#toast.visible{opacity:1;transform:translate(-50%,0)}.canvas-area.drag-over{outline:3px dashed var(--purple);outline-offset:-8px}.loading .dropzone{opacity:.5;pointer-events:none}@media(min-width:1500px){.workspace{grid-template-columns:330px minmax(0,1fr)}}@media(max-width:1100px){.brandtag{display:none}.intro-note{display:none}.workspace{grid-template-columns:280px minmax(0,1fr);gap:18px}main{padding:25px 3% 0}.settings section{padding:20px 17px}.canvas-area{padding:25px;min-height:400px}.adjustment-grid{gap:16px;grid-template-columns:1fr 1fr}.control-group:last-child{grid-column:span 2}.export-panel{flex-wrap:wrap}.preview-label{display:none}.steps{gap:8px;padding:15px}.steps button{font-size:11px;gap:6px}}@media(max-width:760px){.topbar{height:68px;padding:0 5%}.brand{font-size:23px}.brandmark{transform:scale(.85);margin-right:-5px}.top-actions{gap:10px}.top-actions>.primary{font-size:11px;padding:9px 11px;min-height:38px;gap:6px}.pill{display:none}.languages button{padding:5px 7px}.intro{margin:5px 0 20px}.eyebrow{font-size:9px;letter-spacing:1.3px}h1{font-size:25px}.workspace{grid-template-columns:1fr}.steps{overflow:auto;justify-content:space-between;padding:13px 8px;margin-bottom:18px;gap:4px}.step-line{display:none}.steps button{flex-direction:column;font-size:9px;gap:6px;padding:0 3px}.steps b{width:23px;height:23px}.settings{display:grid;grid-template-columns:1fr 1fr}.settings section{padding:18px}.settings #photos{grid-column:span 2}.settings #ratios{border-bottom:0;border-right:1px solid var(--line)}.settings #layouts .section-heading{flex-wrap:wrap;gap:8px}.layout-grid{grid-template-columns:repeat(2,1fr);max-height:236px;overflow:auto}.ratios{grid-template-columns:repeat(2,1fr)}.photo-list{grid-template-columns:repeat(6,minmax(0,1fr))}.privacy{font-size:11px}.dropzone strong{font-size:14px}.dropzone>span:last-child{font-size:11px}.canvas-area{height:470px;min-height:300px;padding:25px}.canvas-footer{font-size:10px;padding:12px}.adjustment-panel{padding:18px}.export-panel{padding:17px}.export-copy h2{font-size:12px}.export-actions{width:100%}.export-actions .primary{flex:1}.control-group>label{font-size:12px}.swatches{gap:10px}footer{flex-wrap:wrap;gap:10px}footer>span:last-child{width:100%;margin:0}.canvas-area{scroll-margin:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Readable controls at every viewport; secondary details remain quieter. */
:root{font-size:16px}.brandtag,.eyebrow,.count,.section-number,.preview-label,.range-labels,.selected-label,footer{font-size:12px}.languages button,.steps button,.dropzone strong,.ratio-button,.segmented button,.layout-button,.editor-top strong,.text-button,.control-group>label,.export-copy h2,.export-actions .primary,.export-actions select{font-size:14px}.dropzone>span:last-child,.privacy,.small-note,.editor-top>span,.canvas-footer,.control-group output,.control-group label>span:last-child:not(:first-child),.export-copy p{font-size:12px}.empty-overlay p,.intro-note{font-size:16px}.selected-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layout-button{font-size:12px}.export-panel{flex-wrap:wrap}.settings section{padding-left:19px;padding-right:19px}.dropzone{padding-left:10px;padding-right:10px}.dropzone>span:last-child{line-height:1.6}.control-group>label{flex-wrap:wrap;line-height:1.6}.adjustment-grid{gap:18px}.canvas-footer{line-height:1.6}.photo-thumb .remove-photo{width:24px;height:24px}.steps{gap:10px}.swatch{width:25px;height:25px}.empty-overlay h3{font-size:21px}.privacy{line-height:1.7}.custom-ratio{flex-wrap:wrap}.custom-ratio button{font-size:12px}.custom-ratio label{font-size:12px}.small-note{line-height:1.7}
@media(max-width:760px){.steps button{font-size:12px}.steps{gap:3px}.settings{display:block}.settings #ratios{border-right:0;border-bottom:1px solid var(--line)}.ratios{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.ratio-button{font-size:12px;min-width:0}.layout-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:245px}.layout-button{font-size:12px}.canvas-area{height:420px}.empty-overlay{padding:22px}.empty-overlay h3{font-size:20px}.empty-overlay p{font-size:14px}.adjustment-grid{grid-template-columns:1fr}.control-group:last-child{grid-column:auto}.top-actions>.primary{font-size:12px}.languages button{font-size:12px}.export-copy h2{line-height:1.6}.brandtag{display:none}.intro{margin-top:10px}.eyebrow{font-size:10px}.export-actions{flex-wrap:wrap}.steps b{font-size:12px}}
@media(max-width:380px){.steps button{font-size:10px}.layout-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ratios{grid-template-columns:repeat(3,minmax(0,1fr))}.brand{font-size:20px}.top-actions{gap:5px}h1{font-size:23px}}

.download-again{width:100%;font-size:13px;color:#6243b8;text-decoration:underline;text-underline-offset:3px}.editor-top{flex-wrap:wrap}.canvas-wrap{flex-shrink:0}