/* Scope conceptual diagrams and exact-count controls to this lesson. */
[data-module="representation-learning"] .context-corpus { padding: 1rem 1rem 1rem 2.8rem; background: #f3f6fb; border-left: 3px solid #3156b8; }
[data-module="representation-learning"] .context-corpus li { margin: .55rem 0; }
[data-module="representation-learning"] .context-corpus code { white-space: normal; }
[data-module="representation-learning"] .context-controls { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; }
[data-module="representation-learning"] .learning-label { font-size: 1rem; font-weight: 650; color: #243d83; }
[data-module="representation-learning"] .learning-tokens { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
[data-module="representation-learning"] .learning-tokens > span { border: 1px solid #8ca8d3; border-radius: .4rem; background: #eaf1ff; color: #182c50; padding: .45rem .65rem; font-size: 1.1rem; }
[data-module="representation-learning"] .learning-tokens .out-of-view { background: #f4f5f7; color: #59616c; border: 1px dashed #808b9c; }
[data-module="representation-learning"] .context-result { font-size: 1.15rem; font-weight: 650; }
[data-module="representation-learning"] .context-matches { font-size: 1rem; padding-left: 1.3rem; }
[data-module="representation-learning"] .context-matches li { margin: .6rem 0; }
[data-module="representation-learning"] .predictor-comparison { margin: 1.75rem 0; padding: 1.5rem; border: 1px solid #bac9e1; border-radius: .7rem; background: #f8fafc; }
[data-module="representation-learning"] .predictor-comparison figcaption { font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
[data-module="representation-learning"] .predictor-scope { margin: .5rem 0 1.5rem; font-size: 1rem; }
[data-module="representation-learning"] .predictor-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
[data-module="representation-learning"] .count-predictor { --predictor-ink: #284d9d; --predictor-tint: #eaf1ff; --predictor-line: #a2b9e3; }
[data-module="representation-learning"] .neural-predictor { --predictor-ink: #216747; --predictor-tint: #edf8f1; --predictor-line: #9ac7af; }
[data-module="representation-learning"] .predictor-column { min-width: 0; padding: 1.25rem; border: 1px solid var(--predictor-line); border-top: 4px solid var(--predictor-ink); border-radius: .5rem; background: #fff; text-align: center; }
[data-module="representation-learning"] .predictor-column h3 { color: var(--predictor-ink); font-size: 1.25rem; line-height: 1.3; margin: 0 0 1rem; }
[data-module="representation-learning"] .predictor-phase { margin: 0 0 .75rem; font-size: .9rem; font-weight: 650; color: #45536a; }
[data-module="representation-learning"] .predictor-context { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; font-size: 1rem; }
[data-module="representation-learning"] .predictor-context code { padding: .3rem .6rem; border: 1px solid #c8d3e6; border-radius: .3rem; background: #f5f7fc; }
[data-module="representation-learning"] .predictor-arrow { display: block; margin: .4rem 0; color: var(--predictor-ink); font-size: 1.5rem; line-height: 1.2; }
[data-module="representation-learning"] .predictor-engine { display: grid; justify-items: center; gap: .4rem; padding: 1rem .5rem; border: 1px solid var(--predictor-line); border-radius: .4rem; background: var(--predictor-tint); }
[data-module="representation-learning"] .predictor-engine strong { color: var(--predictor-ink); font-size: 1.05rem; line-height: 1.4; }
[data-module="representation-learning"] .predictor-engine > span { font-size: .95rem; line-height: 1.4; }
[data-module="representation-learning"] .predictor-icon { display: block; width: 120px; max-width: 100%; height: 64px; color: var(--predictor-ink); stroke: currentColor; stroke-width: 1.8; }
[data-module="representation-learning"] .predictor-highlight { fill: currentColor; stroke: none; opacity: .2; }
[data-module="representation-learning"] .predictor-connections { opacity: .45; }
[data-module="representation-learning"] .predictor-nodes { fill: #fff; }
[data-module="representation-learning"] .predictor-result { font-size: 1rem; font-weight: 650; line-height: 1.4; }
[data-module="representation-learning"] .predictor-training-example { margin-top: 1.5rem; padding: 1rem; border: 1px solid #c8d3e6; border-radius: .4rem; background: #fff; text-align: center; }
[data-module="representation-learning"] .predictor-training-example > p:last-child { margin: .5rem 0 0; font-size: 1rem; }
[data-module="representation-learning"] .predictor-comparison code { white-space: normal; overflow-wrap: anywhere; }
[data-module="representation-learning"] .predictor-update { min-width: 0; padding: 0 1rem .5rem; text-align: center; }
[data-module="representation-learning"] .predictor-update > strong { display: block; font-size: 1.05rem; color: var(--predictor-ink); }
[data-module="representation-learning"] .predictor-update p { margin: .5rem 0 0; font-size: 1rem; line-height: 1.5; }
[data-module="representation-learning"] .predictor-caption { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid #c8d3e6; font-size: .95rem; line-height: 1.5; }
[data-module="representation-learning"] #representations > h3 { margin-top: 2rem; }
[data-module="representation-learning"] .context-network { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #bac9e1; border-radius: .7rem; }
[data-module="representation-learning"] .context-network figcaption { font-size: 1.25rem; font-weight: 650; margin-bottom: 1rem; }
[data-module="representation-learning"] .network-tokens { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
[data-module="representation-learning"] .network-token { border: 1px solid #c8d3e6; border-radius: .4rem; padding: .7rem .25rem; text-align: center; background: #f5f7fc; overflow-wrap: anywhere; }
[data-module="representation-learning"] .network-token strong { display: block; font-size: 1rem; }
[data-module="representation-learning"] .network-token small { display: block; font-size: .875rem; line-height: 1.3; margin-top: .5rem; }
[data-module="representation-learning"] .network-token.clue { border: 2px solid #216747; background: #edf8f1; }
[data-module="representation-learning"] .network-token.final-position { border: 2px solid #3156b8; background: #eaf1ff; }
[data-module="representation-learning"] .network-process { margin: 1rem 0; padding: 1rem; border-left: 3px solid #3156b8; background: #f3f6fb; }
[data-module="representation-learning"] .network-process p { font-size: 1rem; margin: .5rem 0 0; }
[data-module="representation-learning"] .attention-example { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #9ac7af; border-radius: .5rem; background: #fbfdfb; }
[data-module="representation-learning"] .attention-example h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .75rem; }
[data-module="representation-learning"] .attention-example h3:not(:first-child) { margin-top: 1.5rem; }
[data-module="representation-learning"] .attention-example p { font-size: 1rem; }
[data-module="representation-learning"] .attention-disclosure { padding: .75rem; border-left: 3px solid #8a692d; background: #fff7e8; }
[data-module="representation-learning"] .attention-example .control { max-width: 360px; font-size: 1rem; }
[data-module="representation-learning"] .attention-source-label { margin: 1.25rem 0 .5rem; font-weight: 650; }
[data-module="representation-learning"] .attention-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
[data-module="representation-learning"] .attention-tile { display: grid; gap: .35rem; min-width: 0; padding: .7rem .2rem; border: 1px solid #9ab7a5; border-radius: .3rem; text-align: center; overflow-wrap: anywhere; }
[data-module="representation-learning"] .attention-tile small { font-size: .875rem; line-height: 1.3; }
[data-module="representation-learning"] .attention-tile strong { font-size: 1rem; }
[data-module="representation-learning"] .attention-tile > span { font-size: 1rem; font-weight: 650; }
[data-module="representation-learning"] .attention-heat-low { background: #edf7f0; color: #183c2c; }
[data-module="representation-learning"] .attention-heat-medium { background: #b4d9c2; color: #183c2c; }
[data-module="representation-learning"] .attention-heat-high { background: #367a57; color: #fff; }
[data-module="representation-learning"] .attention-heat-peak { background: #174d34; color: #fff; }
[data-module="representation-learning"] .attention-masked { background: repeating-linear-gradient(135deg, #f1f3f5, #f1f3f5 6px, #e4e8ec 6px, #e4e8ec 8px); color: #485360; border-style: dashed; }
[data-module="representation-learning"] .attention-legend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; font-size: .875rem; }
[data-module="representation-learning"] .attention-legend-scale { width: 90px; height: 12px; border: 1px solid #9ab7a5; background: linear-gradient(to right, #edf7f0, #b4d9c2, #367a57, #174d34); }
[data-module="representation-learning"] .attention-reading { padding: .8rem; background: #edf7f0; border-left: 3px solid #367a57; }
[data-module="representation-learning"] .attention-matrix { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 3px; font-size: .9rem; }
[data-module="representation-learning"] .attention-matrix caption { text-align: left; margin-bottom: .5rem; }
[data-module="representation-learning"] .attention-matrix th { padding: .5rem .25rem; background: transparent; color: #183c2c; font-size: .9rem; text-align: center; white-space: normal; }
[data-module="representation-learning"] .attention-matrix td { padding: .65rem .25rem; text-align: center; border-radius: .15rem; }
[data-module="representation-learning"] .attention-selected-row > th { box-shadow: inset 3px 0 #216747; }
[data-module="representation-learning"] .attention-all-rows .table-wrap:focus-visible { outline: 3px solid #8bb8ff; outline-offset: 3px; }
[data-module="representation-learning"] .context-route { font-size: 1.1rem; padding: .8rem; border-left: 3px solid #216747; background: #edf8f1; }
[data-module="representation-learning"] .network-output { margin: 1rem 0; padding: 1rem; border: 1px solid #bcc9e3; }
[data-module="representation-learning"] .network-output p { font-size: 1rem; margin-bottom: 0; }
[data-module="representation-learning"] .learning-details { margin: 1.25rem 0; border: 1px solid #c9d4e5; padding: 1rem; border-radius: .5rem; }
[data-module="representation-learning"] .learning-details summary { cursor: pointer; color: #243d83; font-weight: 650; }
[data-module="representation-learning"] .quiet-note { font-size: 1rem; }
[data-module="representation-learning"] select { max-width: 100%; width: 100%; font-size: 1rem; }
@media (max-width: 650px) {
  [data-module="representation-learning"] .context-controls { grid-template-columns: 1fr; }
  [data-module="representation-learning"] .predictor-columns { grid-template-columns: 1fr; }
  [data-module="representation-learning"] .predictor-comparison { padding: 1rem; }
  [data-module="representation-learning"] .network-tokens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-module="representation-learning"] .attention-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-module="representation-learning"] .attention-example { padding: .75rem; }
  [data-module="representation-learning"] .context-network, [data-module="representation-learning"] .workbench { padding: 1rem; }
}