:root{--accent:#5fa2dd;--accent-dark:#4b8fc9;--border:#d0d0d0;--text:#404040;--surface:#fff;--workspace:#f6f6f6;color:var(--text);font:14px/1.4 Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}button,input{font:inherit;color:inherit}.app{flex-direction:column;height:100%;display:flex}.toolbar{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.logo{color:gray;align-items:center;gap:8px;margin-right:20px;font-size:18px;display:flex}.logo img{width:32px;height:32px}.button,.menu-button{border:1px solid var(--accent-dark);background:var(--accent);color:#fff;cursor:pointer;border-radius:3px;align-items:center;gap:8px;padding:7px 12px;display:inline-flex}.button:hover,.menu-button:hover:not(:disabled),.menu-button[aria-expanded=true]{background:var(--accent-dark)}.button:focus-visible,.menu-button:focus-visible,.menu-item:focus-visible,.upload-button:focus-within{outline-offset:1px;outline:2px solid #1f5f99}.menu-button:disabled{opacity:.5;cursor:default}.menu{position:relative}.menu-button{width:160px}.menu-label{text-align:left;flex:1}.menu-icon{justify-content:center;width:16px;display:inline-flex}.menu-icon img{width:16px;height:16px}.menu-list{z-index:30;background:var(--surface);border:1px solid var(--border);min-width:100%;margin:2px 0 0;padding:4px 0;list-style:none;position:absolute;top:100%;left:0;box-shadow:0 4px 12px #0003}.menu-item{text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;width:100%;padding:7px 14px;display:flex}.menu-item:hover:not(:disabled){background:#e3effa}.menu-item:disabled{opacity:.5;cursor:default}.workspace{background:var(--workspace);flex:1;min-height:0;position:relative;overflow:auto}.image{display:block}.image[hidden]{display:none}.upload{justify-content:center;align-items:center;height:100%;display:flex}.upload-button{justify-content:center;width:200px}.upload-button input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.crop-overlay{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:0;left:0;overflow:hidden}.crop-selection{pointer-events:none;outline:2px solid #fff;position:absolute;box-shadow:0 0 0 100000px #9b9b9bb3}.crop-bar{z-index:20;background:var(--surface);border:1px solid var(--border);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:12px 16px;display:flex;position:fixed;bottom:50px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0000004d}.crop-size{color:gray;font-variant-numeric:tabular-nums}.dialog-backdrop{z-index:40;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);border:1px solid var(--accent-dark);width:100%;max-width:420px;box-shadow:0 6px 24px #00000059}.dialog-title{background:var(--accent);color:#fff;margin:0;padding:10px 16px;font-size:15px;font-weight:600}.dialog-body{padding:20px}.dialog-buttons{justify-content:center;gap:8px;padding:0 20px 16px;display:flex}.contrast{align-items:center;gap:12px;display:flex}.contrast input{min-width:0;accent-color:var(--accent);flex:1}.contrast output{text-align:right;font-variant-numeric:tabular-nums;width:4ch}.resize{grid-template-columns:auto 100px auto;justify-content:center;align-items:center;gap:12px 10px;display:grid}.resize label{text-align:right}.resize input{border:1px solid var(--border);border-radius:3px;width:100%;padding:5px 8px}.resize-error{color:#c62828;text-align:center;grid-column:1/-1;margin:0;font-style:italic}