/* BoboEdu: flashcard-learning-graphs.css */
/* Drawings use literal shelves, traces, axes and anatomy instead of generic flow boxes. */
.lg-title {
  fill: var(--ink);
  font: 800 17px var(--font-display);
}
.lg-label {
  fill: var(--ink);
  font: 750 14px var(--font-ui);
}
.lg-small,
.lg-axis-label {
  fill: var(--muted);
  font: 650 12px var(--font-ui);
}
.lg-note {
  fill: var(--muted);
  font: 600 12px var(--font-ui);
}
.lg-line,
.lg-axis,
.lg-callout,
.lg-direction,
.lg-shelf,
.lg-item-detail,
.lg-cabinet-detail,
.lg-pair-underline,
.lg-brain-callout {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-axis {
  stroke: var(--muted);
  stroke-width: 2;
}
.lg-callout,
.lg-brain-callout {
  stroke-dasharray: 4 4;
  stroke-width: 1.8;
}
.lg-direction {
  stroke-width: 3;
}
.lg-fill {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
}
.lg-curve,
.lg-serial-base {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-pellet {
  fill: #f2c14e;
  stroke: #8b6419;
  stroke-width: 1.5;
}
.lg-bubble {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linejoin: round;
}
.lg-faded-letters {
  fill: var(--muted);
  opacity: 0.24;
  font: 800 23px var(--font-display);
}
.lg-shelf {
  stroke: #b18a57;
  stroke-width: 7;
}
.lg-memory-item {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
}
.lg-old-item {
  fill: var(--warn-soft);
  stroke: var(--warn);
}
.lg-new-item {
  fill: var(--good-soft);
  stroke: var(--good);
}
.lg-falling-item {
  fill: var(--warn-soft);
  stroke: var(--warn);
}
.lg-memory-letter {
  fill: var(--ink);
  font: 800 23px var(--font-display);
}
.lg-item-detail {
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.lg-list-paper {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 2;
}
.lg-clock {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
}
.lg-clock-hands {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.lg-memory-photo {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 7;
}
.lg-birthday-cake {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.lg-time-line {
  stroke: var(--accent);
  stroke-width: 3;
}
.lg-serial-base {
  stroke: var(--line-strong);
}
.lg-curve-primacy {
  stroke: var(--good);
}
.lg-curve-recency {
  stroke: var(--tint);
}
.lg-curve-middle {
  stroke: var(--warn);
}
.lg-memory-label {
  fill: var(--ink);
  font: 800 17px var(--font-display);
}
.lg-trace-label {
  stroke: var(--surface);
  stroke-width: 7;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.lg-memory-trace {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.8;
}
.lg-trace-old {
  stroke: var(--accent);
}
.lg-trace-new {
  stroke: var(--tint);
}
.lg-recall-circle {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 2;
}
.lg-interference-arrow {
  fill: none;
  stroke: var(--bad);
  stroke-width: 4;
  stroke-linecap: round;
}
.lg-confused {
  fill: var(--bad);
  font: 900 32px var(--font-display);
}
.lg-pair-spot {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
}
.lg-pair-spot-alt {
  fill: var(--good-soft);
  stroke: var(--good);
}
.lg-pair-underline {
  stroke: var(--line-strong);
  stroke-width: 2;
}
.lg-cabinet {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
}
.lg-cabinet-detail {
  stroke: var(--accent);
  stroke-width: 2;
}
.lg-cabinet-handle {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.lg-keyhole {
  fill: var(--ink);
}
.lg-key {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 4;
}
.lg-key-stem {
  fill: none;
  stroke: var(--warn);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-water,
.lg-seabed {
  fill: none;
  stroke: #53afca;
  stroke-width: 3;
  stroke-linecap: round;
}
.lg-seabed {
  stroke: #aa8b5e;
  stroke-width: 4;
}
.lg-goggles {
  fill: #bceff7;
  fill-opacity: 0.8;
  stroke: #307a99;
  stroke-width: 1.5;
}
.lg-goggles-line {
  fill: none;
  stroke: #307a99;
  stroke-width: 3;
  stroke-linecap: round;
}
.lg-water-bubble {
  fill: none;
  stroke: #53afca;
  stroke-width: 2;
}
.lg-state-ring {
  fill: var(--tint);
  fill-opacity: 0.13;
  stroke: var(--tint);
  stroke-width: 3;
  stroke-dasharray: 7 5;
}
.lg-house {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-basket {
  fill: color-mix(in srgb, var(--warn-soft) 65%, var(--surface));
  stroke: var(--warn);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.lg-fruit {
  fill: #ed7463;
  stroke: #a43e36;
  stroke-width: 1.5;
}
.lg-fruit-stem {
  fill: none;
  stroke: #578447;
  stroke-width: 3;
  stroke-linecap: round;
}
.lg-carton {
  fill: #e8f4fa;
  stroke: #4a8ba7;
  stroke-width: 2;
  stroke-linejoin: round;
}
.lg-bread {
  fill: #dba464;
  stroke: #936333;
  stroke-width: 2;
  stroke-linejoin: round;
}
.lg-brain-region {
  fill: color-mix(in srgb, var(--muted) 12%, var(--surface));
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linejoin: round;
}
.lg-region-active.lg-region-frontal {
  fill: #ed9d7d;
}
.lg-region-active.lg-region-parietal {
  fill: #f0ce72;
}
.lg-region-active.lg-region-temporal {
  fill: #a5cb87;
}
.lg-region-active.lg-region-occipital {
  fill: #a0a9e2;
}
.lg-region-active.lg-region-cerebellum {
  fill: #7fc8d0;
}
.lg-region-active.lg-region-brainstem {
  fill: #d3a2cf;
}
.lg-brain-folds {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.25;
  stroke-width: 2;
  stroke-linecap: round;
}
.lg-cortex-strip {
  fill: none;
  stroke: #cd526a;
  stroke-width: 10;
  stroke-linecap: round;
}
.lg-language-area {
  fill: #cd526a;
  stroke: #fff4e8;
  stroke-width: 2;
}
.lg-hippocampus {
  fill: none;
  stroke: #985aa6;
  stroke-width: 8;
  stroke-linecap: round;
}
.lg-brain-pin {
  fill: var(--ink);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.lg-balance-beam {
  stroke: var(--warn);
  stroke-width: 6;
  stroke-linecap: round;
}
.lg-football {
  fill: #fff4e8;
  stroke: #454050;
  stroke-width: 2;
}
.lg-ball-detail {
  fill: #454050;
  stroke: #454050;
  stroke-width: 1;
}
.lg-radiator {
  stroke: #b49a91;
  stroke-width: 7;
  stroke-linecap: round;
}
.lg-heat {
  fill: none;
  stroke: var(--bad);
  stroke-width: 2;
  stroke-linecap: round;
}
.lg-road-sign {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 3;
  stroke-linejoin: round;
}
.lg-sight {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}
.lg-phone {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-memory-folder {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 2;
  stroke-linejoin: round;
}
.lg-heartbeat {
  fill: none;
  stroke: var(--bad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-plan {
  fill: none;
  stroke: var(--good);
  stroke-width: 4;
  stroke-linecap: round;
}
.lg-plan-goal {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 2;
}
.lg-cns-brain {
  fill: #8fcbd5;
  stroke: #3f8396;
  stroke-width: 2;
}
.lg-cns-cord {
  fill: none;
  stroke: #f5d46a;
  stroke-width: 7;
  stroke-linecap: round;
}
.lg-cns-branches {
  fill: none;
  stroke: #f5d46a;
  stroke-width: 3;
  stroke-linecap: round;
}
.lg-hemisphere {
  stroke: var(--line-strong);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.lg-left-hemisphere {
  fill: #d9a2a1;
}
.lg-right-hemisphere {
  fill: #a1b4dd;
}
.lg-hemisphere-gap {
  fill: none;
  stroke: var(--surface);
  stroke-width: 4;
}
.lg-limbic-outline {
  fill: color-mix(in srgb, var(--muted) 13%, var(--surface));
  stroke: var(--line-strong);
  stroke-width: 2;
}
.lg-amygdala {
  fill: #e7a664;
  stroke: #a86933;
  stroke-width: 2;
}
.lg-comparison-divider {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}
.lg-neuron-axon {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0.4;
}
.lg-neuron-soma {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
}
.lg-neuron-dendrite {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.lg-big-number {
  fill: var(--ink);
  stroke: var(--surface);
  stroke-width: 7;
  stroke-linejoin: round;
  paint-order: stroke fill;
  font: 900 35px var(--font-display);
}
.lg-abacus {
  fill: none;
  stroke: #aa8252;
  stroke-width: 3;
  stroke-linecap: round;
}
.lg-abacus-bead {
  fill: var(--tint);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.lg-population-bracket {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
}
.lg-dna {
  fill: none;
  stroke: var(--good);
  stroke-width: 3;
  stroke-linecap: round;
}
.lg-twin-egg {
  fill: #fff0da;
  stroke: #bf9255;
  stroke-width: 2;
}
.lg-twin-egg-alt {
  fill: #d6ebf6;
  stroke: #6a97b5;
}
.lg-twin-branch {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.lg-test-tube {
  fill: var(--good-soft);
  stroke: var(--good);
  stroke-width: 2.5;
}
.lg-binocular {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 3;
}
.lg-globe {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
}
.lg-globe-detail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.lg-eeg {
  fill: none;
  stroke: var(--bad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-scanner {
  fill: var(--accent-soft);
  stroke: var(--line-strong);
  stroke-width: 7;
}
.lg-scanner-bed {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.lg-personal-cue {
  fill: none;
  stroke: var(--tint);
  stroke-width: 5;
  stroke-linecap: round;
}
.lg-neutral-cue {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-dasharray: 4 5;
  opacity: 0.55;
}
.lg-neutral-memory {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 2;
  opacity: 0.7;
}
.diagram-disclosure[open] .lg-curve-animated {
  animation: lg-curve-appear 2s ease-in-out infinite alternate;
}
@keyframes lg-curve-appear {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diagram-disclosure[open] .lg-curve-animated {
    animation: none;
  }
}