@font-face{font-family:Unifraktur;src:url('./fonts/UnifrakturCook-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--bg:#1c1d1d;--paper:#e9e3d6;--gold:#e6c37c}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{color:#f2eee4;font:16px/1.4 Arial,sans-serif}button,textarea,input{font:inherit}button{cursor:pointer}button:focus-visible,textarea:focus-visible,input:focus-visible+span,.photo-picker:focus-within,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.workspace{height:100dvh;min-height:550px;display:grid;grid-template-columns:minmax(285px,25%) minmax(0,1fr);overflow:hidden}.editor{background:#202320;border-right:1px solid #444943;display:flex;flex-direction:column;padding:27px clamp(18px,2vw,35px) 20px;min-width:0}.editor-top{border-bottom:1px solid #4a5048;padding-bottom:23px}.brand{font:32px Unifraktur,Georgia,serif;text-decoration:none;color:#f6f0e3;white-space:nowrap}.brand span{font:15px Arial,sans-serif;color:#dc7653;margin-right:7px}.editor-top p{font:14px Georgia,serif;color:#bfc4bb;margin:9px 0 0}.editor-main{margin:auto 0;min-width:0}.headline-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}.headline-top label,.levels legend{font:14px Arial,sans-serif;color:#eee8dc}.text-button{border:0;background:none;color:#e5c280;padding:3px 0;text-decoration:underline;text-underline-offset:3px;font:13px Arial,sans-serif;white-space:nowrap}.text-button:hover{color:#ffe4aa}.headline-box{position:relative}.headline-box textarea{display:block;width:100%;min-height:130px;padding:14px 52px 14px 15px;resize:none;border:1px solid #797f74;border-radius:2px;background:#2b302c;color:#fff8ee;font:20px/1.3 Georgia,serif}.headline-box textarea::placeholder{color:#a9aea5}.photo-picker{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;align-items:center;background:#eee7d9;color:#252923;padding:7px 8px;border-radius:2px;font:12px Arial,sans-serif;cursor:pointer}.photo-picker span:first-of-type{font-size:18px;line-height:12px}.photo-picker:hover{background:#fff6e3}.photo-picker input{position:absolute;width:1px;height:1px;opacity:0}.under-input{display:flex;justify-content:space-between;align-items:center;min-height:32px}.counter,.photo-note,.privacy{font:12px/1.4 Arial,sans-serif;color:#aeb5ac}.counter{margin:4px 0}.under-input #remove-photo{font-size:12px}.levels{border:0;display:flex;flex-wrap:wrap;gap:7px;margin:23px 0 20px;padding:0}.levels legend{margin-bottom:9px;width:100%}.levels label{position:relative}.levels input{position:absolute;opacity:0}.levels span{display:block;padding:9px 10px;border:1px solid #747d73;color:#efece5;font:13px Arial,sans-serif;cursor:pointer;white-space:nowrap}.levels input:checked+span{background:#e4decf;border-color:#e4decf;color:#242822}.levels label:hover span{border-color:#e4decf}.download{width:100%;min-height:50px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 14px;background:var(--gold);color:#242822;border:1px solid var(--gold);border-radius:2px;font:700 14px Arial,sans-serif}.download:hover{background:#f5d795}.download span{font-size:20px}.photo-note{min-height:35px;margin:12px 0 0}.privacy{border-top:1px solid #4a5048;padding-top:17px;margin:0}.paper-stage{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px clamp(20px,3vw,52px);background:radial-gradient(ellipse at 45% 40%,#30352f 0%,#1b1d1b 70%)}.preview-head{width:min(100%,calc((100dvh - 122px)*1.25));display:flex;justify-content:space-between;gap:12px;color:#c4c8bf;text-transform:uppercase;letter-spacing:.12em;font:11px Arial,sans-serif}.paper-wrap{width:min(100%,calc((100dvh - 122px)*1.25));max-height:calc(100dvh - 122px);padding:8px;background:#b9b2a4;box-shadow:0 28px 65px #0007;display:flex;align-items:center;justify-content:center}.paper-wrap canvas{display:block;width:100%;height:auto;max-height:calc(100dvh - 138px);object-fit:contain;background:var(--paper);cursor:zoom-in}.stage-note{margin:0;color:#aeb5ac;font:12px Arial,sans-serif}#remove-photo[hidden]{display:none}
#zoom{border:0;padding:44px 12px 12px;background:#202320;max-width:96vw;max-height:96dvh;color:#fff;box-shadow:0 0 0 100vmax #0009}#zoom::backdrop{background:#000c}#zoom img{display:block;max-width:calc(96vw - 24px);max-height:calc(96dvh - 58px);object-fit:contain}#close-zoom{position:absolute;right:12px;top:9px;background:none;border:0;color:#fff;font:14px Arial,sans-serif}
@media(max-width:760px){.workspace{grid-template-columns:minmax(128px,36%) minmax(0,1fr);min-height:480px}.editor{padding:15px 10px 12px}.editor-top{padding-bottom:13px}.brand{font-size:21px;white-space:normal}.brand span{font-size:11px;margin-right:3px}.editor-top p{font-size:12px;margin-top:5px}.headline-top{display:block;margin-bottom:5px}.headline-top label,.levels legend{font-size:12px}.headline-top .text-button{font-size:11px}.headline-box textarea{min-height:104px;padding:8px 8px 35px;font-size:15px}.photo-picker{right:5px;bottom:5px;padding:5px;font-size:11px}.counter,.photo-note,.privacy{font-size:11px}.levels{gap:5px;margin:14px 0}.levels legend{margin-bottom:5px}.levels span{font-size:11px;padding:6px}.download{min-height:42px;font-size:11px;padding:7px}.download span{font-size:16px}.paper-stage{padding:10px 8px;gap:7px}.paper-wrap{padding:4px;width:100%}.preview-head{width:100%;font-size:9px}.preview-head span:last-child{display:none}.stage-note{font-size:10px;text-align:center}.privacy{padding-top:10px}.photo-note{min-height:0;margin-top:8px}}
@media(max-height:650px){.editor{padding-top:12px;padding-bottom:10px}.editor-top{padding-bottom:9px}.editor-main{margin:9px 0}.levels{margin:9px 0}.privacy{padding-top:8px}.paper-stage{padding-top:8px;padding-bottom:8px}.preview-head{display:none}.stage-note{display:none}.paper-wrap{width:min(100%,calc((100dvh - 40px)*1.25));max-height:calc(100dvh - 24px)}.paper-wrap canvas{max-height:calc(100dvh - 40px)}}
@media(max-width:760px){.headline-top{display:flex;align-items:center}.headline-top .text-button{display:none}.headline-box textarea{min-height:156px;padding:8px;font-size:15px}.photo-picker{top:-29px;bottom:auto;right:0;padding:4px 6px}.photo-picker-text{display:none}.paper-wrap{width:min(100%,calc((100dvh - 95px)*.75))}}
@media(max-width:760px){.headline-top .text-button{display:block;font-size:0}.headline-top .text-button::after{content:'try one ↻';font-size:11px}.headline-box textarea{min-height:180px;padding:8px 8px 35px}.photo-picker{top:auto;bottom:5px;right:5px}}