.learning-page {
  --learning-font-small: 14px;
  --learning-font-subheading: 20px;
  --learning-font-heading: 24px;
  --learning-measure: 800px;
  --learning-terrain: #e4eae4;
  --learning-anchor-offset: 160px;
}

.learning-page .help-header { max-width: var(--learning-measure); }
.learning-page h1 { font-size: clamp(28px, 4vw, 40px); }
.learning-page h2 { font-size: var(--learning-font-heading); }
.learning-page h3 { font-size: var(--learning-font-subheading); }
.learning-page h1, .learning-page h2, .learning-page h3 { font-weight: 600; }
.learning-page a { text-underline-offset: var(--space-1); }
.learning-page a:hover { color: var(--color-accent); }
.learning-page a:focus-visible, .learning-question summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: var(--space-1);
}
.learning-meta, .learning-number {
  color: var(--color-muted);
  font-size: var(--learning-font-small);
  font-variant-numeric: tabular-nums;
}
.learning-page .help-header .learning-meta { font-size: var(--learning-font-small); }
.learning-feature {
  padding: var(--space-6);
  border-block: 1px solid var(--color-border);
  background: var(--color-surface);
}
.learning-feature h3 { margin-block: var(--space-2) var(--space-3); }
.learning-outcomes, .learning-steps, .learning-sources {
  padding-left: var(--space-6);
}
.learning-outcomes li, .learning-steps li, .learning-sources li { margin-block: var(--space-2); }
.learning-contents {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.learning-contents h2 { font-size: var(--learning-font-subheading); }
.learning-contents ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-8);
  row-gap: var(--space-2);
  padding-left: var(--space-6);
  margin-bottom: 0;
}
.learning-key {
  max-width: var(--learning-measure);
  font-size: var(--learning-font-subheading);
  font-weight: 600;
  margin-block: var(--space-8);
}
.learning-section {
  max-width: var(--learning-measure);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: var(--learning-anchor-offset);
}
.learning-number { margin: 0 0 var(--space-1); }
.learning-section h2 { margin-bottom: var(--space-4); }
.learning-section p { margin-block: var(--space-3); }
.learning-note {
  padding: var(--space-4);
  margin-top: var(--space-4);
  border-left: var(--space-1) solid var(--color-accent);
  background: var(--color-surface);
}
.learning-diagram { margin: var(--space-6) 0; }
.learning-diagram svg { display: block; width: 100%; height: auto; color: var(--color-accent); }
.learning-diagram text { fill: var(--color-text); font-size: 16px; }
.learning-terrain { fill: var(--learning-terrain); }
.learning-sea, .learning-arrow { stroke: var(--color-accent); stroke-width: 2; }
.learning-reference { stroke: var(--color-muted); stroke-dasharray: 5 5; }
.learning-aircraft { fill: var(--color-accent); }
.learning-diagram figcaption { color: var(--color-muted); font-size: var(--learning-font-small); }
.learning-illustration { margin-top: var(--space-8); scroll-margin-top: var(--learning-anchor-offset); }
.learning-illustration figure { margin: var(--space-4) 0; }
.learning-illustration img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); }
.learning-illustration figcaption { color: var(--color-muted); font-size: var(--learning-font-small); margin-block: var(--space-3); }
.learning-table { width: 100%; border-collapse: collapse; margin-block: var(--space-5); }
.learning-table caption { text-align: left; color: var(--color-muted); padding-bottom: var(--space-2); }
.learning-table th, .learning-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}
.learning-table th { font-weight: 600; }
.learning-table thead { background: var(--color-surface); }
.learning-formula {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.learning-question { border-bottom: 1px solid var(--color-border); }
.learning-question summary { cursor: pointer; padding-block: var(--space-4); font-weight: 600; }
.learning-question summary:hover, .learning-question[open] summary { color: var(--color-accent); }
.learning-question p { padding: 0 var(--space-5) var(--space-4); }
.learning-sources { overflow-wrap: anywhere; }
.learning-sources span { color: var(--color-muted); }
.learning-footer { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); }
@media (max-width: 600px) {
  .learning-contents ol { grid-template-columns: minmax(0, 1fr); }
  .learning-feature { padding: var(--space-4); }
  .learning-table, .learning-table tbody, .learning-table tr, .learning-table th, .learning-table td { display: block; }
  .learning-table thead { display: none; }
  .learning-table tr { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border-strong); }
  .learning-table th, .learning-table td { padding: var(--space-1) 0; border: 0; }
  .learning-table td::before { content: attr(data-label) ": "; color: var(--color-muted); }
}
@media print {
  .topbar, .help-subnav, .learning-contents, .learning-footer { display: none; }
  main, .learning-page { margin: 0; padding: 0; max-width: none; }
  .learning-section { max-width: none; }
  .learning-diagram, .learning-table tr { break-inside: avoid; }
  .learning-page { color: #000; }
}