/* Long-context training essay. All styles are scoped to this page. */
.training-essay {
  --figure-bg: var(--bg-card);
  --shared-bg: #526d50;
  --shared-ink: #fffefa;
  --shared-border: #526d50;
  --input-bg: #eeede7;
  --input-ink: #41473d;
  --input-border: #c4c8bd;
  --output-bg: #edf2e9;
  --output-ink: #3b5637;
  --output-border: #a2b49a;
  --warning-ink: #86502c;
  --warning-bg: #f6ebe0;
  --warning-border: #b78765;
}
[data-theme="dark"] .training-essay {
  --shared-bg: #b3c6a0;
  --shared-ink: #253020;
  --shared-border: #b3c6a0;
  --input-bg: #373c34;
  --input-ink: #e1e4da;
  --input-border: #626b59;
  --output-bg: #303d2d;
  --output-ink: #d2e3c6;
  --output-border: #718868;
  --warning-ink: #efc49f;
  --warning-bg: #44362c;
  --warning-border: #b98c68;
}
.training-essay .nav { max-width: 980px; }
.training-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 700px) minmax(0, 1fr); padding: 44px 28px 90px; }
.training-article { grid-column: 2; min-width: 0; }
.training-margin-art { display: none; }
@media (min-width: 1400px) {
  .training-margin-art { display: block; position: relative; height: 0; pointer-events: none; }
  .training-margin-art img { position: absolute; top: 64px; left: calc(100% + 80px); width: clamp(140px, calc((100vw - 1000px) / 2), 210px); height: auto; transform: rotate(3deg); user-select: none; }
  [data-theme="dark"] .training-margin-art img { opacity: .85; }
}
.training-toc { grid-column: 1; grid-row: 1; align-self: start; justify-self: end; position: sticky; top: 42px; width: 210px; padding-right: 28px; margin-top: 272px; max-height: calc(100vh - 64px); overflow-y: auto; font-size: 12px; line-height: 1.6; }
.training-toc .toc-label { display: block; margin-bottom: 18px; font: 10px var(--font-mono); letter-spacing: .11em; color: var(--text-faint); }
.training-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.training-toc li { margin: 0; }
.training-toc a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; transition: color .15s, border-color .15s; }
.training-toc a:hover, .training-toc a[aria-current="location"] { color: var(--accent); border-left-color: var(--accent); }
.training-toc .toc-groups { border-left: 0; }
.toc-group + .toc-group { margin-top: 22px; }
.toc-group-title { display: block; margin-bottom: 9px; color: var(--text); font: 500 11px/1.6 var(--font-sans); }
.training-toc a { padding-block: 6px; }
.training-toc .toc-subsections { margin-left: 16px; border-left: 0; }
.training-toc .toc-subsections a { padding: 4px 0 4px 12px; font-size: 11px; }
.training-header { margin-bottom: 37px; }
.training-article .post-back { margin-bottom: 34px; font-size: 12px; }
.training-kicker { font: 10px/1.5 var(--font-mono); color: var(--accent); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; }
.training-title { font: 400 clamp(35px, 4vw, 53px)/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -1.5px; margin: 0 0 21px; text-wrap: balance; }
.training-deck { font: 400 19px/1.6 Georgia, serif; color: var(--text-muted); max-width: 620px; margin: 0 0 25px; }
.training-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 18px; padding: 15px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.training-meta .author { color: var(--text); font-weight: 500; }
.preview-badge { margin-left: auto; font: 10px var(--font-mono); color: var(--accent); }
.training-body { font-size: 17px; line-height: 1.85; overflow-wrap: break-word; }
.training-body > p { margin: 0 0 1.25em; }
.training-body > p:first-child { font-size: 18px; line-height: 1.8; }
.training-body h2 { margin: 66px 0 20px; font: 400 31px/1.28 Georgia, serif; letter-spacing: -.55px; text-wrap: balance; scroll-margin-top: 28px; }
.training-body h3 { margin: 40px 0 17px; font: 600 19px/1.5 var(--font-sans); letter-spacing: -.2px; scroll-margin-top: 28px; }
.training-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.training-body code { font: .81em var(--font-mono); padding: 2px 5px; background: var(--bg-alt); border: 1px solid var(--border-subtle); border-radius: 3px; overflow-wrap: anywhere; }
.training-body math { font-size: 1.12em; padding: 0 .06em; }
.training-body .numbers-note { margin: 29px 0 37px; padding: 14px 18px; border-left: 2px solid var(--border); color: var(--text-muted); font-size: 12px; line-height: 1.8; }
.training-body .numbers-note em { font-style: normal; }
.training-body .citation { white-space: nowrap; font: 11px var(--font-mono); vertical-align: super; line-height: 0; margin: 0 1px; }
.training-body .citation a { text-decoration: none; }
.training-body .citation a:hover { text-decoration: underline; }
.training-figure { margin: 36px -24px 42px; }
.figure-canvas { padding: 27px 30px; background: var(--figure-bg); border: 1px solid var(--border); border-radius: 7px; }
.figure-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 25px; color: var(--text); font: 500 14px/1.6 var(--font-sans); }
.figure-heading small { font: 12px/1.5 var(--font-mono); color: var(--text-muted); text-align: right; }
.training-figure figcaption { margin: 13px 24px 0; font-size: 13px; line-height: 1.8; color: var(--text-muted); }
.figure-number { color: var(--text); font-weight: 600; }
/* Labels stay as live text, with the same colors across all computation diagrams. */
.training-essay .diagram-label { margin: 0 0 12px; font: 500 13px/1.5 var(--font-sans); color: var(--text); }
.training-essay .diagram-prefix, .training-essay .diagram-item, .training-essay .diagram-gradient { padding: 13px 12px; border: 1px solid var(--input-border); border-radius: 4px; font: 500 14px/1.6 var(--font-sans); text-align: center; min-width: 0; }
.training-essay .diagram-prefix { background: var(--shared-bg); border-color: var(--shared-border); color: var(--shared-ink); }
.training-essay .diagram-item { background: var(--input-bg); color: var(--input-ink); }
.training-essay .diagram-gradient { background: var(--output-bg); border-color: var(--output-border); color: var(--output-ink); }
.training-essay .diagram-prefix small, .training-essay .diagram-item small, .training-essay .diagram-gradient small { display: block; margin-top: 5px; font: 12px/1.6 var(--font-mono); }
.training-essay .target-chip { display: inline-block; padding: 1px 5px; background: var(--output-bg); border: 1px solid var(--output-border); border-radius: 3px; color: var(--output-ink); font: 12px/1.6 var(--font-mono); }
.training-essay .branch-link { align-self: center; text-align: center; color: var(--accent); font: 20px/1.5 var(--font-sans); }
.training-essay .example-strip { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, .9fr); gap: 8px; font: 500 14px/1.6 var(--font-sans); }
.training-essay .example-prefix, .training-essay .example-item, .training-essay .example-target { padding: 17px 13px; border: 1px solid var(--input-border); border-radius: 4px; }
.training-essay .example-strip small { display: block; font: 12px/1.6 var(--font-mono); margin-top: 6px; }
.training-essay .example-prefix { display: grid; grid-template-columns: minmax(0, 1fr) 22px; column-gap: 8px; background: var(--shared-bg); border-color: var(--shared-border); color: var(--shared-ink); }
.training-essay .example-prefix > :not(.scale-break) { grid-column: 1; }
.training-essay .example-prefix strong { font: 500 12px/1.6 var(--font-mono); margin-top: 12px; }
.training-essay .example-prefix .scale-break { grid-column: 2; grid-row: 1 / span 3; align-self: center; font: 26px/1 Georgia, serif; letter-spacing: -5px; }
.training-essay .example-item, .training-essay .example-target { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.training-essay .example-item { background: var(--input-bg); color: var(--input-ink); }
.training-essay .example-target { background: var(--output-bg); border-color: var(--output-border); color: var(--output-ink); }
.training-essay .example-backward { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--output-border); color: var(--output-ink); font: 12px/1.6 var(--font-sans); }
.training-essay .example-backward > :last-child { white-space: nowrap; }
.training-essay .packing-panel + .packing-panel { margin-top: 23px; border-top: 1px solid var(--border); padding-top: 20px; }
.training-essay .packed-strip { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; }
.training-essay .branch-map { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.45fr); gap: 10px 8px; align-items: stretch; }
.training-essay .branch-prefix { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; }
.training-essay .packing-panel .figure-note { margin-top: 12px; }
.training-essay .work-comparison { display: grid; grid-template-columns: 1fr 24px 1fr auto; gap: 16px; align-items: center; margin: 27px 0; padding: 20px 0; border-block: 1px solid var(--border); font: 12px/1.6 var(--font-sans); }
.training-essay .work-comparison small { display: block; font: 10px/1.6 var(--font-mono); color: var(--text-muted); }
.training-essay .work-comparison strong { display: block; margin-top: 6px; font-weight: 500; }
.training-essay .work-arrow { color: var(--accent); text-align: center; font-size: 22px; }
.training-essay .work-ratio { color: var(--accent); padding-left: 16px; border-left: 1px solid var(--border); }
.training-essay .state-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.training-essay .state-panel { min-width: 0; padding: 16px; border: 1px solid var(--output-border); border-radius: 4px; }
.training-essay .state-unsafe { border-color: var(--warning-border); }
.training-essay .state-chain { display: grid; }
.training-essay .state-leak { margin: 8px 0; padding: 7px; text-align: center; color: var(--warning-ink); background: var(--warning-bg); border: 1px dashed var(--warning-border); border-radius: 3px; font: 12px/1.6 var(--font-mono); }
.training-essay .state-fanout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.training-essay .state-fanout .branch-link { display: block; }
.training-essay .state-explanation { margin: 14px 0 0; font: 12px/1.7 var(--font-sans); color: var(--text-muted); }
.training-essay .isolation-key { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font: 13px/1.6 var(--font-sans); }
.training-essay .isolation-key small { display: block; margin-top: 4px; font: 12px/1.6 var(--font-mono); color: var(--text-muted); }
.training-essay .kernel-paths { margin: 22px 0; padding: 0; font-size: 13px; line-height: 1.6; }
.training-essay .kernel-paths > div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.training-essay .kernel-paths dt { font-weight: 500; }
.training-essay .kernel-paths dd { margin: 0; color: var(--text-muted); }
.training-essay .lora-flow { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1.25fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); gap: 6px; align-items: center; }
.training-essay .lora-allocation { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-border); }
.training-body > details { margin: 26px 0; padding: 14px 0; border-block: 1px solid var(--border); }
.training-body > details > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-size: 14px; line-height: 1.6; color: var(--accent); }
.training-body > details > summary::after { content: '+'; flex-shrink: 0; font: 18px/1 var(--font-mono); }
.training-body > details[open] > summary::after { content: '−'; }
.training-body > details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.training-body > details > p { margin: 16px 0 0; font-size: 15px; line-height: 1.8; }
.training-body .gradient-equation, .training-body .state-equation { margin: 24px 0; padding-block: 6px; }
.training-body .state-equation math { font-size: 1em; }
.sequence-head, .sequence-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 26px 74px 74px; gap: 8px; align-items: center; }
.sequence-mode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 9px; color: var(--text); font: 500 12px/1.5 var(--font-sans); }
.prefix-pass-count { padding: 3px 7px; border: 1px solid var(--input-border); border-radius: 3px; background: var(--input-bg); color: var(--input-ink); font: 10px/1.4 var(--font-mono); }
.sequence-mode.shared-mode { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.shared-mode .prefix-pass-count { background: var(--output-bg); color: var(--output-ink); border-color: var(--output-border); }
.sequence-head { margin-bottom: 10px; font: 10px/1.5 var(--font-mono); color: var(--text-muted); text-align: center; }
.sequence-row + .sequence-row { margin-top: 9px; }
.sequence-fanout .shared-block { grid-area: 1 / 2 / span 2; height: 100%; }
.sequence-wire, .sequence-fork { position: relative; color: var(--accent); }
.sequence-wire { border-top: 1px solid; }
.sequence-wire::after, .sequence-branch::after { content: ''; position: absolute; right: 0; top: -4px; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.sequence-fork { grid-area: 1 / 3 / span 2; align-self: stretch; }
.sequence-fork::before { content: ''; position: absolute; top: 50%; left: 0; width: 50%; border-top: 1px solid; }
.sequence-fork::after { content: ''; position: absolute; inset: 20px auto 20px 50%; border-left: 1px solid; }
.sequence-branch { position: absolute; left: 50%; right: 0; border-top: 1px solid; }
.sequence-branch:first-child { top: 20px; }
.sequence-branch:last-child { bottom: 19px; }
.sequence-index { font: 11px var(--font-mono); color: var(--text-muted); }
.token-block { display: grid; place-items: center; height: 40px; border: 1px solid transparent; border-radius: 3px; font: 12px var(--font-mono); }
.shared-block { background: var(--shared-bg); color: var(--shared-ink); border-color: var(--shared-border); position: relative; }
.shared-block::before, .shared-block::after { content: ''; position: absolute; top: 0; bottom: 0; left: 65%; border-left: 2px solid var(--figure-bg); transform: skewX(-18deg); }
.shared-block::after { margin-left: 5px; }
.input-block { background: var(--input-bg); color: var(--input-ink); border-color: var(--input-border); }
.output-block { background: var(--output-bg); color: var(--output-ink); border-color: var(--output-border); }
.figure-note { margin: 20px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-muted); }
.backend-lanes { display: grid; gap: 16px; }
.backend-lane { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.15fr); align-items: center; gap: 10px; }
.backend-label { font-size: 13px; line-height: 1.6; }
.backend-label small { display: block; color: var(--text-muted); font-size: 11px; }
.backend-arrow { color: var(--text-muted); text-align: center; }
.backend-box { padding: 13px 16px; border: 1px solid var(--shared-border); border-radius: 4px; background: var(--shared-bg); color: var(--shared-ink); font-size: 13px; line-height: 1.6; }
.backend-box.secondary { background: var(--input-bg); color: var(--input-ink); border-color: var(--input-border); }
.backend-box small { display: block; font: 10px/1.6 var(--font-mono); margin-top: 2px; }
.fallback-note { grid-column: 3; position: relative; margin: 0; padding: 7px 10px; border: 1px dashed var(--warning-border); border-radius: 3px; background: var(--warning-bg); color: var(--warning-ink); font-size: 11px; line-height: 1.5; }
.fallback-note::before { content: ''; position: absolute; left: 16px; top: -17px; height: 16px; border-left: 1px dashed var(--warning-border); }
.fallback-note small { display: block; font-size: 10px; }
.routing-caption { font: 10px var(--font-mono); letter-spacing: .07em; margin: 23px 0 13px; color: var(--text-muted); }
.routing-grid { display: grid; gap: 4px; }
.routing-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 18px minmax(0, 1fr); gap: 6px; align-items: center; padding: 7px 10px; border-left: 2px solid transparent; font: 11px/1.5 var(--font-mono); }
.routing-row > :not(:first-child) { text-align: center; }
.routing-row > :first-child { font: 12px/1.5 var(--font-sans); }
.routing-row.routing-header { color: var(--text-muted); }
.routing-row.routing-changed { background: var(--output-bg); color: var(--output-ink); border-left-color: var(--accent); border-radius: 3px; }
.routing-changed .routing-trial { font-weight: 700; }
.routing-symbol { color: var(--text-muted); }
.routing-changed .routing-symbol { color: var(--output-ink); }
.rank-schedule { --rank-columns: 52px minmax(0, 1fr) 16px minmax(0, 1.4fr); --rank-gap: 8px; position: relative; display: grid; grid-template-columns: var(--rank-columns); gap: 10px var(--rank-gap); }
.rank-schedule::before { content: ''; position: absolute; grid-area: 1 / 4 / 5 / 5; inset: 0; margin: -5px -4px; border: 1px dashed var(--output-border); border-radius: 4px; background: var(--output-bg); }
.rank-header, .rank-lane { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: var(--rank-columns); gap: var(--rank-gap); align-items: center; }
.rank-header { grid-row: 1; font: 10px/1.5 var(--font-mono); color: var(--text-muted); text-align: center; }
.rank-label { font: 11px var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.rank-stage { padding: 12px 4px; text-align: center; border: 1px solid var(--input-border); border-radius: 3px; background: var(--input-bg); color: var(--input-ink); font-size: 11px; line-height: 1.5; }
.rank-stage.collective { background: var(--shared-bg); color: var(--shared-ink); border-color: var(--shared-border); }
.rank-stage.blocked, .rank-stage.diverged { display: grid; gap: 7px; }
.rank-stage.blocked { border-style: dashed; }
.rank-stage.waiting { background: transparent; border: 1px dashed var(--warning-border); color: var(--warning-ink); }
.rank-stage.diverged { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-border); }
.rank-status { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.rank-pause { width: 7px; height: 9px; border-inline: 2px solid; }
.rank-missed { font: 700 15px/1 var(--font-sans); }
.rank-arrow { text-align: center; color: var(--text-muted); font-size: 12px; }
.training-references { margin-top: 60px; border-top: 1px solid var(--border); padding-top: 28px; }
.training-references h2 { font: 500 15px var(--font-sans); margin: 0 0 20px; letter-spacing: 0; }
.training-references ol { list-style: decimal; padding-left: 22px; margin: 0; }
.training-references li { padding-left: 5px; margin-bottom: 13px; font-size: 12px; line-height: 1.8; color: var(--text-muted); scroll-margin-top: 30px; }
.training-end { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 20px; display: flex; justify-content: space-between; font-size: 12px; }
.mobile-contents { display: none; }
.training-essay .site-footer .container { max-width: 788px; }
@media (max-width: 1190px) {
  .training-layout { display: block; max-width: 756px; margin: auto; }
  .training-toc { display: none; }
  .mobile-contents { display: block; margin: 0 0 32px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
  .mobile-contents summary { cursor: pointer; color: var(--text-muted); list-style: none; display: flex; justify-content: space-between; }
  .mobile-contents summary::after { content: '+'; color: var(--accent); }
  .mobile-contents[open] summary::after { content: '−'; }
  .mobile-contents ol { padding: 15px 0 0 20px; line-height: 2.1; list-style: decimal; }
  .mobile-contents .toc-groups { list-style: none; padding-left: 0; }
  .mobile-contents .toc-group > ol { list-style: none; padding: 0; }
  .mobile-contents .toc-subsections { list-style: none; padding: 0 0 0 18px; }
  .mobile-contents .toc-group-title { margin: 5px 0; font-size: 12px; }
  .mobile-contents a { display: inline-block; padding-block: 3px; }
  .training-figure { margin-left: 0; margin-right: 0; }
  .training-figure figcaption { margin-left: 0; margin-right: 0; }
}
@media (max-width: 600px) {
  .training-layout { padding: 24px 22px 60px; }
  .training-title { font-size: 37px; letter-spacing: -1px; }
  .training-deck { font-size: 18px; }
  .training-body { font-size: 16px; line-height: 1.85; }
  .training-body > p:first-child { font-size: 17px; }
  .training-body h2 { font-size: 28px; margin-top: 48px; }
  .training-body h3 { font-size: 18px; }
  .training-meta { font-size: 11px; gap: 8px 12px; }
  .preview-badge { margin-left: 0; }
  .figure-canvas { padding: 20px 14px; }
  .figure-heading { font-size: 14px; gap: 12px; align-items: start; flex-direction: column; }
  .figure-heading small { font-size: 12px; text-align: left; }
  .sequence-head, .sequence-row { grid-template-columns: 32px minmax(0, 1fr) 17px 41px 41px; gap: 5px; }
  .sequence-head, .sequence-index { font-size: 9px; }
  .token-block { font-size: 11px; }
  .shared-block::before, .shared-block::after { left: 75%; }
  .backend-lane { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1.1fr); gap: 5px; }
  .backend-label { font-size: 12px; }
  .backend-box { padding: 10px; font-size: 12px; }
  .routing-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 12px minmax(0, 1fr); gap: 4px; padding: 6px; font-size: 10px; }
  .routing-row > :first-child { font-size: 11px; }
  .rank-schedule { display: block; --rank-gap: 5px; }
  .rank-schedule::before, .rank-header { display: none; }
  .rank-lane { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1.4fr); }
  .rank-lane + .rank-lane { margin-top: 18px; }
  .rank-label { grid-column: 1 / -1; margin-bottom: 4px; font-size: 12px; }
  .rank-stage { font-size: 12px; padding: 12px 5px; }
  .rank-arrow { font-size: 12px; }
  .training-figure figcaption { font-size: 12px; }
  .training-essay .lora-flow { grid-template-columns: 1fr; gap: 2px; }
  .training-essay .lora-flow .branch-link { transform: rotate(90deg); }
  .training-essay .example-backward { display: block; }
  .training-essay .example-backward > :first-child, .training-essay .example-backward > :last-child { display: none; }
  .training-essay .example-strip { grid-template-columns: 1fr 1fr; }
  .training-essay .example-prefix { grid-column: 1 / -1; }
  .training-essay .example-prefix .scale-break { font-size: 32px; }
  .training-essay .diagram-prefix, .training-essay .diagram-item, .training-essay .diagram-gradient { padding: 11px 8px; }
  .training-essay .packed-strip { grid-template-columns: 1fr; gap: 6px; }
  .training-essay .packed-strip > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
  .training-essay .packed-strip small { margin-top: 0; }
  .training-essay .branch-map { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1.35fr); gap: 8px 4px; }
  .training-essay .state-panels, .training-essay .isolation-key { grid-template-columns: 1fr; gap: 16px; }
  .training-essay .state-panel { padding: 14px; }
  .training-essay .work-comparison { grid-template-columns: 1fr 20px 1fr; gap: 10px; }
  .training-essay .work-ratio { grid-column: 1 / -1; border-left: 0; padding: 10px 0 0; border-top: 1px solid var(--border); }
  .training-essay .work-ratio small { display: inline; margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .training-toc a { transition: none; } }
@media print {
  .training-essay { --figure-bg: #f5f5f1; --text: #222; --text-muted: #555; --bg: #fff; background: #fff; color: #222; }
  .training-essay .site-header, .training-toc, .mobile-contents, .preview-badge, .training-end, .training-essay .site-footer, .post-back { display: none; }
  .training-layout { display: block; padding: 0; }
  .training-title { font-size: 32pt; }
  .training-body { font-size: 11pt; line-height: 1.6; }
  .training-body h2 { font-size: 20pt; }
  .training-body h3 { font-size: 13pt; }
  .training-figure { margin: 20px 0; break-inside: avoid; }
  .figure-canvas { print-color-adjust: exact; }
}

/* Divider naming each half of the essay */
.training-body .essay-part { margin: 80px 0 0; padding-top: 16px; border-top: 1px solid var(--input-border); font: 11px/1.5 var(--font-mono); color: var(--accent); letter-spacing: .14em; text-transform: uppercase; }
.training-body .essay-part + h2, .training-body .essay-part + .training-margin-art + h2 { margin-top: 14px; }
@media (max-width: 640px) { .training-body .essay-part { margin-top: 56px; } }