/* Learning palette: summary / reference / process / mistake. Scoped to the local lesson body. */
.znk-concepts-design .znk-cl-reading-body{--learn-mint:#e8f7f1;--learn-pink:#fff0f5;--learn-yellow:#fff7d7}
.znk-concepts-design .znk-cl-reading-body .znk-cl-kicker{background:none;border:0;padding:0;color:#526581;font-weight:700;font-size:13px;box-shadow:none}
.znk-concepts-design .znk-cl-reading-body .znk-cl-tldr{background:var(--learn-yellow)!important;border:0!important;border-radius:22px!important;padding:32px!important;position:relative}
.znk-concepts-design .znk-cl-tldr>.znk-cl-kicker{color:#253d77;border-bottom:4px solid #ffdc58;padding-bottom:4px;margin-bottom:16px}
.znk-concepts-design .znk-cl-tldr>h2{font-size:27px;max-width:30ch;margin-bottom:24px}
.znk-concepts-design .znk-cl-tldr>ul{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;list-style:none;padding:0;margin:0}
.znk-concepts-design .znk-cl-tldr>ul>li{position:relative;padding:12px 22px 0 0;margin:0;border-top:1px solid #253d7722;font-size:16px;line-height:1.85;color:#354b70}
.znk-concepts-design .znk-cl-tldr>ul>li:before{content:'';position:absolute;right:0;top:22px;width:8px;height:8px;border:2px solid #253d77;border-radius:2px;background:#ffdc58;transform:rotate(-10deg)}
/* Chapters form strong landmarks; lengthy prose stays on white. */
.znk-concepts-design .znk-cl-reading-body>.znk-cl-ch>h2{background:#3159d9;color:white;border-radius:18px 18px 3px 18px;padding:23px 27px;display:flex;align-items:center;gap:16px;font-size:30px;line-height:1.45;margin-bottom:18px;box-shadow:0 6px 0 #e7edff}
.znk-concepts-design .znk-cl-ch-num{background:#ffdc58;color:#253d77;width:46px;height:46px;border-radius:12px 12px 3px 12px;flex:none;margin:0;font-size:25px}
.znk-concepts-design .znk-cl-ch-blurb{padding-inline:6px;font-size:18px!important;color:#526581!important}
.znk-concepts-design .znk-cl-sec{border:0;padding:8px 8px;margin:36px 0;background:#fff}
.znk-concepts-design .znk-cl-sec>h3{padding-right:18px;border-right:5px solid #ec1670;font-size:26px;line-height:1.5;margin:0 0 22px}
.znk-concepts-design .znk-cl-sec p{margin:16px 0;line-height:2}
.znk-concepts-design .znk-cl-sec strong{color:#253d77;text-decoration:underline;text-decoration-color:#ffdc58;text-decoration-thickness:5px;text-underline-offset:4px;text-decoration-skip-ink:none}
.znk-concepts-design .znk-cl-il{color:#3159d9;text-decoration-color:#9bb0ff;text-underline-offset:4px}
/* Reference sheets: clear blue column headings, calm alternating rows. */
.znk-concepts-design .znk-cl-fig{background:#f0f4ff;border:1px solid #d8e3fb;border-radius:18px;padding:25px;margin:30px 0;overflow:hidden}
.znk-concepts-design .znk-cl-fig thead th,.znk-concepts-design .znk-cl-qt thead th{background:#253d77;color:#fff;font-weight:700;padding:16px 14px;text-align:right}
.znk-concepts-design .znk-cl-fig tbody td,.znk-concepts-design .znk-cl-fig tbody th{background:white;border-color:#dce5f7}
.znk-concepts-design .znk-cl-fig tbody tr:nth-child(even)>*{background:#e7edff}
.znk-concepts-design .znk-cl-qt-wrap{border:1px solid #ccd8f5;border-radius:14px}
.znk-concepts-design .znk-cl-qt tbody th{background:#e7edff;color:#253d77;padding:16px;font-size:16px}
.znk-concepts-design .znk-cl-qt tbody td{background:white;font-weight:500;padding:16px;font-size:16px}
.znk-concepts-design .znk-cl-qt tbody tr:nth-child(even) td{background:#f5f7ff}
.znk-concepts-design .znk-cl-fig figcaption{padding:13px 16px;margin-top:20px;background:white;border-right:4px solid #3159d9;border-radius:3px;color:#354b70;font-size:15px}
/* Worked steps are a connected sequence, rather than another table. */
.znk-concepts-design .znk-cl-fig.is-process{background:#e8f7f1;border-color:#c8e6db}
.znk-concepts-design .is-process .znk-cl-flow{gap:26px 30px;margin:5px 0;grid-template-columns:1fr 1fr}
.znk-concepts-design .is-process .znk-cl-flow li{position:relative;padding:0 50px 12px 8px;border:0;border-bottom:1px solid #bddfd2;background:none}
.znk-concepts-design .is-process .znk-cl-flow li:before{position:absolute;right:0;top:0;width:34px;height:34px;background:#253d77;color:#fff;font-size:18px;line-height:34px;border-radius:50%;margin:0}
.znk-concepts-design .is-process .znk-cl-flow .t{font-size:21px;line-height:1.4}
.znk-concepts-design .is-process .znk-cl-flow .x{font-size:16px;line-height:1.9}
.znk-concepts-design .is-process figcaption{border-right-color:#16816d}
.znk-concepts-design .znk-cl-triangle{background:#e7edff;border:1px solid #c8d5ff;padding:25px;border-radius:24px;margin:30px 0}
.znk-concepts-design .znk-cl-triangle b{font-family:StudioSecular;font-weight:400;font-size:30px;white-space:nowrap}
/* Contrast is semantic: the mistaken route and the correct one. */
.znk-concepts-design #pitfalls>h2{border-right:6px solid #ec1670;padding-right:20px}
.znk-concepts-design .znk-cl-pits{grid-template-columns:1fr;gap:26px}
.znk-concepts-design .znk-cl-pit{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:1px solid #e4dfe9;border-radius:16px;box-shadow:none;padding:25px;background:#fff}
.znk-concepts-design .znk-cl-pit h3{grid-column:1/-1;font-size:23px;margin:0 0 8px}
.znk-concepts-design .znk-cl-pit .w,.znk-concepts-design .znk-cl-pit .r{padding:18px 16px;border-radius:10px;align-items:start;font-size:16px;line-height:1.85;margin:0}
.znk-concepts-design .znk-cl-pit .w{background:#fff0f5;color:#8e2147}
.znk-concepts-design .znk-cl-pit .r{background:#e8f7f1;color:#155d50}
.znk-concepts-design .znk-cl-pit p{grid-column:1/-1;font-size:16px;line-height:1.9;margin:10px 0 0}
.znk-concepts-design #samples>h2{background:#ffdc58;padding:22px 25px;border-radius:14px;line-height:1.4}
.znk-concepts-design #samples{border-top:0!important}
.znk-concepts-design .znk-cl-sq{border-right-width:1px;border-top:5px solid #3159d9;background:#f4f7ff}
.znk-concepts-design .znk-cl-sq-top{padding-bottom:14px;border-bottom:1px solid #d4def6}
.znk-concepts-design .znk-cl-sq.right{border-top-color:#16816d}.znk-concepts-design .znk-cl-sq.wrong{border-top-color:#c82a58}
.znk-concepts-design .znk-cl-sq details[open]{padding:18px;background:#e8f7f1;border-radius:10px;margin-top:18px}
.znk-concepts-design .znk-cl-bite{border:1px solid #bfd0f3;box-shadow:none}
.znk-concepts-design .znk-cl-bite-head{background:#253d77}.znk-concepts-design .znk-cl-bite-head h3{color:white}.znk-concepts-design .znk-cl-bite-head:after{display:none}
.znk-concepts-design .znk-cl-bite-hint{background:#fff7d7;border-color:#ead78d}
.znk-concepts-design .znk-cl-faq details[open]{background:#f0f4ff;padding:20px;border-bottom-color:#3159d9;border-radius:12px}
.znk-concepts-design .znk-cl-faq details[open] summary{color:#3159d9}
@media(max-width:600px){
.znk-concepts-design .znk-cl-reading-body .znk-cl-tldr{padding:24px 20px!important;border-radius:18px!important}
.znk-concepts-design .znk-cl-tldr>h2{font-size:24px}.znk-concepts-design .znk-cl-tldr>ul{grid-template-columns:1fr;gap:15px}
.znk-concepts-design .znk-cl-tldr>ul>li{font-size:16px;padding-top:15px;line-height:1.9}
.znk-concepts-design .znk-cl-reading-body>.znk-cl-ch>h2{font-size:26px;padding:20px 17px;gap:12px;align-items:flex-start}
.znk-concepts-design .znk-cl-ch-num{width:36px;height:36px;font-size:22px;border-radius:9px}
.znk-concepts-design .znk-cl-sec{padding:4px 0;margin:30px 0}.znk-concepts-design .znk-cl-sec>h3{font-size:23px;padding-right:14px}
.znk-concepts-design .znk-cl-fig{padding:16px 12px;border-radius:14px}.znk-concepts-design .znk-cl-fig figcaption{font-size:14px;padding:12px;margin-top:16px}
.znk-concepts-design .znk-cl-fig thead th{font-size:14px;padding:12px 8px}
.znk-concepts-design .is-process .znk-cl-flow{grid-template-columns:1fr;gap:22px}
.znk-concepts-design .is-process .znk-cl-flow li{padding:0 44px 20px 0}.znk-concepts-design .is-process .znk-cl-flow .x{font-size:16px}
.znk-concepts-design .znk-cl-triangle{padding:16px 12px}.znk-concepts-design .znk-cl-triangle b{font-size:27px}
.znk-concepts-design .znk-cl-pit{grid-template-columns:1fr;padding:18px 14px;gap:10px}.znk-concepts-design .znk-cl-pit h3{font-size:22px}.znk-concepts-design .znk-cl-pit .w,.znk-concepts-design .znk-cl-pit .r{padding:15px;font-size:16px}
.znk-concepts-design #samples>h2{font-size:26px;padding:20px 18px}
}
/* Step numbers participate in layout; never overlap the heading. */
.znk-concepts-design .znk-cl-reading-body .znk-cl-flow li{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:13px;row-gap:7px;padding:0 0 20px;align-items:start}
.znk-concepts-design .znk-cl-reading-body .znk-cl-flow li:before{position:static;inset:auto;grid-column:1;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;transform:none;line-height:1;background:#253d77;color:white;font-size:18px;border-radius:50%}
.znk-concepts-design .znk-cl-reading-body .znk-cl-flow li>.t{grid-column:2;grid-row:1;margin:0;min-height:34px;display:flex;align-items:center;direction:rtl;text-align:right;line-height:1.5}
.znk-concepts-design .znk-cl-reading-body .znk-cl-flow li>.x{grid-column:2;grid-row:2;margin:0;min-width:0}
@media(max-width:600px){.znk-concepts-design .znk-cl-reading-body .znk-cl-flow li{grid-template-columns:32px minmax(0,1fr);column-gap:12px}.znk-concepts-design .znk-cl-reading-body .znk-cl-flow li:before{width:32px;height:32px;font-size:17px}}