
.bg-main{max-width:1320px;margin:0 auto;padding:145px 32px 80px;color:#201d20}
.bg-heading{max-width:850px;margin-bottom:38px}.bg-heading>a{color:#514b51;text-underline-offset:4px;font-size:.9rem}.bg-heading h1{font-size:clamp(2.4rem,5vw,4.6rem);font-weight:400;letter-spacing:-.035em;line-height:1.05;margin:25px 0 16px;overflow-wrap:anywhere}.bg-intro{font-size:clamp(1.2rem,2vw,1.6rem);margin:0 0 12px}.bg-sub{color:#514b51;max-width:68ch;line-height:1.7;margin:0}
.bg-main button,.bg-main select{font:inherit;min-height:44px;border:1px solid #c9c0cd;background:#f8f5ef;color:#201d20;border-radius:8px;padding:10px 14px;cursor:pointer}.bg-main button:hover:not(:disabled){background:#f1e5e0}.bg-main .bg-primary{background:#201d20;color:#f6f2eb;border-color:#201d20}.bg-main .bg-primary:hover:not(:disabled){background:#3a2418}.bg-main button:disabled{opacity:.45;cursor:not-allowed}.bg-main :focus-visible{outline:2px solid #a83207;outline-offset:4px}.bg-main input{accent-color:#a83207;caret-color:#a83207}.bg-main ::selection{background:#f7e3da;color:#201d20}
.bg-upload{border:1px dashed #c9a38f;border-radius:14px;min-height:285px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#f8f5ef;text-align:center;padding:30px}.bg-upload h2{font-size:1.65rem;font-weight:400;margin:0}.bg-upload svg{color:#a83207}.bg-upload p{margin:0;color:#514b51;font-size:.88rem;line-height:1.6}.bg-upload.is-dragging{background:#f7e3da;border-style:solid}.bg-status{min-height:1.6em;line-height:1.6;margin:16px 0;color:#514b51;font-size:.92rem}.bg-status.is-error{color:#9c2334}
.bg-topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-top:1px solid #c9c0cd}.bg-topbar>div:first-child{min-width:0;display:flex;flex-direction:column;gap:6px}.bg-topbar strong{font-weight:400;overflow-wrap:anywhere}.bg-topbar span{font-size:.8rem;color:#514b51;font-variant-numeric:tabular-nums}.bg-actions{display:flex;gap:10px;flex-shrink:0}.bg-workspace{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:28px;align-items:start}.bg-preview{min-width:0}.bg-viewbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:0 0 14px}.bg-viewbar label{display:flex;gap:8px;align-items:center;font-size:.78rem}.bg-viewbar select{font-size:.85rem;padding:8px}.bg-viewbar button{font-size:.85rem}.bg-viewbar button[aria-pressed=true]{background:#201d20;color:#f6f2eb}
.bg-stage{position:relative;min-height:380px;height:clamp(380px,50vw,600px);overflow:auto;display:flex;align-items:flex-start;border-radius:12px;background:#e8e4e9;isolation:isolate}.bg-stage[data-backdrop=checker]{background-image:conic-gradient(#e1dce3 25%,#f8f5f4 0 50%,#e1dce3 0 75%,#f8f5f4 0);background-size:24px 24px}.bg-stage[data-backdrop=light]{background:#fff}.bg-stage[data-backdrop=dark]{background:#201d20}.bg-stage canvas{display:block;flex:none;max-width:none;cursor:crosshair;touch-action:none;margin:auto}.bg-stage canvas:focus-visible{outline-offset:-3px}.bg-key-cursor{position:absolute;width:18px;height:18px;border:2px solid white;border-radius:50%;box-shadow:0 1px 5px #201d20;pointer-events:none;transform:translate(-50%,-50%)}.bg-stage::-webkit-scrollbar{width:10px;height:10px}.bg-stage::-webkit-scrollbar-thumb{background:#c9a38f;border:2px solid #f1ebe8;border-radius:10px}.bg-help{font-size:.8rem;color:#514b51;line-height:1.6;margin:14px 0 0;max-width:75ch}
.bg-controls{border-top:1px solid #c9c0cd;padding-top:18px}.bg-controls fieldset{margin:0;padding:0;border:0;min-width:0}.bg-controls legend{font-size:1.2rem;margin-bottom:16px}.bg-controls #bg-auto{width:100%;margin-bottom:14px}.bg-modes{display:flex;flex-direction:column;gap:6px}.bg-modes button{text-align:left}.bg-modes button[aria-pressed=true]{background:#f7e3da;border-color:#c9a38f;color:#8f2a05}.bg-controls label{display:grid;grid-template-columns:1fr auto;gap:12px;margin:22px 0;font-size:.87rem}.bg-controls output{font-variant-numeric:tabular-nums;color:#514b51}.bg-controls input[type=range]{width:100%;grid-column:1/-1;min-height:28px;margin:0;cursor:pointer}.bg-controls label.bg-check{display:flex;align-items:center;gap:10px;line-height:1.5}.bg-check input{width:18px;height:18px;flex:none}.bg-edit-actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 26px}.bg-edit-actions button{font-size:.8rem}.bg-controls details{border-top:1px solid #c9c0cd;padding-top:18px}.bg-controls summary{cursor:pointer;min-height:32px}.bg-privacy{font-size:.86rem;line-height:1.6;color:#514b51;margin:24px 0 50px}.bg-about{border-top:1px solid #c9c0cd;padding-top:32px;display:grid;grid-template-columns:1fr 1.5fr;gap:32px}.bg-about h2{font-size:1.7rem;line-height:1.2;font-weight:400;margin:0}.bg-about p{max-width:70ch;color:#514b51;line-height:1.7;margin:0}.bg-main [hidden]{display:none!important}
@media(max-width:900px){.bg-workspace{grid-template-columns:minmax(0,1fr) 225px;gap:18px}.bg-viewbar label{flex-wrap:wrap}.bg-main{padding-inline:24px}}
@media(max-width:700px){.bg-main{padding:120px 20px 55px}.bg-heading{margin-bottom:28px}.bg-heading h1{font-size:clamp(2rem,9vw,3.4rem)}.bg-upload{min-height:255px;padding:24px 16px}.bg-topbar{align-items:stretch;flex-direction:column;gap:14px}.bg-actions{flex-wrap:wrap}.bg-actions button{flex:1}.bg-workspace{grid-template-columns:1fr}.bg-stage{height:390px;min-height:280px}.bg-viewbar{gap:8px}.bg-viewbar label{gap:4px}.bg-controls{margin-top:16px}.bg-modes{display:grid;grid-template-columns:1fr 1fr}.bg-modes button:first-child{grid-column:1/-1}.bg-controls label{margin-block:18px}.bg-about{grid-template-columns:1fr;gap:18px}.bg-privacy{margin-bottom:35px}}

/* Compact tool surface; the image becomes the primary content after upload. */
.bg-title-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.bg-title-row h1{margin-bottom:14px}.bg-experimental{font-size:.75rem;background:#f7e3da;color:#8f2a05;border-radius:999px;padding:7px 11px;white-space:nowrap}.bg-heading{margin-bottom:28px}.bg-sub{font-size:1rem}.bg-upload{min-height:310px}.bg-status:empty{display:none}.bg-about{display:none}.bg-privacy{margin:18px 0 0;text-align:center;font-size:.8rem}.bg-help{font-size:.8rem}.bg-controls details:not([open]){margin-bottom:8px}
.bg-main.has-image{padding-top:125px}.has-image .bg-heading{margin-bottom:18px}.has-image .bg-heading h1{font-size:2rem;margin:12px 0}.has-image .bg-heading>a{font-size:.8rem}.has-image .bg-sub{display:none}.has-image .bg-status{margin:8px 0;font-size:.8rem;min-height:1.3em}.has-image .bg-stage{height:clamp(420px,57vh,720px)}.bg-viewbar{gap:8px}.bg-viewbar label{font-size:.75rem}.bg-controls legend{font-size:1rem}.bg-controls label{margin:16px 0}.bg-controls #bg-auto{background:#201d20;color:#f6f2eb;border-color:#201d20}.bg-controls #bg-auto:hover:not(:disabled){background:#3a2418}
@media(max-width:700px){.bg-main.has-image{padding-top:105px}.bg-title-row{gap:8px 12px}.bg-title-row h1{font-size:2.35rem}.has-image .bg-title-row h1{font-size:1.7rem;margin:10px 0}.bg-experimental{font-size:.7rem;padding:6px 9px}.has-image .bg-heading{margin-bottom:8px}.bg-topbar{padding:12px 0;gap:10px}.bg-topbar>div:first-child{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}.bg-topbar strong{font-size:.85rem}.bg-topbar span{white-space:nowrap;font-size:.7rem}.bg-actions button{font-size:.85rem}.bg-viewbar{flex-wrap:wrap}.bg-viewbar label{gap:5px}.bg-viewbar select{font-size:.8rem}.bg-viewbar button{font-size:.8rem}.has-image .bg-stage{height:390px;min-height:280px}.bg-controls{margin-top:4px;padding-top:14px}.bg-controls legend{margin-bottom:12px}.bg-modes{grid-template-columns:1fr 1fr 1fr;gap:6px}.bg-modes button:first-child{grid-column:auto}.bg-modes button{font-size:.78rem;padding:8px 6px;text-align:center}.bg-edit-actions{margin:12px 0 18px}.bg-controls details{padding-top:14px}.bg-upload{min-height:290px}}

.bg-stage canvas[data-mode=keep],.bg-stage canvas[data-mode=erase]{cursor:none}
@media(max-width:1024px){
 .bg-main{padding:125px 24px 64px}.bg-workspace{grid-template-columns:1fr;gap:24px}
 .bg-controls{display:block}.bg-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bg-modes button{text-align:center;min-height:48px}
 .bg-controls input[type=range]{min-height:44px}.bg-controls summary{min-height:44px;display:flex;align-items:center}
 .bg-main select{font-size:16px;min-height:48px}.bg-main button{min-height:44px}.bg-stage{height:clamp(360px,52svh,600px);min-height:280px}
 .has-image .bg-stage{height:clamp(360px,52svh,600px)}.bg-topbar{gap:14px}.bg-actions{flex-wrap:wrap}
}
@media(max-width:700px){
 .bg-main{padding:108px 20px 48px}.bg-heading h1{font-size:clamp(2rem,8.3vw,2.8rem)}.bg-sub{font-size:.95rem}
 .bg-upload{min-height:260px;box-sizing:border-box;padding:24px 16px}.bg-upload h2{font-size:1.4rem}.bg-upload p{font-size:.85rem}
 .bg-viewbar{gap:10px}.bg-viewbar label{font-size:.8rem;flex:1;min-width:135px}.bg-viewbar select{max-width:100%;font-size:16px}
 .bg-viewbar button{min-height:48px;font-size:.85rem}.bg-actions button{min-height:48px}.bg-modes{gap:8px}.bg-modes button{font-size:.8rem;padding:10px 6px;min-height:48px}
 .bg-stage,.has-image .bg-stage{height:clamp(300px,47svh,430px);min-height:260px}.bg-controls label{font-size:.9rem}.bg-controls legend{font-size:1.1rem}
 .bg-topbar>div:first-child{flex-wrap:wrap}.bg-topbar span{white-space:normal}.bg-help,.bg-privacy{font-size:.83rem;line-height:1.7}
}

.bg-controls #bg-engine{grid-column:1/-1;width:100%;min-width:0;font-size:16px}.bg-controls label:has(#bg-engine){display:block}.bg-controls #bg-engine{margin-top:10px}.bg-main #bg-cancel{margin-top:12px}

/* Advanced processing details stay available without crowding the upload task. */
.bg-processing{margin-top:24px;border-top:1px solid #c9c0cd;padding-top:12px;}
.bg-processing summary{cursor:pointer;min-height:44px;align-content:center;font-size:.875rem;}
.bg-processing .bg-privacy{text-align:left;margin:12px 0;max-width:75ch;}
.bg-main select{box-sizing:border-box;min-height:44px;padding:10px 12px;font-size:16px;line-height:1.4;}
.bg-controls summary{min-height:44px;align-content:center;}
@media(prefers-reduced-motion:reduce){.bg-main *{animation:none!important;transition:none!important;}}

[data-theme="dark"] .bg-status.is-error{color:#ff9aa9;}
