@font-face{font-family:Oswald;src:url('assets/oswald-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('assets/inter-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('assets/inter-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('assets/inter-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{--navy:#0f1d67;--red:#bd1924;--ink:#15204b;--muted:#647087;--border:#dce0e9;--paper:#f8f7f4;--white:#fff}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.55 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";display:block;height:5px;background:linear-gradient(to right,var(--navy) 70%,var(--red) 70%)}
.shell{max-width:1060px;margin:0 auto;padding:34px 34px 24px}
.page-heading{margin-bottom:30px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--navy);display:flex;gap:8px;align-items:center}
.eyebrow span{color:var(--red);font-size:14px}
h1{font:700 clamp(36px,5vw,46px)/1.18 Oswald,Impact,sans-serif;margin:10px 0 10px;letter-spacing:-.02em;color:var(--navy)}
.page-heading>p{margin:0;color:var(--muted);font-size:15px}
.maker{display:grid;grid-template-columns:minmax(290px,370px) minmax(0,1fr);gap:22px 44px;align-items:start}
h2{font-size:16px;line-height:1.35;letter-spacing:-.02em;margin:0 0 18px;font-weight:700}
.details{grid-column:1;grid-row:1}
.preview-panel{grid-column:2;grid-row:1 / span 2}
.preview-topline{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:13px}
.preview-topline h2{margin:0}
.preview-topline>span{color:var(--muted);font-size:11px}
.photo-upload{min-height:110px;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;background:#fff;border:1.5px dashed #b8bfce;border-radius:9px;transition:border-color .15s,background-color .15s;padding:14px 10px;font-weight:600;color:var(--navy)}
.photo-upload:hover{border-color:var(--navy);background:#f1f3fa}
.photo-upload:has(+input:focus-visible){outline:3px solid #5179d5;outline-offset:3px}
.photo-upload>svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.file-note{font-size:11px;font-weight:400;color:var(--muted);margin-top:3px}
.field-label{display:block;font-size:12px;font-weight:600;margin:17px 0 7px}
.field-label>span{color:var(--muted);font-weight:400;font-size:11px;margin-left:3px}
input[type=text],textarea{display:block;width:100%;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--ink);font:inherit;font-size:16px;padding:11px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
input[type=text]::placeholder{color:#8a92a4;font-size:14px}
input[type=text]:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px #0f1d6710}
.privacy-note{font-size:10px;color:var(--muted);margin:13px 0 0;display:flex;align-items:center;gap:6px}
.privacy-note svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4;flex:none}
.canvas-frame{border:1px solid #e0e2e9;background:white;box-shadow:0 7px 24px #13204b0c;overflow:hidden;border-radius:3px;line-height:0}
canvas{display:block;width:100%;height:auto;aspect-ratio:1;outline-offset:4px}
canvas.has-photo{cursor:grab;touch-action:none}
canvas.dragging{cursor:grabbing}
.crop-controls{margin:11px 0 16px;font-size:11px;color:var(--muted)}
.crop-topline{display:flex;align-items:center;justify-content:space-between}
.crop-topline p{margin:0}
.zoom-row{display:flex;align-items:center;gap:12px;margin-top:3px}
.zoom-row input{min-width:0;flex:1;accent-color:var(--navy);height:27px;cursor:pointer}
.zoom-row label{min-width:34px}
.zoom-row output{min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
button{font:600 13px/1.3 Inter,Arial,sans-serif;cursor:pointer;transition:background-color .15s,transform .15s}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,canvas:focus-visible{outline:3px solid #5179d5;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.45}
.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;border-radius:7px}
.primary-button{border:1px solid var(--navy);color:#fff;background:var(--navy);width:100%;font-size:14px}
.primary-button:hover:not(:disabled){background:#172b83}
.secondary-button{border:1px solid var(--border);background:white;color:var(--navy);padding:11px 18px;min-height:42px}
.secondary-button:hover{background:#eff1f8;border-color:#aeb8cf}
.primary-button svg,.secondary-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.text-button{border:0;padding:7px 0;background:none;color:var(--navy);font-size:11px;text-decoration:underline;text-underline-offset:3px}
.download-alternative{margin:3px auto 0;display:block}
.save-controls{margin-top:16px}
.status,.save-status{font-size:11px;line-height:1.5;color:var(--muted);margin:7px 0 0;min-height:0}
.status:empty{display:none}
.save-status{text-align:center;min-height:16px}
.status.error,.save-status.error{color:#a20d1e}
.caption-panel{grid-column:1;grid-row:2;border-top:1px solid var(--border);padding-top:22px}
.caption-panel h2{margin-bottom:5px}
.caption-panel>p:not(.status){font-size:12px;color:var(--muted);margin:0 0 13px}
textarea{font-size:13px;line-height:1.6;resize:vertical;min-height:146px;margin-bottom:12px}
footer{text-align:center;margin:32px 0 0;padding-top:21px;border-top:1px solid var(--border);color:var(--muted);font-size:10px}
footer span{display:inline-block;border:1px solid #cbd0dc;padding:5px 11px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{color:#a20d1e;text-align:center;padding:12px}
@media(max-width:740px){.shell{max-width:560px;padding:25px 20px 22px}.page-heading{margin-bottom:25px}.page-heading>p{font-size:13px;max-width:320px}.maker{grid-template-columns:1fr;gap:25px}.details,.preview-panel,.caption-panel{grid-column:1;grid-row:auto}.photo-upload{min-height:100px}.caption-panel{padding-top:23px}.privacy-note{font-size:10px}.preview-topline>span{font-size:10px}h2{font-size:15px}footer{margin-top:27px}textarea{font-size:16px;min-height:180px}.text-button{min-height:36px}.save-status{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}