{% block content %}
<style>
    body {
        background: #f5f5f5;
    }

    .card-wrapper {
        max-width: 900px;
        margin: 40px auto;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 40px 50px;
        line-height: 1.9;
        color: #333;
    }

    .main-title {
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .sub-title {
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 30px;
    }

    .next-btn-wrap {
        max-width: 900px;
        margin: 20px auto;
        text-align: left;
    }
    
    code {
        color: #d63384;
        font-weight: 600;
        background-color: #f8f9fa;
        padding: 2px 4px;
        border-radius: 4px;
    }
</style>

<div class="card-wrapper">
    <div class="main-title">General Instructions</div>

    <p>
        This is a study regarding decision-making behavior. This study has several parts. 
        After completing all parts, you will receive ${{ Constants.showup_fee }} as a participation fee. 
        In addition, in each part, you will also have the opportunity to receive some compensation. 
        Your total compensation in this study will be the sum of the participation fee and the compensation from all parts.
    </p>

    <p>
        Words such as "randomly," "probability," or "chance" will imply randomness. 
        Randomness will be simulated by the computer program <code>random()</code>.
    </p>
</div>

<div class="next-btn-wrap" style="text-align: right;">
    <button class="otree-next-button btn btn-primary">Start the experiment</button>
</div>

{% endblock %}