@font-face{font-family:Jost;src:url('./assets/jost-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('./assets/eb-garamond-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#fff;--workspace:#f6f6f4;--header:#edebe9;--ink:#252623;--muted:#73746f;--line:#deded8;--soft:#eeeDEA;--error:#963d30;color-scheme:light;font-family:Jost,Arial,sans-serif;font-size:16px;font-weight:400;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,input,select{font:inherit;font-weight:400;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
button,select,a,input{-webkit-tap-highlight-color:transparent}
button,a,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #5a6656;outline-offset:4px}
button{border:0;background:none}
input[type=text],select{width:100%;height:46px;border:1px solid #c9cac4;border-radius:2px;background:#fff;padding:10px 13px;font-size:16px}
input::placeholder{color:#90918a;opacity:1}
h1,h2,p,figure{margin:0;font-weight:400}
h2{font-size:17px;line-height:1.45}
svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
.app-header{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 30px;border-bottom:1px solid var(--line);background:var(--paper)}
.app-header h1{font-family:'EB Garamond',Georgia,serif;font-size:34px;line-height:1;letter-spacing:-.6px;white-space:nowrap}
.app-header p{font-size:14px}
.studio{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start}
.editor{background:var(--paper);border-right:1px solid var(--line);height:calc(100dvh - 72px);display:flex;flex-direction:column;overflow:hidden}
.editor-fields{padding:28px 28px 0;min-height:0;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d6d6cf transparent}
.section-title{font-size:17px;display:block;margin-bottom:14px}
.article-section{padding-bottom:30px}
.image-section{border-top:1px solid var(--line);padding:25px 0 29px;transition:background .15s ease}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.section-heading>span{font-size:14px;white-space:nowrap}
.upload-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:108px;width:100%;border:1px dashed #a9aba3;border-radius:2px;transition:background .15s ease}
.upload-button:not(:disabled):hover,.sheet-add:hover{background:#f5f4f1}
.upload-button .plus-icon{height:25px;width:25px}
.upload-button:disabled{opacity:.48}
.helper{font-size:13px;line-height:1.55;color:var(--muted);margin-top:10px}
.export-section{border-top:1px solid var(--line);padding:24px 0 25px;margin:0 28px;flex:none}
.select-wrap{position:relative}
select{appearance:none;padding-right:38px}
.select-wrap>svg{position:absolute;right:13px;top:13px;pointer-events:none;width:19px;height:19px}
.download-bar{padding-top:25px}
.download-button{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff;border-radius:2px;padding:13px 16px;font-size:16px;transition:background .15s ease}
.download-button:not(:disabled):hover{background:#41443c}
.download-button:disabled{background:#b8b9b3;color:#fff}
.export-helper{font-size:12px}
.workspace{height:calc(100dvh - 72px);min-height:530px;background:var(--workspace);padding:26px 44px 30px;display:flex;flex-direction:column;align-items:center}
.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:24px;min-height:26px}
.preview-heading h2{font-size:19px}
.preview-heading>span{color:var(--muted);font-size:13px}
.preview-figure{width:min(100%,calc(100dvh - 190px),780px);margin:auto 0}
.sheet-frame{position:relative;aspect-ratio:1;background:#fff;box-shadow:0 2px 18px #25262313;isolation:isolate}
#preview{width:100%;height:100%;display:block}
.sheet-add{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px;text-align:center;font-size:16px;line-height:1.4;color:var(--ink);transition:background .15s ease}
.sheet-add>svg{height:28px;width:28px}
.sheet-add-photos{left:0;top:0;width:34%;height:100%;background:#f0efed}
.sheet-add-variants{left:34%;top:10%;width:66%;height:90%;background:#fff}
figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted);padding-top:14px}
.image-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.image-list:not(:empty){margin-bottom:18px}
.image-list:not(:empty)+.upload-button{min-height:44px;flex-direction:row;gap:8px;font-size:14px}
.image-list:not(:empty)+.upload-button .plus-icon{width:16px;height:16px}
.image-row{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;min-width:0;align-items:start}
.thumb{width:58px;height:64px;object-fit:contain;background:#f5f4f2;display:block;border-radius:1px}
.photo-thumb-button{padding:0;text-align:left}
.photo-thumb-button .thumb{object-fit:cover}
.row-content{min-width:0}
.row-label{display:block;font-size:14px;margin-top:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.row-filename{font-size:11px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.color-input{height:36px!important;padding:6px 9px!important;font-size:16px!important}
.row-actions{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:3px}
.order-buttons{display:flex;gap:0;align-items:center}
.icon-button{display:inline-flex;align-items:center;justify-content:center;padding:6px;min-width:32px;min-height:32px;color:#60625a;border-radius:2px}
.icon-button svg{width:16px;height:16px}
.icon-button:not(:disabled):hover{background:#efefeb;color:var(--ink)}
.icon-button:disabled{opacity:.22}
.text-button{color:#575b50;min-height:32px;font-size:12px;padding:4px 2px;text-decoration:underline;text-underline-offset:3px}
.text-button:hover{color:var(--ink)}
.drag-over{outline:2px dashed #6f7968;outline-offset:-4px;background:#e9ece5!important}
.save-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding-top:9px;font-size:13px}
.save-actions a{color:inherit;text-underline-offset:3px}
.save-actions .text-button{font-size:13px}
.status{margin-top:17px;font-size:13px;line-height:1.5;padding:12px 0 2px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.status.error{color:var(--error)}
dialog{border:1px solid var(--line);border-radius:3px;padding:22px;width:min(420px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow-y:auto;color:var(--ink);background:#fff}
dialog::backdrop{background:#25262355}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}
.dialog-heading h2{font-family:'EB Garamond',Georgia,serif;font-size:27px}
.crop-preview-wrap{padding:12px;display:flex;justify-content:center;align-items:center;min-height:150px;background:var(--workspace);margin-bottom:18px;max-height:38dvh}
#crop-preview{display:block;max-width:100%;max-height:calc(38dvh - 24px);width:auto;height:auto;background:#fff}
dialog label{display:block;font-size:14px;margin-bottom:7px}
dialog .range-label{margin-top:18px;margin-bottom:3px}
input[type=range]{width:100%;accent-color:#505548;min-height:28px;cursor:pointer}
input[type=range]:disabled{opacity:.3}
dialog .download-button{margin-top:17px}
noscript{display:block;padding:25px;color:var(--error)}
@media(min-width:1500px){.workspace{padding-left:60px;padding-right:60px}}
@media(max-width:1000px) and (min-width:761px){.studio{grid-template-columns:290px minmax(0,1fr)}.editor-fields{padding:24px 24px 0}.export-section{margin:0 24px}.workspace{padding:25px}.sheet-add{font-size:14px}}
@media(max-width:760px){
  .app-header{height:65px;padding:0 20px;gap:10px}.app-header h1{font-size:29px}.app-header p{max-width:135px;font-size:11px;line-height:1.4;text-align:right}
  .studio{display:flex;flex-direction:column}.workspace{order:0;height:auto;min-height:0;width:100%;padding:18px 20px 22px;border-bottom:1px solid var(--line)}
  .preview-heading{margin-bottom:13px}.preview-heading h2{font-size:16px}.preview-heading>span{font-size:11px}.preview-figure{width:min(100%,550px);margin:0}
  .sheet-add{font-size:12px;gap:10px;padding:6px}.sheet-add>svg{height:23px;width:23px}figcaption{font-size:11px;padding-top:11px}
  .editor{order:1;width:100%;height:auto;max-height:none;display:block;overflow:visible;border:0;padding:24px 20px calc(132px + env(safe-area-inset-bottom));}
  .editor-fields{padding:0;overflow:visible;min-height:auto;flex:none}
  .article-section{padding-bottom:23px}.section-title{font-size:16px;margin-bottom:11px}.image-section{padding:21px 0 24px}.section-heading h2{font-size:16px}.section-heading{margin-bottom:14px}
  .upload-button{min-height:92px;gap:8px}.helper{font-size:12px}.export-section{padding-top:21px;margin:0}
  .download-bar{position:fixed;z-index:5;bottom:0;left:0;right:0;padding:12px 20px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
  .download-button{min-height:48px}.export-helper{margin-top:5px;font-size:11px;text-align:center}.save-actions{padding-top:7px;justify-content:center}
  .image-row{grid-template-columns:62px minmax(0,1fr);gap:14px}.thumb{width:62px;height:74px}.row-actions{margin-top:3px;justify-content:flex-start;gap:8px}.order-buttons{gap:3px}.row-actions>.icon-button:last-child{margin-left:auto}
  .icon-button{min-width:44px;min-height:40px}.text-button{font-size:13px;min-height:40px;padding:7px}.row-filename{font-size:12px}.color-input{height:40px!important}.status{padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Design controls and flexible canvases. */
.studio{grid-template-columns:350px minmax(0,1fr)}
.editor-fields{padding:25px 25px 0}
.export-section{margin:0 25px;padding:19px 0 18px}
.download-bar{padding-top:18px}
.preview-figure{--canvas-ratio:1;width:min(100%,calc((100dvh - 205px)*var(--canvas-ratio)),950px)}
.sheet-frame{aspect-ratio:1}
.settings-section{border-top:1px solid var(--line)}
.settings-section summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:17px;touch-action:manipulation}
.settings-section summary::-webkit-details-marker{display:none}
.settings-section summary::after{content:'+';font-size:22px;font-weight:400;color:var(--muted)}
.settings-section[open] summary::after{content:'−'}
.settings-section summary:focus-visible{outline:2px solid #5a6656;outline-offset:-2px}
.settings-content{padding-bottom:24px}
.settings-content>label{display:block;font-size:14px;margin:18px 0 8px}
.settings-content>label:first-child{margin-top:0}
.settings-content select{appearance:auto;padding-right:10px;font-size:15px}
.control-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:19px;margin-bottom:3px;font-size:14px}
.control-title output{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.settings-content input[type=range]{min-height:36px;margin:0;display:block}
.settings-content input[type=range]+.helper{margin-top:2px}
.settings-content .check-label{display:flex;align-items:center;gap:10px;margin-top:14px;margin-bottom:0;min-height:34px}
.check-label input{width:19px;height:19px;accent-color:#505548;flex:none}
.type-heading{margin-top:24px;padding-top:21px;border-top:1px solid var(--line);font-size:16px}
.color-control{display:flex;gap:10px;align-items:center}
input[type=color]{width:49px;height:46px;flex:none;background:#fff;border:1px solid #c9cac4;padding:4px;border-radius:2px;cursor:pointer}
.color-control input[type=text]{min-width:0;font-variant-numeric:tabular-nums;font-size:15px}
.settings-content .text-color{display:block;width:100%;max-width:100%;height:38px}
.two-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px}
.two-controls>label{display:block;font-size:13px;min-width:0}
.two-controls select,.two-controls input{display:block;margin-top:7px;width:100%;min-width:0}
input[type=number]{height:42px;border:1px solid #c9cac4;background:#fff;border-radius:2px;padding:8px 10px;font-size:16px;font-variant-numeric:tabular-nums}
input[aria-invalid=true]{border-color:var(--error)}
.outline-button{border:1px solid var(--line);min-height:44px;padding:10px 12px;width:100%;margin-top:24px;font-size:14px}
.outline-button:hover{background:var(--workspace)}
.individual-size{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted);margin-top:3px}
.individual-size input[type=range]{min-width:0;flex:1;min-height:28px;margin:0}
.individual-size output{min-width:30px;text-align:right;font-variant-numeric:tabular-nums}
#export-dimensions{font-size:12px;margin-top:8px}
#custom-dimensions{margin-top:12px}
#reset-design{margin-top:10px;padding-left:0}
@media(max-width:1000px) and (min-width:761px){.studio{grid-template-columns:310px minmax(0,1fr)}.editor-fields{padding:22px 22px 0}.export-section{margin:0 22px}.workspace{padding:24px}}
@media(max-width:760px){
 .workspace{position:sticky;top:0;z-index:2;padding:13px 20px 15px;box-shadow:0 3px 12px #25262308}
 .preview-figure{width:min(100%,calc(38dvh*var(--canvas-ratio)),550px)}
 .preview-heading{margin-bottom:10px;min-height:20px}
 .preview-figure figcaption{font-size:11px;padding-top:9px}
 .editor-fields{padding:0}
 .editor{padding-top:22px;padding-bottom:calc(160px + env(safe-area-inset-bottom))}
 .settings-section summary{font-size:16px;min-height:60px}
 .settings-content select{font-size:16px}
 .settings-content input[type=range]{min-height:44px}
 .individual-size input[type=range]{min-height:40px}
 .individual-size{font-size:12px}
 .export-section{margin:0;padding-top:21px}
 .download-bar{padding-top:12px}
 .workspace .sheet-add{font-size:11px;gap:7px}
 .workspace .sheet-add>svg{height:21px;width:21px}
}
@media(max-height:700px) and (min-width:761px){.export-section{padding-top:13px;padding-bottom:13px}.export-section .section-title{margin-bottom:9px}.download-bar{padding-top:12px}.status{margin-top:8px;padding-top:8px}}

.quality-note{padding:9px 11px;background:#f5f4f1;border-left:2px solid #b5b8ac;font-size:12px;line-height:1.5}
@media(max-width:760px){.app-header p{max-width:155px}}

/* Upload first, with recovery and clear progress at the download action. */
.article-heading{margin-bottom:10px;gap:10px}.article-heading .section-title{margin-bottom:0}
.article-heading .text-button{white-space:nowrap;padding-right:0}
.app-version{display:inline-block;margin-left:8px;color:var(--muted);font-size:11px;white-space:nowrap}
input::placeholder{color:#72756c}
.status{max-height:110px;overflow-y:auto;scrollbar-width:thin}
.status .text-button{margin-left:8px;color:var(--ink);font-size:13px}
.dialog-copy{font-size:15px;line-height:1.55;margin-top:13px;color:var(--muted)}
.dialog-actions{display:flex;gap:12px;align-items:stretch;margin-top:20px}
.dialog-actions .outline-button,.dialog-actions .download-button{margin:0;flex:1;width:auto;font-size:14px}
#new-article-dialog h2{font-family:'EB Garamond',Georgia,serif;font-size:28px}
@media(max-width:760px){
 .download-bar .status{margin-top:8px;padding-top:8px;padding-bottom:0;font-size:12px;line-height:1.4;max-height:92px;text-align:left}
 .article-heading .text-button{font-size:13px;padding-top:0;padding-bottom:0}
 .app-version{margin-left:4px;font-size:10px}
 input,select,button{scroll-margin-top:calc(40dvh + 75px);scroll-margin-bottom:160px}
 .dialog-actions button{min-height:46px}
}
@media(max-width:760px) and (max-height:650px){.preview-figure{width:min(100%,calc(26dvh*var(--canvas-ratio)),550px)}}

.upload-button{min-height:56px;flex-direction:row;gap:10px;font-size:15px}
.upload-button .plus-icon{width:19px;height:19px}
.article-section{padding-bottom:20px}
.image-section{padding:16px 0 18px}
.image-section .section-heading{margin-bottom:12px}
.image-section .helper{font-size:12px;margin-top:8px}
.export-section{padding-top:16px;padding-bottom:14px}
.export-section .section-title{margin-bottom:10px}
.download-bar{padding-top:12px}
.text-button:disabled{opacity:.45;cursor:default}
@media(max-width:760px){.upload-button{min-height:56px}.article-section{padding-bottom:20px}.image-section{padding:18px 0 20px}}