.learning-art{margin:4px 0 25px;break-inside:avoid}
.illustrated-lesson{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin:8px 0 26px}
.illustrated-lesson>.learning-art{margin:0;position:sticky;top:22px;min-width:0}
.illustrated-copy{min-width:0}
.illustrated-copy>.card:first-child{margin-top:0}
.illustrated-copy>.card{padding:18px;background:transparent;border-bottom:1px solid var(--line);border-radius:0;margin:0 0 16px}
.illustrated-copy .hanzi{font-size:19px;line-height:1.85}
.illustrated-copy .traditional{font-size:17px;line-height:1.8}
.illustrated-copy .pinyin{font-size:17px;line-height:1.75;overflow-wrap:anywhere}
.illustrated-copy .translation{font-size:15px;line-height:1.8}
@media(min-width:1100px){body.learning-view:has(.illustrated-lesson) main{max-width:1520px}.illustrated-copy>.card{padding:0 0 22px}}
@media(max-width:1099px){.illustrated-lesson{grid-template-columns:minmax(0,1fr)}.illustrated-lesson>.learning-art{position:static;max-width:560px;width:100%;justify-self:center}.illustrated-copy>.card{padding:0 0 20px}}
@media print{.illustrated-lesson{grid-template-columns:1fr 1fr;gap:6mm}.illustrated-lesson>.learning-art{position:static}}
.learning-art-open{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:18px;background:#f7f2e5;overflow:hidden;cursor:zoom-in;line-height:0}
.learning-art-open img{display:block;width:100%;height:auto;object-fit:contain}
.learning-art-open:hover{background:#f7f2e5;border-color:var(--accent)}
.learning-art-enlarge{position:absolute;top:13px;right:13px;display:flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid #deded0;border-radius:30px;color:#173f32;background:#fffef9f5;font-size:12px;font-weight:550;line-height:1.5;box-shadow:0 2px 7px #173f3210}
.learning-art-enlarge svg{width:17px;height:17px}
.learning-art figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:9px;color:var(--muted);font-size:12px;line-height:1.6}
.learning-art-download{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 12px;box-sizing:border-box;border:1px solid #dce3d7;border-radius:10px;background:#fffef9;color:#235842;font-size:13px;text-decoration:none;font-weight:600}
.learning-art-download:hover{background:#eef4e9;border-color:#8cab96}
.learning-art-download:focus-visible,.learning-art-close:focus-visible{outline:3px solid #b85f30;outline-offset:3px}
.learning-art-viewer-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.learning-art-error{padding:16px;background:#f7f6f0;border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.6;color:var(--muted)}
.learning-art-viewer{width:min(1280px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:16px;border:1px solid #dce3d7;border-radius:20px;background:#fffef9;color:#173f32;box-shadow:0 22px 80px #102b2560;overflow:auto}
.learning-art-viewer::backdrop{background:#0d2523cc;backdrop-filter:blur(4px)}
.learning-art-viewer figure{margin:12px 0 0}
.learning-art-viewer figure img{display:block;width:100%;height:auto;max-height:calc(100dvh - 155px);object-fit:contain;border-radius:10px}
.learning-art-viewer figcaption{margin-top:12px;color:#607068;font-size:13px;line-height:1.6}
.learning-art-close{display:block;margin-left:auto;min-height:44px;background:#173f32;color:#fffef9;border:0}
.learning-art-close:hover{background:#285f4b}
@media(max-width:420px){.learning-art{margin-bottom:20px}.learning-art-open{border-radius:13px}.learning-art-enlarge{top:8px;right:8px;font-size:11px;padding:6px 9px}.learning-art-viewer{padding:12px;width:calc(100vw - 20px);border-radius:16px}}
@media print{.learning-art-open{border:0;outline:0;box-shadow:none}.learning-art-enlarge,.learning-art-viewer,.learning-art-error,.learning-art-download{display:none!important}.learning-art{max-width:140mm;margin:5mm auto}.learning-art figcaption{font-size:9pt}}