.learn-page { --sidebar-width: 0px; --page-max: 1280px; --content-max: 960px; background: var(--background); }
.learn-page.learn-page-wide { --page-max: 1440px; --content-max: 1320px; }
.learn-content { display: flex; flex-direction: column; gap: var(--space-6); }
.learn-topics { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.learn-topics li { border-bottom: 1px solid var(--border); }
.learn-topic { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; color: var(--foreground); text-decoration: none; }
.learn-topic p { margin-top: var(--space-2); font-size: var(--fs-sm); word-break: keep-all; overflow-wrap: anywhere; }
.learn-topic:hover h2 { color: var(--primary); }
.learn-topic > div { min-width: 0; }
.learn-topic > span { flex-shrink: 0; }
.learn-step { min-width: var(--space-6); font-variant-numeric: tabular-nums; }
.learn-topic > div { flex: 1; }
.learn-course-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.learn-page .content > section + section { margin-top: 0; }
.learn-course-intro, .learn-course-history { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.learn-course .learn-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.learn-course .learn-topic { height: 100%; align-items: flex-start; padding: var(--space-4) 0; }
.learn-course .learn-step, .learn-course .learn-lesson-state { padding-top: var(--space-1); }
.learn-course .learn-topic h2 { font-size: var(--fs-h3); }

.learn-home .learn-content { gap: var(--space-12); }
.learn-home-intro { display: flex; flex-direction: column; gap: var(--space-3); }
.learn-experiments { list-style: none; padding: 0; margin: 0; }
.learn-experiment { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-12); padding: var(--space-8) 0; border-top: 1px solid var(--border); }
.learn-experiment > .learn-topic { align-items: flex-start; flex-direction: column; gap: var(--space-6); padding: 0; }
.learn-experiment .learn-topic p { font-size: var(--fs-body); }
.learn-topic-action { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--primary); font-size: var(--fs-sm); }
.learn-preview { min-width: 0; margin: 0; }
.learn-preview svg { display: block; width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
.learn-preview-block { fill: var(--muted); }
.learn-preview-selection { fill: color-mix(in srgb, var(--primary) 16%, transparent); stroke: var(--primary); stroke-width: 2; }
.learn-preview figcaption { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.learn-preview-controls { display: flex; gap: var(--space-1); }
.learn-preview-controls[hidden] { display: none; }
.learn-preview-controls button[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
.learn-preview-command { display: block; min-height: 2lh; white-space: pre-wrap; overflow-wrap: anywhere; text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); }
.learn-preview-status { text-align: center; }
.learn-flow-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; gap: var(--space-3); padding: 0; margin: 0; }
.learn-flow-preview li { display: flex; position: relative; flex-direction: column; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.learn-flow-preview li + li::before { content: '→'; position: absolute; left: calc(-1 * var(--space-3)); top: var(--space-2); color: var(--muted-foreground); }
.learn-flow-number { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--primary); font-variant-numeric: tabular-nums; }
.learn-flow-preview small { font-size: var(--fs-xs); text-align: center; }
@media (max-width: 767px) {
  .learn-course .learn-topics { grid-template-columns: 1fr; }
  .learn-home .learn-content { gap: var(--space-8); }
  .learn-experiment { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6) 0; }
  .learn-experiment > .learn-topic { gap: var(--space-4); }
  .learn-preview svg { max-width: 272px; }
}