@layer views {
  /* ── lessons: the idea, a diagram, a worked example, the classic mistake ── */
  .lesson { display: grid; gap: 16px; }
  .lesson-hook { font-size: clamp(18px, 2.2vw, 21px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; color: var(--fg); text-wrap: pretty; }
  .lesson-body { font-size: 15.5px; line-height: 1.65; color: var(--fg-2); max-width: 68ch; }
  .lesson-label { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
  .lesson-example {
    display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-card);
    border: 1px solid var(--line); background: var(--surface);
  }
  .lesson-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14.5px; color: var(--fg-2); }
  .lesson-steps .rich > p { margin: 0; }
  .lesson-answer { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-weight: 600; color: var(--fg); }
  .lesson-answer .rich > p { margin: 0; }
  .lesson-mistake { display: grid; gap: 4px; padding: 12px 16px; border-left: 2px solid var(--due); background: color-mix(in oklch, var(--due) 7%, transparent); border-radius: 0 var(--r-input) var(--r-input) 0; font-size: 14.5px; color: var(--fg-2); }
  .lesson-takeaway { font-weight: 700; color: var(--fg); padding-left: 14px; border-left: 2px solid var(--known); }
  .ss-lesson { gap: 18px; }
  dialog.lesson-dialog .modal-body { max-height: min(78vh, 900px); overflow-y: auto; }

  /* diagrams: drawn by the app from checked data */
  .dg-figure { margin: 0; display: grid; gap: 6px; justify-items: center; padding: 14px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg-raise); overflow-x: auto; }
  .dg-figure figcaption { font-size: 12.5px; color: var(--muted); }
  .dg { width: 100%; height: auto; font-family: var(--font); }
  .dg-node rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
  .dg-node text { fill: var(--fg); font-size: 13px; font-weight: 600; }
  .dg-edge { fill: none; stroke: var(--muted); stroke-width: 1.6; }
  .dg-arrowhead { fill: var(--muted); }
  .dg-edge-label { fill: var(--muted); font-size: 11.5px; paint-order: stroke; stroke: var(--bg-raise); stroke-width: 4px; }
  .dg-grid { stroke: var(--line); stroke-width: 1; }
  .dg-axis { stroke: var(--faint); stroke-width: 1.4; }
  .dg-tick { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
  .dg-curve path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
  .dg-curve text { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--bg-raise); stroke-width: 4px; }
  .dg-curve.c0 path { stroke: var(--known); } .dg-curve.c0 text { fill: var(--known); }
  .dg-curve.c1 path { stroke: var(--due); } .dg-curve.c1 text { fill: var(--due); }
  .dg-curve.c2 path { stroke: var(--learning); } .dg-curve.c2 text { fill: var(--learning); }

  /* ── the skill bar after a right answer: one smooth fill toward the learned line ── */
  .fb-concept { display: grid; gap: 8px; }
  .skill { display: grid; gap: 7px; padding: 12px 14px; border-radius: var(--r-tile); background: var(--bg-raise); border: 1px solid var(--line); animation: skill-in var(--t) var(--ease-liquid); }
  @keyframes skill-in { from { opacity: 0; translate: 0 4px; } }
  .skill-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
  .skill-name { font-weight: 700; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skill-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
  .skill-num { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
  .skill-track { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: visible; }
  .skill-fill {
    position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--grad);
    transition: width 900ms var(--ease-liquid);
  }
  .skill[data-level="mastered"] .skill-fill { background: var(--right); }
  .skill-goal { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--fg-2); opacity: .35; }
  .skill-next { font-size: 12.5px; color: var(--muted); }
  @media (prefers-reduced-motion: reduce) {
    .skill, .skill-fill { animation: none; transition: none; }
  }
}