@font-face{font-family:Montserrat;src:url('./assets/montserrat.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{font-family:Montserrat,Arial,sans-serif;color:#2e3d35;background:#f5f5f2;font-size:13px;color-scheme:light;--green:#214a3e;--line:#dedfd8}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){filter:brightness(.95)}[hidden]{display:none!important}button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #85a36e;outline-offset:3px}button,input,summary{-webkit-tap-highlight-color:transparent}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{width:0;height:0;position:absolute;overflow:hidden}main{max-width:1180px;margin:auto;padding:24px 28px 18px}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;height:42px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 17px;border-radius:5px;font-size:12px;font-weight:500;white-space:nowrap}.primary{color:#fff;border:1px solid var(--green);background:var(--green)}.secondary{color:#3d4d42;background:white;border:1px solid var(--line)}.file-name{min-width:0;flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:11px;color:#81877d}.icon-button{border:0;background:transparent;display:flex;align-items:center;justify-content:center;width:38px;height:38px;color:#697563;border-radius:4px;flex-shrink:0}.stage{height:calc(100svh - 300px);min-height:260px;max-height:760px;background:#252c29;position:relative;display:flex;align-items:center;justify-content:center;padding:26px;overflow:hidden;border-radius:6px}.photo-wrap{position:relative;flex-shrink:0;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0/16px 16px;box-shadow:0 3px 18px #0003}.photo-wrap img{display:block;width:100%;height:100%;user-select:none}.shade{position:absolute;background:#0d171bac;pointer-events:none}.crop{position:absolute;border:1px solid #fff;cursor:grab;touch-action:none;user-select:none}.crop.dragging{cursor:grabbing}.grid{position:absolute;pointer-events:none;background:#fff5}.grid.v{width:1px;height:100%;top:0}.grid.h{height:1px;width:100%;left:0}.grid.v.a{left:33.333%}.grid.v.b{left:66.666%}.grid.h.a{top:33.333%}.grid.h.b{top:66.666%}.handle{position:absolute;width:30px;height:30px;padding:0;border:0;background:transparent;z-index:2;touch-action:none;transform:translate(-50%,-50%)}.handle::after{content:'';position:absolute;width:10px;height:10px;left:10px;top:10px;background:white;border:1px solid #23372a88;border-radius:2px;box-shadow:0 1px 3px #0003}.handle:hover::after,.handle:focus-visible::after{background:#d9edbd}.nw{left:0;top:0;cursor:nwse-resize}.n{left:50%;top:0;cursor:ns-resize}.ne{left:100%;top:0;cursor:nesw-resize}.e{left:100%;top:50%;cursor:ew-resize}.se{left:100%;top:100%;cursor:nwse-resize}.s{left:50%;top:100%;cursor:ns-resize}.sw{left:0;top:100%;cursor:nesw-resize}.w{left:0;top:50%;cursor:ew-resize}.edge::after{border-radius:4px}.n::after,.s::after{width:18px;height:6px;left:6px;top:12px}.w::after,.e::after{width:6px;height:18px;left:12px;top:6px}.stage-status,.drop-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#252c29ec;color:#d8e5d1;z-index:4;font-size:12px}.drop-overlay{inset:8px;border:1px dashed #c5d4b5;border-radius:4px;font-size:20px}.spinner{width:15px;height:15px;border:2px solid #fff4;border-top-color:#d9edbd;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.controls{display:grid;grid-template-columns:1fr 44px 1fr;gap:20px;align-items:center;padding:19px 0 12px}.dimension{display:grid;grid-template-columns:auto 132px;align-items:center;gap:10px 14px}.dimension label{font-size:12px;font-weight:500}.number-field{display:flex;align-items:center;justify-content:flex-end;gap:6px;border:1px solid var(--line);background:white;border-radius:4px;min-height:56px;padding:0 12px}.number-field:focus-within{border-color:#7a9869;box-shadow:0 0 0 2px #dae6ce}.number-field:has(input[aria-invalid=true]){border-color:#b65e3a}.number-field input{width:92px;max-width:100%;min-width:0;border:0;outline:0;background:transparent;text-align:right;color:inherit;appearance:textfield;-moz-appearance:textfield;font-size:28px;font-weight:500;font-variant-numeric:tabular-nums}.number-field input::-webkit-inner-spin-button{appearance:none}.number-field span{font-size:10px;color:#899080}.swap{justify-self:center}.presets{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.presets button{border:1px solid var(--line);border-radius:4px;background:transparent;color:#67745d;font-size:11px;min-width:64px;min-height:31px;padding:5px 11px}.presets button.active{background:#e9f0dc;border-color:#a5b88f;color:#345125}.status-line{display:flex;align-items:center;gap:15px;margin-top:17px;font-size:11px;color:#858c7f;min-height:20px}#download-status{font-size:10px;margin-left:auto}.notice{font-size:12px;line-height:1.6;background:#fff3e7;border:1px solid #e8cbb0;color:#8b5b34;padding:12px 15px;margin:0 0 14px;border-radius:5px}@media(max-width:700px){main{padding:16px}.toolbar{gap:8px;margin-bottom:12px}.primary,.secondary{font-size:11px;padding:0 12px;min-height:42px}.file-name{font-size:9px}.icon-button{width:32px}.stage{height:calc(100svh - 295px);min-height:210px;max-height:520px;padding:22px}.controls{gap:10px;grid-template-columns:1fr 26px 1fr;padding:16px 0 12px}.dimension{grid-template-columns:auto 112px;gap:9px 5px}.dimension label{font-size:11px}.number-field{min-height:52px;padding:0 8px}.number-field input{width:82px;font-size:24px}.handle{width:40px;height:40px}.handle::after{left:15px;top:15px}.n::after,.s::after{left:11px;top:17px}.w::after,.e::after{left:17px;top:11px}.presets{gap:6px}.presets button{min-width:0;flex:0 0 calc((100% - 24px)/5);max-width:none;padding:5px 7px;min-height:36px;font-size:10px}.status-line{gap:8px;font-size:9px;margin-top:13px}#download-status{font-size:9px}}@media(max-width:390px){main{padding:12px}.toolbar{gap:6px}.file-name{font-size:8px}.primary,.secondary{padding:0 10px}.controls{gap:7px;grid-template-columns:1fr 23px 1fr}.dimension{grid-template-columns:auto 112px}.number-field input{width:82px}.presets button{padding:4px;font-size:9px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
@media(max-width:700px){.stage{height:auto;aspect-ratio:var(--photo-ratio,1.5);max-height:52svh;min-height:210px}}
.stage{width:100%;max-width:100%}
.file-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.file-details .file-name{flex:none;font-size:11px;color:#667166}
@media(max-width:700px){.toolbar{display:grid;grid-template-columns:1fr auto;height:auto;gap:10px 8px}.toolbar>.upload-trigger{justify-self:start}.toolbar>#download{grid-column:2;grid-row:1}.file-details{grid-column:1 / -1;grid-row:2}.file-details:has(.file-name:empty){display:none}}

@media(max-width:355px){.dimension{grid-template-columns:1fr;gap:7px}.number-field{justify-content:center}.dimension label{text-align:center}.presets button{flex-basis:calc((100% - 18px)/4)}}


.stage{height:calc(100svh - 385px)}
.number-field input{flex:1 1 0;width:100%;padding:2px 0;font-size:24px;line-height:1.25}
.number-field span{flex-shrink:0}
.number-field input::placeholder{color:#b4baaf}
.controls{width:fit-content;max-width:100%;margin-left:auto;grid-template-columns:max-content 38px max-content;gap:10px;padding:14px 0 12px}
.dimension{grid-template-columns:auto 124px;gap:8px}
.print-options{max-width:1000px;margin:0 auto}
.print-options h2{margin:0 0 10px;font-size:13px;line-height:1.4;font-weight:500;text-align:center;color:#667166}
.presets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.presets button{min-width:0;min-height:36px;padding:6px 8px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:#4d6046}
@media(max-width:900px){.presets{grid-template-columns:repeat(6,minmax(0,1fr))}.stage{height:calc(100svh - 425px)}}
@media(max-width:700px){

.stage{height:auto}
.controls{width:min(100%,320px);gap:8px;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);padding:12px 0}
.dimension{grid-template-columns:minmax(0,1fr);gap:6px}.dimension label{text-align:left}
.number-field{padding:0 10px}
.swap{align-self:end;margin-bottom:7px}
.presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.presets button{min-height:44px;padding:6px 4px;font-size:13px}
.status-line{font-size:10px}
}
@media(max-width:420px){.presets{grid-template-columns:repeat(3,minmax(0,1fr))}}
.status-line{flex-wrap:wrap;justify-content:space-between}
.footer-credit{margin-left:auto;white-space:nowrap}
#download-status:not(:empty){flex-basis:100%;text-align:right}
#download-status:empty{display:none}