.practice-diagram{font:16px/1.65 system-ui,sans-serif;margin:32px 0;padding:24px;border:1px solid #9b9f94;border-radius:6px}
.practice-diagram figcaption{font:600 24px/1.3 Georgia,serif;margin-bottom:24px}
.practice-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.practice-flow li{position:relative;padding:16px;border-top:4px solid #a73519;background:#eae6da;color:#101211}
.practice-flow li:not(:last-child)::after{content:'→';position:absolute;right:-22px;top:12px;font-size:22px;color:#a73519}
.practice-flow strong,.practice-flow span{display:block}.practice-flow strong{font-size:17px;margin-bottom:8px}
.practice-diagram>p{font:14px/1.7 system-ui,sans-serif;margin:24px 0 0;color:inherit}
.visibility-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.visibility-map section{padding:16px;border:1px solid #899281;border-top:4px solid #315d75}
.visibility-map section:first-child{border-top-color:#a73519}.visibility-map section:last-child{border-top-color:#276647}
.visibility-map h3{font:600 19px/1.3 Georgia,serif;margin:0 0 12px}.visibility-map p{font:15px/1.65 system-ui,sans-serif;margin:12px 0;color:inherit}.visibility-map strong{font-size:14px}
.lesson-page .practice-diagram{margin-block:24px}.lesson-page .practice-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-page .visibility-map{grid-template-columns:1fr}.lesson-page .practice-flow li::after{display:none}
@media(max-width:680px){.practice-diagram{padding:16px}.practice-flow,.visibility-map{grid-template-columns:1fr}.lesson-page .practice-flow{grid-template-columns:1fr}.practice-flow li:not(:last-child)::after{content:'↓';right:16px;top:auto;bottom:-26px}}
@media print{.practice-diagram{break-inside:avoid}.practice-diagram *{color:#101211!important}}