.learning-question {
    width: min(1050px, calc(100% - 2rem));
    margin: -12px auto 0;
    color: #123f38;
}

.learning-question__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.learning-question__header h1,
.learning-question h2,
.learning-question h3 {
    font-family: Georgia, "Times New Roman", serif;
    color: #0b4840;
}

.learning-question__header h1 {
    margin: .35rem 0 0;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.05;
}

.learning-question__eyebrow {
    display: inline-block;
    color: #008676;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.learning-question__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.learning-question__tabs a {
    display: grid;
    min-height: 2.2rem;
    place-items: center;
    padding: .42rem .82rem;
    border: 1px solid #cfe2de;
    border-radius: 999px;
    color: #5e7d77;
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.1;
    text-align: center;
}

.learning-question__tabs a.is-active,
.learning-question__tabs a:hover {
    border-color: #0b4840;
    background: #0b4840;
    color: #fff;
}

.learning-card {
    border: 1px solid #d4e6e2;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 14px 34px rgba(20, 78, 69, .06);
}

.learning-question__question { scroll-margin-top: 90px; }

.learning-question__problem {
    padding: clamp(1.2rem, 3vw, 2rem);
}

.learning-question__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: #007f70;
    font-size: .76rem;
    font-weight: 700;
}

.learning-question__meta span {
    padding: .35rem .65rem;
    border-radius: 999px;
    background: #eef8f6;
}

.learning-question__text {
    margin-top: 1.3rem;
    color: #133f38;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.65;
}

.learning-question__image,
.learning-guide__visual {
    margin: 1.35rem 0 0;
    text-align: center;
}

.learning-question__image img,
.learning-guide__visual img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: .75rem;
}

.learning-question__save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
}

.learning-question__save span { color: #58766f; font-size: .82rem; }

.learning-button {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    padding: .62rem .9rem;
    border: 1px solid #cee1dd;
    border-radius: .7rem;
    background: #fff;
    color: #17463e;
    font: inherit;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.learning-button--quiet { min-height: 2.35rem; padding: .5rem .75rem; background: #f5faf9; }
.learning-button--quiet.is-saved { border-color: #9bcfc4; background: #e9f7f4; color: #006d5f; }
.learning-button--experiment { border-color: #df7812; background: #df7812; color: #fff; }

.learning-question__route {
    scroll-margin-top: 90px;
    margin-top: 1.25rem;
    overflow: hidden;
}

.learning-question__route-intro {
    padding: clamp(1.15rem, 3vw, 1.7rem);
}

.learning-question__route h2 {
    margin: .4rem 0 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.learning-question__route ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}

.learning-question__route li {
    display: grid;
    grid-template-columns: 1.8rem 1fr;
    gap: .6rem;
    align-items: start;
    color: #5d7772;
    font-size: .84rem;
    line-height: 1.45;
}

.learning-question__route li b {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    background: #edf8f5;
    color: #008676;
}

.learning-accordion { border-top: 1px solid #d8e8e4; }
.learning-accordion__item + .learning-accordion__item { border-top: 1px solid #d8e8e4; }

.learning-accordion__control {
    display: flex;
    width: 100%;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem clamp(1.15rem, 3vw, 1.7rem);
    border: 0;
    background: #fff;
    color: #17463e;
    font: inherit;
    font-size: .95rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.learning-accordion__control:hover { background: #f6fbfa; }
.learning-accordion__control[aria-expanded="true"] { background: #f1f9f7; }
.learning-accordion__control--primary { color: #007c6c; }
.learning-accordion__control--video { color: #fff; background: #7156e8; }
.learning-accordion__control--video:hover,
.learning-accordion__control--video[aria-expanded="true"] { background: #6246db; }
.learning-accordion__control--experiment { color: #fff; background: #df7812; }
.learning-accordion__control--experiment:hover,
.learning-accordion__control--experiment[aria-expanded="true"] { background: #ca6808; }

.learning-accordion__control span { display: grid; gap: .12rem; }
.learning-accordion__control small {
    color: #6c8983;
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.learning-accordion__control--video small,
.learning-accordion__control--experiment small { color: rgba(255, 255, 255, .78); }

.learning-accordion__control i {
    position: relative;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 1.7rem;
    border: 1px solid #cfe1dd;
    border-radius: 50%;
}

.learning-accordion__control--video i,
.learning-accordion__control--experiment i { border-color: rgba(255, 255, 255, .55); }
.learning-accordion__control i::before,
.learning-accordion__control i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .65rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
}
.learning-accordion__control i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .18s ease; }
.learning-accordion__control[aria-expanded="true"] i::after { transform: translate(-50%, -50%) rotate(0deg); }

.learning-accordion__panel { padding: 0 clamp(1rem, 3vw, 1.7rem) clamp(1rem, 3vw, 1.7rem); background: #f8fbfa; }
.learning-accordion__panel[hidden] { display: none; }

.learning-question__hint {
    padding: 1rem;
    border-left: 3px solid #d97818;
    border-radius: .65rem;
    background: #fff8ef;
}
.learning-question__hint p { margin: .35rem 0 0; color: #5d6f6b; line-height: 1.55; }

.learning-guide,
.learning-formula,
.learning-other-formulas,
.learning-written-solution,
.learning-video {
    border: 1px solid #d7e6e2;
    border-radius: .9rem;
    background: #fff;
    padding: clamp(1rem, 3vw, 1.6rem);
}

.learning-guide > h2 { margin: 0 0 1.15rem; font-size: clamp(1.65rem, 3vw, 2.25rem); }

.learning-guide__overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: 1.45rem;
}
.learning-guide__overview > div { padding: .9rem .8rem; border-radius: .7rem; background: #edf7f5; }
.learning-guide__overview span { color: #008676; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.learning-guide__overview p { margin: .45rem 0 0; color: #456a64; font-size: .78rem; line-height: 1.4; }

.learning-guide__steps { border-top: 1px solid #d6e5e1; }
.learning-guide__step {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .75rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #d6e5e1;
}
.learning-guide__step > b {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border-radius: 50%;
    background: #7156e8;
    color: #fff;
    font-size: .8rem;
}
.learning-guide__step h3 { margin: .1rem 0 .3rem; color: #173f38; font-size: 1.05rem; font-weight: 500; }
.learning-guide__step p { margin: 0; color: #627f79; font-size: .82rem; line-height: 1.5; }
.learning-guide__formula { margin-top: .65rem; padding: .7rem; border-radius: .65rem; background: #edf7f5; color: #6952d6; text-align: center; }

.learning-guide__answer {
    display: grid;
    gap: .25rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: .75rem;
    background: #e8f6f4;
    color: #17463e;
    text-align: center;
}
.learning-guide__answer > span,
.learning-formula__details > div > span {
    display: block;
    color: #008676;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.learning-guide__answer strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.learning-guide__answer p { margin: 0; color: #5f7c76; font-size: .82rem; }

.learning-math-content { color: #173f38; font-size: 1rem; line-height: 1.85; }
.learning-math-content mjx-container[display="true"],
.learning-formula__equation mjx-container[display="true"],
.learning-formula__unit mjx-container[display="true"],
.learning-guide__formula mjx-container[display="true"],
.learning-other-formulas mjx-container[display="true"] {
    overflow-x: auto;
    overflow-y: hidden;
    padding: .35rem 0;
}

.learning-formulas { display: grid; gap: .9rem; }
.learning-formula h3 { margin: 0; font-size: 1.35rem; }
.learning-formula__equation { margin: .9rem 0; padding: .9rem; border-radius: .7rem; background: #f0f8f6; color: #6952d6; font-size: 1.1rem; text-align: center; }
.learning-formula__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.learning-formula__details > div { padding: .8rem; border-top: 2px solid #d6e7e3; background: #f5faf9; }
.learning-formula__details p { margin: .5rem 0 0; color: #56746e; font-size: .82rem; line-height: 1.5; }
.learning-formula__variables { margin: .5rem 0 0; }
.learning-formula__variables div { display: grid; grid-template-columns: 2.2rem 1fr; gap: .45rem; padding: .36rem 0; border-top: 1px solid #dceae7; }
.learning-formula__variables dt { color: #6952d6; font-family: Georgia, "Times New Roman", serif; font-size: .95rem; }
.learning-formula__variables dd { margin: 0; color: #4f6f69; font-size: .82rem; }
.learning-formula__unit { margin-top: .35rem; color: #184b42; }

.learning-other-formulas h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.learning-other-formulas__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.learning-other-formulas__grid > div { min-width: 0; padding: .7rem; border: 1px solid #deebe8; border-radius: .65rem; background: #f4f9f8; text-align: center; }
.learning-other-formulas__grid span { display: block; color: #55746e; font-size: .7rem; font-weight: 750; }
.learning-other-formulas__grid > div > div { color: #6952d6; font-size: .88rem; }

.learning-written-solution { border-left: 3px solid #078574; }
.learning-written-solution h2,
.learning-video h2 { margin: .4rem 0 1rem; }
.learning-video p { color: #5a7771; line-height: 1.6; }
.learning-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .8rem; background: #092f2a; }
.learning-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.learning-experiment__card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr);
    gap: 1.25rem;
    padding: clamp(1.1rem, 3vw, 1.5rem);
    border: 1px solid #cfc4fc;
    border-radius: .9rem;
    background: linear-gradient(135deg, #f2efff 0%, #faf8ff 58%, #fff8ef 100%);
}
.learning-experiment__card h2 { margin: .4rem 0 .55rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.learning-experiment__card p { max-width: 650px; margin: 0; color: #58766f; line-height: 1.55; }
.learning-experiment__values { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0; }
.learning-experiment__values span { padding: .38rem .62rem; border: 1px solid #d6e6e2; border-radius: 999px; background: rgba(255, 255, 255, .86); font-size: .74rem; }
.learning-experiment__challenge { align-self: stretch; padding: 1rem; border-left: 3px solid #df7812; background: rgba(255, 255, 255, .86); }
.learning-experiment__challenge > span { color: #cb6505; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.learning-experiment__challenge h3 { margin: .4rem 0; font-size: 1.12rem; }
.learning-experiment__challenge p { font-size: .84rem; }

.learning-question__bottom-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; color: #007f70; font-weight: 700; }

@media (max-width: 780px) {
    .learning-question__header { display: block; }
    .learning-question__tabs { justify-content: flex-start; margin-top: 1rem; }
    .learning-question__route ol { grid-template-columns: 1fr; gap: .65rem; }
    .learning-guide__overview { grid-template-columns: 1fr; }
    .learning-experiment__card { grid-template-columns: 1fr; }
    .learning-experiment__challenge { border-top: 3px solid #df7812; border-left: 0; }
}

@media (max-width: 560px) {
    .learning-question { width: min(100% - 1rem, 1050px); }
    .learning-question__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
    .learning-question__tabs a { min-height: 2.15rem; padding: .38rem .55rem; font-size: .72rem; }
    .learning-question__problem { padding: 1rem; }
    .learning-question__route-intro { padding: 1rem; }
    .learning-accordion__control { min-height: 3.65rem; padding: .72rem 1rem; font-size: .88rem; }
    .learning-accordion__control small { font-size: .59rem; }
    .learning-accordion__panel { padding: 0 .7rem .7rem; }
    .learning-guide,
    .learning-formula,
    .learning-other-formulas,
    .learning-written-solution,
    .learning-video { padding: .85rem; }
    .learning-guide__step { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .55rem; }
    .learning-guide__step > b { width: 1.55rem; height: 1.55rem; }
    .learning-formula__details,
    .learning-other-formulas__grid { grid-template-columns: 1fr; }
    .learning-other-formulas__grid > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: .5rem; text-align: left; }
    .learning-other-formulas__grid span { text-align: left; }
    .learning-other-formulas__grid > div > div { text-align: right; }
    .learning-experiment__card { padding: .9rem; }
    .learning-question__bottom-nav { flex-direction: column; }
}