/* Compact exercise layout and native MathML typesetting; demo IDs and WASM stay unchanged. */
.page-exercises { line-height: 1.65; }
.page-exercises .wrap { width: min(1280px, calc(100% - 64px)); }
.page-exercises .hero { margin-bottom: 8px; }
.page-exercises .card :is(p, li) { line-height: 1.65; }
.page-exercises .card h3 { font-size: 12px; font-weight: 400; line-height: 1.5; }
.page-exercises .context { margin-block: 16px; padding: 10px 16px; }
.page-exercises .protocol { margin-block: 18px; border: 0; border-block: 1px solid var(--rule); border-radius: 0; background: #fff; }
.page-exercises .protocol .head { background: #f4f6f8; padding: 10px 14px; font-weight: 400; }
.page-exercises .steps { padding: 0 14px 8px; }
.page-exercises .step { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid #eceef0; }
.page-exercises .step:last-child { border: 0; }
.page-exercises .num { width: 22px; height: auto; min-height: 20px; padding-top: 1px; border: 0; border-radius: 0; background: none; box-shadow: none; color: #64717d; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.page-exercises .formula { border: 0; border-left: 2px solid #cbd8e5; border-radius: 0; padding: 12px 16px; margin-block: 14px; }
.page-exercises math {
  color: #173f78;
  font-family: "STIX Two Math", "Cambria Math", math;
  font-size: 1.08em;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  vertical-align: baseline;
}
/* Keep inline formulas on the text baseline; native MathML positions scripts and fences. */
.page-exercises math:not([display="block"]) { display: inline math; math-style: compact; }
.page-exercises math[display="block"] { display: block math; math-style: normal; margin-block: 6px; padding-block: 4px; }
/* Flat arguments use optically compact fences; tall arguments keep native stretching. */
.page-exercises math mo.math-fence-flat { font-size: 0.82em; }
.page-exercises .math-inline-group { display: inline-block; white-space: nowrap; vertical-align: baseline; }
.page-exercises .math-scroll { overflow-x: auto; }
.page-exercises .math-scroll:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.page-exercises .demo-shell { padding: 0; border: 0; border-radius: 0; margin-block: 14px 24px; }
.page-exercises .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.page-exercises .demo-panel { padding: 14px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; min-width: 0; }
.page-exercises .demo-panel :is(h3, h4) { padding-bottom: 8px; margin: 0 0 10px; border-bottom: 1px solid var(--rule); font-size: 12px; }
.page-exercises .demo-panel--wide { grid-column: auto; }
.page-exercises .demo-panel--full { grid-column: 1 / -1; }
.page-exercises .demo-panel--choice { background: #f3f7fa; }
.page-exercises .demo-panel p { color: #626971; font-size: 11px; }
.page-exercises .demo-kv > strong { font-weight: 400; font-size: 11px; }
.page-exercises .demo-value { font-size: 10px; line-height: 1.6; padding: 7px 9px; border: 0; border-radius: 3px; overflow-wrap: anywhere; }
.page-exercises .demo-status { min-height: 38px; padding: 9px 12px; margin-block: 12px; border-radius: 3px; font-size: 11px; line-height: 1.6; }
.page-exercises .demo-btn { border: 0; background: #f0f3f5; color: #354e60; font-size: 11px; font-weight: 400; min-height: 32px; padding: 6px 12px; box-shadow: 0 1px 2px #24282c08; transform: none; }
.page-exercises .demo-btn:hover:not(:disabled) { background: #e5edf3; color: #214d70; box-shadow: 0 1px 3px #24282c14; transform: none; }
.page-exercises .demo-btn:disabled { opacity: .48; cursor: not-allowed; }
.page-exercises .demo-btn:focus-visible, .page-exercises .list-nav__link:focus-visible { outline: 2px solid #245d7b; outline-offset: 3px; }
.page-exercises .list-nav__link:hover { background: #f1e6e8; box-shadow: none; }
.page-exercises .demo-figure { background: #fff; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 10px 0 16px; }
.page-exercises .protocol-flow { margin-block: 16px; border-color: var(--rule); border-radius: 4px; background: #fff; }
.page-exercises .flow-row { border-color: var(--rule); }
.page-exercises .flow-cell, .page-exercises .flow-message { border-color: var(--rule); border-radius: 4px; background: #fff; }
.page-exercises .flow-message { background: #f5f8fa; color: #315875; font-weight: 400; }
.page-exercises .flow-party { background: #f2f5f7; color: #354e60; font-weight: 400; }
.page-exercises .flow-empty { border-color: transparent; background: none; }
.page-exercises th { background: #f2f5f7; color: #354e60; font-weight: 400; }
.page-exercises tbody tr:nth-child(even) td { background: #f8fafb; }
.page-exercises .note { border: 0; border-left: 2px solid #d7bc76; border-radius: 0; background: #fbf9f2; }
.page-exercises .site-embedded { margin: 0; }
.site-embedded.page-exercises .wrap { width: calc(100% - 28px); }
@media (max-width: 800px) {
  .page-exercises .wrap { width: calc(100% - 28px); }
  .page-exercises .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .page-exercises .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .page-exercises .demo-panel--wide { grid-column: auto; }
  .page-exercises .step { gap: 8px; grid-template-columns: 18px minmax(0, 1fr); }
  .page-exercises .steps { padding-inline: 6px; }
  .page-exercises .formula { padding-inline: 8px; }
}
@media print {
  .page-exercises .list-nav { position: static; }
  .page-exercises .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-exercises .demo-panel { break-inside: avoid; }
}