.learn-main {
    padding: clamp(28px, 5vw, 58px) 20px 70px;
    background:
        radial-gradient(circle at 12% 7%, rgba(227, 154, 45, .13), transparent 24rem),
        var(--color-canvas);
}

.learn-intro,
.lesson-heading {
    width: min(850px, 100%);
    margin: 0 auto clamp(28px, 5vw, 48px);
}

.learn-intro { text-align: center; }

.learn-intro h1,
.lesson-heading h1 {
    margin: 0;
    color: var(--color-brand-strong);
    font-size: clamp(2.15rem, 6vw, 4rem);
    line-height: 1.04;
}

.learn-lead,
.lesson-heading > p:last-child {
    margin: 18px auto 0;
    color: var(--color-muted);
    font-size: 1.08rem;
    line-height: 1.68;
}

.learn-lead { max-width: 740px; }

.principle-line {
    max-width: 680px;
    margin: 20px auto 0;
    padding: 17px 20px;
    color: var(--color-ink);
    background: #fff3dc;
    border: 1px solid #ebc98c;
    border-radius: 12px;
    line-height: 1.55;
}

.lesson-feature {
    width: min(960px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 5px solid var(--color-accent);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
}

.lesson-feature-art {
    position: relative;
    min-height: 300px;
    display: grid;
    place-items: center;
    padding: 30px;
    overflow: hidden;
    background: linear-gradient(145deg, #f5dcae, #f9ebd2);
}

.lesson-feature-art::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px dashed rgba(101, 53, 31, .2);
    border-radius: 50%;
}

.lesson-feature-art img { position: relative; width: min(330px, 100%); height: auto; }

.clue-tag {
    position: absolute;
    right: 20px;
    bottom: 18px;
    padding: 8px 11px;
    color: #fff;
    background: var(--color-brand-strong);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lesson-feature-copy { padding: clamp(28px, 5vw, 52px); }
.lesson-number { margin: 0 0 9px; color: var(--color-brand); font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.lesson-feature h2 { margin: 0; color: var(--color-brand-strong); font-size: clamp(1.8rem, 4vw, 2.7rem); }
.lesson-subtitle { margin: 9px 0 20px; color: var(--color-brand); font-size: 1.06rem; font-weight: 700; }
.lesson-feature-copy > p:not(.lesson-number, .lesson-subtitle) { color: var(--color-muted); line-height: 1.62; }
.lesson-feature-copy .primary-link { margin-top: 10px; display: inline-flex; }

.lesson-feature-secondary { margin-top: 28px; }
.elimination-feature-art { background: linear-gradient(145deg, #f2dfbc, #fbf1dc); }
.mini-grid-preview {
    position: relative;
    z-index: 1;
    width: min(245px, 82%);
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    background: #fffaf0;
    border: 4px solid var(--color-brand-strong);
    border-radius: 12px;
    box-shadow: 0 12px 26px rgba(101, 53, 31, .16);
    transform: rotate(2deg);
}
.mini-grid-preview span { display: grid; place-items: center; border: 1px solid #cfae7d; color: #ad4c3c; font-size: clamp(1.4rem, 5vw, 2.7rem); font-weight: 900; }
.mini-grid-preview .preview-check { color: #52713f; background: #eef2df; }

.upcoming-lessons {
    width: min(850px, 100%);
    margin: 56px auto 0;
    padding: clamp(24px, 5vw, 42px);
    background: rgba(255, 253, 248, .72);
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

.upcoming-lessons h2 { margin: 0 0 20px; color: var(--color-brand-strong); }
.upcoming-lessons ul { margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.upcoming-lessons li { padding: 9px 12px; color: var(--color-brand-strong); background: #f7ead9; border-radius: 999px; font-weight: 700; }
.upcoming-lessons > p:last-child { margin: 0; color: var(--color-muted); line-height: 1.6; }

.lesson-main { padding-top: 24px; }
.back-link { display: inline-block; margin-bottom: 28px; color: var(--color-brand); font-weight: 800; text-underline-offset: 3px; }
.lesson-heading .eyebrow { margin-bottom: 8px; }
.lesson-deck { margin: 12px 0 0; color: var(--color-brand); font-size: clamp(1.13rem, 3vw, 1.4rem); font-weight: 700; }
.lesson-heading > p:last-child { max-width: 760px; margin-left: 0; }

.puzzle-lesson {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: clamp(22px, 5vw, 48px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 5px solid var(--color-accent);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
}

.puzzle-setup { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.puzzle-setup h2 { margin: 0 0 14px; color: var(--color-brand-strong); font-size: clamp(1.65rem, 4vw, 2.35rem); }
.puzzle-setup p:not(.lesson-number) { margin: 10px 0; line-height: 1.6; }
.critical-clue { display: inline-block; padding: 10px 14px; color: var(--color-brand-strong); background: #fff0cd; border: 2px solid #e9b95e; border-radius: 10px; }

.box-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.box-choice {
    position: relative;
    min-width: 0;
    min-height: 290px;
    padding: 18px 14px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: var(--color-ink);
    background: #fff9ee;
    border: 2px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer;
}

.box-choice:hover,
.box-choice:focus-visible { background: #fff3dc; border-color: var(--color-accent); }
.box-choice:disabled { opacity: 1; cursor: default; }
.box-choice[data-state="tried"] { border-style: dashed; }
.box-choice[data-state="chosen"] { background: #fff0cf; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(101, 53, 31, .11); }
.box-choice[data-state="solved"] { background: #f5f0e4; border-color: #99744a; }
.box-label { min-height: 46px; display: grid; place-items: center; color: var(--color-brand-strong); font-size: 1rem; font-weight: 900; letter-spacing: .04em; text-align: center; }
.box-choice img { width: min(240px, 100%); height: 158px; margin: -4px 0 4px; object-fit: contain; }
.choice-state { color: var(--color-muted); font-size: .82rem; font-weight: 700; }
.true-content { width: 100%; margin-top: 10px; padding: 8px; color: #fff; background: var(--color-brand); border-radius: 8px; font-size: .88rem; font-weight: 800; text-align: center; }

.lesson-feedback,
.draw-panel,
.deduction-panel {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 18px 20px;
    border-radius: 12px;
    line-height: 1.6;
}

.lesson-feedback { background: #f6efe4; border-left: 5px solid #b48750; }
.lesson-feedback[data-tone="try"] { background: #fff3dc; border-left-color: #d3822b; }
.lesson-feedback[data-tone="correct"] { background: #eef2df; border-left-color: #78843a; }
.lesson-feedback h3 { margin: 0 0 7px; color: var(--color-brand-strong); }
.lesson-feedback p { margin: 0; }
.draw-panel { background: #fff8e9; border: 1px solid #ead2a5; text-align: center; }
.draw-panel p { margin: 0 0 16px; }
.lesson-button { min-height: 46px; padding: 11px 17px; color: #fff; background: var(--color-brand); border: 0; border-radius: 9px; font-weight: 800; cursor: pointer; }
.lesson-button:hover, .lesson-button:focus-visible { background: var(--color-brand-strong); }
.lesson-button.secondary { color: var(--color-brand-strong); background: #f1ddbb; }

.deduction-panel { text-align: center; background: #f7f1e7; border: 1px solid var(--color-border); }
.fruit-reveal { display: flex; align-items: center; justify-content: center; gap: 18px; }
.fruit-reveal img { width: 100px; height: 100px; object-fit: contain; }
.fruit-reveal p { margin: 0; font-size: 1.15rem; }
.deduction-copy { min-height: 84px; margin: 8px 0 15px; display: grid; place-items: center; }
.deduction-copy p { margin: 0; }
.deduction-count { display: block; margin-bottom: 5px; color: var(--color-brand); font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.elimination-clues {
    max-width: 850px;
    margin: 0 auto 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.elimination-clue { margin: 0; padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: var(--color-muted); background: #f8f1e5; border: 2px solid transparent; border-radius: 10px; line-height: 1.4; }
.elimination-clue span { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #a77b4f; border-radius: 50%; font-weight: 900; }
.elimination-clue.is-current { color: var(--color-brand-strong); background: #fff0cd; border-color: #e4b966; box-shadow: 0 0 0 3px rgba(228, 185, 102, .15); }
.elimination-clue.is-used { color: #617044; background: #eef2df; }
.elimination-clue.is-used span { background: #78843a; }

.lesson-grids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lesson-grid-card { min-width: 0; padding: 18px; background: #fffaf0; border: 1px solid var(--color-border); border-radius: 14px; }
.lesson-grid-card h3 { margin: 0 0 14px; color: var(--color-brand-strong); font-size: 1.05rem; text-align: center; }
.mini-lesson-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mini-lesson-grid th, .mini-lesson-grid td { height: 54px; padding: 4px; border: 1px solid #cfae7d; text-align: center; }
.mini-lesson-grid th { color: var(--color-brand-strong); background: #f3e3c7; font-size: .86rem; }
.mini-lesson-grid thead th:first-child { width: 29%; }
.mini-lesson-grid td { color: #ad4c3c; background: #fff; font-size: 1.65rem; font-weight: 900; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.mini-lesson-grid td[data-state="x"] { background: #fff4ed; }
.mini-lesson-grid td[data-state="check"] { color: #52713f; background: #eef2df; transform: scale(.94); }
.grid-key { margin: 12px 0 0; color: var(--color-muted); font-size: .8rem; text-align: center; }
.grid-key span { margin-left: 8px; font-size: 1rem; font-weight: 900; }
.grid-key span:first-child { margin-left: 0; }
.key-x { color: #ad4c3c; }
.key-check { color: #52713f; }

.deduction-challenge { max-width: 850px; margin: 28px auto 0; padding: clamp(20px, 4vw, 30px); background: #f7f1e7; border: 1px solid var(--color-border); border-radius: 14px; text-align: center; }
.deduction-challenge h3 { margin: 0 auto 18px; max-width: 690px; color: var(--color-brand-strong); font-size: clamp(1.15rem, 3vw, 1.42rem); line-height: 1.4; }
.deduction-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.deduction-option { min-height: 58px; padding: 10px 12px; color: var(--color-brand-strong); background: #fffaf0; border: 2px solid #d9bc8c; border-radius: 10px; font: inherit; font-weight: 800; cursor: pointer; }
.deduction-option:hover, .deduction-option:focus-visible { background: #fff0cd; border-color: var(--color-accent); }
.deduction-option.is-tried { border-style: dashed; }
.deduction-option.is-correct { color: #465d36; background: #eef2df; border-color: #78843a; }
.deduction-option:disabled { opacity: .72; cursor: default; }
.deduction-option.is-correct:disabled { opacity: 1; }
.deduction-challenge .lesson-feedback { margin-top: 18px; text-align: left; }
.deduction-challenge > .lesson-button { margin-top: 18px; }

.final-neighbor-solution { margin: 20px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.final-neighbor-solution p { margin: 0; padding: 14px 10px; display: grid; gap: 4px; background: rgba(255, 255, 255, .62); border-radius: 10px; text-align: center; }
.final-neighbor-solution strong { color: var(--color-brand-strong); }
.final-neighbor-solution span { color: var(--color-muted); font-size: .9rem; }

.lesson-conclusion { max-width: 850px; margin: 34px auto 0; padding: clamp(22px, 4vw, 36px); background: #fff3dc; border: 2px solid #e4b966; border-radius: 16px; }
.lesson-conclusion h2 { margin: 0 0 14px; color: var(--color-brand-strong); }
.lesson-conclusion p, .lesson-conclusion li { line-height: 1.62; }
.solver-questions { margin: 20px 0; padding: 15px 18px; background: rgba(255, 255, 255, .58); border-radius: 10px; }
.solver-questions p { margin: 0 0 8px; }
.solver-questions ul { margin: 0; padding-left: 22px; }

.reasoning-links { width: min(1080px, 100%); margin: 52px auto 0; }
.reasoning-links > h2 { margin: 0 0 22px; color: var(--color-brand-strong); }
.reasoning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.reasoning-grid article { padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 13px; }
.reasoning-grid h3 { margin: 0 0 8px; color: var(--color-brand-strong); }
.reasoning-grid p { margin: 7px 0 0; color: var(--color-muted); line-height: 1.55; }
.reasoning-grid a { color: var(--color-brand); font-weight: 800; text-underline-offset: 3px; }

[hidden] { display: none !important; }

@media (max-width: 760px) {
    .site-frame[data-page="learn"] { min-height: 100vh; min-height: 100svh; height: auto; overflow: visible; }
    .site-frame[data-page="learn"] .site-main { overflow-y: visible; }
    .lesson-feature { grid-template-columns: 1fr; }
    .lesson-feature-art { min-height: 245px; }
    .box-choices { grid-template-columns: 1fr; }
    .elimination-clues, .lesson-grids { grid-template-columns: 1fr; }
    .deduction-options { grid-template-columns: 1fr; }
    .deduction-option { min-height: 50px; }
    .final-neighbor-solution { grid-template-columns: 1fr; }
    .box-choice { min-height: 0; display: grid; grid-template-columns: minmax(112px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto; column-gap: 12px; text-align: left; }
    .box-label { min-height: 0; place-items: end start; align-self: end; text-align: left; }
    .box-choice img { grid-column: 1; grid-row: 1 / 4; width: 100%; height: 110px; margin: 0; }
    .choice-state { grid-column: 2; align-self: start; }
    .true-content { grid-column: 2; margin-top: 8px; }
    .reasoning-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .learn-main { padding: 22px 12px 48px; }
    .puzzle-lesson { padding: 20px 12px 26px; }
    .box-choices { gap: 12px; }
    .box-choice { padding: 13px 10px; grid-template-columns: 104px minmax(0, 1fr); }
    .box-label { font-size: .9rem; overflow-wrap: anywhere; }
    .lesson-feedback, .draw-panel, .deduction-panel { padding: 16px 14px; }
    .fruit-reveal { gap: 10px; }
    .fruit-reveal img { width: 78px; height: 78px; }
    .lesson-grid-card { padding: 12px; }
    .mini-lesson-grid th, .mini-lesson-grid td { height: 47px; }
    .mini-lesson-grid th { font-size: .76rem; }
    .mini-lesson-grid td { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .box-choice, .lesson-button { transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
    .box-choice:not(:disabled):hover { transform: translateY(-2px); }
}


.negative-grid-card {
    max-width: 650px;
    margin: 0 auto;
}

.negative-grid-card .mini-lesson-grid thead th:first-child {
    width: 24%;
}

@media (max-width: 430px) {
    .negative-grid-card .mini-lesson-grid th {
        font-size: .7rem;
        overflow-wrap: anywhere;
    }
}