.stage2LearningFlow{
    margin:18px 0 24px;
}

.stage2FlowList{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}

.stage2FlowStep{
    position:relative;
}

.stage2FlowStep:not(:last-child)::after{
    content:"";
    position:absolute;
    z-index:2;
    top:50%;
    right:-10px;
    width:10px;
    height:2px;
    background:#dccb9f;
}

.stage2FlowStep a{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:70px;
    padding:10px 13px;
    border:1px solid #e3d6b9;
    border-radius:13px;
    background:#fffdf7;
    color:#56452d;
    text-decoration:none;
    box-sizing:border-box;
    transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.stage2FlowStep a:hover{
    border-color:#c99323;
    background:#fff8df;
    transform:translateY(-1px);
}

.stage2FlowNumber{
    display:grid;
    flex:0 0 34px;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:50%;
    background:#eee7d7;
    color:#725a32;
    font-weight:800;
}

.stage2FlowText{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:3px;
}

.stage2FlowText strong{
    color:inherit;
    font-size:16px;
    line-height:1.2;
}

.stage2FlowText small{
    color:#826e4e;
    font-size:12px;
    line-height:1.3;
}

.stage2FlowStep.is-complete .stage2FlowNumber{
    background:#dcebd6;
    color:#346529;
}

.stage2FlowStep.is-active a{
    border-color:#c58a17;
    background:#fff2bf;
    box-shadow:0 4px 14px rgba(135, 91, 7, .10);
    color:#553700;
}

.stage2FlowStep.is-active .stage2FlowNumber{
    background:#c98a11;
    color:#fff;
}

.readingPage{
    max-width:1220px;
    margin:24px auto 50px;
    padding:0 16px;
}

.readingNav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    flex-wrap:wrap;
}

.bookCard{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(90deg, rgba(197,142,30,.12), transparent 22px),
        #fffdf8;
    border:1px solid #e9dcc0;
    border-radius:0 0 22px 22px;
    box-shadow:
        0 14px 38px rgba(63,45,19,.10),
        inset 7px 0 0 #efc958;
}

.bookCard::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:8px;
    background:linear-gradient(90deg,#e8b934,#fff0aa,#e8b934);
    opacity:.85;
}

.storyHero{
    display:block;
    width:100%;
    height:clamp(180px, 24vw, 270px);
    object-fit:cover;
    object-position:center;
    border-bottom:1px solid #eadab5;
}

.bookInside{
    padding:28px 42px 38px;
}

.bookTools{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    padding-bottom:18px;
    border-bottom:1px dashed #ddceb0;
}

.storyReadBtn{
    border:1px solid #ca8d16;
    border-radius:13px;
    background:#fff8df;
    color:#5b3c00;
    min-height:53px;
    padding:0 18px;
    font-size:20px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 3px 0 rgba(165,110,9,.08);
}

.storyReadBtn:hover{
    background:#ffefb9;
}

.storyReadBtn.reading{
    background:#ffe397;
}

.readHelp{
    color:#765b37;
    font-size:15px;
}

.bookTitle{
    margin:24px 0 8px;
    color:#4e3305;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(25px,3vw,38px);
}

.bookSubtitle{
    margin:0 0 22px;
    color:#8a6a35;
}

.storyText{
    color:#17130d;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(22px,2.15vw,30px);
    line-height:1.72;
    letter-spacing:.01em;
}

.storyParagraph{
    margin:0 0 20px;
}

.bookSentence{
    border-radius:6px;
    transition:background .18s ease;
}

.bookSentence.readingSentence{
    background:rgba(255,223,131,.20);
}

.bookWord{
    border-radius:6px;
    padding:1px 2px;
    transition:background .12s ease, color .12s ease, box-shadow .12s ease;
}

.learnedWord{
    background:#fff0b9;
    color:#694500;
    font-weight:700;
}

.bookWord.readingWord{
    background:#e0a600;
    color:#fff;
    box-shadow:0 0 0 3px rgba(224,166,0,.19);
}

.translateArea{
    margin-top:28px;
    padding-top:20px;
    border-top:1px dashed #ddceb0;
}

.translateToggle{
    border:0;
    background:transparent;
    color:#664500;
    font-size:20px;
    font-weight:800;
    padding:4px 0;
    cursor:pointer;
}

.turkishBookText{
    display:none;
    margin-top:18px;
    padding:22px 24px;
    border-radius:14px;
    background:#fff8e6;
    border:1px solid #efdbad;
    color:#3d3424;
    font-family:Georgia, "Times New Roman", serif;
    font-size:20px;
    line-height:1.65;
}

.turkishBookText.open{
    display:block;
}

.readingPager{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
}

@media (max-width:700px){
    .stage2FlowList{
        grid-template-columns:1fr;
        gap:7px;
    }

    .stage2FlowStep:not(:last-child)::after{
        top:auto;
        right:auto;
        bottom:-7px;
        left:29px;
        width:2px;
        height:7px;
    }

    .stage2FlowStep a{
        min-height:58px;
    }

    .storyHero{
        height:190px;
        object-position:center;
    }

    .readingPage{
        padding:0 8px;
        margin-top:10px;
    }

    .bookInside{
        padding:20px 18px 30px;
    }

    .storyReadBtn,
    .readHelp{
        width:100%;
    }

    .storyText{
        font-size:21px;
        line-height:1.62;
    }

    .translateToggle{
        font-size:18px;
        text-align:left;
    }
}