.question-scene {
  --qs-accent: var(--track);
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 158px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(ellipse at 55% 28%, var(--track-bg), var(--card) 78%);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--paper);
}
.question-scene .qs-stage {
  position: relative;
  height: 126px;
  width: 100%;
  perspective: 510px;
  perspective-origin: 50% 43%;
  pointer-events: none;
  overflow: hidden;
}
.question-scene .qs-world {
  position: absolute;
  width: min(270px, 88%);
  height: 104px;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%) rotateX(17deg) rotateY(-13deg);
  transform-style: preserve-3d;
  animation: qs-sway 9s ease-in-out infinite alternate;
}
.question-scene .qs-world > :not(.qs-floor) {
  position: absolute;
  left: 50%; top: 50%;
  transform-style: preserve-3d;
  transform: translate3d(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)), var(--z, 0px));
}
.question-scene .qs-floor {
  position: absolute;
  width: 195px; height: 90px;
  left: 50%; top: 62%;
  transform: translate(-50%, -50%) rotateX(70deg) translateZ(-34px);
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--track) 16%, transparent), transparent 70%);
}
.question-scene .qs-sphere {
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, #6cc6db 24%, #28799c 66%, #17476c 100%);
  box-shadow: inset -4px -5px 9px #112d4e55, 0 7px 13px #07152738;
  animation: qs-bob 3.2s ease-in-out infinite alternate;
}
.question-scene .qs-sphere.violet { background: radial-gradient(circle at 30% 25%, #fff, #b7a0ed 26%, #7557b9 69%, #422b79); }
.question-scene .qs-sphere.green { background: radial-gradient(circle at 30% 25%, #fff, #8bd8a0 25%, #31966b 70%, #165b48); }
.question-scene .qs-sphere.orange { background: radial-gradient(circle at 30% 25%, #fff, #ffbc8d 24%, #de7546 66%, #924225); }
.question-scene .qs-sphere.rock { background: radial-gradient(circle at 30% 25%, #d8dce0, #778697 55%, #394855); }
.question-scene .qs-sphere:nth-of-type(odd) { animation-delay: -1.4s; }
.question-scene .qs-plate, .question-scene .qs-bar {
  min-width: 32px; min-height: 31px;
  display: grid; place-items: center;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--track) 75%, var(--line));
  border-radius: 7px;
  background: linear-gradient(135deg, var(--paper), var(--track-bg));
  color: var(--ink);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--track) 43%, var(--card)), 0 12px 16px #091a2c33;
  font-size: 10px; font-weight: 800; letter-spacing: .03em;
  white-space: nowrap;
  animation: qs-bob 4s ease-in-out infinite alternate;
}
.question-scene .qs-plate.lit, .question-scene .qs-plate.green { background: var(--track-bg); border-color: var(--track); box-shadow: 0 4px 0 var(--track), 0 10px 15px #091a2c3a; }
.question-scene .qs-bar { min-height: 18px; min-width: 24px; border: 0; background: none; box-shadow: none; color: var(--track); font-size: 20px; }
.question-scene .qs-cell-wall, .question-scene .qs-cell-membrane, .question-scene .qs-animal-cell {
  width: 155px; height: 89px;
  border: 7px solid #61ac77;
  border-radius: 26px;
  background: color-mix(in srgb, #a4dbba 50%, transparent);
  box-shadow: inset 0 0 13px #234f4855, 0 8px 17px #122f2433;
}
.question-scene .qs-cell-membrane { width: 137px; height: 71px; border: 3px solid #f3c45f; background: transparent; box-shadow: none; }
.question-scene .qs-animal-cell { width: 91px; height: 84px; border: 5px solid #8eb8d9; border-radius: 50%; background: color-mix(in srgb, #b5d9ef 45%, transparent); }
.question-scene[data-scene="cells"] .qs-cell-wall { width: 90px; height: 82px; }
.question-scene[data-scene="cells"] .qs-cell-membrane { width: 76px; height: 68px; }
.question-scene .qs-orbit { width: 156px; height: 61px; border: 2px solid var(--track); border-radius: 50%; opacity: .7; box-shadow: 0 0 9px color-mix(in srgb, var(--track) 45%, transparent); animation: qs-orbit 8s linear infinite; }
.question-scene .qs-orbit.second { transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), var(--z)) rotate(62deg); animation-duration: 10s; }
.question-scene .qs-vessel { width: 110px; height: 79px; border: 4px solid #72b9ca; border-top: 0; border-radius: 0 0 25px 25px; background: linear-gradient(0deg, #69c9da5e, transparent 68%); box-shadow: inset 0 -12px 18px #40a7c944, 0 7px 14px #0c30493b; }
.question-scene[data-scene="mixture"] .qs-vessel { width: 74px; }
.question-scene .qs-particle { animation: qs-particle 2.5s ease-in-out infinite alternate; }
.question-scene[data-scene="cell"] .qs-sphere { animation: none; }
.question-scene[data-scene="cell"] .qs-inflow, .question-scene[data-scene="cell"] .qs-dna { display: none; }
.question-scene[data-scene="cell"][data-step="1"] .qs-inflow { display:block; animation:qs-inflow 2.8s ease-in-out infinite; }
.question-scene[data-scene="cell"][data-step="2"] .qs-nucleus { animation:qs-nucleus 2.7s ease-in-out infinite alternate; }
.question-scene[data-scene="cell"][data-step="2"] .qs-dna { display:grid; place-items:center; width:24px; height:24px; color:#fff; font-size:24px; font-weight:800; text-shadow:0 0 8px #fff; animation:qs-glow 2s ease-in-out infinite alternate; }
.question-scene[data-scene="cell"][data-step="3"] .qs-mitochondrion { animation:qs-pulse 2s ease-in-out infinite alternate; }
.question-scene[data-scene="cell"][data-step="4"] .qs-chloroplast { animation:qs-pulse 2s ease-in-out infinite alternate; }
 .question-scene[data-scene="states"] .qs-particle { animation:none; }
.question-scene[data-matter-state="solid"] .qs-particle { animation:qs-solid .35s ease-in-out infinite alternate; }
.question-scene[data-matter-state="liquid"] .qs-particle { animation:qs-liquid 3.6s ease-in-out infinite alternate; }
.question-scene[data-matter-state="gas"] .qs-particle { animation:qs-gas 3.2s ease-in-out infinite alternate; }
.question-scene .qs-cart { width: 83px; height: 42px; border: 2px solid var(--track); border-radius: 8px; background: linear-gradient(130deg, var(--paper), var(--track-bg)); box-shadow: 0 8px 0 var(--track), 0 15px 15px #12213040; }
.question-scene .qs-force-arrow { font-size: 35px; }
.question-scene .qs-plot { width: 165px; height: 82px; border-left: 3px solid var(--ink-soft); border-bottom: 3px solid var(--ink-soft); background: repeating-linear-gradient(0deg, transparent 0 19px, color-mix(in srgb, var(--line) 70%, transparent) 20px), repeating-linear-gradient(90deg, transparent 0 30px, color-mix(in srgb, var(--line) 70%, transparent) 31px); }
.question-scene .qs-plot::after { content:''; position:absolute; left:17px; bottom:20px; width:130px; height:54px; border-bottom:4px solid var(--track); transform:skewY(-18deg); }
.question-scene .qs-mirror { width:10px; height:98px; border-radius:5px; background:linear-gradient(90deg,#8193aa,#fff,#85abc2); box-shadow:5px 6px 14px #12213048; transform:translate3d(calc(-50% + var(--x)),calc(-50% + var(--y)),var(--z)) rotate(38deg) !important; }
.question-scene .qs-light-ray { color:#e9a239; text-shadow:0 0 11px #ffc76a; }
.question-scene .qs-wire { width:169px; height:73px; border:5px solid var(--track); border-radius:17px; box-shadow:0 0 10px color-mix(in srgb,var(--track) 38%,transparent); }
.question-scene .qs-bulb { width:40px; height:40px; border:3px solid #d68c3b; border-radius:50%; background:radial-gradient(circle,#fff6bb,#e8ab57 70%); box-shadow:0 0 20px #f4ca73a8; animation:qs-glow 2.8s ease-in-out infinite alternate; }
.question-scene .qs-bulb.off { background:radial-gradient(circle,#edf0ed,#98a2a7 75%); border-color:#74818a; box-shadow:none; animation:none; }
.question-scene .qs-rover-grid, .question-scene .qs-binary-base { width:169px; height:85px; border:2px solid var(--track); border-radius:10px; background:linear-gradient(90deg,transparent 24%,var(--line) 25%,transparent 26%,transparent 49%,var(--line) 50%,transparent 51%,transparent 74%,var(--line) 75%,transparent 76%),linear-gradient(0deg,transparent 24%,var(--line) 25%,transparent 26%,transparent 49%,var(--line) 50%,transparent 51%,transparent 74%,var(--line) 75%,transparent 76%),var(--paper); transform:translate3d(calc(-50% + var(--x)),calc(-50% + var(--y)),var(--z)) rotateX(40deg) !important; box-shadow:0 13px 18px #0d2d4940; }
.question-scene .qs-rover-body { width:39px; height:29px; border-radius:16px 16px 8px 8px; background:linear-gradient(120deg,#b2d7f5,#3278b7); border:2px solid #23659e; box-shadow:0 6px 0 #20527e,0 11px 13px #12213055; animation:qs-bob 3s ease-in-out infinite alternate; }
.question-scene .qs-radar { width:75px; height:75px; border:2px solid var(--track); border-radius:50%; opacity:.65; animation:qs-radar 3s ease-out infinite; }
.question-scene .qs-bit-tile { min-width:31px; }
.question-scene .qs-footer { display:flex; align-items:center; justify-content:space-between; gap:6px; height:31px; padding:0 9px; border-top:1px solid var(--line); background:var(--card); font-size:11px; line-height:1.1; }
.question-scene .qs-caption { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.question-scene .qs-illustrative { white-space:nowrap; color:var(--ink-soft); font-size:9px; }
.question-scene .qs-toggle { border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font:inherit; font-weight:700; padding:3px 6px; cursor:pointer; }
.question-scene .qs-toggle:focus-visible { outline:3px solid var(--track); outline-offset:1px; }
.question-scene[data-paused="true"] .qs-world, .question-scene[data-paused="true"] .qs-world * { animation-play-state:paused !important; }
.question-scene.compact, .question-scene.qs-compact { height:113px; }
.question-scene.compact .qs-stage, .question-scene.qs-compact .qs-stage { height:82px; }
.question-scene.compact .qs-world, .question-scene.qs-compact .qs-world { transform:translate(-50%,-50%) scale(.76) rotateX(17deg) rotateY(-13deg); }
.question-scene.compact .qs-world, .question-scene.qs-compact .qs-world { animation:qs-compact-sway 9s ease-in-out infinite alternate; }
.question-scene.compact .qs-illustrative, .question-scene.qs-compact .qs-illustrative { display:none; }
@keyframes qs-sway { from { transform:translate(-50%,-50%) rotateX(16deg) rotateY(-13deg); } to { transform:translate(-50%,-50%) rotateX(21deg) rotateY(13deg); } }
@keyframes qs-compact-sway { from { transform:translate(-50%,-50%) scale(.76) rotateX(16deg) rotateY(-13deg); } to { transform:translate(-50%,-50%) scale(.76) rotateX(21deg) rotateY(13deg); } }
@keyframes qs-bob { from { translate:0 -2px; } to { translate:0 3px; } }
@keyframes qs-particle { from { translate:-3px -2px; } to { translate:4px 3px; } }
@keyframes qs-solid { from { translate:-1px 0; } to { translate:1px 0; } }
@keyframes qs-liquid { from { translate:-9px 0; } to { translate:8px 2px; } }
@keyframes qs-gas { from { translate:-16px -12px; } to { translate:18px 15px; } }
@keyframes qs-condense { from { translate:-12px -8px; } to { translate:2px 1px; } }
@keyframes qs-inflow { from { translate:-9px 0; opacity:0; } 25% { opacity:1; } to { translate:68px 0; opacity:0; } }
@keyframes qs-nucleus { to { box-shadow:inset -4px -5px 9px #112d4e55, 0 0 20px #bca6ff; } }
@keyframes qs-pulse { to { scale:1.2; filter:brightness(1.2); } }
@keyframes qs-arrow { to { translate:5px 0; } }
@keyframes qs-cart-right { to { translate:13px 0; } }
@keyframes qs-cart-left { to { translate:-13px 0; } }
@keyframes qs-orbit { to { rotate:360deg; } }
@keyframes qs-glow { to { opacity:.55; box-shadow:0 0 5px #f4ca73; } }
@keyframes qs-radar { from { scale:.5; opacity:.8; } to { scale:1.45; opacity:.06; } }
@media (max-width:400px) { .question-scene .qs-illustrative { display:none; } .question-scene .qs-world { scale:.85; } }
@media (prefers-reduced-motion:reduce) { .question-scene *, .question-scene *::before, .question-scene *::after { animation:none !important; transition:none !important; } }
[data-motion="off"] .question-scene *, [data-motion="off"] .question-scene *::before, [data-motion="off"] .question-scene *::after { animation:none !important; transition:none !important; }

/* Live experiments move from their actual values, independently of camera motion. */
.question-scene .qs-live-status { position:absolute; left:6px; right:6px; bottom:1px; text-align:center; font-size:10px; font-weight:700; color:var(--ink); }
.question-scene .qs-live-plot { width:180px; height:96px; top:44% !important; }
.question-scene .qs-cart-group { width:1px; height:1px; animation:qs-force-preview var(--duration,3s) cubic-bezier(.55,0,1,1) infinite; }
.question-scene .qs-cart-group > * { position:absolute; transform:translate3d(calc(-50% + var(--x,0px)),calc(-50% + var(--y,0px)),var(--z,0px)); }
.question-scene[data-direction="balanced"] .qs-cart-group { animation:none; }
.question-scene[data-direction="rolling"] .qs-cart-group { animation-timing-function:linear; }
.question-scene[data-scene="force"] .qs-sphere, .question-scene[data-scene="force"] .qs-bar, .question-scene[data-scene="force"] .qs-plate { animation:none; }
.question-scene[data-scene="force"] .qs-world, .question-scene[data-scene="graph"] .qs-world, .question-scene[data-scene="mirror"] .qs-world { animation:none; }
.question-scene .qs-force-arrow { font-size:14px; }
.question-scene[data-scene="force"] .qs-plate { min-height:15px; font-size:10px; }
.question-scene[data-scene="force"] .qs-world { top:42%; }
.question-scene .qs-rover-body { color:white; text-align:center; font-weight:800; }
@keyframes qs-force-preview { 0% {translate:0 0;opacity:1;} 85% {translate:var(--travel) 0;opacity:1;} 100% {translate:var(--travel) 0;opacity:0;} }

.question-scene .qs-selected { outline:3px solid var(--track); filter:brightness(1.25); }