/* Oddiy so‘z → ko‘rgazmali namuna → formula → mustaqil misol. */
.clarity-start { margin-bottom:30px; }
.clarity-idea { margin:0 0 22px; font-size:20px; line-height:1.8; color:var(--ink); }
.clarity-terms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0 26px; }
.clarity-terms>div { padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.clarity-terms dt { font-size:16px; font-weight:850; color:var(--brand); margin:0 0 6px; }
.clarity-terms dd { margin:0; line-height:1.7; font-size:16px; color:var(--ink-2); }
.clarity-anchor { padding:22px; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; }
.clarity-anchor h3 { margin:0 0 14px; font-size:21px; }
.clarity-anchor .math-panel { background:var(--surface); margin:18px 0 14px; border:0; }
.clarity-anchor .math-panel .katex { font-size:1.3em; }
.clarity-reading { font-size:17px; margin:12px 0 0; line-height:1.85; }
.clarity-reading b { color:var(--brand); }
.easy-purpose { color:var(--ink-2); font-size:16px; margin-top:-4px; }
.clarity-figure { margin:16px 0; }
.clarity-figure .fig-art { padding:12px; border-radius:14px; background:var(--surface); }
.readable-diagram { width:100%; max-width:640px; margin-inline:auto; text-align:left; }
.diagram-heading { font-weight:800; font-size:17px; line-height:1.6; text-align:center; margin:10px 0; }
.readable-diagram>svg.art { display:block; width:100%; max-width:600px; height:auto; max-height:none; margin-inline:auto; }
.diagram-key { display:grid; gap:7px; padding:0; margin:12px 0 6px; list-style:none; font-size:16px; line-height:1.65; }
.diagram-key li { display:flex; align-items:baseline; gap:10px; overflow-wrap:anywhere; }
.diagram-swatch { width:10px; height:10px; border-radius:3px; flex:none; background:var(--swatch); }
.learning-flow { display:grid; gap:30px; padding:0; margin:16px 0; list-style:none; counter-reset:none; }
.learning-flow li { position:relative; display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--ink); font-size:17px; line-height:1.7; text-align:left; }
.learning-flow li>span:last-of-type { min-width:0; overflow-wrap:anywhere; }
.flow-number { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--brand-l); color:var(--brand); font-size:15px; font-weight:800; flex:none; }
.learning-flow svg.flow-arrow { position:absolute; width:22px; height:25px; max-height:none; bottom:-28px; left:calc(50% - 11px); color:var(--brand); }
.reading-card .figure figcaption { font-size:16px; line-height:1.7; color:var(--ink-2); }
.reading-card .math-panel figcaption { font-size:16px; line-height:1.65; }
.reading-card .tbl { line-height:1.65; font-size:17px; }
.reading-card .tbl td,.reading-card .tbl th { padding:12px 15px; }
.reading-card .tbl th { overflow-wrap:normal; word-break:normal; }
.clarity-table { margin-top:20px; }
.reading-card .clarity-table td,.reading-card .clarity-table th { padding:9px 7px; }
.reading-card .clarity-table .katex { font-size:1em; }
.clarity-figure .readable-diagram>svg.art { max-height:260px; }
.reading-card .tbl tbody tr:nth-child(even) { background:color-mix(in srgb,var(--surface-2) 55%,var(--surface)); }
.reading-card .card-title { line-height:1.4; }
.reading-card .say { line-height:1.85; }
.reading-card .wstep { margin-block:12px; }
.reading-card .math-scroll { padding-block:12px 16px; }
.eqline.formatted-math { display:block; overflow-x:auto; max-width:100%; padding-block:8px; }
.eqline.formatted-math .katex { font-size:1em; }
@media(max-width:600px){
 .clarity-idea{font-size:18px;}.clarity-terms{grid-template-columns:1fr;gap:9px;}
 .clarity-terms>div{padding:13px 14px;}.clarity-anchor{padding:14px;border-radius:15px;}
 .clarity-anchor h3{font-size:19px;}.clarity-reading{font-size:16px;}
 .clarity-figure .fig-art{padding:6px;}.learning-flow li{padding:12px;gap:9px;font-size:16px;}
 .reading-card .tbl{font-size:16px;}.reading-card .tbl td,.reading-card .tbl th{padding:10px 12px;}
 .clarity-anchor .math-panel .katex{font-size:1.14em;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important;}}
@media print{
 .clarity-terms{grid-template-columns:1fr 1fr;}.clarity-anchor{padding:14px;}
 .clarity-idea,.clarity-reading,.clarity-terms dd,.diagram-key{font-size:12pt;}
 .clarity-anchor,.clarity-terms>div,.learning-flow li{break-inside:avoid;background:white;color:black;}
}