* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        #f5f7fb;

    color:
        #182033;
}


.page {
    width: min(
        900px,
        calc(100% - 32px)
    );

    margin: 40px auto;
}


/* CARD */

.card {
    background: white;

    border:
        1px solid #e5e8ef;

    border-radius: 24px;

    padding: 30px;

    box-shadow:
        0 12px 40px
        rgba(30, 40, 70, .08);
}


/* HEADER */

.header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 20px;

    margin-bottom: 30px;
}


.eyebrow {
    color:
        #4d67f5;

    font-size:
        13px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


h1 {
    margin:
        6px 0;

    font-size:
        30px;
}


p {
    color:
        #6d7485;

    line-height:
        1.6;
}


.microphone-icon {
    width:
        64px;

    height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #6c8cff,
            #3f5efb
        );
}


.microphone-icon svg {
    width:
        38px;

    height:
        38px;
}


/* FORMS */

.form-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        16px;
}


.form-group {
    margin-bottom:
        20px;
}


label {
    display:
        block;

    font-weight:
        600;

    font-size:
        14px;

    margin-bottom:
        7px;
}


input {
    width:
        100%;

    border:
        1px solid #dfe3eb;

    border-radius:
        12px;

    padding:
        13px 14px;

    font-size:
        16px;

    outline:
        none;

    background:
        #fafbfe;
}


input:focus {
    border-color:
        #526cf5;

    box-shadow:
        0 0 0 3px
        rgba(82,108,245,.12);
}


/* SENTENCES */

.section-title {
    display:
        flex;

    justify-content:
        space-between;

    font-weight:
        700;

    margin:
        20px 0 12px;
}


#sentenceCount {
    font-size:
        13px;

    color:
        #6d7485;
}


.sentence-input {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        10px;
}


.sentence-input > span {
    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:
        #eef1ff;

    color:
        #4c63e8;

    font-size:
        13px;

    font-weight:
        700;
}


.remove-sentence {
    border:
        0;

    background:
        transparent;

    color:
        #9aa1af;

    font-size:
        24px;

    cursor:
        pointer;
}


/* BUTTONS */

button {
    font-family:
        inherit;

    cursor:
        pointer;
}


.primary-button {
    width:
        100%;

    margin-top:
        18px;

    border:
        0;

    border-radius:
        13px;

    padding:
        15px;

    background:
        linear-gradient(
            135deg,
            #6c8cff,
            #3f5efb
        );

    color:
        white;

    font-weight:
        700;

    font-size:
        15px;
}


.secondary-button {
    border:
        1px solid #dfe3eb;

    background:
        white;

    border-radius:
        12px;

    padding:
        12px 16px;

    color:
        #384052;

    font-weight:
        600;
}


/* STUDENT */

.student-header {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;
}


.progress {
    font-weight:
        700;

    white-space:
        nowrap;
}


.progress-bar {
    height:
        7px;

    background:
        #edf0f5;

    border-radius:
        10px;

    overflow:
        hidden;

    margin:
        20px 0 30px;
}


#progressFill {
    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #6c8cff,
            #3f5efb
        );

    transition:
        width .3s ease;
}


.practice-area {
    max-width:
        700px;

    margin:
        auto;
}


.instruction {
    text-align:
        center;

    color:
        #777f90;

    margin-bottom:
        12px;
}


.sentence-card {
    border:
        1px solid #e3e6ed;

    background:
        #fafbff;

    border-radius:
        20px;

    padding:
        28px;

    text-align:
        center;
}


.sentence-label {
    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    color:
        #6c8cff;
}


.target-sentence {
    font-size:
        25px;

    line-height:
        1.5;

    font-weight:
        700;

    margin:
        15px 0 20px;
}


.listen-button {
    border:
        1px solid #dfe3eb;

    background:
        white;

    padding:
        11px 15px;

    border-radius:
        10px;

    font-weight:
        600;
}


/* MICROPHONE */

.record-area {
    text-align:
        center;

    padding:
        35px 0 20px;
}


.record-button {
    width:
        170px;

    height:
        170px;

    border:
        0;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #6c8cff,
            #3f5efb
        );

    color:
        white;

    font-weight:
        700;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin:
        auto;

    box-shadow:
        0 12px 30px
        rgba(63,94,251,.25);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.record-button:hover {
    transform:
        scale(1.03);
}


.record-button.recording {
    background:
        #e44d63;

    box-shadow:
        0 0 0 12px
        rgba(228,77,99,.12);
}


.mic-symbol {
    font-size:
        35px;
}


.record-status {
    margin-top:
        18px;
}


/* FEEDBACK */

.feedback-box {
    border:
        1px solid #dfe3eb;

    border-radius:
        18px;

    padding:
        20px;

    background:
        #fafbff;
}


.hidden {
    display:
        none;
}


.feedback-header {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.feedback-header h2 {
    margin:
        0;

    font-size:
        18px;
}


.score {
    font-size:
        26px;

    font-weight:
        800;

    color:
        #4660ed;
}


.feedback-message {
    margin-top:
        12px;

    color:
        #596173;

    line-height:
        1.6;
}


.transcript {
    margin-top:
        15px;

    padding:
        12px;

    border-radius:
        10px;

    background:
        white;

    color:
        #596173;

    font-size:
        14px;
}


/* NAVIGATION */

.navigation {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-top:
        25px;
}


.navigation .primary-button {
    margin:
        0;
}


/* MOBILE */

@media (
    max-width: 650px
) {

    .page {
        width:
            calc(100% - 20px);

        margin:
            15px auto;
    }


    .card {
        padding:
            20px;

        border-radius:
            18px;
    }


    .header {
        flex-direction:
            column;
    }


    .form-grid {
        grid-template-columns:
            1fr;
    }


    h1 {
        font-size:
            25px;
    }


    .target-sentence {
        font-size:
            21px;
    }


    .record-button {
        width:
            145px;

        height:
            145px;
    }


    .navigation {
        grid-template-columns:
            1fr;
    }

}