Improve this code for me and make the calculator look like Apple's calculator.<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <!-- Embedded CSS -->
    <style>
        /* Reset some default styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f0f0;
            font-family: 'Roboto', sans-serif;
        }

        .calculator {
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            background: #fff;
            box-shadow: 0px 0px 10px #ccc;
            width: 280px;
        }

        .calculator-screen {
            width: 100%;
            height: 60px;
            border: none;
            background-color: #252525;
            color: #fff;
            text-align: right;
            padding-right: 20px;
            padding-left: 10px;
            font-size: 2rem;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .calculator-keys {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
        }

        button {
            height: 60px;
            font-size: 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
            background-color: #e0e0e0;
        }

        button:hover {
            background-color: #d5d5d5;
        }

        .operator {
            background-color: #f9a825;
            color: #fff;
        }

        .operator:hover {
            background-color: #f57f17;
        }

        .equal-sign {
            grid-column: span 2;
            background-color: #2196F3;
            color: #fff;
        }

        .equal-sign:hover {
            background-color: #1976D2;
        }

        .all-clear {
            background-color: #d32f2f;
            color: #fff;
        }

        .all-clear:hover {
            background-color: #c62828;
        }

        /* Responsive Design */
        @media (max-width: 400px) {
            .calculator {
                width: 90%;
            }

            .calculator-screen {
                font-size: 1.5rem;
                height: 50px;
            }

            button {
                height: 50px;
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" value="" disabled />

        <div class="calculator-keys">
            <button type="button" class="operator" value="+">+</button>
            <button type="button" class="operator" value="-">−</button>
            <button type="button" class="operator" value="*">&times;</button>
            <button type="button" class="operator" value="/">&divide;</button>

            <button type="button" value="7">7</button>
            <button type="button" value="8">8</button>
            <button type="button" value="9">9</button>

            <button type="button" value="4">4</button>
            <button type="button" value="5">5</button>
            <button type="button" value="6">6</button>

            <button type="button" value="1">1</button>
            <button type="button" value="2">2</button>
            <button type="button" value="3">3</button>

            <button type="button" value="0">0</button>
            <button type="button" value=".">.</button>
            <button type="button" class="all-clear" value="all-clear">AC</button>

            <button type="button" class="equal-sign" value="=">=</button>
        </div>
    </div>

    <!-- Embedded JavaScript -->
    <script>
        const calculator = {
            displayValue: '0',
            firstOperand: null,
            waitForSecondOperand: false,
            operator: null,
        };

        /**
         * Update the calculator display
         */
        function updateDisplay() {
            const display = document.querySelector('.calculator-screen');
            display.value = calculator.displayValue;
        }

        updateDisplay();

        /**
         * Handle calculator button clicks
         */
        const keys = document.querySelector('.calculator-keys');
        keys.addEventListener('click', (event) => {
            const { target } = event;
            if (!target.matches('button')) {
                return;
            }

            if (target.classList.contains('operator')) {
                handleOperator(target.value);
                updateDisplay();
                return;
            }

            if (target.classList.contains('all-clear')) {
                resetCalculator();
                updateDisplay();
                return;
            }

            if (target.classList.contains('equal-sign')) {
                handleEqual();
                updateDisplay();
                return;
            }

            handleNumber(target.value);
            updateDisplay();
        });

        /**
         * Handle number input
         */
        function handleNumber(number) {
            const { displayValue, waitForSecondOperand } = calculator;

            if (waitForSecondOperand === true) {
                calculator.displayValue = number;
                calculator.waitForSecondOperand = false;
            } else {
                calculator.displayValue = displayValue === '0' ? number : displayValue + number;
            }
        }

        /**
         * Handle operator input
         */
        function handleOperator(nextOperator) {
            const { firstOperand, displayValue, operator } = calculator
            const inputValue = parseFloat(displayValue);

            if (operator && calculator.waitForSecondOperand)  {
                calculator.operator = nextOperator;
                return;
            }

            if (firstOperand == null && !isNaN(inputValue)) {
                calculator.firstOperand = inputValue;
            } else if (operator) {
                const result = performCalculation[operator](firstOperand, inputValue);
                if (result === undefined || isNaN(result)) {
                    calculator.displayValue = "Error";
                    calculator.firstOperand = null;
                } else {
                    calculator.displayValue = String(result);
                    calculator.firstOperand = result;
                }
            }

            calculator.waitForSecondOperand = true;
            calculator.operator = nextOperator;
        }

        /**
         * Perform calculation based on operator
         */
        const performCalculation = {
            '/': (firstOperand, secondOperand) => firstOperand / secondOperand,

            '*': (firstOperand, secondOperand) => firstOperand * secondOperand,

            '+': (firstOperand, secondOperand) => firstOperand + secondOperand,

            '-': (firstOperand, secondOperand) => firstOperand - secondOperand,

            '=': (firstOperand, secondOperand) => secondOperand
        };

        /**
         * Handle equal sign
         */
        function handleEqual() {
            const { firstOperand, displayValue, operator } = calculator;
            const secondOperand = parseFloat(displayValue);

            if (operator && calculator.waitForSecondOperand)  {
                calculator.displayValue = String(firstOperand);
                return;
            }

            if (operator == null) {
                return;
            }

            if (isNaN(firstOperand) || isNaN(secondOperand)) {
                calculator.displayValue = "Error";
                resetCalculator();
                return;
            }

            const calculation = performCalculation[operator];
            if (calculation === undefined) {
                calculator.displayValue = "Error";
                resetCalculator();
                return;
            }

            const result = calculation(firstOperand, secondOperand);

            if (result === undefined || isNaN(result)) {
                calculator.displayValue = "Error";
            } else {
                calculator.displayValue = String(result);
                calculator.firstOperand = result;
            }

            calculator.operator = null;
            calculator.waitForSecondOperand = false;
        }

        /**
         * Reset the calculator to its initial state
         */
        function resetCalculator() {
            calculator.displayValue = '0';
            calculator.firstOperand = null;
            calculator.waitForSecondOperand = false;
            calculator.operator = null;
        }
    </script>
</body>
</html>