*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0;
    min-height:100vh;
    background:linear-gradient(135deg,#eaf1ff,#f8fbff 45%,#eef7f0);
    font-family:Arial, Helvetica, sans-serif;
    color:#1d2a44;
}

.container{
    width:min(980px,94%);
    margin:0 auto;
    padding:34px 0 50px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    background:white;
    border-radius:24px;
    padding:26px 30px;
    box-shadow:0 18px 45px rgba(31,64,130,.10);
    margin-bottom:24px;
}

h1{
    margin:0 0 8px;
    font-size:34px;
    color:#17294d;
}

.topbar p{
    margin:0;
    color:#60708f;
    line-height:1.5;
}

.progress{
    min-width:96px;
    text-align:center;
    background:#2451d1;
    color:white;
    font-weight:bold;
    font-size:25px;
    padding:17px 16px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(36,81,209,.25);
}

.topic-pill{
    display:inline-block;
    background:#ffefb5;
    color:#6f5200;
    font-weight:bold;
    padding:10px 18px;
    border-radius:999px;
    margin-bottom:14px;
}

.equation-box{
    background:#2451d1;
    color:white;
    font-size:35px;
    font-weight:bold;
    text-align:center;
    padding:28px 24px;
    border-radius:24px;
    margin-bottom:24px;
    box-shadow:0 18px 45px rgba(36,81,209,.22);
}

.example-box,
.step-box,
.finish-card{
    background:white;
    border-radius:22px;
    padding:24px 28px;
    margin-bottom:20px;
    box-shadow:0 14px 35px rgba(31,64,130,.10);
    border:2px solid rgba(198,213,245,.75);
}

.example-box{
    border-left:8px solid #ffcf33;
}

.example-box h2,
.step-box h2{
    margin-top:0;
    color:#17294d;
}

.example-box p{
    margin:9px 0;
    line-height:1.55;
    color:#43516f;
}

.step-box{
    transition:.25s ease;
}

.step-box.locked{
    opacity:.46;
    filter:grayscale(.15);
}

.hint{
    color:#5e6e8d;
    line-height:1.55;
    margin-bottom:14px;
}

.answer-row{
    display:flex;
    gap:12px;
    align-items:center;
}

input{
    flex:1;
    min-width:0;
    padding:14px 16px;
    font-size:20px;
    border-radius:14px;
    border:2px solid #b8c8ea;
    outline:none;
    background:#fbfdff;
}

input:focus{
    border-color:#2451d1;
    box-shadow:0 0 0 4px rgba(36,81,209,.12);
}

button{
    padding:14px 20px;
    font-size:18px;
    border:none;
    border-radius:14px;
    background:#2451d1;
    color:white;
    cursor:pointer;
    font-weight:bold;
    box-shadow:0 10px 24px rgba(36,81,209,.20);
}

button:hover:not(:disabled){
    background:#173fae;
}

button:disabled{
    cursor:not-allowed;
    background:#9caad0;
    box-shadow:none;
}

button.secondary{
    background:#eef3fb;
    color:#2451d1;
    box-shadow:none;
}

.footer-buttons{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:26px;
}

.message{
    min-height:24px;
    font-weight:bold;
    margin-bottom:0;
}

.message.good{
    color:#17803b;
}

.message.bad{
    color:#d13232;
}

.finish-card{
    text-align:center;
    padding:54px 30px;
}

.finish-card p{
    font-size:22px;
    color:#5e6e8d;
}

@media(max-width:700px){
    .topbar{
        flex-direction:column;
        align-items:flex-start;
    }
    .equation-box{
        font-size:25px;
    }
    .answer-row{
        flex-direction:column;
        align-items:stretch;
    }
    button{
        width:100%;
    }
}
.mini-vzor{

    background: #111827;

    color: white;

    padding: 12px;

    border-radius: 10px;

    margin-bottom: 10px;

    font-family: monospace;

    font-size: 18px;

    text-align: center;

}

.step-hint{

    background: #f3f4f6;

    border-left: 4px solid #3b82f6;

    padding: 10px 14px;

    border-radius: 10px;

    margin-bottom: 12px;

    color: #374151;

    font-size: 15px;

    font-weight: 500;

}