/* Science drawings in the water lesson's style (visuals-lab.mjs): the same bench, glassware,
   liquids, labels, blue test button and « La preuve » line as « Les trois états de l'eau ».
   The test is a checkbox: pressing the button animates every [before, after] value. */
/* width: 100% so short scenes fill the card column like long ones. */
.rbx-field { width: 100%; box-sizing: border-box; --rbx-blue: #2f73d9; --rbx-green: #0fbc53; --rbx-coral: #fd7666; --rbx-violet: #9267ea; --rbx-yellow: #ffd23f; --rbx-ink: #29272d;
  display: grid; gap: 12px; padding: clamp(14px, 2.4vw, 22px); border-radius: 26px; background: #e5f8eb; text-transform: none; }
.rbx-field.is-model { background: #f2ebff; }
.rbx-kicker { margin: 0; color: var(--rbx-green); font: 700 11px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: .12em; }
.rbx-field.is-model .rbx-kicker { color: var(--rbx-violet); }
.rbx { display: grid; gap: 14px; }
.rbx-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rbx-stage { overflow: hidden; border-radius: 26px 26px 18px 18px; box-shadow: inset 0 -10px 0 rgba(118, 75, 38, .12), 0 16px 30px rgba(76, 57, 34, .13); background: #f7f3e8; }
.rbx.is-model .rbx-stage { outline: 3px dashed var(--rbx-violet); outline-offset: -3px; }
.rbx-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* The room and the bench. */
.rbx-wall { fill: #f7f3e8; }
.rbx-wall-light { fill: #ffffff; opacity: .38; }
.rbx-shelf { fill: #e7d6b5; }
.rbx-bench { fill: #c99f70; }
.rbx-bench-shadow { fill: rgba(80, 51, 27, .14); }
.rbx-station { fill: var(--rbx-blue); font: 900 17px/1 var(--font-body, system-ui); letter-spacing: .09em; }
.rbx-route path { fill: none; stroke: var(--rbx-coral); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 8; }
.rbx-route .rbx-route-head { stroke-dasharray: none; stroke-linejoin: round; }
.rbx-route text { fill: var(--rbx-coral); font: 900 11px/1 Georgia, serif; letter-spacing: .08em; }
.rbx-wall-card rect { fill: #ffe7e2; }
.rbx-wall-big { fill: var(--rbx-coral); font: 900 24px/1 var(--font-body, system-ui); }
.rbx-wall-note { fill: var(--rbx-ink); font: 900 9px/1 var(--font-body, system-ui); letter-spacing: .08em; }
.rbx-model-tag { fill: var(--rbx-violet); font: 900 12px/1 var(--font-body, system-ui); letter-spacing: .12em; }
.rbx-text { font-family: var(--font-body, system-ui); font-weight: 900; fill: var(--rbx-ink); }

/* Glassware and liquids. */
.rbx-glass { fill: url(#rbx-glass); stroke: rgba(47, 115, 217, .66); stroke-width: 4; stroke-linejoin: round; }
.rbx-rim { fill: rgba(255, 255, 255, .78); stroke: rgba(47, 115, 217, .72); stroke-width: 4; }
.rbx-grad { fill: none; stroke: rgba(47, 115, 217, .54); stroke-width: 3; stroke-linecap: round; }
.rbx-shine { fill: none; stroke: #ffffff; stroke-opacity: .8; stroke-width: 9; stroke-linecap: round; }
.rbx-cap { fill: #9aa5b1; }
.rbx-dish-rim { fill: #fff9fd; stroke: #c47eaf; stroke-width: 4; }
.rbx-ice-edge { fill: none; stroke: #ffffff; stroke-opacity: .7; stroke-width: 3; stroke-linejoin: round; }
.rbx-ice-glint { stroke: #ffffff; stroke-width: 4; stroke-linecap: round; }
.rbx-drops path { fill: #8fdcf0; stroke: #3fb0d9; stroke-width: 2; animation: rbx-drop 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--k) * .3s); transform-box: fill-box; }
.rbx-tag rect { fill: var(--rbx-yellow); }
.rbx-tag__text { font-size: 13px; }

/* Heat, light, steam. */
.rbx-burner { fill: #6b6f78; }
.rbx-flame { fill: #ff9d3b; transform-box: fill-box; transform-origin: 50% 100%; animation: rbx-flicker 1.1s ease-in-out infinite alternate; }
.rbx-flame-core { fill: var(--rbx-yellow); }
.rbx-steam circle { fill: #f2ebff; stroke: var(--rbx-violet); stroke-width: 3; stroke-dasharray: 5 4; animation: rbx-rise 3s ease-in-out infinite; animation-delay: calc(var(--k) * .6s); transform-box: fill-box; }
.rbx-lamp-stand { fill: none; stroke: #6b6f78; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.rbx-lamp-shade { fill: var(--rbx-blue); }
.rbx-lamp-glow { animation: rbx-pulse 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.rbx-thermo-body { fill: #ffffff; stroke: rgba(47, 115, 217, .66); stroke-width: 4; }
.rbx-thermo-bulb, .rbx-thermo-col { fill: var(--rbx-coral); }
.rbx-reading { font-size: 15px; fill: var(--rbx-coral); }

/* Electricity. */
.rbx-battery { fill: var(--rbx-ink); }
.rbx-battery-cap { fill: #9aa5b1; }
.rbx-battery-sign { fill: #ffffff; font-size: 14px; }
.rbx-wire { fill: none; stroke: var(--rbx-coral); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rbx-bulb-glass { fill: rgba(255, 255, 255, .85); stroke: var(--rbx-blue); stroke-width: 4; }
.rbx-filament { fill: none; stroke: #f29c45; stroke-width: 3; stroke-linejoin: round; }
.rbx-bulb-base { fill: #9aa5b1; }
.rbx-switch { fill: none; stroke: var(--rbx-ink); stroke-width: 6; stroke-linecap: round; }
.rbx-switch-pin { fill: var(--rbx-ink); }
.rbx-switch-label { font-size: 12px; fill: var(--rbx-ink); }
.rbx-tripod path { fill: none; stroke: #6b6f78; stroke-width: 6; stroke-linecap: round; }

/* Living things. */
.rbx-pot { fill: #e07b53; }
.rbx-pot-rim { fill: #c9653f; }
.rbx-stem { fill: none; stroke: #2e9e4f; stroke-width: 6; stroke-linecap: round; }
.rbx-leaf { fill: #3fcf74; stroke: #1f8a45; stroke-width: 3; stroke-linejoin: round; }
.rbx-cup { fill: #f3efe6; stroke: #c9b48a; stroke-width: 4; stroke-linejoin: round; }
.rbx-bean { fill: #b07a3f; }

/* Measures, materials, models. */
.rbx-scale-body { fill: #ffffff; stroke: #9aa5b1; stroke-width: 4; }
.rbx-scale-plate { fill: #d5dbe0; }
.rbx-scale-screen { fill: #1d2b36; }
.rbx-screen-text { fill: #7cf5c1; font: 900 14px/1 ui-monospace, monospace; }
.rbx-magnet path { fill: #9aa5b1; }
.rbx-magnet-n { fill: #e5484d; }
.rbx-magnet-s { fill: var(--rbx-blue); }
.rbx-bin path:first-child, .rbx-bin rect { fill: var(--rbx-yellow); }
.rbx-bin.is-green path:first-child, .rbx-bin.is-green rect { fill: var(--rbx-green); }
.rbx-bin.is-blue path:first-child, .rbx-bin.is-blue rect { fill: var(--rbx-blue); }
.rbx-bin.is-brown path:first-child, .rbx-bin.is-brown rect { fill: #a0672c; }
.rbx-bin.is-grey path:first-child, .rbx-bin.is-grey rect { fill: #9aa5b1; }
.rbx-bin-mark { stroke: rgba(255, 255, 255, .8); stroke-width: 6; stroke-linecap: round; }
.rbx-ramp-wood { fill: #d9a066; stroke: #a8743f; stroke-width: 4; stroke-linejoin: round; }
.rbx-ball { fill: var(--rbx-coral); stroke: #c94a3c; stroke-width: 3; }
.rbx-globe-sea { fill: #5b9cf0; }
.rbx-globe-land { fill: #3fcf74; }
.rbx-globe-pin { fill: var(--rbx-coral); stroke: #ffffff; stroke-width: 3; }
.rbx-globe-night { fill: rgba(20, 24, 60, .42); }
.rbx-globe-stand { fill: #9aa5b1; }

/* Before and after: each animated value carries --x-b and --x-a. */
.rbx-level { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--lv-b)); transition: transform 1.1s cubic-bezier(.2, .85, .25, 1); }
.rbx-fade { opacity: var(--o-b); transition: opacity .8s ease; }
.rbx-move { transform: translate(var(--dx-b), var(--dy-b)); transition: transform .9s cubic-bezier(.2, .85, .25, 1); }
.rbx-grow { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--s-b)); transition: transform 1.4s ease; }
.rbx-grow-y { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--h-b)); transition: transform 1.4s cubic-bezier(.2, .85, .25, 1); }
.rbx-roll { transform: translate(calc(-100px + 200px * var(--p-b)), calc(-100.8px + 91.7px * var(--p-b))); transition: transform 1.3s cubic-bezier(.5, 0, .9, .6); }
.rbx-spin { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(var(--t-b)); transition: transform 1.6s ease; }
.rbx-text.is-after, .rbx-tag.is-after { opacity: 0; }
.rbx-text.is-before, .rbx-text.is-after, .rbx-tag.is-before, .rbx-tag.is-after { transition: opacity .5s ease; }
.rbx:has(.rbx-toggle:checked) .rbx-level { transform: scaleY(var(--lv-a)); }
.rbx:has(.rbx-toggle:checked) .rbx-fade { opacity: var(--o-a); }
.rbx:has(.rbx-toggle:checked) .rbx-move { transform: translate(var(--dx-a), var(--dy-a)); }
.rbx:has(.rbx-toggle:checked) .rbx-grow { transform: scale(var(--s-a)); }
.rbx:has(.rbx-toggle:checked) .rbx-grow-y { transform: scaleY(var(--h-a)); }
.rbx:has(.rbx-toggle:checked) .rbx-roll { transform: translate(calc(-100px + 200px * var(--p-a)), calc(-100.8px + 91.7px * var(--p-a))); }
.rbx:has(.rbx-toggle:checked) .rbx-spin { transform: rotate(var(--t-a)); }
.rbx:has(.rbx-toggle:checked) :is(.rbx-text, .rbx-tag).is-before { opacity: 0; }
.rbx:has(.rbx-toggle:checked) :is(.rbx-text, .rbx-tag).is-after { opacity: 1; }

/* Turning machines and moving things (added 2026-10-04). A rotor turns without end around its centre: still,
   always (.is-on) or only after the test (.is-on-after). Reduced motion stops it (rule at the end). */
.rbx-rotor { transform-box: fill-box; transform-origin: 50% 50%; animation: rbx-turn var(--rot, 1.6s) linear infinite; animation-play-state: paused; }
.rbx-rotor.is-on { animation-play-state: running; }
.rbx:has(.rbx-toggle:checked) .rbx-rotor { animation-play-state: paused; }
.rbx:has(.rbx-toggle:checked) .rbx-rotor.is-on-after { animation-play-state: running; }
.rbx-base { fill: #9aa5b1; }
.rbx-stand, .rbx-casing-leg { fill: none; stroke: #6b6f78; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.rbx-handle { fill: none; stroke: #d9a066; stroke-width: 8; stroke-linecap: round; }
.rbx-hub { fill: #6b6f78; }
.rbx-tyre { fill: none; stroke: var(--rbx-ink); stroke-width: 10; }
.rbx-rim-ring { fill: none; stroke: #9aa5b1; stroke-width: 4; }
.rbx-spoke { fill: none; stroke: #9aa5b1; stroke-width: 2.5; }
.rbx-spoke.is-paper { stroke: var(--rbx-blue); stroke-width: 3; }
.rbx-sticker { fill: var(--rbx-coral); stroke: #ffffff; stroke-width: 3; }
.rbx-paddle { fill: #ffffff; stroke: var(--rbx-blue); stroke-width: 3; stroke-linejoin: round; }
.rbx-paddle.is-alt { fill: #e2efff; }
.rbx-paper-disc { fill: #ffffff; stroke: var(--rbx-blue); stroke-width: 3; }
.rbx-casing { fill: #eef3f8; stroke: #6b6f78; stroke-width: 6; }
.rbx-blade { fill: var(--rbx-blue); stroke: #2059af; stroke-width: 2; stroke-linejoin: round; }
.rbx-pipe { fill: #d5dbe0; stroke: #6b6f78; stroke-width: 4; stroke-linejoin: round; }
.rbx-jet path, .rbx-wind path, .rbx-air path, .rbx-stream-lines { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 14 10; animation: rbx-flow .8s linear infinite; animation-delay: calc(var(--k, 0) * -.25s); }
.rbx-jet.is-eau path { stroke: #3fb0d9; }
.rbx-jet.is-vapeur path { stroke: var(--rbx-violet); }
.rbx-jet.is-air path, .rbx-wind path, .rbx-air path { stroke: #7cc4ff; }
.rbx-stream-lines { stroke: #ffffff; stroke-opacity: .75; stroke-width: 3; }
.rbx-lake-line { fill: none; stroke: #ffffff; stroke-opacity: .7; stroke-width: 4; stroke-linecap: round; }
.rbx-mast, .rbx-nacelle, .rbx-wt-blade { fill: #ffffff; stroke: #9aa5b1; stroke-width: 3; stroke-linejoin: round; }
.rbx-wt-tip { fill: var(--rbx-coral); }
.rbx-coil rect { fill: #e08a3c; stroke: #a85a1e; stroke-width: 3; }
.rbx-coil path { fill: none; stroke: #a85a1e; stroke-width: 2.5; }
.rbx-bar-n { fill: #e5484d; }
.rbx-bar-s { fill: var(--rbx-blue); }
.rbx-bar-letter { fill: #ffffff; font-size: 14px; }
.rbx-dynamo-body { fill: #9aa5b1; stroke: #6b6f78; stroke-width: 3; }
.rbx-dynamo-roller, .rbx-front-lamp { fill: var(--rbx-ink); }
.rbx-front-lens { fill: var(--rbx-yellow); }
.rbx-beam { fill: #ffe98a; opacity: .8; }
.rbx-panel { fill: #1f4fa3; stroke: #c9cfd6; stroke-width: 5; stroke-linejoin: round; }
.rbx-panel-cells { fill: none; stroke: #8fb8f2; stroke-width: 2; }
.rbx-panel-glint { fill: none; stroke: #ffffff; stroke-opacity: .55; stroke-width: 6; stroke-linecap: round; }
.rbx-dam-wall { fill: #c9cfd6; stroke: #6b6f78; stroke-width: 4; stroke-linejoin: round; }
.rbx-tap-pipe { fill: none; stroke: #9aa5b1; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.rbx-tap-handle { fill: none; stroke: var(--rbx-blue); stroke-width: 8; stroke-linecap: round; }
.rbx-tap-knob { fill: var(--rbx-blue); }
.rbx-dryer-body, .rbx-dryer-handle { fill: var(--rbx-violet); }
.rbx-dryer-nozzle { fill: #6b6f78; }
.rbx-dryer-grille { fill: #ede6fb; stroke: #6b49c2; stroke-width: 3; }
.rbx-dryer-grille-lines { fill: none; stroke: #6b49c2; stroke-width: 2.5; stroke-linecap: round; }
.rbx-ball-shine, .rbx-dough-shine { fill: none; stroke: #ffffff; stroke-opacity: .8; stroke-width: 4; stroke-linecap: round; }
.rbx-dough { fill: #3fcf74; stroke: #1f8a45; stroke-width: 3; }
.rbx-height-mark path { fill: none; stroke: var(--rbx-coral); stroke-width: 3; stroke-dasharray: 8 6; }
.rbx-mark-text { fill: var(--rbx-coral); font-size: 13px; }
.rbx-wagon-body { fill: var(--rbx-blue); }
.rbx-wagon-roof { fill: #2059af; }
.rbx-wagon-window { fill: #e2efff; stroke: #ffffff; stroke-width: 3; }
.rbx-wagon-stripe { fill: var(--rbx-yellow); }
.rbx-wagon-wheel { fill: var(--rbx-ink); }
.rbx-wagon-spoke { fill: none; stroke: #9aa5b1; stroke-width: 3; stroke-linecap: round; }
.rbx-suitcase rect { fill: var(--rbx-yellow); stroke: #c99a12; stroke-width: 2; }
.rbx-suitcase path { fill: none; stroke: #c99a12; stroke-width: 2.5; }
.rbx-rail { fill: #6b6f78; }
.rbx-sleeper { fill: #a0672c; }
/* The ball drops and comes back up lower (one bounce, kept at the top of the rebound); the dough drops and squashes. */
.rbx-bounce { transform: translateY(calc(var(--bh) * -1)); }
.rbx-bounce.is-on { animation: rbx-bounce 1.4s infinite; }
.rbx:has(.rbx-toggle:checked) .rbx-bounce.is-on-after { transform: translateY(calc(var(--bh) * var(--br) * -1)); animation: rbx-bounce 1.2s 1 both; }
.rbx-drop { transform: translateY(calc(var(--dh-b) * -1)); transition: transform .5s cubic-bezier(.55, 0, 1, .45); }
.rbx:has(.rbx-toggle:checked) .rbx-drop { transform: translateY(calc(var(--dh-a) * -1)); }
.rbx-squash { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--sx-b), var(--sy-b)); transition: transform .3s ease-out; }
.rbx:has(.rbx-toggle:checked) .rbx-squash { transform: scale(var(--sx-a), var(--sy-a)); transition-delay: .48s; }

/* The test button and the reading line, as in the water lesson. */
.rbx-control { display: flex; width: min(100%, 360px); min-height: 56px; margin-inline: auto; align-items: center; justify-content: center; gap: 14px; padding: 8px 18px; border-radius: 22px; background: var(--rbx-blue); box-shadow: 0 8px 0 #2059af, 0 14px 24px rgba(47, 115, 217, .2); color: #ffffff; font: 900 16px/1.2 var(--font-body, system-ui); text-align: center; cursor: pointer; transition: translate .16s ease, box-shadow .16s ease, background .2s ease; }
.rbx-control:hover { translate: 0 -2px; box-shadow: 0 10px 0 #2059af, 0 16px 26px rgba(47, 115, 217, .22); }
.rbx-control:active { translate: 0 5px; box-shadow: 0 3px 0 #2059af; }
.rbx-control b { font-size: 24px; transition: rotate .25s ease; }
.rbx-control .is-after, .rbx-reading .is-after { display: none; }
.rbx:has(.rbx-toggle:focus-visible) .rbx-control { outline: 4px solid var(--rbx-yellow); outline-offset: 4px; }
.rbx:has(.rbx-toggle:checked) .rbx-control { background: var(--rbx-coral); box-shadow: 0 8px 0 #cc5044, 0 14px 24px rgba(253, 118, 102, .2); }
.rbx:has(.rbx-toggle:checked) .rbx-control b { rotate: 180deg; }
.rbx:has(.rbx-toggle:checked) :is(.rbx-control, .rbx-reading) .is-before { display: none; }
.rbx:has(.rbx-toggle:checked) :is(.rbx-control, .rbx-reading) .is-after { display: inline; }
.rbx-reading { min-height: 24px; margin: 0; color: rgba(41, 39, 45, .78); font: 700 15px/1.35 var(--font-body, system-ui); text-align: center; }
.rbx-proof { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; margin: 0; padding: 4px 0 0 28px; line-height: 1.35; }
.rbx-proof::before { position: absolute; top: 8px; left: 0; width: 13px; height: 13px; border: 4px solid #e5f8eb; border-radius: 50%; background: var(--rbx-green); box-shadow: 0 0 0 2px var(--rbx-green); content: ''; }
.rbx-field.is-model .rbx-proof::before { border-color: #f2ebff; background: var(--rbx-violet); box-shadow: 0 0 0 2px var(--rbx-violet); }
.rbx-proof span { color: var(--rbx-green); font: 700 10px/1 Georgia, serif; letter-spacing: .1em; }
.rbx-field.is-model .rbx-proof span { color: var(--rbx-violet); }
.rbx-proof strong { color: var(--rbx-ink); font: 850 15px/1.35 var(--font-body, system-ui); }

@keyframes rbx-flicker { from { transform: scale(1, 1); } to { transform: scale(.9, 1.08); } }
@keyframes rbx-rise { 0% { transform: translateY(12px); opacity: .35; } 35% { opacity: 1; } 100% { transform: translateY(-22px); opacity: .45; } }
@keyframes rbx-pulse { from { opacity: .75; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
@keyframes rbx-drop { from { transform: translateY(0); } to { transform: translateY(6px); } }
@keyframes rbx-turn { to { transform: rotate(360deg); } }
@keyframes rbx-flow { to { stroke-dashoffset: -24; } }
@keyframes rbx-bounce { 0% { transform: translateY(calc(var(--bh) * -1)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); } 100% { transform: translateY(calc(var(--bh) * var(--br) * -1)); } }
@media (prefers-reduced-motion: reduce) {
  .rbx-field *, .rbx-field *::before { animation: none !important; transition: none !important; }
}