/* Shared, scoped reading and visual models for the Chinese learning articles. */
.post-content .learn-story { margin: 28px 0; color: var(--article-text-color, #25334c); font-size: 17px; line-height: 1.9; overflow-wrap: anywhere; }
.learn-story, .learn-story * { box-sizing: border-box; }
.learn-story h2 { font-size: clamp(21px, 2.5vw, 26px); line-height: 1.5; margin: 20px 0 14px; }
.learn-story h3 { font-size: 18px; margin: 0 0 8px; }
.learn-story p { margin: 0 0 16px; }
.learn-story [id], .learn-story[id] { scroll-margin-top: 100px; }
.learn-dialogue { display: flex; align-items: center; gap: 22px; padding: 22px; border-radius: 20px; background: #f4efff; }
.learn-dialogue img { flex: 0 0 130px; width: 130px; height: 130px; object-fit: contain; }
.learn-dialogue > div { min-width: 0; }
.learn-story .learn-eyebrow { color: #66429c; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.learn-diagram { margin: 24px 0; padding: 20px; background: #eef6ff; border: 1px solid #ccdef5; border-radius: 18px; }
.learn-diagram figcaption { font-weight: 700; color: #284f7e; margin-bottom: 16px; font-size: 15px; }
.learn-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 14px; padding: 0 !important; margin: 0 !important; counter-reset: learn-step; }
.learn-steps li { counter-increment: learn-step; min-width: 0; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid #d7e3f1; margin: 0 !important; }
.learn-steps li::before { content: counter(learn-step, decimal-leading-zero); display: block; font-weight: 800; color: #5a46a0; margin-bottom: 6px; }
.learn-steps strong, .learn-steps span { display: block; }
.learn-steps strong { font-size: 17px; color: #233c66; }
.learn-steps span { margin-top: 8px; font-size: 15px; line-height: 1.7; }
.learn-caution { border-left: 4px solid #dcac45; padding: 18px 20px; background: #fff8e8; border-radius: 0 14px 14px 0; margin: 24px 0; }
.learn-answer { padding: 0 18px; border: 1px solid #b9dacb; border-radius: 14px; background: #f0faf5; }
.learn-answer summary { cursor: pointer; padding: 16px 0; min-height: 48px; color: #226149; font-weight: 700; }
.learn-answer summary:focus-visible { outline: 3px solid #7654be; outline-offset: 3px; }
.learn-lab-state { margin: 16px 0; padding: 20px; background: #f0f7ff; border: 1px solid #c8d9ef; border-radius: 16px; }
.learn-lab-state[hidden] { display: none; }
.learn-lab-state figcaption { font-weight: 700; margin-bottom: 16px; }
.learn-tokens { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.learn-tokens span { padding: 12px 18px; background: #fff; border: 2px solid #7560b2; border-radius: 10px; font-size: 18px; font-weight: 700; }
.learn-tokens .is-excluded { color: #5e6978; border-style: dashed; background: #e5e9ee; }
.learn-lab-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.learn-lab-controls button { font: inherit; font-size: 16px; min-height: 46px; padding: 8px 16px; border: 1px solid #5f459a; border-radius: 10px; background: #fff; color: #513681; cursor: pointer; }
.learn-lab-controls button:focus-visible { outline: 3px solid #6745b4; outline-offset: 3px; }
.learn-lab-controls button:disabled { opacity: .45; cursor: default; }
.learn-live-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.learn-navigation { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.learn-navigation a { flex: 1 1 220px; min-width: 0; padding: 18px; border: 1px solid #d1def0; border-radius: 14px; }
.learn-navigation small, .learn-navigation strong { display: block; line-height: 1.7; }
.learn-navigation small { font-size: 14px; }
.learn-navigation strong { font-size: 17px; }
/* Restore comfortable type sizes in the existing programming explanations. */
.post-content:has(.learn-story) > [class$="-story"] { font-size: 17px; line-height: 1.85; min-width: 0; }
.post-content:has(.learn-story) > [class$="-story"] p,
.post-content:has(.learn-story) > [class$="-story"] li { font-size: 16px; line-height: 1.85; }
.post-content:has(.learn-story) > [class$="-story"] :is(.cards,.compare,.state-box,.trace,.array-row,.memory-array,.index-row,.char-row) :is(p,span,b,strong,h3) { font-size: 15px; line-height: 1.65; }
.post-content:has(.learn-story) pre { max-width: 100%; overflow-x: auto; font-size: 14px; line-height: 1.75; }
.post-content:has(.learn-story) table { display: block; max-width: 100%; overflow-x: auto; }
.post-content:has(.learn-story) img { max-width: 100%; }
@media (max-width: 640px) {
    .post-content .learn-story { font-size: 16px; margin: 22px 0; }
    .learn-dialogue { display: block; padding: 18px; }
    .learn-dialogue img { display: block; width: 100px; height: 100px; margin: 0 auto 12px; }
    .learn-diagram { padding: 14px; margin: 20px 0; }
    .learn-steps { grid-template-columns: minmax(0, 1fr); }
    .learn-steps li { padding: 14px; }
    .learn-steps li::before { float: left; margin-right: 12px; }
    .learn-caution { padding: 16px; }
    .post-content:has(.learn-story) > [class$="-story"] { font-size: 16px; }
    .post-page:has(.learn-story) .post-header__title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; overflow-wrap: anywhere; }
    .post-page:has(.learn-story) .post-header__summary { margin-right: 0; font-size: 15px; line-height: 1.8; }
    .post-page:has(.learn-story) .post-header__title-row { align-items: flex-start; }
}