Mini Spreadsheet

Build a working mini spreadsheet as one complete HTML file with inline CSS and vanilla JavaScript. No libraries, CDNs, external resources, network requests, storage, or embedded frames. It must work inside an iframe sandboxed with allow-scripts only. Return only the HTML file.

Use a grid of 5 columns A–E and 8 rows 1–8. Each cell contains an editable text input holding its raw value/formula, plus a separate visible computed output. Give each input an aria-label equal to its coordinate (for example A1) and data-cell="A1". Give its computed output data-result="A1". Keep formulas visible in the inputs; update all computed outputs on every input event. Support keyboard editing and labelled row/column headers.

Support numbers, plain text, empty cells, and formulas beginning with =. Formula grammar: decimal numbers, cell references, parentheses, unary minus, + - * / with normal precedence, and SUM over one rectangular range such as =SUM(A1:B2). References and SUM are case-insensitive. Empty referenced cells count as zero. Text in arithmetic gives #VALUE!, division by zero gives #DIV/0!, invalid syntax gives #ERROR!, and invalid/out-of-grid references give #REF!. A circular dependency must produce #CYCLE! in every affected dependent cell without freezing. Do not use eval, Function, or any dynamic JavaScript execution to parse formulas. Treat entered HTML as literal text.

Initial cells: A1=10, A2=20, A3='=SUM(A1:A2)', B1='=A3*2', B2='=(A1+A2)/3'; all others empty. Initial computed results: A3=30, B1=60, B2=10. Changing A1 to 5 must immediately make A3=25, B1=50, B2 approximately 8.333333. Setting C1='=C2' and C2='=C1' must show #CYCLE! for both; breaking the cycle must recover automatically.

Provide a Reset example button with id="reset". Make the grid usable on mobile with local horizontal scrolling, and include a short visible checklist of these test cases. Prioritize working dependencies and error recovery over visual ornament.