:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202723;background:#f8f9f8;font-synthesis:none;font-size:14px;letter-spacing:0;--line:#e2e6e3;--muted:#707972;--green:#27674e;--red:#a43a35}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:3px solid #87b9a0;outline-offset:3px}button svg{flex-shrink:0;width:17px;height:17px;stroke-width:1.8}[hidden]{display:none!important}.site-header{height:76px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit;font-size:17px;font-weight:650}.brand-icon{width:34px;height:34px;border-radius:6px;background:#252f29;color:#fff;display:grid;place-items:center}.brand-icon svg{width:21px;height:21px;stroke-width:1.6}.connection{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.status-dot{width:7px;height:7px;border-radius:50%;background:#a4aaa6}.connection.online .status-dot{background:#4b8d68}.connection.offline .status-dot{background:#c27b53}.connection.asleep .status-dot{background:#c94a3d}.connection.warming .status-dot{background:#e8963a;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.studio{max-width:1760px;margin:auto;display:grid;grid-template-columns:304px minmax(0,1fr);min-height:calc(100dvh - 76px)}.sidebar{background:#fff;border-right:1px solid var(--line);padding:30px 24px 24px;display:flex;flex-direction:column;min-width:0}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-title h1{font-size:15px;font-weight:600;margin:0}.eyebrow{font-size:11px;color:#929b94;font-variant-numeric:tabular-nums}.source-frame{height:240px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f0f2f0;border:1px solid var(--line);border-radius:5px;cursor:pointer}.source-frame img{width:100%;height:100%;object-fit:contain}.source-frame.empty{border:1px dashed #b8c3bb}.drop-overlay{position:absolute;inset:0;background:#e9f0ecf5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .15s;color:var(--green);font-weight:600}.drop-overlay svg{width:27px;height:27px}.source-frame.dragging .drop-overlay{opacity:1}.file-details{display:flex;flex-direction:column;gap:5px;padding:13px 0 16px;min-height:65px;min-width:0}#file-name{font-size:12px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#input-size{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.button{border:1px solid transparent;border-radius:5px;height:41px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 15px;font-weight:550;font-size:12px;white-space:nowrap;transition:background .12s,border-color .12s}.button.secondary{border-color:#d7ddd8;background:white;color:#344039}.button.secondary:hover{background:#f4f6f4;border-color:#aebbb1}.button.primary{color:white;background:var(--green)}.button.primary:hover:not(:disabled){background:#1b513c}.button.dark{color:white;background:#29352d}.button.dark:hover:not(:disabled){background:#111b15}.button.quiet{background:transparent;color:var(--muted)}.button.quiet:hover{color:#222;background:#f1f4f2}.button.danger{background:var(--red);color:white}.full{width:100%}.file-types{font-size:10px;text-align:center;color:#8a938c;margin:11px 0 0}.file-types span{margin:0 3px}.sidebar-divider{height:1px;background:var(--line);margin:26px 0}.sidebar-bottom{display:flex;gap:9px;align-items:flex-start;color:#889189;margin-top:auto;padding-top:38px}.sidebar-bottom svg{width:13px;height:13px;margin-top:3px;flex-shrink:0}.sidebar-bottom p{font-size:10px;line-height:1.7;margin:0}.workspace{padding:28px 38px 17px;min-width:0;display:flex;flex-direction:column}.workspace-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.portrait-title{display:flex;align-items:center;gap:10px;min-width:0}h2{font-size:20px;font-weight:600;margin:0}.badge{font-size:10px;padding:4px 7px;color:#827052;background:#eee9de;border-radius:4px}.badge.ready{background:#e7f0ea;color:#37714f}.result-actions{display:flex;gap:10px;align-items:center}.icon-button{height:34px;width:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:4px;color:#717a73}.icon-button:hover:not(:disabled){background:#e8ece9;color:#293b2e}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.segmented{display:flex;padding:3px;border:1px solid #e0e5e1;border-radius:5px;background:#ecefec}.segmented button{height:28px;min-width:83px;border:0;background:transparent;color:#778079;font-size:11px;border-radius:3px;padding:0 11px}.segmented button[aria-pressed=true]{background:white;box-shadow:0 1px 3px #14221b12;color:#29352d}.stage{height:calc(100dvh - 258px);min-height:460px;max-height:1000px;border:1px solid #e1e5e2;border-radius:5px;background:#f0f2ef;display:flex;justify-content:center;position:relative;overflow:hidden;padding:22px;gap:22px}.portrait-image,.compare-source{min-width:0;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;position:relative}.portrait-image img,.compare-source img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 3px 18px #263b2e08;cursor:zoom-in}.canvas-label{position:absolute;top:0;left:0;font-size:10px;color:#69776b;z-index:1;background:#f0f2efe6;padding:4px 7px;border-radius:3px}.stage.compare{padding-top:40px;gap:32px}.stage.compare .compare-source{border-right:1px solid #dce2dc;padding-right:26px}.stage.compare .canvas-label{top:-25px}.stage-state{align-self:center;text-align:center;padding:24px;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted)}.state-symbol{display:grid;place-items:center;width:54px;height:54px;color:#8f9f91;border:1px solid #d6dfd6;border-radius:8px;background:#f7f9f6;margin-bottom:4px}.state-symbol svg{width:25px;height:25px;stroke-width:1.3}.stage-state h3{font-size:16px;font-weight:500;color:#4a5b4d;margin:0}.stage-state>span:last-child{font-size:12px;line-height:1.7}.wake-bar{display:block;width:220px;max-width:100%;height:5px;border-radius:3px;background:#dfe7e0;overflow:hidden;margin:2px 0}.wake-bar span{display:block;height:100%;width:0;background:#4c8458;transition:width 1.4s linear}.working-mark{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:11px;color:#566b58;white-space:nowrap}.spinner{border:1.5px solid #b7cbb9;border-top-color:#376548;border-radius:50%;width:14px;height:14px;display:inline-block;animation:spin .9s linear infinite}.state-symbol .spinner{width:25px;height:25px;border-width:2px}.canvas-footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#8c958e;padding:14px 2px 0;font-variant-numeric:tabular-nums}.dot-separator{margin:0 6px}.job-progress{margin-top:25px}.progress-heading{display:flex;gap:8px;justify-content:space-between;font-size:11px;font-weight:550;color:#3d5945}.progress-heading #elapsed{font-variant-numeric:tabular-nums;font-weight:400;color:#7b8a7e}.steps{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:15px}.steps li{display:flex;gap:10px;align-items:center;color:#9ba49d;font-size:11px}.step-icon{border:1px solid #d4dcd6;border-radius:50%;width:17px;height:17px;display:grid;place-items:center;flex-shrink:0}.step-icon svg{width:11px;height:11px;visibility:hidden}.steps li.done{color:#496f53}.steps li.done .step-icon{background:#e4eee6;border-color:#e4eee6}.steps li.done svg{visibility:visible}.steps li.current{color:#35613f}.steps li.current .step-icon{border:4px solid #deeade;background:#4c8458}.error-box{display:flex;gap:8px;align-items:flex-start;color:#963b31;background:#f9eeeb;border:1px solid #efdbd4;padding:12px;margin-top:15px;border-radius:5px;font-size:11px;line-height:1.6}.error-box svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}.viewer{border:1px solid #d5ddd6;border-radius:6px;padding:0;width:calc(100vw - 60px);height:calc(100dvh - 60px);max-width:1800px;max-height:none;background:#e9ede9}.viewer::backdrop,.login-dialog::backdrop,.confirm-dialog::backdrop{background:#1c2828a6}.viewer header{height:60px;background:white;border-bottom:1px solid var(--line);padding:0 20px;display:flex;align-items:center;justify-content:space-between;font-size:13px}.viewer-actions{display:flex;gap:6px;align-items:center}#zoom-value{font-size:11px;width:40px;text-align:center;color:var(--muted)}#viewer-scroll{overflow:auto;height:calc(100% - 60px);display:flex;align-items:flex-start;justify-content:flex-start;padding:24px}#viewer-image{display:block;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}#viewer-image.zoomed{max-width:none;max-height:none;width:var(--zoom-width);margin:auto}.login-dialog,.confirm-dialog{border:1px solid #dce4dc;border-radius:8px;padding:32px;width:min(400px,calc(100vw - 40px));color:#26362b}.login-symbol{margin-bottom:20px;color:var(--green)}.login-symbol svg{width:25px;height:25px}.login-dialog h2{margin-bottom:25px}.login-dialog label{font-size:12px;display:block;margin-bottom:8px}.login-dialog input{width:100%;height:42px;border:1px solid #cbd7cd;border-radius:4px;padding:0 12px}.login-dialog p{font-size:12px;color:var(--red);min-height:18px;margin:10px 0}.confirm-dialog h2{font-size:18px}.confirm-dialog p{font-size:12px;line-height:1.7;color:var(--muted);margin:14px 0 24px}.confirm-dialog>div{display:flex;gap:10px;justify-content:flex-end}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#253b2e;color:white;padding:12px 18px;border-radius:5px;font-size:12px;box-shadow:0 3px 16px #0002;z-index:10;max-width:calc(100vw - 32px);text-align:center}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){.studio{grid-template-columns:326px minmax(0,1fr)}.sidebar{padding:34px 30px}.source-frame{height:265px}.workspace{padding:30px 48px 20px}.stage{height:calc(100dvh - 262px)}}
@media(max-width:1000px){.site-header{padding:0 24px;height:66px}.studio{grid-template-columns:260px minmax(0,1fr);min-height:calc(100dvh - 66px)}.sidebar{padding:25px 18px}.source-frame{height:215px}.workspace{padding:24px 22px 16px}.stage{height:calc(100dvh - 245px);padding:16px;min-height:420px}.stage.compare{gap:14px}.stage.compare .compare-source{padding-right:14px}.workspace-heading{margin-bottom:20px}.portrait-title h2{font-size:18px}.result-actions{gap:3px}.result-actions .button{padding:0 10px;height:37px}}
@media(max-width:700px){.site-header{height:62px;padding:0 18px}.brand{font-size:15px}.brand-icon{width:30px;height:30px}.connection{font-size:10px;gap:6px}.studio{display:flex;flex-direction:column;min-height:calc(100dvh - 62px)}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:20px;display:grid;grid-template-columns:90px minmax(0,1fr);column-gap:16px;align-items:center}.section-title{grid-column:1/-1;margin-bottom:14px}.source-frame{grid-column:1;grid-row:2/5;height:106px;width:90px}.file-details{grid-column:2;grid-row:2;padding:0;min-height:36px;gap:3px}.sidebar #choose{grid-column:2;grid-row:3;height:34px;justify-self:start;width:auto;padding:0 12px;margin-top:8px}.file-types{grid-column:2;grid-row:4;text-align:left;margin:7px 0 0;font-size:9px}.sidebar-divider{grid-column:1/-1;margin:18px 0 16px}.sidebar #generate{grid-column:1/-1;height:42px}.sidebar #cancel,.job-progress,.error-box{grid-column:1/-1}.sidebar-bottom{display:none}.job-progress{margin-top:17px}.steps{display:none}.workspace{padding:20px 16px 15px}.workspace-heading{margin-bottom:17px;gap:6px}.portrait-title{gap:7px}.portrait-title h2{font-size:17px}.badge{font-size:9px;padding:3px 5px}.result-actions .button{font-size:11px;height:35px;gap:6px;padding:0 10px}.result-actions .icon-button{width:28px}.stage{height:470px;min-height:350px;padding:14px}.stage.compare{height:350px;min-height:300px;gap:10px}.stage.compare .compare-source{padding-right:10px}.canvas-footer{font-size:9px}.viewer{width:calc(100vw - 20px);height:calc(100dvh - 20px)}.viewer header{padding:0 12px}.viewer-actions{gap:1px}#viewer-scroll{padding:12px}.stage-state h3{font-size:15px}.stage-state{padding:12px}.button.quiet{height:31px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}

/* Keep the artwork dominant; the wordmark is the only display typography. */
:root{color:#242623;background:#f7f8f7;--green:#344d40;--line:#e1e4e0;--muted:#737971}
.site-header{height:80px;padding:0 36px}
.brand{display:inline-flex;align-items:baseline;gap:0;font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:400;line-height:1;letter-spacing:0}
.brand-period{color:#738778}
.studio{min-height:calc(100dvh - 80px)}
.button.primary:hover:not(:disabled){background:#253d30}
.button.dark{background:#272b27}
.workspace h2{font-size:19px;font-weight:500}
.badge{background:#eceee8;color:#717864}
.stage{background:#eef0ed;border-color:#e1e4df;border-radius:3px}
.segmented{background:#eef0ed;box-shadow:none}
.segmented button[aria-pressed=true]{box-shadow:0 1px 2px #00000008}
.source-frame,.button{border-radius:4px}
@media(max-width:1000px){.site-header{height:68px;padding:0 24px}.studio{min-height:calc(100dvh - 68px)}.brand{font-size:30px}}
@media(max-width:700px){
  .site-header{height:66px;padding:0 20px}.brand{font-size:29px}.studio{min-height:calc(100dvh - 66px)}
  .sidebar{padding:19px 20px}.workspace{padding:20px 16px 16px}
  .workspace h2{font-size:17px}.stage{height:auto;aspect-ratio:1;min-height:0;padding:14px}
  .stage.compare{height:auto;aspect-ratio:1.15;min-height:0;padding-top:40px}
  .stage-state{max-width:100%}.stage-state>span:last-child{font-size:11px}
  .working-mark{bottom:16px}.viewer header>span{font-size:12px;white-space:nowrap}
}
@media(max-width:380px){
  .sidebar{padding:17px 16px;column-gap:13px}.site-header{padding:0 16px}
  .workspace h2{font-size:16px}.result-actions #print{width:35px;padding:0}
  #print>span{display:none}.workspace-heading{gap:10px}
  .viewer header{padding:0 10px}.viewer-actions .icon-button{width:29px}
  .stage-state h3{font-size:14px}.working-mark{font-size:10px}
}

/* FOTOCOPIE wordmark: white and yellow letters need a black header. */
.site-header{background:#111;border-bottom-color:#111}
.brand-logo{display:block;height:28px;width:auto}
.site-header .connection,.site-header .account-email{color:#a9aea9}
.site-header .icon-button{color:#c4c8c4}.site-header .icon-button:hover:not(:disabled){background:#2a2c2a;color:#fff}
@media(max-width:1000px){.brand-logo{height:24px}}
@media(max-width:700px){.brand-logo{height:20px}}

/* The stage shows the 60 x 75 cm crop, so it is portrait-shaped on phones. */
@media(max-width:700px){.stage:not(.compare){aspect-ratio:.8}}