python
<style>
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
        font-family: 'Arial', sans-serif;
    }
    input, button {
        margin: 5px;
        padding: 10px;
        font-size: 16px;
    }
    button {
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
    #results {
        margin-top: 20px;
    }
    .result {
        margin: 5px;
        font-size: 18px;
    }
</style>

<div class="container">
    <h2>Advanced Math Operations</h2>
    <input id="inputX" type="number" placeholder="Enter value for x" />
    <input id="inputY" type="number" placeholder="Enter value for y" />
    <button onclick="performMath()">Calculate</button>
    <div id="results"></div>
</div>

<py-script>
    from js import document
    from math import sqrt, sin, cos, tan, pi

    def perform_math():
        x = float(document.getElementById('inputX').value)
        y = float(document.getElementById('inputY').value)
        results_div = document.getElementById('results')
        results_div.innerHTML = ''  # Clear previous results
        
        # Calculate and display results
        operations = {
            "Addition (x + y)": x + y,
            "Subtraction (x - y)": x - y,
            "Multiplication (x * y)": x * y,
            "Division (x / y)": x / y if y != 0 else 'Error: Division by zero',
            "Exponentiation (x^y)": x ** y,
            "Modulus (x % y)": x % y if y != 0 else 'Error: Modulus by zero',
            "Square Root of x": sqrt(x) if x >= 0 else 'Error: Negative number',
            "Sine of x (degrees)": sin(x * pi / 180),
            "Cosine of x (degrees)": cos(x * pi / 180),
            "Tangent of x (degrees)": tan(x * pi / 180)
        }
        
        for description, result in operations.items():
            result_p = document.createElement('p')
            result_p.textContent = f"{description}: {result}"
            result_p.className = 'result'
            results_div.appendChild(result_p)

    document.performMath = perform_math
</py-script>