:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#272335;background:#f8f7f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}.topbar{height:76px;border-bottom:1px solid #e9e7e0;display:flex;align-items:center;justify-content:space-between;padding:0 7.2%;background:#fbfaf7}.brand{text-decoration:none;color:#282238;font-weight:850;font-size:21px;letter-spacing:-1px;display:flex;gap:10px;align-items:center}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#7153dc;color:white;font-size:14px;letter-spacing:-1px}.brand-dot{color:#7a5ce0}.top-right{display:flex;align-items:center;gap:28px}.made-for,.preview-label,.size-label{font-size:10px;font-weight:800;letter-spacing:1.2px;color:#928d9c}.language{display:flex;border:1px solid #e6e3ec;border-radius:9px;padding:3px;background:white}.language button{border:0;background:transparent;border-radius:6px;color:#9994a4;font-size:11px;font-weight:800;padding:7px 10px}.language button.active{background:#eeeafc;color:#6443cf}main{max-width:1250px;margin:auto;padding:0 28px}.intro{text-align:center;padding:58px 0 39px}.eyebrow{color:#795ce0;font-weight:800;font-size:10px;letter-spacing:1.45px;display:flex;justify-content:center;align-items:center;gap:8px}.eyebrow>span:first-child{width:7px;height:7px;background:#a996f1;border-radius:50%}h1{font-size:clamp(39px,5.2vw,66px);line-height:1.03;letter-spacing:-3.5px;margin:19px 0 16px;font-weight:850}h1 em{font-style:normal;color:#7655db}.intro p{max-width:530px;margin:auto;color:#8b8793;font-size:14px;line-height:1.7}.studio{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #eeecf0;border-radius:20px;box-shadow:0 18px 65px rgba(49,37,77,.065);overflow:hidden}.editor-panel{padding:37px 42px 30px}.preview-panel{background:#f1eff8;padding:30px 38px 25px;border-left:1px solid #eeecf1}.section-heading{display:flex;gap:13px;align-items:flex-start}.step{background:#f0ecff;color:#7759da;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;font-weight:800;font-size:11px;flex:none}.section-heading h2{font-size:16px;letter-spacing:-.3px;margin:0 0 5px}.section-heading p{font-size:12px;color:#a29ca9;margin:0}.upload{margin-top:22px;border:1.5px dashed #d8d1eb;border-radius:12px;background:#faf9ff;min-height:80px;display:flex;align-items:center;padding:16px;gap:13px;cursor:pointer;transition:.2s}.upload:hover{border-color:#8b71e0;background:#f6f3ff}.upload-icon{width:40px;height:40px;border-radius:10px;background:#ede8ff;display:grid;place-items:center;color:#7656dc}.upload-icon svg{width:21px}.upload strong,.upload small{display:block}.upload strong{font-size:13px;color:#5e42c4}.upload small{margin-top:4px;font-size:10px;color:#aaa3b4}.upload-arrow{margin-left:auto;font-size:19px;color:#9687c3}#photo-input{position:absolute;width:1px;height:1px;opacity:0}.file-message{color:#bb4b59;font-size:12px;margin:8px 0 0}.file-message:empty{display:none}.divider{height:1px;background:#f0eef1;margin:28px 0}.frame-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.frame-card{padding:5px;text-align:left;border:1.5px solid #efedf1;background:#fff;border-radius:10px;color:#54505e;transition:.15s;min-width:0}.frame-card:hover{border-color:#b7a7ec}.frame-card.selected{border-color:#7959df;box-shadow:0 0 0 2px #eee9ff}.frame-card canvas{display:block;width:100%;aspect-ratio:1.5;background:#eeecf5;border-radius:6px}.frame-card span{display:block;font-weight:750;font-size:10px;padding:7px 3px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.privacy{margin-top:25px;padding:13px 14px;background:#f7f6f3;border-radius:9px;display:flex;align-items:center;gap:10px;color:#99949d}.privacy span{color:#8b73d6;font-size:18px}.privacy p{font-size:11px;line-height:1.45;margin:0}.preview-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}.preview-label{color:#858091}.live-dot{display:inline-block;width:6px;height:6px;background:#80c99a;border-radius:50%;margin-left:7px;vertical-align:middle}.size-label{font-size:9px}.canvas-wrap{position:relative;max-width:430px;margin:auto;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 9px 25px rgba(53,43,90,.1);touch-action:none;background:#ded9eb}.canvas-wrap canvas{width:100%;height:100%;display:block}.canvas-wrap.has-photo{cursor:grab}.canvas-wrap.has-photo:active{cursor:grabbing}.empty-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#8e84a4}.empty-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#f3f0fb;color:#a398bd;font-size:30px;margin-bottom:13px}.empty-hint strong{font-size:13px}.empty-hint small{font-size:10px;margin-top:5px;color:#aaa1ba}.has-photo .empty-hint{display:none}.adjust-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0}.adjust-title,.adjust-hint{display:block}.adjust-title{font-size:12px;font-weight:750}.adjust-hint{font-size:10px;color:#a09aab;margin-top:5px}.zoom{display:flex;align-items:center;gap:9px;color:#827b90;font-size:18px}.zoom input{width:115px;accent-color:#7656dd;cursor:pointer}.download{width:100%;height:49px;border:0;border-radius:10px;background:#7553dc;color:white;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:750;font-size:13px;box-shadow:0 6px 15px rgba(117,83,220,.2)}.download:hover:not(:disabled){background:#6745d0}.download:disabled{opacity:.55;cursor:not-allowed}.download svg{width:18px}.download-note{text-align:center;font-size:10px;color:#a49daf;margin:11px 0 0}footer{display:flex;justify-content:space-between;padding:35px 0 45px;color:#b4afb8;font-size:9px;font-weight:800;letter-spacing:1px}.heart{color:#a68ce6}.footer-spark{color:#8d73db;font-size:15px;margin-left:6px}@media(max-width:760px){.topbar{padding:0 20px;height:66px}.made-for{display:none}main{padding:0 16px}.intro{padding:44px 0 30px}h1{letter-spacing:-2px}.studio{grid-template-columns:1fr}.editor-panel{padding:27px 22px}.preview-panel{border-left:0;border-top:1px solid #eeecf1;padding:25px 22px}.frame-grid{gap:8px}.frame-card span{font-size:10px}footer{gap:20px;line-height:1.6;font-size:8px}}@media(max-width:390px){.adjust-row{align-items:flex-start;flex-direction:column}.zoom{width:100%}.zoom input{flex:1}footer span:last-child{text-align:right}}

.upload:has(+ #photo-input:focus-visible){outline:3px solid #9f8ae8;outline-offset:3px}

.color-section{margin-top:25px;padding-top:23px;border-top:1px solid #f0eef1}.color-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.color-heading h3{font-size:14px;margin:0 0 5px}.color-heading p{font-size:11px;color:#a29ca9;margin:0}.reset-colors{border:0;background:transparent;color:#7656dc;font-size:10px;font-weight:750;padding:3px 0}.reset-colors:hover{text-decoration:underline}.color-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.color-option{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid #eeebf1;border-radius:9px;cursor:pointer;font-size:11px;font-weight:700;color:#615b6b}.color-option input{width:32px;height:32px;padding:2px;border:1px solid #e5e1eb;border-radius:7px;background:#fff;cursor:pointer}.color-option input::-webkit-color-swatch-wrapper{padding:0}.color-option input::-webkit-color-swatch{border:0;border-radius:4px}.color-option input::-moz-color-swatch{border:0;border-radius:4px}@media(max-width:390px){.color-option{font-size:10px}}

.zoom button{border:0;background:transparent;color:#827b90;font-size:20px;line-height:1;padding:5px;min-width:30px;cursor:pointer}.zoom button:hover{color:#6745d0}.zoom button:focus-visible{outline:2px solid #7656dd;outline-offset:2px;border-radius:4px}

.credits{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 10px;padding:28px 0 0;color:#777180;font-size:12px;line-height:1.6}.credits a{color:#6745c7;font-weight:700;text-decoration:none}.credits a:hover{text-decoration:underline}.credits-separator{color:#c6bfce}@media(max-width:480px){.credits{flex-direction:column;align-items:center;gap:4px;text-align:center}.credits-separator{display:none}}