/* Composited water movement remains visible on phone browsers. */
body{isolation:isolate}
@media(max-width:850px){
 .water{inset:-14%;filter:none;will-change:transform;transform:translate3d(0,0,0);animation:mobile-water 10s ease-in-out infinite alternate}
 .texture-b{display:block;opacity:.16;mix-blend-mode:normal;animation:mobile-water 13s ease-in-out infinite alternate-reverse}
 .water-light{animation:mobile-light 9s ease-in-out infinite alternate;filter:none;opacity:.32;will-change:transform}
 .caustic-shimmer{filter:none;opacity:.55;animation:caustics 8s ease-in-out infinite alternate;will-change:transform}
}
@keyframes mobile-water{from{transform:translate3d(-4%,-3%,0) scale(1.03) rotate(-1deg)}to{transform:translate3d(4%,3%,0) scale(1.09) rotate(1.5deg)}}
@keyframes mobile-light{from{transform:translate3d(-4%,-2%,0) rotate(-8deg)}to{transform:translate3d(5%,4%,0) rotate(12deg)}}

/* Answer feedback is separate from the background motion setting. */
#answer-effects{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.answer-burst{position:absolute;width:0;height:0;color:#4aab9d}
.answer-retry{color:#c78c52}
.answer-particle{position:absolute;left:-8px;top:-12px;font-size:var(--size);line-height:1;color:inherit;opacity:0;text-shadow:0 1px 8px #ffffffdc;animation:answer-spark 1.15s ease-out var(--delay) both;will-change:transform,opacity}
.answer-success .answer-particle:nth-child(3n){color:#86c5d8}
.answer-success .answer-particle:nth-child(3n + 1){color:#d7b45d}
.answer-ring{position:absolute;width:36px;height:36px;left:-18px;top:-18px;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 14px #ffffffa0;animation:answer-ring .8s ease-out both}
.answer-glow{animation:answer-glow .8s ease-out}
.answer-nudge{animation:answer-nudge .38s ease-in-out}
@keyframes answer-spark{0%{opacity:0;transform:translate3d(0,0,0) scale(.3)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--spin)) scale(.65)}}
@keyframes answer-ring{from{opacity:.75;transform:scale(.4)}to{opacity:0;transform:scale(3.5)}}
@keyframes answer-glow{0%,100%{outline:0 solid transparent;outline-offset:0}35%{outline:3px solid #9bd8cb;outline-offset:5px}}
@keyframes answer-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){
 .answer-particle{opacity:1;transform:none;font-size:28px}
 .answer-ring{opacity:.65;transform:none}
}
.aside-footer .primary{margin-bottom:0}
footer{justify-content:flex-end}