:root{color-scheme:dark;font:14px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#dce7e8;background:#10191e}*{box-sizing:border-box}body{margin:0}main{padding:24px;max-width:1100px;margin:auto}button,.file,input{font:inherit}button,.file{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid #42545d;background:#17252c;color:#edf5f5;border-radius:8px;cursor:pointer;min-height:44px}button:hover,.file:hover{border-color:#a5f2d1}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:#a5f2d1;color:#10261d;border-color:#a5f2d1;font-weight:650}.file{position:relative;overflow:hidden}.file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}button:focus-visible,input:focus-visible,summary:focus-visible,.file:focus-within,canvas:focus-visible{outline:3px solid #83cfff;outline-offset:3px}.top{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#afc2c7}.badge{color:#a5f2d1;letter-spacing:1px;font-weight:650}.drop{text-align:center;padding:45px 10px 35px}.drop.drag{outline:2px dashed #a5f2d1}.mark{font-size:45px;color:#a5f2d1}.drop h2{font-size:clamp(22px,4vw,32px);line-height:1.25;letter-spacing:-1px;color:#f1f7f6}.hint{font-size:12px;color:#aebec5}.toolbar,.actions,.coords{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:20px 0 12px}.toolbar #dimensions{font-size:12px;color:#afc2c7;margin-left:auto}#instruction{color:#b7c9cd;font-size:13px}.canvas-wrap{max-height:480px;overflow:auto;background:#071014;border:1px solid #3a4c56;border-radius:8px;text-align:center}canvas{display:block;max-width:100%;max-height:480px;width:auto;height:auto;margin:auto;touch-action:none;cursor:crosshair}details{margin:14px 0}summary{cursor:pointer;color:#b9cfd5}.coords label{width:75px}.coords input{width:100%}input:not([type=checkbox]):not([type=file]){display:block;background:#0c1419;color:#ecf5f5;border:1px solid #455c67;border-radius:6px;padding:10px;min-height:44px}.watermark{border-top:1px solid #30414a;padding-top:18px}.watermark>label{display:block;margin-bottom:8px}.watermark>input{width:100%}.review{display:flex;gap:10px;align-items:flex-start;margin-top:16px}.review input{margin-top:6px;accent-color:#a5f2d1}#maskcount{font-size:12px;color:#b4c7cb;margin-left:8px}#status{color:#bce5f5;min-height:22px;font-size:13px}[hidden]{display:none!important}@media(max-width:500px){main{padding:16px}.top{font-size:10px}.drop{padding-top:28px}.toolbar button,.toolbar .file{font-size:12px;padding:8px 10px}.coords label{width:60px}}
@media(max-width:500px){.coords{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.coords label{width:auto}.coords button{grid-column:1/-1}}

#mode{display:block;max-width:100%;width:100%;margin:8px 0;padding:12px;border:1px solid #35464c;border-radius:8px;background:#101d23;color:#e5f0ed;font:inherit}#mode-note{margin-bottom:16px}

.mode-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.mode-buttons button{flex:1 1 180px;white-space:normal}.mode-buttons button[aria-pressed="true"]{background:#a4efd1;color:#0b1318;border-color:#a4efd1}.top{flex-wrap:wrap;gap:8px}