/* Drawings for rebuilt lesson cards (visuals-more.mjs): bright colours, thick friendly lines,
   everything draws or drops in when the card opens. */
.rb-course {
  --rbv-violet: #8b5cf6; --rbv-coral: #ff6a55; --rbv-teal: #10b3a3; --rbv-gold: #f2a900; --rbv-blue: #3b82f6; --rbv-green: #18a058; --rbv-pink: #ec4899;
}
.rb-course .rbv-svg { width: 100%; max-width: 460px; height: auto; overflow: visible; }
.rb-course .rbv-svg.is-lines { overflow: hidden; border-radius: 14px; }
.rb-course .rbv-note { margin: 0; font-size: 15px; font-weight: 750; color: var(--rb-deep); text-align: center; }

/* lines, codes, labels: lines draw themselves */
.rb-course .rbv-ln, .rb-course .rbv-gap-ln, .rb-course .rbv-axis, .rb-course .rbv-code, .rb-course .rbv-shape, .rb-course .rbv-arc, .rb-course .rbv-ribbon, .rb-course .rbv-link { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: rbv-draw 1.1s ease forwards; animation-delay: calc(var(--i, 0) * 450ms); }
.rb-course .rbv-ln { stroke-width: 5; }
.rb-course .rbv-ln.is-d { stroke: var(--rbv-violet); }
.rb-course .rbv-ln.is-e { stroke: var(--rbv-coral); }
.rb-course .rbv-ln.is-late { animation-delay: 1.6s; }
.rb-course .rbv-gap-ln { stroke: var(--rbv-teal); stroke-width: 3; stroke-dasharray: 6 6; stroke-dashoffset: 0; animation: rbv-fade .4s ease both; animation-delay: calc(var(--i, 0) * 450ms); }
.rb-course .rbv-code { stroke: #23202a; stroke-width: 3; }
.rb-course .rbv-axis { stroke: var(--rbv-gold); stroke-width: 3; stroke-dasharray: 8 7; stroke-dashoffset: 0; animation: rbv-fade .5s ease both 1.6s; }
.rb-course .rbv-dot { fill: #23202a; }
.rb-course .rbv-dot.is-a { fill: var(--rbv-coral); }
.rb-course .rbv-lb { font: 800 16px/1 var(--font-body, system-ui); fill: #23202a; animation: rbv-fade .4s ease both .6s; }
.rb-course .rbv-lb.is-d { fill: var(--rbv-violet); font-size: 18px; }
.rb-course .rbv-lb.is-e { fill: var(--rbv-coral); font-size: 18px; }
.rb-course .rbv-lb.is-vertex { font-size: 20px; font-weight: 900; }
.rb-course .rbv-lb.is-measure { fill: var(--rbv-teal); font-size: 16px; }
.rb-course .rbv-lb.is-warn { fill: #d0453a; font-size: 15px; }
.rb-course .rbv-lb.is-code { fill: #23202a; font-size: 20px; font-weight: 900; }
.rb-course .rbv-lb.is-note { fill: #6b6475; font-size: 13px; }
.rb-course .rbv-lb.is-verdict { fill: var(--rb-deep); font-size: 15px; animation-delay: 2s; }
.rb-course .rbv-shape { fill: rgba(139, 92, 246, .12); stroke: var(--rbv-violet); stroke-width: 5; animation: rbv-draw 1.4s ease forwards, rbv-fill .6s ease forwards 1.2s; }
.rb-course .rbv-shape.is-alt { fill: rgba(255, 106, 85, .14); stroke: var(--rbv-coral); animation-delay: .9s, 2s; }
.rb-course .rbv-tool path { fill: rgba(59, 130, 246, .18); stroke: var(--rbv-blue); stroke-width: 2.5; }
.rb-course .rbv-tool .rbv-tool-hole { fill: #ffffff; }
.rb-course .rbv-tool .rbv-tool-corner { fill: var(--rbv-gold); stroke: #ffffff; stroke-width: 2; }
.rb-course .rbv-tool { animation: rbv-fade .5s ease both .9s; }
.rb-course .rbv-tool.is-slide { animation: rbv-slide-in 1.2s cubic-bezier(.3, 1.2, .5, 1) both .8s; }
.rb-course .rbv-tool.is-ghost { opacity: .35; }
.rb-course .rbv-tool.is-slide-up { animation: rbv-slide-up 1.4s cubic-bezier(.3, 1.1, .5, 1) both .9s; }
.rb-course .rbv-tool.is-ruler path { fill: #fff3c4; stroke: #e5b82e; }
@keyframes rbv-slide-up { from { transform: translateY(90px); } to { transform: none; } }
.rb-course .rbv-compass path { fill: none; stroke: #23202a; stroke-width: 4; stroke-linecap: round; }
.rb-course .rbv-compass circle { fill: var(--rbv-gold); }
.rb-course .rbv-compass { animation: rbv-compass 2s ease-in-out both .6s; }
.rb-course .rbv-arc { stroke: var(--rbv-gold); stroke-width: 4; }

/* ruler */
.rb-course .rbv-ruler { fill: #fff3c4; stroke: #e5b82e; stroke-width: 2; }
.rb-course .rbv-tick-mm { stroke: #5b4a1a; stroke-width: 1.2; }
.rb-course .rbv-lb.is-ruler { font-size: 13px; fill: #5b4a1a; animation: none; }
.rb-course .rbv-object { fill: var(--rbv-coral); transform-origin: left; animation: rbv-grow .9s ease both .5s; }
.rb-course .rbv-lb.is-on { fill: #ffffff; font-size: 14px; }
.rb-course .rbv-read { stroke: var(--rbv-violet); stroke-width: 3; stroke-dasharray: 5 4; animation: rbv-fade .4s ease both 1.4s; }

/* conversion table */
.rb-course .rbv-conv { width: 100%; overflow-x: auto; }
.rb-course .rbv-conv table { border-collapse: separate; border-spacing: 4px; margin: 0 auto; font-variant-numeric: tabular-nums; }
.rb-course .rbv-conv th { padding: 6px 4px; font-size: 14px; font-weight: 900; color: var(--rb-deep); }
.rb-course .rbv-conv thead th:not(:first-child) { min-width: 40px; border-radius: 10px; background: var(--rb-support); }
.rb-course .rbv-conv thead th.is-base { background: var(--rbv-teal); color: #fff; }
.rb-course .rbv-conv thead th.is-target { background: var(--rbv-gold); color: #3d2a00; }
.rb-course .rbv-conv tbody th { text-align: right; font-size: 14px; white-space: nowrap; }
.rb-course .rbv-conv td { position: relative; height: 46px; border-radius: 10px; background: #ffffff; border: 2px solid #ece6f8; text-align: center; }
.rb-course .rbv-conv td.is-unit { border-color: var(--rbv-teal); background: #e7faf7; }
.rb-course .rbv-conv td.is-target { border-color: var(--rbv-gold); }
.rb-course .rbv-conv td b { font-size: 24px; font-weight: 900; color: #23202a; display: inline-block; animation: rbv-drop .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 90ms + var(--r, 0) * 500ms); }
.rb-course .rbv-conv td b.is-zero { color: var(--rbv-coral); }
.rb-course .rbv-comma { position: absolute; right: -6px; bottom: 2px; font-style: normal; font-size: 26px; font-weight: 900; color: var(--rbv-coral); }
.rb-course .rbv-conv td.rbv-conv-read { background: transparent; border: 0; text-align: left; white-space: nowrap; font-size: 18px; font-weight: 800; padding-left: 6px; }

/* jugs and beakers */
.rb-course .rbv-jugs, .rb-course .rbv-beakers { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex-wrap: wrap; }
.rb-course .rbv-jugs figure, .rb-course .rbv-beakers figure { margin: 0; display: grid; justify-items: center; gap: 6px; width: 110px; animation: rbv-rise .5s ease both; animation-delay: calc(var(--i) * 250ms); }
.rb-course .rbv-jugs svg, .rb-course .rbv-beakers svg { width: 90px; height: auto; }
.rb-course .rbv-jug { fill: none; stroke: #23202a; stroke-width: 3; stroke-linejoin: round; }
.rb-course .rbv-liquid { fill: #7cc4ff; transform: translateY(120px); animation: rbv-pour 1.4s ease forwards .4s; }
.rb-course .rbv-grad { stroke: #23202a; stroke-width: 2; }
.rb-course .rbv-beaker-fill { animation: rbv-fade .8s ease both .3s; }
.rb-course .rbv-grain { animation: rbv-swirl 3s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); transform-box: fill-box; }
.rb-course :is(.rbv-jugs, .rbv-beakers) figcaption { display: grid; text-align: center; }
.rb-course :is(.rbv-jugs, .rbv-beakers) figcaption strong { font-size: 16px; font-weight: 900; color: #23202a; }
.rb-course :is(.rbv-jugs, .rbv-beakers) figcaption small { font-size: 13px; font-weight: 700; color: #6b6475; }

/* bar model */
.rb-course .rbv-bar { width: 100%; display: grid; gap: 6px; }
.rb-course .rbv-bar__whole, .rb-course .rbv-bar__part { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; color: #ffffff; font-weight: 800; animation: rbv-grow .7s ease both; transform-origin: left; }
.rb-course .rbv-bar__whole { background: var(--rbv-violet); }
.rb-course .rbv-bar__whole strong, .rb-course .rbv-bar__part strong { font-size: 20px; }
.rb-course .rbv-bar__brace { height: 10px; margin: 0 8px; border: 3px solid var(--rbv-violet); border-top: 0; border-radius: 0 0 12px 12px; }
.rb-course .rbv-bar__parts { display: flex; gap: 6px; }
.rb-course .rbv-bar__part { animation-delay: calc(300ms + var(--i) * 300ms); }
.rb-course .rbv-bar__part.is-tone-0 { background: var(--rbv-coral); } .rb-course .rbv-bar__part.is-tone-1 { background: var(--rbv-teal); } .rb-course .rbv-bar__part.is-tone-2 { background: var(--rbv-gold); } .rb-course .rbv-bar__part.is-tone-3 { background: var(--rbv-blue); }
.rb-course :is(.rbv-bar__part, .rbv-bar__whole).is-unknown { background: #ffffff; color: #23202a; border: 3px dashed var(--rbv-gold); }
.rb-course :is(.rbv-bar__part, .rbv-bar__whole).is-unknown strong { color: #c98a00; font-size: 26px; }
.rb-course .rbv-bar__op { margin: 8px 0 0; text-align: center; font-size: 22px; font-weight: 900; color: var(--rb-deep); animation: rbv-fade .4s ease both 1.4s; }

/* steps */
.rb-course .rbv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.rb-course .rbv-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #ffffff; border: 2px solid #ece6f8; font-weight: 800; font-size: 17px; animation: rbv-rise .45s ease both; animation-delay: calc(var(--i) * 160ms); }
.rb-course .rbv-steps li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--rb-support); color: var(--rb-deep); font-style: normal; font-weight: 900; }
.rb-course .rbv-steps li .rbv-icon { width: 28px; height: 28px; }
.rb-course .rbv-steps li.is-current { border-color: var(--rbv-gold); box-shadow: 0 0 0 4px #fff3c4; transform: scale(1.02); }
.rb-course .rbv-steps li.is-current i { background: var(--rbv-gold); color: #3d2a00; }
.rb-course .rbv-steps li.is-done { opacity: .6; }

/* plan grid and compass rose */
.rb-course .rbv-grid { display: grid; grid-template-columns: 28px repeat(var(--cols), minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 420px; }
.rb-course .rbv-grid > b { display: grid; place-items: center; font-weight: 900; color: var(--rb-deep); border-radius: 8px; }
.rb-course .rbv-grid > b.is-hit { background: var(--rbv-gold); color: #3d2a00; }
.rb-course .rbv-grid > div { min-height: 62px; display: grid; place-items: center; border-radius: 10px; background: #f3f8ff; border: 2px solid #dbe8fb; animation: rbv-fade .3s ease both; animation-delay: calc(var(--i) * 60ms); }
.rb-course .rbv-grid > div.is-hit { background: #fff3c4; border-color: var(--rbv-gold); box-shadow: inset 0 0 0 2px var(--rbv-gold); }
.rb-course .rbv-grid-item { display: grid; justify-items: center; }
.rb-course .rbv-grid-item .rbv-icon { width: 30px; height: 30px; }
.rb-course .rbv-grid-item small { font-size: 11px; font-weight: 800; }
.rb-course .rbv-mini-rose { width: 90px; justify-self: end; }
.rb-course .rbv-rose-ring { fill: #f3f8ff; stroke: #cfe0f7; stroke-width: 2; }
.rb-course .rbv-rose-point { fill: var(--rbv-blue); animation: rbv-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 120ms); transform-box: fill-box; transform-origin: center; }
.rb-course .rbv-rose-point.is-small { fill: #9cc0f5; }
.rb-course .rbv-rose-point.is-hit { fill: var(--rbv-coral); }
.rb-course .rbv-lb.is-rose { font-size: 18px; font-weight: 900; }
.rb-course .rbv-lb.is-rose.is-hit { fill: var(--rbv-coral); }
.rb-course .rbv-rose-hub { fill: var(--rbv-gold); }

/* network */
.rb-course .rbv-link { stroke-width: 5; }
.rb-course .rbv-link.is-train { stroke: var(--rbv-violet); }
.rb-course .rbv-link.is-route { stroke: var(--rbv-coral); }
.rb-course .rbv-link.is-bus { stroke: var(--rbv-gold); }
.rb-course .rbv-link.is-velo, .rb-course .rbv-link.is-pied { stroke: var(--rbv-green); stroke-dasharray: 8 6; stroke-dashoffset: 0; animation: rbv-fade .5s ease both; }
.rb-course .rbv-link.is-avion { stroke: var(--rbv-blue); stroke-dasharray: 2 8; stroke-dashoffset: 0; animation: rbv-fade .5s ease both; }
.rb-course .rbv-link.is-tram, .rb-course .rbv-link.is-metro { stroke: var(--rbv-teal); }
.rb-course .rbv-link-icon { animation: rbv-fade .4s ease both; animation-delay: calc(var(--i) * 450ms + 500ms); }
.rb-course .rbv-node circle { fill: #ffffff; stroke: #23202a; stroke-width: 3; }
.rb-course .rbv-node.is-ville circle { fill: var(--rbv-violet); stroke: #ffffff; }
.rb-course .rbv-lb.is-place { font-size: 14px; }

/* timeline */
.rb-course .rbv-ribbon { stroke: #d79b3b; stroke-width: 8; }
.rb-course .rbv-event path { stroke: #b07a2a; stroke-width: 2; stroke-dasharray: 4 4; }
.rb-course .rbv-event circle { fill: #d79b3b; stroke: #ffffff; stroke-width: 3; }
.rb-course .rbv-event { animation: rbv-rise .5s ease both; animation-delay: calc(var(--i) * 300ms + 400ms); }
.rb-course .rbv-event.is-focus circle { fill: var(--rbv-coral); }
.rb-course .rbv-lb.is-year { font-size: 17px; font-weight: 900; fill: #8a5a12; }
.rb-course .rbv-event.is-focus .rbv-lb.is-year { fill: var(--rbv-coral); font-size: 20px; }
.rb-course .rbv-lb.is-event { font-size: 12px; font-weight: 750; }

/* archive document */
.rb-course .rbv-doc { position: relative; width: min(100%, 380px); padding: 22px 24px; background: radial-gradient(ellipse at 50% 30%, #fff8e8, #f1ddb3); border: 1px solid #d9bd86; box-shadow: 0 10px 24px rgba(120, 80, 20, .16), inset 0 0 30px rgba(140, 90, 30, .18); transform: rotate(-1.2deg); animation: rbv-rise .6s ease both; font-family: Georgia, 'Times New Roman', serif; }
.rb-course .rbv-doc header { display: grid; gap: 4px; text-align: center; margin-bottom: 10px; }
.rb-course .rbv-doc header small { font: 800 11px/1 var(--font-body, system-ui); letter-spacing: .16em; color: #8a5a12; }
.rb-course .rbv-doc header strong { font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: #3b2a10; }
.rb-course .rbv-doc p { margin: 6px 0; font-size: 16px; line-height: 1.45; color: #3b2a10; text-align: center; animation: rbv-fade .4s ease both; animation-delay: calc(var(--i) * 250ms + 500ms); }
.rb-course .rbv-doc footer { margin-top: 10px; font: 700 12px/1.3 var(--font-body, system-ui); color: #8a5a12; text-align: right; }
.rb-course .rbv-stamp { position: absolute; right: 10px; top: 10px; padding: 6px 10px; border: 3px solid #c0392b; border-radius: 8px; color: #c0392b; font: 900 13px/1 var(--font-body, system-ui); letter-spacing: .1em; transform: rotate(-12deg); animation: rbv-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both 1.4s; }
.rb-course .rbv-doc.is-newspaper { font-family: Georgia, serif; background: #fbfaf6; border-color: #d8d4c8; }

/* icon cards, sort, words, decompose */
.rb-course .rbv-icon { width: 40px; height: 40px; }
.rb-course .rbv-icon .s, .rb-course .rbv-icon .sw { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rb-course .rbv-icon .s { stroke: #23202a; }
.rb-course .rbv-icon .sw { stroke: #ffffff; }
.rb-course .rbv-icon .w { fill: #ffffff; }
.rb-course .rbv-icon .k { fill: #23202a; }
.rb-course .rbv-icon.is-violet .f { fill: var(--rbv-violet); } .rb-course .rbv-icon.is-coral .f { fill: var(--rbv-coral); } .rb-course .rbv-icon.is-teal .f { fill: var(--rbv-teal); } .rb-course .rbv-icon.is-gold .f { fill: var(--rbv-gold); } .rb-course .rbv-icon.is-blue .f { fill: var(--rbv-blue); } .rb-course .rbv-icon.is-green .f { fill: var(--rbv-green); } .rb-course .rbv-icon.is-pink .f { fill: var(--rbv-pink); }
.rb-course .rbv-icons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.rb-course .rbv-icons.is-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); width: 100%; }
.rb-course .rbv-icons figure { position: relative; margin: 0; display: grid; justify-items: center; gap: 6px; min-width: 100px; padding: 14px 10px; border-radius: 18px; background: #ffffff; border: 2px solid #ece6f8; animation: rbv-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 160ms); }
.rb-course .rbv-icons figure .rbv-icon:first-child { width: 48px; height: 48px; }
.rb-course .rbv-icons figure.is-ok { border-color: var(--rbv-green); background: #effbf4; }
.rb-course .rbv-icons figure.is-no { border-color: var(--rbv-coral); background: #fff4f1; }
.rb-course .rbv-icons figcaption { display: grid; text-align: center; gap: 2px; }
.rb-course .rbv-icons figcaption strong { font-size: 15px; font-weight: 900; }
.rb-course .rbv-icons figcaption small { font-size: 12px; font-weight: 700; color: #6b6475; }
.rb-course .rbv-icons .rbv-mark { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; }
.rb-course .rbv-sort { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; width: 100%; }
.rb-course .rbv-sort section { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 18px; background: #ffffff; border: 3px solid; }
.rb-course .rbv-sort section.is-tone-0 { border-color: var(--rbv-violet); } .rb-course .rbv-sort section.is-tone-1 { border-color: var(--rbv-coral); } .rb-course .rbv-sort section.is-tone-2 { border-color: var(--rbv-teal); } .rb-course .rbv-sort section.is-tone-3 { border-color: var(--rbv-gold); }
.rb-course .rbv-sort header { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.rb-course .rbv-sort header .rbv-icon { width: 30px; height: 30px; }
.rb-course .rbv-sort span { padding: 8px 10px; border-radius: 12px; background: var(--rb-support); font-weight: 750; font-size: 15px; animation: rbv-drop .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 140ms + 300ms); }
.rb-course .rbv-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rb-course .rbv-words__class { display: grid; gap: 6px; justify-items: center; animation: rbv-rise .5s ease both; animation-delay: calc(var(--i) * 300ms); }
.rb-course .rbv-words__digits { padding: 8px 14px; border-radius: 12px; color: #fff; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rb-course .rbv-words__say { max-width: 160px; padding: 8px 12px; border-radius: 14px; background: #ffffff; border: 2px solid; font-size: 16px; font-weight: 800; text-align: center; }
.rb-course .rbv-words__class.is-unites .rbv-words__digits { background: var(--rbv-unites); } .rb-course .rbv-words__class.is-unites .rbv-words__say { border-color: var(--rbv-unites); }
.rb-course .rbv-words__class.is-mille .rbv-words__digits { background: var(--rbv-mille); } .rb-course .rbv-words__class.is-mille .rbv-words__say { border-color: var(--rbv-mille); }
.rb-course .rbv-words__class.is-millions .rbv-words__digits { background: var(--rbv-millions); } .rb-course .rbv-words__class.is-millions .rbv-words__say { border-color: var(--rbv-millions); }
.rb-course .rbv-words__class.is-milliards .rbv-words__digits { background: var(--rbv-milliards); } .rb-course .rbv-words__class.is-milliards .rbv-words__say { border-color: var(--rbv-milliards); }
.rb-course .rbv-words__say s { color: #8f889c; font-weight: 700; }
.rb-course .rbv-words em, .rb-course .rbv-say em { font-style: normal; color: #ffffff; background: var(--rbv-coral); border-radius: 5px; padding: 0 3px; }
.rb-course .rbv-hyphen { font-style: normal; color: var(--rbv-coral); font-weight: 900; font-size: 1.2em; }
.rb-course .rbv-decompose { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.rb-course .rbv-decompose__n { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rb-course .rbv-decompose b { font-size: 24px; font-weight: 900; color: var(--rb-deep); }
.rb-course .rbv-decompose span { padding: 8px 12px; border-radius: 12px; color: #fff; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; animation: rbv-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 250ms + 200ms); }
.rb-course .rbv-decompose span.is-unites { background: var(--rbv-unites); } .rb-course .rbv-decompose span.is-mille { background: var(--rbv-mille); } .rb-course .rbv-decompose span.is-millions { background: var(--rbv-millions); } .rb-course .rbv-decompose span.is-milliards { background: var(--rbv-milliards); }

@keyframes rbv-draw { to { stroke-dashoffset: 0; } }
@keyframes rbv-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes rbv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rbv-pour { to { transform: translateY(0); } }
@keyframes rbv-slide-in { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes rbv-compass { 0%, 100% { transform: none; } 50% { transform: translateY(120px); } }
@keyframes rbv-stamp { from { opacity: 0; transform: scale(2.4) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(-12deg); } }
@keyframes rbv-swirl { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -4px); } }
@media (prefers-reduced-motion: reduce) { .rb-course .rbv-svg *, .rb-course .rbv-icons *, .rb-course .rbv-conv * { animation: none !important; stroke-dashoffset: 0 !important; transform: none !important; } }
.rb-course .rbv-bar__whole strong, .rb-course .rbv-bar__part strong { white-space: nowrap; }
.rb-course .rbv-bar__part { min-width: 92px; }
.rb-course .rbv-lb.is-event { font-size: 12.5px; }
.rb-course .rbv-conv thead th:not(:first-child) { min-width: 34px; }
.rb-course .rbv-conv td b { font-size: 21px; }
.rb-course .rbv-conv-reads { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; justify-items: center; font-size: 18px; font-weight: 750; }
.rb-course .rbv-conv-reads li { animation: rbv-fade .4s ease both; animation-delay: calc(1.2s + var(--r) * 500ms); }
.rb-course .rbv-conv-reads strong { color: var(--rb-deep); font-weight: 900; }
.rb-course .rbv-words { flex-wrap: nowrap; width: 100%; }
.rb-course .rbv-words__class { flex: 1 1 0; min-width: 0; }
.rb-course .rbv-words__say { max-width: none; width: 100%; font-size: 15px; }
.rb-course .rbv-doc footer { padding-right: 0; }
.rb-course .rbv-paper-corner path { fill: #fffaf0; stroke: #c9b98a; stroke-width: 2; stroke-dasharray: 6 4; }
.rb-course .rbv-paper-corner { animation: rbv-fade .6s ease both 1.2s; }
.rb-course .rbv-ln.is-shared { stroke: #f2a900; stroke-width: 6; }
.rb-course .rbv-ln.is-f { stroke: var(--rbv-teal); }
.rb-course .rbv-lb.is-f { fill: var(--rbv-teal); font-size: 18px; }
.rb-course .rbv-path { fill: none; stroke: #b9b2c6; stroke-width: 3; stroke-dasharray: 7 6; animation: rbv-fade .4s ease both; animation-delay: calc(var(--i, 0) * 300ms); }
.rb-course .rbv-stamp { position: static; display: inline-block; margin-top: 12px; }
/* labels stay readable over lines: a white halo behind the letters */
.rb-course .rbv-lb { paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
.rb-course .rbv-lb.is-place { font-size: 13px; font-weight: 900; }
.rb-course .rbv-link.is-bateau { stroke: var(--rbv-blue); stroke-dasharray: 10 7; stroke-dashoffset: 0; animation: rbv-fade .5s ease both; }

/* number line and fraction strips */
.rb-course .rbv-nl-band { fill: #fff3c4; animation: rbv-fade .5s ease both .8s; }
.rb-course .rbv-nl-sub { stroke: #23202a; stroke-width: 1.5; opacity: .45; }
.rb-course .rbv-lb.is-nl { font-size: 15px; font-weight: 900; }
.rb-course .rbv-arc.is-jump { stroke: var(--rbv-coral); stroke-width: 3.5; fill: none; }
.rb-course .rbv-nl-point circle { fill: var(--rbv-coral); stroke: #fff; stroke-width: 3; }
.rb-course .rbv-nl-point.is-violet circle { fill: var(--rbv-violet); } .rb-course .rbv-nl-point.is-teal circle { fill: var(--rbv-teal); } .rb-course .rbv-nl-point.is-gold circle { fill: var(--rbv-gold); }
.rb-course .rbv-nl-point { animation: rbv-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 200ms + 900ms); transform-box: fill-box; transform-origin: center; }
.rb-course .rbv-fs-part { fill: #ffffff; stroke: #23202a; stroke-width: 1.2; }
.rb-course .rbv-fs-part.is-on { animation: rbv-fade .3s ease both; animation-delay: calc(var(--i) * 70ms + 200ms); }
.rb-course .rbv-fs-part.is-on.is-violet { fill: var(--rbv-violet); } .rb-course .rbv-fs-part.is-on.is-coral { fill: var(--rbv-coral); } .rb-course .rbv-fs-part.is-on.is-teal { fill: var(--rbv-teal); } .rb-course .rbv-fs-part.is-on.is-gold { fill: var(--rbv-gold); } .rb-course .rbv-fs-part.is-on.is-blue { fill: var(--rbv-blue); }
.rb-course .rbv-fs-unit { fill: none; stroke: #23202a; stroke-width: 3.5; }
.rb-course .rbv-lb.is-fs { font-size: 14px; font-weight: 900; text-anchor: middle; }

/* posed calculations */
.rb-course .rbv-svg.is-column { max-width: 340px; }
.rb-course .rbv-lb.is-coldigit { font-size: 28px; font-weight: 900; fill: #23202a; animation: rbv-drop .4s ease both; }
.rb-course .rbv-lb.is-colresult { font-size: 28px; font-weight: 900; fill: var(--rbv-violet); animation: rbv-drop .4s ease both 1.2s; }
.rb-course .rbv-lb.is-comma { fill: var(--rbv-coral); }
.rb-course .rbv-lb.is-colop { font-size: 28px; font-weight: 900; fill: var(--rbv-coral); }
.rb-course .rbv-lb.is-carry { font-size: 15px; font-weight: 900; fill: var(--rbv-coral); animation: rbv-pop .4s ease both .8s; }
.rb-course .rbv-lb.is-borrow { font-size: 15px; font-weight: 900; fill: var(--rbv-teal); animation: rbv-pop .4s ease both .8s; }
.rb-course .rbv-lb.is-colhead { font-size: 13px; font-weight: 900; fill: var(--rb-deep, #5b3cc4); }
.rb-course .rbv-lb.is-crossed { opacity: .45; }
.rb-course .rbv-cross { stroke: var(--rbv-coral); stroke-width: 3; stroke-linecap: round; }
.rb-course .rbv-colrule { stroke: #23202a; stroke-width: 3.5; stroke-linecap: round; }
.rb-course .rbv-col-band { fill: #fff3c4; }

/* multiplication table */
.rb-course .rbv-svg.is-multtable { max-width: 340px; }
.rb-course .rbv-mt { fill: #f4f2f8; animation: rbv-fade .3s ease both; animation-delay: calc(var(--i) * 25ms); }
.rb-course .rbv-mt.is-head { fill: var(--rbv-violet); }
.rb-course .rbv-mt.is-line { fill: #fff3c4; }
.rb-course .rbv-mt.is-diag { fill: #d9f7f3; }
.rb-course .rbv-mt.is-hit { fill: var(--rbv-coral); }
.rb-course .rbv-mt-t { font-weight: 900; fill: #23202a; }
.rb-course .rbv-mt-t.is-head, .rb-course .rbv-mt-t.is-hit { fill: #ffffff; }
.rb-course .rbv-lb.is-on { stroke: none; }

/* division (potence) and symmetry */
.rb-course .rbv-svg.is-division { max-width: 360px; }
.rb-course .rbv-lb.is-small { font-size: 22px; }
.rb-course .rbv-lb.is-colrest { font-size: 22px; font-weight: 900; fill: var(--rbv-teal); }
.rb-course .rbv-colrule.is-thin { stroke-width: 2; }
.rb-course .rbv-sym-grid { stroke: #d6e6fb; stroke-width: 1; }
.rb-course .rbv-axis.is-sym { stroke: var(--rbv-gold); stroke-width: 4; stroke-dasharray: 10 7; animation: none; stroke-dashoffset: 0; }
.rb-course .rbv-shape.is-sym { stroke-width: 4; }
.rb-course .rbv-sym-link { stroke: var(--rbv-teal); stroke-width: 2; stroke-dasharray: 4 4; }

/* polygon diagonals (2026-10-04) */
.rb-course .rbv-ln.is-diag { stroke: var(--rbv-coral); stroke-width: 3.5; stroke-dasharray: 8 7; stroke-dashoffset: 0; animation: rbv-fade .5s ease both calc(1s + var(--i, 0) * .15s); }

/* clock */
.rb-course .rbv-clock-face { fill: #ffffff; stroke: var(--rbv-blue); stroke-width: 8; }
.rb-course .rbv-clock-tick { stroke: #b8b2c4; stroke-width: 2; }
.rb-course .rbv-clock-tick.is-hour { stroke: #23202a; stroke-width: 3.5; }
.rb-course .rbv-clock-num { font: 900 20px/1 var(--font-body, system-ui); fill: #23202a; }
.rb-course .rbv-clock-min { font: 800 13px/1 var(--font-body, system-ui); fill: var(--rbv-coral); }
.rb-course .rbv-clock-h { stroke: #23202a; stroke-width: 9; stroke-linecap: round; transform-origin: center; transform-box: view-box; }
.rb-course .rbv-clock-m { stroke: var(--rbv-coral); stroke-width: 5; stroke-linecap: round; }
.rb-course .rbv-clock-h, .rb-course .rbv-clock-m { animation: rbv-fade .5s ease both calc(.3s + var(--i, 0) * .3s); }
.rb-course .rbv-clock-pin { fill: #23202a; }
.rb-course .rbv-clock-shade { fill: rgba(16, 179, 163, .22); animation: rbv-fade .6s ease both .9s; }
.rb-course .rbv-clock-shade.is-to { fill: rgba(242, 169, 0, .28); }

/* area grid */
.rb-course .rbv-area-grid { stroke: #d9d3e6; stroke-width: 1.2; }
.rb-course .rbv-area-cell { fill: rgba(139, 92, 246, .55); stroke: #ffffff; stroke-width: 1.5; animation: rbv-pop .35s ease both calc(var(--i, 0) * 40ms); transform-box: fill-box; transform-origin: center; }
.rb-course .rbv-area-cell.is-alt { fill: rgba(16, 179, 163, .6); }
.rb-course .rbv-area-cell.is-half { fill: rgba(242, 169, 0, .7); }
.rb-course .rbv-area-cell.is-unit { fill: var(--rbv-coral); animation: none; }
.rb-course .rbv-area-edge { fill: none; stroke: var(--rbv-violet); stroke-width: 4; }
.rb-course .rbv-area-edge.is-alt { stroke: var(--rbv-teal); }
.rb-course .rbv-area-n { font: 800 12px/1 var(--font-body, system-ui); fill: #ffffff; animation: rbv-fade .3s ease both .8s; }

/* solids */
.rb-course .rbv-solid { animation: rbv-rise .6s ease both calc(var(--i, 0) * .25s); }
.rb-course .rbv-solid-face { fill: rgba(139, 92, 246, .16); stroke: none; }
.rb-course .rbv-solid-face.is-top { fill: rgba(139, 92, 246, .3); stroke: var(--rbv-violet); stroke-width: 4; }
.rb-course .rbv-solid-face.is-c0 { fill: rgba(139, 92, 246, .35); } .rb-course .rbv-solid-face.is-c1 { fill: rgba(255, 106, 85, .35); } .rb-course .rbv-solid-face.is-c2 { fill: rgba(16, 179, 163, .35); }
.rb-course .rbv-solid-face.is-c3 { fill: rgba(242, 169, 0, .4); } .rb-course .rbv-solid-face.is-c4 { fill: rgba(59, 130, 246, .35); } .rb-course .rbv-solid-face.is-c5 { fill: rgba(236, 72, 153, .3); }
.rb-course .rbv-solid-face.is-base { fill: rgba(242, 169, 0, .5); }
.rb-course .rbv-solid-face.is-base.is-behind { fill: rgba(242, 169, 0, .22); }
.rb-course .rbv-solid-edge { fill: none; stroke: var(--rbv-violet); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.rb-course .rbv-solid-hidden { fill: none; stroke: var(--rbv-violet); stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .75; }
.rb-course .rbv-solid-edge.is-hot, .rb-course .rbv-solid-hidden.is-hot { stroke: var(--rbv-coral); }
.rb-course .rbv-solid-vertex { fill: var(--rbv-coral); stroke: #ffffff; stroke-width: 2.5; animation: rbv-pop .4s ease both .8s; transform-box: fill-box; transform-origin: center; }
.rb-course .rbv-solid-count { font: 800 14px/1 var(--font-body, system-ui); fill: var(--rbv-coral); }

/* tree of outcomes */
.rb-course .rbv-tree-branch { fill: none; stroke: var(--rbv-violet); stroke-width: 3.5; stroke-linecap: round; animation: rbv-fade .4s ease both calc(var(--i, 0) * .12s); }
.rb-course .rbv-tree-node { fill: var(--rbv-violet); }
.rb-course .rbv-tree-txt { font: 900 14px/1 var(--font-body, system-ui); fill: #ffffff; }
.rb-course .rbv-lb.is-leaf { fill: var(--rbv-coral); }

/* bag of marbles */
.rb-course .rbv-bag { fill: #fff3dc; stroke: #a0672c; stroke-width: 4; }
.rb-course .rbv-bag-tie { fill: none; stroke: #a0672c; stroke-width: 4; stroke-linecap: round; }
.rb-course .rbv-marble { stroke: #ffffff; stroke-width: 2; animation: rbv-drop .4s ease both calc(var(--i, 0) * 50ms); }
.rb-course .rbv-marble.is-drawn { animation: rbv-pop .5s ease both 1.4s; transform-box: fill-box; transform-origin: center; }
.rb-course .rbv-arrow-ln { fill: none; stroke: #23202a; stroke-width: 2.5; stroke-dasharray: 5 4; }
.rb-course .rbv-lb.is-colpartial { fill: var(--rbv-teal); }
.rb-course .rbv-axis.is-sym.is-extra { stroke: var(--rbv-teal); }