/* Only the opt-in private pilots load this native reading layer. */
.course-diagram {
  --diagram-ink: #193b43;
  --diagram-accent: #176478;
  --diagram-soft: #edf6f8;
  margin: 1.5rem 0 2rem;
  padding: clamp(1rem, 2.8vw, 1.75rem);
  border: 1px solid #c9dde2;
  border-radius: 1rem;
  background: #f8fbfc;
  color: #233d45;
  min-width: 0;
}
[data-subject="hlp"] .course-diagram { --diagram-ink: #48375e; --diagram-accent: #735091; --diagram-soft: #f1edf7; border-color: #dbd1e8; background: #fbf9fd; }
[data-subject="biologie-ecologie"] .course-diagram { --diagram-ink: #184838; --diagram-accent: #28694e; --diagram-soft: #eaf4ed; border-color: #cbded0; background: #f8fbf8; }
.course-diagram *, .course-study-time * { box-sizing: border-box; }
.course-diagram figcaption h3 { margin: .3rem 0 .6rem; color: var(--diagram-ink); font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.3; }
.course-diagram p { margin: .6rem 0; line-height: 1.55; }
.course-diagram__eyebrow { font-size: .75rem; font-weight: 750; letter-spacing: .07em; color: var(--diagram-accent); }
.course-diagram__drawing { margin: 1.2rem 0; }
.course-diagram__drawing ol, .course-diagram__drawing ul { padding: 0; margin: 0; list-style: none; }
.course-diagram__rule { padding: .65rem; border-radius: .5rem; background: var(--diagram-soft); overflow-wrap: anywhere; }
.course-diagram__rule code { font-size: .9rem; }
.course-diagram__result { text-align: center; font-weight: 650; }
.course-diagram__reading { padding-top: .9rem; border-top: 1px solid #cddbdd; }
.course-diagram__takeaway { border-left: 3px solid var(--diagram-accent); padding-left: .8rem; }
.course-diagram footer { font-size: .75rem; line-height: 1.6; color: #4b5f66; }
.course-diagram a { color: var(--diagram-ink); text-underline-offset: 3px; }
.diagram-trace { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.diagram-trace li { position: relative; padding: .7rem .5rem; border: 1px solid var(--diagram-accent); border-radius: .7rem; background: #fff; text-align: center; }
.diagram-trace li:not(:last-child)::after { content: '→'; position: absolute; right: -1rem; top: 45%; width: 1rem; font-weight: 750; color: var(--diagram-ink); }
.diagram-trace__value { display: block; margin-bottom: .4rem; font: 700 1.5rem ui-monospace, monospace; color: var(--diagram-ink); }
.diagram-trace li strong, .diagram-trace li div > span { display: block; font-size: .85rem; line-height: 1.4; }
.diagram-trace .diagram-trace__stop { background: var(--diagram-soft); border-width: 3px; }
.diagram-code { margin: 0 0 .8rem; padding: .8rem 1rem; color: #e7f5f7; background: #143640; border-radius: .6rem; overflow-x: auto; font-size: .92rem; line-height: 1.5; }
.diagram-objects { display: block; width: 100%; height: auto; max-width: 480px; margin: auto; color: var(--diagram-accent); }
.diagram-objects__links { stroke: currentColor; stroke-width: 3; fill: none; }
.diagram-objects__names circle { fill: #fff; stroke: currentColor; stroke-width: 2; }
.diagram-objects__labels { text-anchor: middle; fill: var(--diagram-ink); font: 26px ui-monospace, monospace; }
.diagram-objects__shared { fill: var(--diagram-soft); stroke: currentColor; stroke-width: 3; }
.diagram-objects__copy { fill: #fff; stroke: currentColor; stroke-width: 2; stroke-dasharray: 7 5; }
.diagram-knn { display: block; width: 100%; height: auto; max-width: 420px; margin: auto; }
.diagram-knn__grid { stroke: #d3e0e4; stroke-width: 1; fill: none; }
.diagram-knn__axis { stroke: #28434b; stroke-width: 2; fill: none; }
.diagram-knn__labels, .diagram-knn__query-label, .diagram-knn__point text { fill: #193b43; font: 18px ui-monospace, monospace; }
.diagram-knn__links { stroke: #526a72; stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.diagram-knn__point--a { fill: #176478; stroke: #176478; stroke-width: 2; }
.diagram-knn__point--b { fill: #a04420; stroke: #a04420; stroke-width: 2; }
.diagram-knn__point text { stroke: none; }
.diagram-knn__query { stroke: #132c33; stroke-width: 3; fill: none; }
.diagram-boundary { margin-top: 1rem; }
.diagram-boundary > strong { font-size: .85rem; }
.diagram-boundary ol { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem !important; }
.diagram-boundary ol::before { content: ''; position: absolute; left: 15%; right: 15%; top: 2.6rem; border-top: 2px solid var(--diagram-accent); }
.diagram-boundary li { position: relative; display: grid; justify-items: center; gap: .25rem; }
.diagram-boundary li b { display: grid; place-items: center; height: 2.7rem; min-width: 2.7rem; padding: .25rem; border: 2px solid var(--diagram-accent); border-radius: 50%; background: #fff; }
.diagram-boundary .diagram-boundary__exact b { border-width: 3px; background: var(--diagram-soft); }
.diagram-boundary li span, .diagram-boundary li small { font-size: .85rem; }
.diagram-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.diagram-checks li { position: relative; padding: .9rem; border: 1px solid var(--diagram-accent); border-radius: .7rem; background: #fff; }
.diagram-checks li:not(:last-child)::after { content: '≠'; position: absolute; right: -1.2rem; top: 45%; color: var(--diagram-ink); font-size: 1.3rem; }
.diagram-checks strong { color: var(--diagram-ink); }
.diagram-checks p { font-size: .9rem; }
.diagram-checks span { display: block; padding-top: .6rem; border-top: 1px solid #ded4e7; font-size: .85rem; font-weight: 650; }
.diagram-checks small { display: block; margin-top: .5rem; font-size: .8rem; line-height: 1.45; }
.diagram-chain { display: grid; gap: 1.3rem; }
.diagram-chain li { display: grid; grid-template-columns: 2rem 1fr; column-gap: .75rem; align-items: start; position: relative; background: #fff; border: 1px solid var(--diagram-accent); border-radius: .6rem; padding: .8rem; }
.diagram-chain li > b { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--diagram-soft); color: var(--diagram-ink); }
.diagram-chain strong, .diagram-chain div > span { display: block; line-height: 1.4; }
.diagram-chain div > span { font-size: .88rem; margin-top: .25rem; }
.diagram-chain li:not(:last-child)::after { content: '↓'; position: absolute; bottom: -1.25rem; left: calc(50% - .5rem); color: var(--diagram-ink); font-weight: 700; }
.diagram-chain em { grid-column: 2; font-size: .8rem; font-style: normal; color: var(--diagram-accent); padding-top: .4rem; }
.diagram-chain--return { border-left: 2px dashed var(--diagram-accent); padding-left: 1rem !important; }
.diagram-return { padding: .7rem; background: var(--diagram-soft); border-radius: .6rem; font-size: .9rem; }
.diagram-origin { position: relative; text-align: center; margin: 0 auto 1.8rem !important; padding: .8rem; background: var(--diagram-soft); border: 1px solid var(--diagram-accent); border-radius: .6rem; font-weight: 650; }
.diagram-origin::after { content: ''; position: absolute; bottom: -1.1rem; left: 50%; height: 1rem; border-left: 2px solid var(--diagram-accent); }
.diagram-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; position: relative; }
.diagram-branches::before { content: ''; position: absolute; top: -.8rem; left: 16%; right: 16%; border-top: 2px solid var(--diagram-accent); }
.diagram-branches > div { position: relative; padding: .8rem; border: 1px solid var(--diagram-accent); border-radius: .6rem; background: #fff; min-width: 0; }
.diagram-branches > div::before { content: ''; position: absolute; left: 50%; top: -.8rem; height: .8rem; border-left: 2px solid var(--diagram-accent); }
.diagram-branches strong { display: block; color: var(--diagram-ink); }
.diagram-branches small { display: block; font-weight: 400; }
.diagram-branches p { font-size: .87rem; }
.diagram-branches--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diagram-branches--two::before { left: 25%; right: 25%; }
.diagram-discriminator { padding: .8rem; background: var(--diagram-soft); border-left: 3px solid var(--diagram-accent); font-size: .9rem; }
.diagram-discriminator strong { display: block; margin-bottom: .3rem; }
.diagram-gradient { width: 100%; border-spacing: .3rem; table-layout: fixed; font-size: .9rem; }
.diagram-gradient caption { text-align: left; padding-bottom: .5rem; font-weight: 650; }
.diagram-gradient th { font-size: .85rem; text-align: center; overflow-wrap: anywhere; }
.diagram-gradient tbody th { text-align: left; padding: .7rem 0 .4rem; }
.diagram-gradient small { display: block; font-weight: 400; }
.diagram-gradient td { text-align: center; padding: .65rem .3rem; border-radius: .4rem; }
.diagram-gradient td > span { display: block; font-size: 1.2rem; }
.diagram-gradient__yes { border: 2px solid var(--diagram-accent); background: var(--diagram-soft); }
.diagram-gradient__no { border: 1px dashed #687b70; background: #fff; }
.diagram-gradient tfoot td { padding-top: .7rem; font-size: .8rem; vertical-align: top; }
.diagram-comparison { max-width: 100%; overflow-x: auto; border: 1px solid var(--diagram-accent); border-radius: .65rem; background: #fff; }
.diagram-comparison:focus-visible { outline: 3px solid var(--diagram-accent); outline-offset: 3px; }
.diagram-comparison table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .88rem; line-height: 1.5; }
.diagram-comparison caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.diagram-comparison th, .diagram-comparison td { padding: clamp(.4rem, 1.4vw, .7rem); border-top: 1px solid #d4e0e4; text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: none; min-width: 0; }
.diagram-comparison thead th { background: #eef4f6; color: var(--diagram-ink); }
.diagram-comparison tbody th { font-weight: 650; }
.diagram-comparison tbody tr:nth-child(even) { background: #f5f9fa; }
/* C60: preserve complete state names; scroll the table, not the page. */
#si-sequentiel-modele svg { max-width: 40rem; margin-inline: auto; }
#si-sequentiel-modele [data-si-transition-table] { min-width: 46rem; }
#si-sequentiel-modele [data-si-transition-table] :is(th, td) { overflow-wrap: normal; word-break: normal; }
#si-sequentiel-frontieres .diagram-comparison table { min-width: 35rem; }
#si-sequentiel-frontieres .diagram-comparison :is(th, td) { overflow-wrap: normal; word-break: normal; }
#si-mesure-conversion .diagram-comparison table { min-width: 46rem; table-layout: auto; }
#si-mesure-roles .diagram-comparison table { min-width: 35rem; table-layout: auto; }
:is(#si-mesure-conversion, #si-mesure-roles) .diagram-comparison :is(th, td) { overflow-wrap: normal; word-break: normal; }
:is(#si-confrontation-modele, #si-confrontation-decisions) .diagram-comparison table { min-width: 40rem; table-layout: auto; }
:is(#si-confrontation-modele, #si-confrontation-decisions) .diagram-comparison :is(th, td) { overflow-wrap: normal; word-break: normal; }
#si-projet12-planning .diagram-comparison table { min-width: 35rem; table-layout: auto; }
#si-projet12-geometrie .diagram-comparison table { table-layout: fixed; }
#si-projet12-geometrie .diagram-comparison th:first-child { width: 55%; }
:is(#si-projet12-geometrie, #si-projet12-planning) .diagram-comparison :is(th, td) { overflow-wrap: normal; word-break: normal; }
/* C42 : les quatre grilles denses gardent leurs mots entiers et défilent dans
   leur région déjà accessible au clavier, sans élargir la page. */
#bio-population-synthetic-series-grid .diagram-comparison table,
#bio-population-baci-grid .diagram-comparison table,
#bio-kidd-population-evidence-grid .diagram-comparison table,
#bio-population-structure-balance-grid .diagram-comparison table { min-width: 38rem; }
#bio-population-synthetic-series-grid .diagram-comparison :is(th, td),
#bio-population-baci-grid .diagram-comparison :is(th, td),
#bio-kidd-population-evidence-grid .diagram-comparison :is(th, td),
#bio-population-structure-balance-grid .diagram-comparison :is(th, td) { overflow-wrap: normal; word-break: normal; }
/* C43 : préserver les mots et les colonnes des dossiers, dans la région défilable au clavier. */
#bio-ecosystem-scales-grid-v1 .diagram-comparison table,
#bio-ecosystem-functions-network-grid-v1 .diagram-comparison table,
#bio-ecosystem-succession-grid-v1 .diagram-comparison table,
#bio-litter-mass-loss-grid .diagram-comparison table,
#bio-woods-resistance-resilience-grid .diagram-comparison table,
#bio-connectivity-restoration-grid .diagram-comparison table,
#bio-woodland-trajectory-grid .diagram-comparison table { min-width: 38rem; }
#bio-ecosystem-scales-grid-v1 .diagram-comparison :is(th, td),
#bio-ecosystem-functions-network-grid-v1 .diagram-comparison :is(th, td),
#bio-ecosystem-succession-grid-v1 .diagram-comparison :is(th, td),
#bio-litter-mass-loss-grid .diagram-comparison :is(th, td),
#bio-woods-resistance-resilience-grid .diagram-comparison :is(th, td),
#bio-connectivity-restoration-grid .diagram-comparison :is(th, td),
#bio-woodland-trajectory-grid .diagram-comparison :is(th, td) { overflow-wrap: normal; word-break: normal; }
/* C44 : sept dossiers lisibles dans leur région défilable, sans débordement de page. */
#bio-services-beneficiaries-grid-v1 .diagram-comparison table,
#bio-agroecology-chain-grid-v1 .diagram-comparison table,
#bio-prospective-comparison-grid-v1 .diagram-comparison table,
#bio-floral-visits-statistics-grid .diagram-comparison table,
#bio-evolution-forces-grid .diagram-comparison table,
#bio-isolation-potential-grid .diagram-comparison table,
#bio-phylogeny-character-grid .diagram-comparison table { min-width: 38rem; }
#bio-services-beneficiaries-grid-v1 .diagram-comparison :is(th, td),
#bio-agroecology-chain-grid-v1 .diagram-comparison :is(th, td),
#bio-prospective-comparison-grid-v1 .diagram-comparison :is(th, td),
#bio-floral-visits-statistics-grid .diagram-comparison :is(th, td),
#bio-evolution-forces-grid .diagram-comparison :is(th, td),
#bio-isolation-potential-grid .diagram-comparison :is(th, td),
#bio-phylogeny-character-grid .diagram-comparison :is(th, td) { overflow-wrap: normal; word-break: normal; }
.diagram-comparison--code-first col:first-child { width: 40%; }
.diagram-comparison__code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; line-height: 1.6; font-weight: 500; color: inherit; background: none; padding: 0; white-space: normal; hyphens: none; }
.approved-course .course-study-time { margin-top: 1rem; padding: 0; border: 1px solid #ffffff85; border-radius: .75rem; overflow: hidden; max-width: 52rem; background: transparent; }
.approved-course .course-study-time > summary { margin: 0; background: #0003; color: #fff; }
.course-study-time > summary { cursor: pointer; padding: .85rem 1rem; color: #fff; min-height: 48px; }
.course-study-time > summary > span { font-weight: 700; }
.course-study-time > summary > small { margin-left: .5rem; font-size: .8rem; }
.course-study-time__body { padding: clamp(.9rem, 2vw, 1.4rem); color: #263f48; background: #f8fbfc; }
.approved-course__hero .course-study-time__body p { color: #263f48; font-size: .9rem; line-height: 1.5; margin: .7rem 0; }
.course-study-time__groups { margin: 1rem 0; }
.course-study-time__groups > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid #d6e0e5; }
.diagram-memory { display: block; width: 100%; max-width: 420px; height: auto; margin: 1rem auto; color: #254559; }
.diagram-memory text { fill: #173745; font: 18px system-ui, sans-serif; }
.diagram-memory .diagram-memory__small { font-size: 16px; }
.diagram-memory__cell { fill: #fff; stroke: #849ba7; }
.diagram-memory__instruction { fill: #e4f1f5; stroke: #24566b; stroke-width: 2; }
.diagram-memory__data { fill: #fff0d8; stroke: #775a25; stroke-width: 2; stroke-dasharray: 4 2; }
.diagram-memory__cpu { fill: #eef2f7; stroke: #254559; stroke-width: 2; }
.diagram-memory__read { fill: none; stroke: currentColor; stroke-width: 2; }
.diagram-memory__value { stroke-dasharray: 4 3; }
.course-study-time dt { font-weight: 650; font-size: .92rem; }
.course-study-time dt > small { display: block; font-size: .8rem; font-weight: 400; margin-top: .2rem; }
.course-study-time dd { margin: 0; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.course-study-time__total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.course-study-time__method { border: 1px solid #c7d6dd; border-radius: .5rem; margin-top: 1rem; padding: .7rem; }
.course-study-time__method > summary { cursor: pointer; font-size: .88rem; font-weight: 650; padding: .25rem; }
.course-study-time__method ul { padding-left: 1.2rem; font-size: .82rem; line-height: 1.6; }
.course-study-time__sections { padding-left: 1.2rem; font-size: .82rem; }
.course-study-time__sections li { padding: .35rem 0; }
.course-study-time__sections a { color: #193f51; text-underline-offset: 3px; }
.course-study-time__sections span { display: block; font-weight: 650; }
.course-study-time__note { border-top: 1px solid #d6e0e5; padding-top: .9rem; }
.course-study-time summary:focus-visible, .course-study-time a:focus-visible, .course-diagram a:focus-visible { outline: 3px solid #eead36; outline-offset: 3px; }
.approved-course__section-heading > span { min-width: 2.4rem; flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; }
.approved-course__section-heading > div { min-width: 0; }
.diagram-database-pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.diagram-database-pair > * { min-width: 0; }
.diagram-database-svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.diagram-database-svg text { font-family: inherit; fill: #183b58; font-size: 18px; }
.diagram-database-svg .diagram-database-label { font-size: 14px; font-weight: 650; }
.diagram-database-svg .diagram-database-heading { font-size: 16px; font-weight: 650; }
.diagram-database-key { font-weight: 750; }
.diagram-database-table { fill: white; stroke: #557489; stroke-width: 1.5; }
.diagram-database-head { fill: #e9f3f7; }
.diagram-database-link { fill: none; stroke: #236387; stroke-width: 2; stroke-linejoin: round; }
.diagram-database-svg marker path { fill: #236387; }
@media (max-width: 960px) { .diagram-database-pair { grid-template-columns: 1fr; } }
.diagram-soc { max-width: 580px; margin: 0 auto; border: 3px solid #236387; border-radius: 1rem; padding: 1rem; background: #f0f6fa; }
.diagram-soc__boundary, .diagram-soc__bus { text-align: center; font-weight: 700; }
.diagram-soc__bus { color: #236387; font-size: .85rem; }
.diagram-soc__components { display: grid; grid-template-columns: minmax(0, 1fr) 1.4rem minmax(0, 1fr); row-gap: .8rem; list-style: none; margin: .5rem 0 0 !important; padding: 0 !important; background: linear-gradient(90deg, transparent calc(50% - 2px), #236387 calc(50% - 2px), #236387 calc(50% + 2px), transparent calc(50% + 2px)); }
.diagram-soc__components li { position: relative; border: 1px solid #557489; border-radius: .5rem; background: #fff; padding: .65rem; min-width: 0; }
.diagram-soc__components li:nth-child(odd) { grid-column: 1; }
.diagram-soc__components li:nth-child(even) { grid-column: 3; }
.diagram-soc__components li::after { content: ''; position: absolute; top: 50%; width: .7rem; border-top: 2px solid #236387; }
.diagram-soc__components li:nth-child(odd)::after { right: -.7rem; }
.diagram-soc__components li:nth-child(even)::after { left: -.7rem; }
.diagram-soc__components strong, .diagram-soc__components span { display: block; }
.diagram-soc__components strong { font-size: .9rem; color: #183b58; }
.diagram-soc__components span { margin-top: .35rem; font-size: .8rem; line-height: 1.5; }
.diagram-soc__interface, .diagram-soc__outside, .diagram-system-summary { text-align: center; }
.diagram-soc__interface { margin: .6rem 0 !important; }
.diagram-soc__outside { font-size: .82rem; }
.diagram-soc__external { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; list-style: none; padding: 0 !important; margin: .5rem 0 !important; }
.diagram-soc__external li { border: 2px dashed #557489; border-radius: .5rem; padding: .6rem 1rem; background: #fff; font-size: .85rem; }
.diagram-rr { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; }
.diagram-rr__slot { stroke: #183b58; stroke-width: 1.5; }
.diagram-rr__slot--p1 { fill: #d4eaf5; }
.diagram-rr__slot--p2 { fill: #f9e2b5; }
.diagram-rr text { fill: #183b58; font-family: inherit; }
.diagram-rr__name { font-size: 23px; font-weight: 700; }
.diagram-rr__time { font-size: 22px; }
.diagram-rr__axis { font-size: 18px; }
.diagram-rr__tick { stroke: #183b58; stroke-width: 1.5; }
.diagram-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.diagram-routes__choice { min-width: 0; padding: .5rem; border: 1px solid #b3c8d5; border-radius: .7rem; background: #fff; }
.diagram-routes__choice h4, .diagram-routes__choice p { text-align: center; margin: .4rem 0 !important; }
.diagram-routes__choice h4 { font-size: 1rem; }
.diagram-route { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.diagram-route text { font-family: inherit; fill: #183b58; font-size: 24px; }
.diagram-route__name { font-weight: 700; }
.diagram-route__edge { fill: none; stroke: #647f8f; stroke-width: 2; stroke-dasharray: 5 4; }
.diagram-route__edge--chosen { stroke: #236387; stroke-width: 7; stroke-dasharray: none; }
.diagram-route__node { fill: #fff; stroke: #236387; stroke-width: 2; }
@media (max-width: 960px) { .diagram-routes { grid-template-columns: 1fr; } }
.diagram-structure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: center; }
.diagram-structure-pair > * { min-width: 0; }
.diagram-structure-arrivals, .diagram-structure-metrics { font-weight: 650; text-align: center; }
.diagram-structure-values { list-style: none; display: grid; gap: .5rem; margin: 0 !important; padding: 0 !important; }
.diagram-structure-values li { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border: 1px solid var(--diagram-accent); border-radius: .5rem; background: white; }
.diagram-structure-values b { font-size: 1.2rem; }
.diagram-structure-values span { font-size: .85rem; }
.diagram-call-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.diagram-call-frames__phase { min-width: 0; }
.diagram-call-frames__phase h4 { margin: 0 0 .8rem; color: #174a64; font-size: 1rem; }
.diagram-call-frames__phase ol { display: grid; gap: 1.2rem; list-style: none; padding: 0 !important; margin: 0 !important; }
.diagram-call-frames__phase li { position: relative; min-width: 0; padding: .7rem .85rem; border: 1px solid #91b3c7; border-left: 4px solid #256585; border-radius: .5rem; background: #fff; }
.diagram-call-frames__phase li:not(:last-child)::after { content: '↓'; position: absolute; bottom: -1.3rem; left: calc(50% - .4rem); color: #256585; font-weight: 700; line-height: 1.2rem; }
.diagram-call-frames__phase code { display: block; color: #143b58; font-size: 1rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.diagram-call-frames__phase li span { display: block; margin-top: .3rem; color: #294c5e; font-size: .9rem; line-height: 1.5; }
.diagram-call-frames__phase--returns li { border-left-color: #87601d; }
.diagram-call-frames__phase .diagram-call-frames__base { background: #fff2d8; border-color: #ad803d; }
.diagram-call-frames__summary { margin-top: 1rem !important; font-weight: 700; text-align: center; }
@media (max-width: 640px) { .diagram-call-frames { grid-template-columns: 1fr; gap: 1.6rem; } }
.diagram-structure-values li:first-child { border-width: 3px; }
.diagram-structure-values--stack li { margin-inline: 1rem; }
.diagram-structure-svg { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
.diagram-structure-svg line { stroke: #236387; stroke-width: 3; }
.diagram-structure-svg circle { fill: #fff; stroke: #236387; stroke-width: 3; }
.diagram-structure-svg text { fill: #183b58; font-size: 23px; font-weight: 700; }
.diagram-structure-svg marker path { fill: #236387; }
.diagram-structure-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.3rem; list-style: none; padding: 0 !important; }
.diagram-structure-matrix table { min-width: 0; width: 100%; }
.diagram-structure-matrix th, .diagram-structure-matrix td { padding: .55rem .35rem; text-align: center; }
@media (max-width: 720px) { .diagram-structure-pair { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .diagram-trace { grid-template-columns: 1fr; gap: 1rem; }
  .diagram-trace li { display: flex; align-items: center; text-align: left; gap: .8rem; padding: .6rem .8rem; }
  .diagram-trace__value { width: 2rem; margin: 0; flex-shrink: 0; text-align: center; }
  .diagram-trace li:not(:last-child)::after { content: '↓'; top: auto; bottom: -1.1rem; right: calc(50% - .5rem); }
  .diagram-checks { grid-template-columns: 1fr; gap: 1.3rem; }
  .diagram-checks li:not(:last-child)::after { top: auto; bottom: -1.45rem; right: calc(50% - .5rem); }
  .diagram-branches:not(.diagram-branches--two) { grid-template-columns: 1fr; gap: .8rem; padding-left: 1rem; border-left: 2px solid var(--diagram-accent); }
  .course-diagram--niche-dimensions .diagram-origin { margin-bottom: .8rem !important; }
  .course-diagram--niche-dimensions .diagram-origin::after { left: 0; }
  .diagram-branches:not(.diagram-branches--two)::before { display: none; }
  .diagram-branches:not(.diagram-branches--two) > div::before { left: -1.1rem; top: 50%; width: 1rem; height: 0; border-left: 0; border-top: 2px solid var(--diagram-accent); }
  .diagram-branches:not(.diagram-branches--two) strong small { display: inline; margin-left: .3rem; }
  .course-study-time > summary > small { display: block; margin: .3rem 0 0 1rem; }
  .course-study-time__groups > div { gap: .5rem; }
  .course-study-time dd { white-space: normal; max-width: 6rem; text-align: right; }
}
.diagram-merge-sort { display: grid; gap: 1rem; }
.diagram-merge-sort__tree { display: grid; gap: .7rem; list-style: none; margin: 0 !important; padding: 0 !important; text-align: center; }
.diagram-merge-sort__tree > li { position: relative; display: grid; justify-items: center; gap: .45rem; min-width: 0; }
.diagram-merge-sort__tree > li:not(:last-child)::after { content: '↓'; position: absolute; bottom: -1rem; color: #236387; font-weight: 700; }
.diagram-merge-sort__tree span { color: #294c5e; font-size: .82rem; font-weight: 650; }
.diagram-merge-sort__tree code { display: inline-block; min-width: 4.5rem; padding: .45rem .65rem; border: 1px solid #8cafc1; border-radius: .45rem; color: #173d57; background: #fff; font-size: .92rem; white-space: nowrap; }
.diagram-merge-sort__tree > li > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: min(100%, 28rem); }
.diagram-merge-sort__singletons > div { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.diagram-merge-sort__singletons code { min-width: 0; }
.diagram-merge-sort__input code, .diagram-merge-sort__result code { border-width: 2px; background: #edf6fa; }
.diagram-coin-dp { display: grid; gap: .9rem; }
.diagram-coin-dp__rule { margin: 0 !important; padding: .7rem .85rem; border-left: 3px solid #236387; background: #edf6fa; font-size: .9rem; }
.diagram-coin-dp__table { overflow-x: auto; border: 1px solid #8cafc1; border-radius: .65rem; background: #fff; }
.diagram-coin-dp__table:focus-visible { outline: 3px solid #236387; outline-offset: 3px; }
.diagram-coin-dp table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .86rem; }
.diagram-coin-dp caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.diagram-coin-dp th, .diagram-coin-dp td { padding: .5rem .35rem; border-top: 1px solid #d4e0e4; text-align: center; overflow-wrap: anywhere; }
.diagram-coin-dp thead th { background: #eef4f6; color: #173d57; }
.diagram-coin-dp__target { background: #fff2d8; }
.diagram-coin-dp__path { display: grid; gap: .45rem; list-style: none; margin: 0 !important; padding: 0 !important; }
.diagram-coin-dp__path li { display: grid; grid-template-columns: 2.3rem 1fr 2.3rem; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid #8cafc1; border-radius: .45rem; background: #fff; text-align: center; }
.diagram-coin-dp__path strong { padding: .2rem; border-radius: 50%; background: #edf6fa; color: #173d57; }
.diagram-coin-dp__path span { font-size: .9rem; }
.diagram-horspool-window { display: grid; gap: 1rem; }
.diagram-horspool-window__grid { display: grid; grid-template-columns: 3.2rem repeat(12, minmax(0, 1fr)); overflow: hidden; border: 1px solid #8cafc1; border-radius: .65rem; background: #fff; font: 650 clamp(.7rem, 2.7vw, .9rem) ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }
.diagram-horspool-window__label, .diagram-horspool-window__cell { min-width: 0; min-height: 2rem; padding: .4rem .1rem; border-right: 1px solid #d4e0e4; border-bottom: 1px solid #d4e0e4; }
.diagram-horspool-window__label { display: grid; place-items: center; color: #173d57; background: #eef4f6; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.diagram-horspool-window__cell:nth-child(13n) { border-right: 0; }
.diagram-horspool-window__grid > :nth-last-child(-n + 13) { border-bottom: 0; }
.diagram-horspool-window__pattern { border-top: 3px solid #236387; border-bottom: 3px solid #236387; background: #fff2d8; color: #173d57; }
.diagram-horspool-window__empty { color: transparent; background: #f8fbfc; }
.diagram-horspool-window__details { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(8rem, .6fr); gap: 1rem; }
.diagram-horspool-window__details section { min-width: 0; padding: .75rem; border: 1px solid #8cafc1; border-radius: .6rem; background: #fff; }
.diagram-horspool-window__details h4 { margin: 0 0 .6rem; color: #173d57; font-size: .92rem; }
.diagram-horspool-window__details ol { display: grid; gap: .45rem; margin: 0 !important; padding-left: 1.25rem; }
.diagram-horspool-window__details li { font-size: .82rem; line-height: 1.45; }
.diagram-horspool-window__details code { overflow-wrap: anywhere; white-space: normal; }
.diagram-horspool-window__details table { width: 100%; border-collapse: collapse; font-size: .82rem; text-align: center; }
.diagram-horspool-window__details caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.diagram-horspool-window__details th, .diagram-horspool-window__details td { padding: .35rem; border-top: 1px solid #d4e0e4; }
.diagram-horspool-window__details thead th { color: #173d57; background: #eef4f6; }
.diagram-horspool-window__move { margin: 0 !important; padding: .7rem .85rem; border-left: 3px solid #236387; background: #edf6fa; font-size: .9rem; }
@media (max-width: 640px) {
  .diagram-horspool-window__details { grid-template-columns: 1fr; }
  .diagram-coin-dp th, .diagram-coin-dp td { padding: .45rem .2rem; font-size: .78rem; }
}