bold-page

As a frontend developer, implement the CalculatorDisplay section for the Calculator page. This section renders a `<section className="cd-section">` containing a display panel (`cd-display`) with two sub-areas: (1) a top bar (`cd-topbar`) showing an operation indicator (`cd-op-indicator`) with `aria-live="polite"` that conditionally renders `cd-op-prev`, `cd-op-symbol`, and operation label spans when an operation is active, or a 'Ready' fallback — plus a clear button using the `RotateCcw` icon from lucide-react; (2) a value row (`cd-value-row`) showing the current `displayValue` with `aria-live="polite"` and a `cd-subline` that either shows the full expression (`previousValue op displayValue`) or 'Enter a number to begin'. State: `displayValue` (init '1,250'), `previousValue` (init '500'), `operation` (init '+'). The `handleClear` handler resets all three states. Import and apply CalculatorDisplay.css. Note: this is a root page with no cross-page dependencies.

As a frontend developer, implement the CalculatorKeypad section for the Calculator page. This section renders a `<section className="ckp-root">` containing a card (`ckp-card`) with a grid (`ckp-grid`) of buttons. State: `display` (init '0'), `stored` (null), `pendingOp` (null), `resetNext` (false). Logic includes: `inputDigit(digit)` — appends digit or replaces on resetNext; `inputDot()` — appends decimal point safely; `clearAll()` — resets all state; `compute(a, b, op)` — performs +, -, *, / with NaN guard returning 'Error'; `chooseOp(op)` — chains operations by computing pending result before storing new op; `equals()` — finalises computation and resets op state. The grid renders an AC clear button (`ckp-clear`), operation buttons (`ckp-op`) from the `operations` array with active class `ckp-active` when `pendingOp` matches, digit buttons 0–9 (`ckp-num`), a dot button, and an equals button. Import and apply CalculatorKeypad.css. This section is independent of CalculatorDisplay (parallel build).