.learning-demo {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
}

.learning-demo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.learning-demo figcaption span,
.learning-demo small { color: var(--muted); }
.learning-demo code { font-size: .9em; }
.learning-demo p { margin: 14px 0 0; font-size: 13px; }

.axis-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.axis-box {
  position: relative;
  display: flex;
  gap: 8px;
  min-height: 126px;
  margin-top: 8px;
  padding: 38px 16px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 10px;
}

.axis-column { flex-direction: column; align-items: flex-start; }
.axis-box i,
.flex-track i {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 34px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-style: normal;
  font-weight: 800;
}

.axis-box span { position: absolute; color: var(--gold); font-size: 11px; font-weight: 800; }
.axis-row .main-axis { top: 9px; left: 16px; }
.axis-row .cross-axis { top: 48px; right: 10px; writing-mode: vertical-rl; }
.axis-column .main-axis { top: 38px; right: 10px; writing-mode: vertical-rl; }
.axis-column .cross-axis { top: 9px; left: 16px; }

.flex-compare { margin-top: 16px; }
.flex-compare > strong { display: block; margin-bottom: 7px; }
.flex-compare small { display: block; margin-top: 5px; }
.flex-track { display: flex; width: 100%; min-height: 48px; gap: 3px; }
.flex-track i:first-child { background: var(--accent); }
.flex-track i:last-child { background: color-mix(in srgb, var(--gold) 82%, var(--accent)); }
.auto-track i:first-child { flex: 5; }
.auto-track i:last-child { flex: 7; }
.one-track i { flex: 1; }

@media (max-width: 620px) {
  .learning-demo { padding: 14px; }
  .learning-demo figcaption { display: block; }
  .learning-demo figcaption span { display: block; margin-top: 3px; }
  .axis-examples { grid-template-columns: 1fr; gap: 18px; }
  .flex-track i { min-width: 0; font-size: 11px; }
}