@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--sand:#e5dac7;--ink:#292b26;--red:#ab1939;--line:#c9bfac;--muted:#79786d;--paper:#f5f1e8;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);font-size:12px}*{box-sizing:border-box}body{margin:0;background:#c7c7bf;display:flex;height:100dvh;overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button{border:0;background:none}button:disabled{opacity:.4;cursor:wait}button:focus-visible,input:focus-visible,label:has(input:focus-visible){outline:2px solid var(--red);outline-offset:3px}button:hover{color:var(--red)}.sidebar{width:292px;flex-shrink:0;background:var(--sand);overflow-y:auto;border-right:1px solid #bfb6a4;scrollbar-width:thin}.brand{padding:31px 25px 26px;border-bottom:1px solid var(--line);text-align:center}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:600}.brand .eyebrow{font-size:7px;letter-spacing:1.2px}.wordmark{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:800;letter-spacing:-1px;font-size:49px;line-height:1.2;margin-top:10px;position:relative}.wordmark span{font:22px Georgia;display:block;color:var(--red);line-height:24px}.brand h1{font-size:10px;letter-spacing:3px;margin:12px 0 8px}.brand p{font-size:10px;color:var(--muted);margin:0}.sidebar section{padding:22px 22px 19px;border-bottom:1px solid var(--line)}.section-title{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.9px;font-weight:700;margin-bottom:16px}.section-title>span{letter-spacing:.8px;font-size:8px;color:var(--muted)}.upload-zone{border:1px dashed #aaa18e;display:flex;align-items:center;flex-direction:column;padding:13px 6px 16px;cursor:pointer;background:#ffffff16;transition:.2s}.upload-zone:hover,.upload-zone.dragover{background:#fff5;border-color:var(--red)}.upload-zone .upload-icon{font-size:26px;color:var(--red);margin-bottom:6px}.upload-zone strong{font-size:12px;margin-bottom:5px}.upload-zone>span:not(.upload-icon){font-size:10px;color:#66685e}.upload-zone small{font-size:8px;color:#858173;margin-top:9px}.photo-actions{display:flex;justify-content:space-between;margin:10px 0}.photo-actions button{font-size:9px;padding:3px 0;text-decoration:underline;text-underline-offset:3px}.photo-actions button:last-child{color:var(--muted)}.library{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-height:200px;overflow:auto}.library:empty{display:none}.photo-thumb{position:relative;height:55px}.photo-thumb img{width:100%;height:100%;object-fit:cover}.photo-thumb button{position:absolute;background:#252720b0;color:white;padding:1px 4px;bottom:2px;right:2px;font-size:15px}.photo-thumb button.active{color:#f8df87}.photo-thumb .remove{top:0;bottom:auto;opacity:0;font-size:12px}.photo-thumb:hover .remove,.photo-thumb:focus-within .remove{opacity:1}.hint{font-size:9px;line-height:1.6;color:var(--muted);margin:10px 0 0}.dimensions{display:flex;align-items:center;gap:8px}.dimensions label{font-size:7px;letter-spacing:1px;color:var(--muted)}.dimensions input{display:block;width:64px;border:1px solid transparent;background:#f5f0e6;margin-top:5px;padding:8px;font-size:13px;color:var(--ink);border-radius:1px}.dimensions>span{margin-top:13px;color:var(--muted)}.icon-button{font-size:23px;margin-top:10px}.page-row,.paper-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:10px}.stepper{display:flex;align-items:center;border:1px solid #b6ad9a}.stepper button{padding:4px 9px}.stepper output{min-width:25px;text-align:center;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:4px}.swatches{display:flex;gap:9px;align-items:center}.swatch,.custom-color{width:18px;height:18px;border-radius:50%;background:var(--color);border:1px solid #0001;position:relative}.swatch.active{outline:1px solid var(--red);outline-offset:3px}.custom-color{background:conic-gradient(#d8b488,#7b8b6f,#a4414e,#d8b488);color:#fff;text-align:center;font-size:16px;overflow:hidden}.custom-color input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.checkbox{display:flex;gap:7px;align-items:center;font-size:8px;letter-spacing:.8px;text-transform:uppercase;margin-top:17px}.checkbox input{accent-color:var(--red);width:12px;height:12px;margin:0}.segmented{display:flex;border:1px solid #aaa18f}.segmented button{flex:1;font-size:8px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;padding:9px 3px;border-right:1px solid #aaa18f}.segmented button:last-child{border:0}.segmented button.active{background:var(--ink);color:#f5f0e6}.range-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-top:20px}.range-label output{color:var(--muted);font-size:9px;text-transform:none;letter-spacing:0;font-weight:400}input[type=range]{width:100%;accent-color:var(--red);height:3px;display:block;margin:13px 0 3px;cursor:pointer}.sidebar-footer{padding:17px 21px;display:flex;align-items:center;gap:6px;font-size:8px;color:var(--muted)}.status-dot{width:5px;height:5px;background:#70825c;border-radius:50%}.sidebar-footer button{margin-left:auto;font-size:9px}main{display:flex;flex-direction:column;flex:1;min-width:0}.topbar{height:75px;flex-shrink:0;background:var(--paper);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 32px;gap:20px}.project-title{display:flex;align-items:center;gap:18px;min-width:0}.project-title .eyebrow{color:#949486;font-size:8px;white-space:nowrap}.project-title input{background:none;border:0;font-size:16px;letter-spacing:-.5px;max-width:230px;min-width:50px;width:100%;text-overflow:ellipsis}.top-actions{display:flex;gap:18px;align-items:center}.quiet{font-size:19px;white-space:nowrap}.quiet span{font-size:10px;margin-left:4px}.button{background:var(--red);color:#fff5e8;font-size:9px;font-weight:600;letter-spacing:1px;padding:13px 18px;white-space:nowrap;display:inline-flex;justify-content:space-between;gap:25px;align-items:center}.button:hover{background:#8c1230;color:white}.button.outline{background:transparent;border:1px solid #a59e8b;color:var(--ink)}.button.outline:hover{border-color:var(--red);color:var(--red)}.variation-bar{background:var(--sand);display:flex;align-items:center;padding:18px 32px;gap:22px;border-bottom:1px solid #b8b3a4;min-height:113px}.variation-bar .eyebrow{font-size:7px;color:var(--muted)}.variations{display:flex;gap:9px;margin-top:7px}.variation{padding:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.variation canvas{width:70px;height:45px;object-fit:contain;background:#fff;border:3px solid transparent;outline:1px solid #aaa18f}.variation.active canvas{outline:2px solid var(--red)}.variation span{font-size:7px;letter-spacing:1px;color:var(--muted)}.variation.active span{color:var(--red)}.variation-bar>.button{padding:10px 12px;letter-spacing:.6px;font-size:8px;margin-top:8px}.placed{font-size:9px;color:var(--muted);margin-left:auto;line-height:1.6}.workspace{flex:1;overflow:auto;padding:20px 35px 50px;background-color:#c7c7bf;background-image:radial-gradient(#7e807b33 .6px,transparent .6px);background-size:7px 7px;position:relative}.workspace-heading{display:flex;justify-content:space-between;align-items:center;color:#62655c;font-size:8px;letter-spacing:1px;margin-bottom:24px}.workspace-heading>div{display:flex;align-items:center;gap:12px;letter-spacing:0}.workspace-heading button{padding:3px;font-size:12px}.workspace-heading output{font-size:9px}.empty-state{text-align:center;max-width:440px;margin:9vh auto}.empty-art{width:145px;height:110px;position:relative;margin:0 auto 30px}.empty-art>span{position:absolute;width:76px;height:92px;border:6px solid #f5f1e8;box-shadow:0 2px 8px #34382a22;background:#a8ae9c;top:3px;left:12px;transform:rotate(-15deg)}.empty-art>span:nth-child(2){background:#b4947c;transform:rotate(12deg);left:57px;top:12px}.empty-art>span:nth-child(3){background:#d4c8af;transform:rotate(-3deg);left:32px;top:0}.empty-art b{position:absolute;left:63px;top:31px;font-size:30px;color:#877c65;font-weight:400}.empty-state .eyebrow{font-size:8px;color:#74796b}.empty-state h2,dialog h2{font-family:Georgia,serif;font-size:34px;font-weight:400;letter-spacing:-1.2px;margin:16px 0}.empty-state p{color:#6d7166;font-size:11px;line-height:1.9;margin:0 0 25px}.empty-state .button{display:inline-block}.text-button{display:block;font-size:9px;text-decoration:underline;text-underline-offset:4px;margin:17px auto;color:#6d7166}#boards{display:flex;flex-direction:column;gap:28px;align-items:center}.board-wrap{flex-shrink:0;max-width:none}.board{position:relative;box-shadow:0 8px 20px #34382a26;touch-action:none;overflow:hidden}.frame{position:absolute;overflow:hidden;cursor:grab;touch-action:none}.frame:active{cursor:grabbing}.frame img{position:absolute;pointer-events:none;user-select:none;max-width:none}.frame.selected{outline:3px solid var(--red);outline-offset:-3px;z-index:2}.frame .hero-mark{position:absolute;right:6px;top:4px;font-size:16px;color:#ffe4a3;text-shadow:0 1px 3px #000;pointer-events:none}.board.guides:after{content:'';position:absolute;inset:var(--guide-margin);border:1px dashed #cf355c99;pointer-events:none}.board-caption{font-size:7px;letter-spacing:2px;color:#73756c;margin-top:11px}.bottom-bar{background:var(--sand);padding:12px 25px;border-top:1px solid #b8b3a4;font-size:8px;color:#79796e;display:flex;justify-content:space-between;gap:10px}.bottom-bar b{font-size:7px;letter-spacing:1px;margin-right:12px;color:#5d6054}.bottom-bar button{font-size:8px;white-space:nowrap}.crop-tools{position:fixed;bottom:53px;left:calc(50% + 146px);transform:translateX(-50%);background:var(--paper);box-shadow:0 4px 24px #0003;padding:11px 14px;display:flex;gap:15px;align-items:center;z-index:5;border:1px solid #b5ad9a;white-space:nowrap}.crop-tools[hidden]{display:none}.crop-tools>span{font-size:9px;max-width:140px;overflow:hidden;text-overflow:ellipsis}.crop-tools button{font-size:10px}dialog{border:1px solid #b8ad98;background:var(--paper);color:var(--ink);padding:40px;width:480px;max-width:calc(100vw - 30px);box-shadow:0 15px 100px #0004}dialog::backdrop{background:#20231b70;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:15px;top:12px;font-size:22px}dialog h2{font-size:29px}dialog p{font-size:11px;color:var(--muted);line-height:1.7}.export-options{display:flex;flex-direction:column;gap:10px;margin-top:22px}.field-label{display:block;font-size:8px;letter-spacing:1px;margin-top:22px}select{display:block;width:100%;padding:12px;background:transparent;border:1px solid var(--line);margin-top:8px;font-size:11px}.export-options .button{padding:15px}.export-options+.hint{margin-top:16px}#export-status{font-size:10px;color:var(--red);margin-top:12px}#swap-library{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:50vh;overflow:auto}#swap-library img{width:100%;height:95px;object-fit:cover}#swap-library button{padding:0}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:white;padding:12px 20px;font-size:11px;z-index:20;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}@media(min-width:1500px){.sidebar{width:320px}.brand{padding-top:40px}.workspace{padding-left:65px;padding-right:65px}}@media(max-width:1050px){.sidebar{width:250px}.sidebar section{padding:18px}.topbar{padding:0 20px}.project-title .eyebrow{display:none}.variation-bar{padding:16px 20px;gap:15px}.variation canvas{width:54px;height:37px}.placed{display:none}.workspace{padding:18px 22px 40px}.crop-tools{left:calc(50% + 125px)}}@media(max-width:700px){body{height:auto;min-height:100dvh;overflow:auto;display:flex;flex-direction:column}.sidebar{width:100%;border:0;display:grid;grid-template-columns:1fr 1fr;overflow:visible}.brand{grid-column:1/-1;padding:20px}.wordmark{font-size:36px;margin-top:5px}.wordmark span{display:inline;margin-left:10px}.brand h1{margin:5px 0}.brand p,.brand>.eyebrow{display:none}.sidebar section{border-right:1px solid var(--line);padding:16px}.sidebar-footer{grid-column:1/-1}.library{max-height:115px;grid-template-columns:repeat(3,1fr)}.dimensions{gap:4px}.dimensions input{width:45px}.section-title{font-size:8px;letter-spacing:1px}.section-title>span{font-size:7px}.sidebar section:nth-of-type(1){grid-column:1/-1}.upload-zone{padding:12px}.upload-zone .upload-icon{display:none}.library{grid-template-columns:repeat(6,1fr)}.photo-thumb{height:55px}main{min-height:650px}.topbar{height:65px;padding:0 16px}.project-title input{font-size:14px;width:160px}.top-actions{gap:8px}.quiet span{display:none}.button{padding:12px;font-size:8px;gap:12px}.variation-bar{padding:16px;gap:14px;flex-wrap:wrap}.variation-bar>.button{margin:0}.variation canvas{width:53px;height:35px}.workspace{min-height:450px;padding:18px 15px 35px}.empty-state{margin:40px auto}.empty-state h2{font-size:28px}.bottom-bar b{display:none}.bottom-bar{padding:12px 15px}.crop-tools{left:50%;bottom:15px;gap:10px}.crop-tools>span{display:none}dialog{padding:30px}.range-label{letter-spacing:.4px}.segmented button{font-size:7px;letter-spacing:.2px}.paper-row{gap:5px}.swatches{gap:7px}}
@media print{body{display:block;height:auto;background:white;overflow:visible}.sidebar,.topbar,.variation-bar,.workspace-heading,.bottom-bar,.crop-tools,dialog,#toast{display:none!important}.workspace{padding:0;background:none;overflow:visible}#boards{gap:0;display:block}.board-wrap{break-after:page;margin:0;width:100%!important}.board{box-shadow:none!important}.board-caption{display:none}.frame.selected{outline:0}.hero-mark{display:none}}
.wordmark{white-space:nowrap;font-size:44px}@media(max-width:1050px) and (min-width:701px){.wordmark{font-size:39px}}@media(max-width:700px){.wordmark{font-size:36px}}

.frame .image-name{position:absolute;left:0;right:0;bottom:0;padding:3px 5px;background:rgba(0,0,0,.65);color:#fff;font-family:Arial,sans-serif;font-weight:400;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;user-select:none}

#composition{flex-wrap:wrap}#composition button{flex:1 0 30%}#composition button[data-mode=contact]{flex-basis:100%;border-top:1px solid #aaa18f;border-right:0}
.contact-name{position:absolute;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-weight:400;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;padding:0 3px}
.contact-sheet .frame{cursor:default}.contact-sheet .photo-thumb button:not(.remove),.contact-sheet #library-hint,.contact-sheet #hero,.contact-sheet label[for=hero],.contact-sheet #space,.contact-sheet label[for=space],.contact-sheet #variations,.contact-sheet .variation-bar>.button,.contact-sheet .bottom-bar{display:none}.contact-sheet .variation-bar{min-height:60px}

.contact-sheet .variation-bar .eyebrow{font-size:0}.contact-sheet .variation-bar .eyebrow:after{content:"CONTACT SHEET / PHOTO INDEX";font-size:8px}

.brand{background:#20211f;color:#e5dac7}.brand-logo{display:block;width:100%;max-width:250px;height:auto;margin:0 auto 22px}.brand p{color:#b9b3a5}@media(max-width:700px){.brand-logo{max-width:240px;margin-bottom:14px}}

.brand{background:var(--sand);color:var(--ink)}.brand p{color:#79786d}

.contact-sheet .photo-edit-hint{display:none}

.ai-crop-panel{margin-top:14px;padding-bottom:4px}.ai-crop-panel .button{width:100%;justify-content:center;padding:10px 6px;font-size:8px}.ai-crop-panel #ai-crop-status:not(:empty){color:var(--red)}

.frame-divider{position:absolute;z-index:4;touch-action:none;outline:none}.frame-divider.vertical{cursor:col-resize}.frame-divider.horizontal{cursor:row-resize}.frame-divider:before{content:'';position:absolute;background:var(--red);opacity:0;transition:opacity .15s}.frame-divider.vertical:before{left:4px;top:0;width:2px;height:100%}.frame-divider.horizontal:before{top:4px;left:0;height:2px;width:100%}.frame-divider:after{content:'';position:absolute;background:var(--paper);border:1px solid var(--red);box-shadow:0 1px 4px #0003;border-radius:5px}.frame-divider.vertical:after{left:2px;top:calc(50% - 10px);width:5px;height:20px}.frame-divider.horizontal:after{top:2px;left:calc(50% - 10px);height:5px;width:20px}.frame-divider:hover:before,.frame-divider:focus-visible:before,.frame-divider.dragging:before{opacity:1}.frame-divider:focus-visible:after,.frame-divider.dragging:after{background:var(--red)}#reset-frame-sizes{margin:8px 0 12px;padding:0;font-size:8px}@media print{.frame-divider{display:none!important}}