/* The explanatory section shares the site's palette and type scale. */
.principles-page .page-heading{max-width:920px;padding-bottom:24px}
.principles-page .page-heading h1{font-size:49px;line-height:1.12;margin-top:17px}
.principles-date{display:block;margin-top:18px;font-size:10px;color:#79866d}
.principle-jumps{display:flex;flex-wrap:wrap;gap:9px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.principle-jumps a{font-size:11px;padding:8px 12px;background:#edf2e5;color:#546c42;border-radius:5px}
.principle-jumps a:hover{background:#dfe9d2;color:#2e4f25}
.principle-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.principle-roles>article{border:1px solid #d9e4cd;border-radius:10px;padding:26px;background:#f0f4e9;display:flex;flex-direction:column;scroll-margin-top:110px}
.principle-roles>article:nth-child(2){background:#e9f0eb;border-color:#d5e3d8}
.principle-roles>article:nth-child(3){background:#f2f0e7;border-color:#e2dfcf}
.principle-role-number{font-size:10px;font-weight:600;letter-spacing:1.8px;color:#7b8b69}
.principle-roles h3{font-size:29px;letter-spacing:-.8px;margin:16px 0 13px}
.principle-roles p{font-size:14px;color:#64765a;line-height:1.85;margin-bottom:22px}
.role-example{font-size:12px;border-top:1px solid #cfdcc3;padding-top:14px;margin-top:auto;color:#405934;line-height:1.7}
.role-example span{display:block;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:#809071;margin-bottom:4px}
.principle-summary{font-size:14px;line-height:1.9;color:#66765b;max-width:940px;margin-top:23px}
.principle-figure{margin:25px 0}
.principle-diagram-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:11px;background:#eaf0e1}
.principle-diagram-scroll img{width:100%;height:auto;min-width:640px;border:0!important;border-radius:0!important}
.principle-figure figcaption{line-height:1.85;font-size:11px;color:#738466;margin-top:11px}
.principle-figure figcaption a{color:#4d6d38;text-decoration:underline;text-underline-offset:3px}
.principle-diagram-scroll:before{display:none}
.agent-demo{border:1px solid #dce5d1;border-radius:12px;background:#f1f5eb;padding:28px}
.agent-demo .section-heading{align-items:center;margin-bottom:17px}
.agent-demo .section-heading h2{font-size:30px}
.demo-badge{font-size:10px;border:1px solid #c6d7b8;border-radius:5px;padding:7px 11px;color:#587443;background:#e6efdc;white-space:nowrap}
.demo-disclosure{font-size:12px;line-height:1.9;color:#6d7e5f;max-width:1000px;margin-bottom:22px}
.agent-step-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 20px}
.agent-step-nav button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;min-height:44px;border:1px solid #d6e0cc;border-radius:6px;background:#fbfcf7;font-size:11px;color:#617651}
.agent-step-nav button span{font-size:9px;opacity:.7;font-variant-numeric:tabular-nums}
.agent-step-nav button:hover{background:#e2ecd7}
.agent-step-nav button[aria-pressed=true]{background:#294f3d;border-color:#294f3d;color:#fff}
.agent-panel{display:grid;grid-template-columns:1fr 1fr;gap:25px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:26px;margin-bottom:17px;align-items:start}
.agent-explanation h3{font-size:25px;line-height:1.25;letter-spacing:-.6px;margin:15px 0}
.agent-explanation>p{font-size:13px;line-height:1.9;color:#65765b}
.agent-explanation>.eyebrow{font-size:9px;letter-spacing:1px}
.agent-explanation .agent-takeaway{border-left:3px solid #9bb780;background:#f1f6e9;border-radius:0 5px 5px 0;padding:13px 15px;margin:20px 0 0;font-size:12px;color:#587145}
.agent-payload{min-width:0;background:#203d32;color:#e2edcf;border-radius:7px;padding:22px}
.agent-payload>span{display:block;font-size:8px;letter-spacing:1.2px;color:#a3bb8d;line-height:1.7;border-bottom:1px solid #496247;padding-bottom:13px}
.agent-payload pre{font:12px/1.9 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:17px 0 0;color:#e2edcf}
.agent-controls{display:grid;grid-template-columns:auto 1fr auto auto;gap:17px;align-items:center;margin:20px 0 0}
.agent-controls .button{font-size:12px;min-height:42px}
.agent-controls .button:disabled{opacity:.4;transform:none;cursor:default}
#agent-progress{font-size:11px;color:#587044;line-height:1.7;text-align:center}
.agent-reset{background:transparent;font-size:11px;color:#667c55;text-decoration:underline;text-underline-offset:3px;padding:12px 4px}
.principle-details{margin-top:25px;border-top:1px solid #d5e1c9;padding-top:17px}
.principle-details>summary{font-size:12px;line-height:1.8;font-weight:600;color:#526d3f;cursor:pointer}
.principle-details .principle-figure{margin-bottom:0}
.principle-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;background:white;overflow:hidden}
.principle-stack>div{padding:26px}
.principle-stack>div+div{border-left:1px solid var(--line)}
.principle-stack>div>span{font:italic 29px/1.2 Georgia,serif;color:#99ac86}
.principle-stack h3{font-size:22px;line-height:1.25;margin:16px 0 12px}
.principle-stack p{font-size:13px;line-height:1.9;color:#6f7e62;margin:0}
.principle-insight{padding:27px 30px;border-left:3px solid #8da46d;background:#eaf0e0;border-radius:0 9px 9px 0;margin-top:23px}
.principle-insight h3{font-size:24px;margin-bottom:13px}
.principle-insight p{font-size:13px;line-height:1.9;color:#697c58;max-width:990px}
.principle-insight a{font-size:12px}
.principle-memory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.principle-memory article{border:1px solid var(--line);border-radius:9px;background:#fff;padding:23px}
.principle-memory .eyebrow{font-size:8px;letter-spacing:1.2px}
.principle-memory h3{font-size:21px;margin:15px 0 12px;line-height:1.25}
.principle-memory p{font-size:12px;line-height:1.9;color:#6d7b60;margin:0}
.principle-terms{grid-template-columns:repeat(4,minmax(0,1fr))}
.principle-terms dt{font-size:17px;line-height:1.4}
.principle-terms dd{font-size:12px;line-height:1.9}
.principle-source-list{border-top:1px solid var(--line);padding-top:30px}
.principle-source-list h2{font-size:28px;margin:14px 0}
.principle-source-list p{font-size:13px;color:#6c7c60;line-height:1.9}
.principle-source-list ul{padding-left:19px}
.principle-source-list li{font-size:12px;line-height:1.8;margin-bottom:10px;color:#536d41}
.principle-source-list a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1200px){.agent-step-nav button{font-size:10px}.principle-roles>article{padding:22px}.principle-terms{grid-template-columns:repeat(2,minmax(0,1fr))}.principle-memory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.principle-roles{gap:15px}.principle-roles h3{font-size:25px}.principle-roles p{font-size:12px}.role-example{font-size:11px}.agent-panel{gap:20px;padding:22px}.agent-payload{padding:18px}.agent-step-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.agent-step-nav button{font-size:12px}.principle-stack h3{font-size:20px}.principle-stack>div{padding:21px}.principle-stack p{font-size:12px}}
@media(max-width:720px){
  .principles-page .page-heading h1{font-size:36px;line-height:1.17}.principles-date{font-size:9px;line-height:1.8}.principle-jumps{gap:7px;padding:13px 0}.principle-jumps a{font-size:10px;padding:7px 10px}
  .principle-roles{grid-template-columns:1fr;gap:14px}.principle-roles>article{padding:24px}.principle-roles h3{font-size:27px;margin:12px 0}.principle-roles p{font-size:14px;margin-bottom:17px}.role-example{font-size:12px}.principle-summary{font-size:13px}
  .principle-diagram-scroll:before{content:"Схема шире экрана — прокрутите вправо →";display:block;position:sticky;left:0;background:#f2f6eb;padding:11px 14px;font-size:10px;color:#6a7e59}.principle-figure figcaption{font-size:10px;line-height:1.9}
  .agent-demo{padding:22px 18px}.agent-demo .section-heading{align-items:start;gap:12px}.agent-demo .section-heading h2{font-size:28px}.demo-badge{font-size:9px}.demo-disclosure{font-size:11px}
  .agent-panel{grid-template-columns:1fr;gap:20px;padding:22px 18px}.agent-explanation h3{font-size:24px}.agent-explanation>p{font-size:13px}.agent-explanation .agent-takeaway{font-size:12px}.agent-payload pre{font-size:12px}.agent-step-nav{gap:7px}.agent-step-nav button{font-size:10px;gap:6px;padding:10px 6px}
  .agent-controls{grid-template-columns:1fr 1fr;gap:10px}.agent-controls .button{font-size:11px}#agent-progress{grid-column:1/-1;order:-1;text-align:left;font-size:10px}.agent-reset{grid-column:1/-1;justify-self:center;padding:6px 14px}.principle-details>summary{font-size:11px}
  .principle-stack{grid-template-columns:1fr}.principle-stack>div{padding:23px}.principle-stack>div+div{border-left:0;border-top:1px solid var(--line)}.principle-stack h3{font-size:23px;margin-top:12px}.principle-stack p{font-size:13px}.principle-insight{padding:22px}.principle-insight h3{font-size:23px}
  .principle-memory{gap:13px}.principle-memory article{padding:19px}.principle-memory h3{font-size:21px}.principle-terms{grid-template-columns:repeat(2,minmax(0,1fr))}.principle-source-list h2{font-size:26px}
}
@media(max-width:450px){.principles-page .page-heading h1{font-size:33px}.principle-memory,.principle-terms{grid-template-columns:1fr}.principle-memory p,.principle-terms dd{font-size:13px}.principle-memory article{padding:22px}.agent-demo{padding:21px 14px}.agent-panel{padding:20px 16px}.agent-step-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.agent-step-nav button{font-size:11px}.agent-explanation>.eyebrow{font-size:8px}.agent-payload{padding:17px 14px}}
@media print{.agent-step-nav,.agent-controls{display:none!important}.agent-panel[hidden]{display:grid!important}}

/* Secondary text keeps at least 4.5:1 contrast on the light panels. */
.principles-date,.principle-role-number,.role-example span,.principle-roles p,.principle-summary,.principle-figure figcaption,.demo-disclosure,.agent-explanation>p,.agent-reset,.principle-stack>div>span,.principle-stack p,.principle-insight p,.principle-memory p,.principle-source-list p,.principle-diagram-scroll:before{color:var(--muted)}
.principles-date,.principle-role-number,.role-example span,.demo-badge,.agent-step-nav button span,.agent-explanation>.eyebrow,.agent-payload>span,.principle-memory .eyebrow,.principle-jumps a,.principle-diagram-scroll:before,.principle-figure figcaption,#agent-progress{font-size:11px}
.agent-step-nav button span{opacity:1}
@media(min-width:901px) and (max-width:1200px){.agent-step-nav button{font-size:11px}}
@media(max-width:720px){.agent-step-nav button{font-size:11px}.agent-demo .section-heading{flex-wrap:wrap}}
.demo-badge{color:#4e653d}