:root{color:#1f2320;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--panel:#f7f7f2;--line:#c8cbc2;--soft:#6b7068;--ink:#1f2320;--field:#fff;--accent:#4f6658;background:#e7e8e3;font:13px/1.32 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{overscroll-behavior:none;min-width:320px;height:100dvh;margin:0;overflow:hidden}button,select,input{font:inherit}button{background:var(--field);color:var(--ink);cursor:pointer;border:1px solid #aeb5aa;border-radius:5px;padding:6px 9px;box-shadow:inset 0 1px #fffc}button:hover{background:#eef1eb}#app{grid-template-columns:300px minmax(0,1fr);height:100dvh;display:grid;position:relative;overflow:hidden}#app.panel-collapsed{grid-template-columns:0 minmax(0,1fr)}#controls{background:var(--panel);border-right:1px solid var(--line);overscroll-behavior:contain;scrollbar-gutter:stable;height:100dvh;min-height:0;padding:10px 12px;overflow-y:auto}#app.panel-collapsed #controls{border-right:0;padding:0;overflow:hidden}#panelToggle{z-index:10;place-items:center;width:34px;height:34px;padding:0;font-size:18px;line-height:1;display:grid;position:fixed;top:10px;left:10px}.panel-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:start;gap:12px;margin-bottom:16px;padding-bottom:16px;display:flex}#app:not(.panel-collapsed) #panelToggle{left:244px}h1{letter-spacing:0;margin:0 0 5px;font-size:20px;line-height:1.15}p{color:var(--soft);margin:0}.field{color:#48443d;gap:3px;margin:0 0 7px;display:grid}.control-section{border-top:1px solid var(--line);margin-top:0;padding:7px 0}details.control-section summary{color:var(--soft);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;-webkit-user-select:none;user-select:none;margin:0 0 6px;font-size:11px}.field span{color:var(--soft);justify-self:end;margin-top:-21px;font-size:12px}select{border:1px solid var(--line);background:var(--field);width:100%;min-height:30px;color:var(--ink);border-radius:5px;padding:4px 8px}input[type=range]{width:100%;height:16px;accent-color:var(--accent)}.downloads{z-index:5;border-top:1px solid var(--line);background:var(--panel);gap:5px;margin-top:4px;padding-top:9px;padding-bottom:4px;display:grid;position:sticky;bottom:0}.download-formats{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.download-formats.hidden{display:none}.download-status{min-height:16px;color:var(--soft);font-size:12px}#stage{background-color:#dfe2dc;background-image:linear-gradient(90deg,#ffffff61 1px,#0000 1px),linear-gradient(0deg,#ffffff61 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:36px 36px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-width:0;height:100dvh;min-height:0;padding:12px}.viewport{border:1px solid var(--line);background:#e8e6df;width:100%;height:calc(100dvh - 24px);min-height:520px;position:relative;overflow:hidden}.crop-widget{z-index:3;pointer-events:none;touch-action:none;background:0 0;border:0;position:absolute;inset:0}.crop-widget.hidden{display:none}.crop-handle{pointer-events:auto;background:#f7f7f2eb;border:1px solid #2f3a32cc;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 4px #1f23202e}.crop-handle.hidden{display:none}.crop-handle-top{cursor:ns-resize;border-radius:999px;width:36px;height:14px}.crop-handle-right{cursor:ew-resize;border-radius:999px;width:14px;height:36px}.crop-handle-bottom{cursor:ns-resize;border-radius:999px;width:36px;height:14px}.crop-handle-left{cursor:ew-resize;border-radius:999px;width:14px;height:36px}.check-field{color:#48443d;align-items:center;gap:6px;margin:0 0 7px;display:flex}.crop-toggle{border-bottom:1px solid var(--line);padding:0 0 8px}canvas{touch-action:none;width:100%;height:100%;display:block}.stats{color:#5f594f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fbfaf6d1;border:1px solid #d7d3c8cc;border-radius:5px;padding:5px 8px;position:absolute;bottom:10px;left:10px}@media (width<=820px){body{min-width:0}#app{width:100vw;height:100dvh;display:block}#controls{z-index:25;width:100vw;height:min(76dvh,620px);max-height:calc(100dvh - 12px);padding:calc(48px + env(safe-area-inset-top)) 12px 12px;border-right:0;border-bottom:1px solid var(--line);transition:transform .18s,box-shadow .18s;position:fixed;top:0;left:0;right:0;transform:translateY(0);box-shadow:0 14px 34px #1f232038}#app.panel-collapsed #controls{padding:calc(48px + env(safe-area-inset-top)) 12px 12px;border-right:0;border-bottom:1px solid var(--line);box-shadow:none;overflow-y:auto;transform:translateY(calc(-100% - 10px))}#panelToggle,#app:not(.panel-collapsed) #panelToggle{top:max(8px, env(safe-area-inset-top));left:max(8px, env(safe-area-inset-left));z-index:35;width:38px;height:38px;min-height:38px;padding:0;font-size:20px}#stage{height:100dvh;min-height:0;padding:6px}.viewport{height:calc(100dvh - 12px);min-height:0}button,select{min-height:34px}input[type=range]{height:22px}.field{gap:4px;margin-bottom:8px}.downloads{padding-bottom:calc(8px + env(safe-area-inset-bottom))}.crop-handle-top,.crop-handle-bottom{width:48px;height:18px}.crop-handle-right,.crop-handle-left{width:18px;height:48px}.stats{max-width:calc(100% - 16px);font-size:12px;bottom:8px;left:8px;right:auto}}@media (width<=480px){:root{font-size:12px}#controls{height:min(82dvh,620px);padding-left:10px;padding-right:10px}#app.panel-collapsed #controls{padding-left:10px;padding-right:10px}.download-formats{gap:4px}.download-formats button{padding-left:4px;padding-right:4px}}