:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #080808; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 260px; }
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #737373; outline-offset: 7px; }
.crop-frame:focus-visible { outline: none; }
[hidden] { display: none !important; }
.screen { min-height: 100svh; width: 100%; padding: 40px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pill { background: #000; color: #fff; border: 0; border-radius: 28px; min-width: 176px; min-height: 58px; padding: 11px 28px 13px; font-size: 30px; font-weight: 500; line-height: 1.12; letter-spacing: -1.2px; cursor: pointer; transition: opacity 140ms, transform 140ms; }
.upload-screen .pill { min-width: 244px; min-height: 76px; border-radius: 33px; font-size: 42px; padding: 12px 36px 16px; letter-spacing: -1.8px; }
.pill:hover { background: #202020; }
.pill:active { transform: scale(.975); }
.pill:disabled { cursor: wait; opacity: .48; }
.back { border: 0; background: transparent; width: 46px; height: 46px; padding: 2px; cursor: pointer; border-radius: 50%; }
.back svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.back:hover { opacity: .55; }
.actions { display: flex; gap: 13px; align-items: center; justify-content: center; padding-top: 20px; }
.crop-screen { padding: 34px 32px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.crop-controls { width: min(100%, 500px); margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.crop-actions { --mode-size: 64px; display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; }
.mode-slot { display: flex; flex: none; }
.other-modes { display: contents; }
.mode-button { display: grid; place-items: center; width: var(--mode-size); height: var(--mode-size); flex: none; padding: 7px; border: none; border-radius: 50%; background: #000; color: white; cursor: pointer; }
.mode-button img, .mode-button svg { display: block; width: 100%; height: 100%; fill: currentColor; pointer-events: none; }
.mode-button[data-mode="horse"] { padding: 6px; }
.mode-button:hover { background: #242424; }
.mode-button:disabled, .duplicate-button:disabled { cursor: wait; opacity: .48; }
.crop-actions .back { flex: none; }
.crop-actions .pill { flex: 1; min-width: 0; padding-inline: 14px; }
.duplicate-button { min-height: 54px; width: 192px; border: 1.5px solid #000; border-radius: 25px; background: #fff; color: #000; font-size: 30px; line-height: 1.15; letter-spacing: -1.2px; cursor: pointer; padding: 9px 16px 11px; }
.duplicate-button[aria-pressed="false"] { text-decoration: line-through; text-decoration-thickness: 2px; }
.duplicate-button:hover { background: #f5f5f5; }
.crop-tools { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; }
.tool-button { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border: 1.5px solid #000; border-radius: 50%; padding: 12px; background: #fff; cursor: pointer; }
.tool-button img { width: 100%; height: 100%; display: block; pointer-events: none; }
.tool-button:hover { background: #f5f5f5; }
.tool-button[aria-pressed="true"] { background: #000; }
.tool-button[aria-pressed="true"] img { filter: invert(1); }
.tool-button:disabled { opacity: .48; cursor: wait; }
.crop-preview { display: block; width: min(100%, 900px, calc((100svh - 260px) * 1.6)); height: auto; aspect-ratio: 8 / 5; border: 1px solid #111; }
.crop-stage { position: relative; flex: none; isolation: isolate; touch-action: none; user-select: none; -webkit-user-select: none; clip-path: inset(-16px); }
#cropCanvas { display: block; width: 100%; height: 100%; }
.crop-frame { position: absolute; border: 2px solid #080808; cursor: move; box-shadow: 0 0 0 999px #ffffffb8, inset 0 0 0 1px #ffffff80; touch-action: none; }
.handle { position: absolute; display: block; width: 23px; height: 23px; border: 2px solid #000; border-radius: 50%; background: #ffffff38; transform: translate(-50%, -50%); }
.handle::before { content: ""; position: absolute; inset: -11px; }
.nw { left: 0; top: 0; cursor: nwse-resize; }.n { left: 50%; top: 0; cursor: ns-resize; }.ne { left: 100%; top: 0; cursor: nesw-resize; }.e { left: 100%; top: 50%; cursor: ew-resize; }.se { left: 100%; top: 100%; cursor: nwse-resize; }.s { left: 50%; top: 100%; cursor: ns-resize; }.sw { left: 0; top: 100%; cursor: nesw-resize; }.w { left: 0; top: 50%; cursor: ew-resize; }
.grid-lines { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(to right, transparent calc(33.333% - .5px), #fff8 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), #fff8 66.666%, transparent calc(66.666% + .5px)), linear-gradient(to bottom, transparent calc(33.333% - .5px), #fff8 33.333%, transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), #fff8 66.666%, transparent calc(66.666% + .5px)); }
.crop-frame:active .grid-lines, .crop-frame:focus-visible .grid-lines { opacity: 1; }
.hint { color: #747474; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .03em; margin: 22px 0 0; text-align: center; }
.result-screen { padding: 28px 32px; }
#resultCanvas { display: block; width: min(100%, 1000px, calc((100svh - 200px) * 1.6)); height: auto; aspect-ratio: 8 / 5; border: 1px solid #111; }
.message { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; max-width: min(560px, calc(100% - 40px)); width: max-content; text-align: center; font-size: 14px; line-height: 1.5; color: #555; background: #fff; padding: 6px 10px; border-radius: 8px; z-index: 5; }
.message:empty { display: none; }
.message.error { color: #a22323; }
.drop-veil { position: fixed; z-index: 10; inset: 15px; border: 2px dashed #000; display: grid; place-items: center; background: #fffffff2; font-size: 32px; pointer-events: none; }
@media (max-width: 600px) {
  .screen { padding: 26px 25px; }
  .crop-screen { padding: 28px 26px 40px; }
  .result-screen { padding: 24px 20px; }
  .pill { font-size: 28px; min-height: 54px; min-width: 164px; }
  .actions { padding-top: 19px; gap: 10px; }
  .hint { font-size: 12px; }
  .upload-screen .pill { min-width: 220px; font-size: 39px; min-height: 71px; }
  .crop-controls { margin-top: 36px; gap: 17px; }
  .crop-actions { --mode-size: 48px; gap: 8px; }
  .crop-actions .back { width: 40px; height: 40px; }
  .crop-actions .pill { min-width: 0; min-height: 46px; font-size: 26px; }
  .duplicate-button { font-size: 26px; width: 164px; min-height: 48px; }
  .crop-tools { gap: 10px; }
  .tool-button { width: 48px; height: 48px; padding: 10px; }
}
@media (max-width: 360px) {
  .crop-screen { padding-inline: 20px; }
  .crop-actions { --mode-size: 40px; gap: 6px; }
  .crop-actions .back { width: 34px; height: 34px; }
  .crop-actions .pill { font-size: 24px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }