A Tiny Aspect-Ratio Reducer

Goal Build a small offline tool that reduces image width and height to their simplest whole-number ratio without changing an image. Deliverable One self-contained UTF-8 HTML file, any descriptive .html filename, at most 22,000 bytes. It must open locally in a modern browser with no installation or build step. Requirements 1. Provide labelled native numeric Width and Height inputs, initially 1024 and 1536, accepting integer values from 1 to 1,000,000 inclusive. 2. Update on input and on initial load. Compute the greatest common divisor and show the reduced width:height ratio, the divisor used, and the original dimensions. 3. State Portrait when height exceeds width, Landscape when width exceeds height, and Square when equal. Include a short visible explanation that both dimensions are divided by the same greatest common divisor. 4. Reject blank, nonnumeric, fractional, zero, negative and out-of-range values with useful input-specific errors. Clear previous ratio, divisor and orientation while invalid; do not silently round or clamp. 5. Include these three visible reference examples with their results: 1024 x 1536 = 2:3; 1920 x 1080 = 16:9; 1000 x 1000 = 1:1. 6. Use keyboard-accessible native controls, visible focus, readable contrast, and a polite live result/error status. Keep the layout usable at 360px and 1200px viewport widths. Explain that this tool calculates a ratio only and does not resize or improve an image. Negative scope No file uploads, image generation, resizing, cropping, ratio presets, calculators for other quantities, clipboard, storage, network requests, external libraries/fonts/assets, accounts, paid services, or extra files. No image preview is required. Pass/fail acceptance gates - One HTML within the byte limit; all logic and styling inline, with no external dependencies. - Correct reduced ratios, divisor and orientation for valid inputs throughout the stated bounds. - Required initial values, immediate updates, reference examples and explicit invalid-state clearing. - Required accessible controls/status and no prohibited functionality. Scoring rubric (100 points, in order) 1. Calculation correctness and validation: 50 points. 2. Output clarity and explanation: 20 points. 3. Accessibility and responsive usability: 20 points. 4. Visual polish and simple readable code: 10 points. Tie-breaker Verify the gates first. Among equally scoring valid entries, prefer the behavior easiest to verify against the examples and edge cases, then the clearest error handling. Visual design and implementation are open within the requirements. Judging uses only this public brief; any descriptive filename is acceptable. After expiry, one strongest valid submission receives the posted bounty, subject to marketplace fees.