.c11-module-preview {display:flex; align-items:center; justify-content:center; flex:1; min-height:170px; width:100%;}
.c11-module-preview svg {display:block; width:100%; max-width:340px; height:190px;}
.water-intro h1 {font-size:clamp(30px,4.2vw,54px); text-wrap:balance;}
.topic-switcher-button strong {white-space:normal;}
#assess-grid:empty {min-height:64px;}
@media(max-width:600px){.water-intro h1{font-size:32px;}.c11-module-preview svg{height:160px;}}

/* Reserve room for the quiz preview's correctness mark beside longer enzyme terms. */
.quiz-preview-option-correct { padding-right: 24px; }

/* Homepage preview motion: hover and keyboard focus, never continuous at rest. */
.activity-card:is(:hover,:focus-visible) .c11-module-preview svg{animation:preview-breathe 2.8s ease-in-out infinite}
.activity-card:is(:hover,:focus-visible) .preview-substrate{animation:preview-bind 2.8s ease-in-out infinite}
.activity-card:is(:hover,:focus-visible) .preview-liquid{animation:preview-fill 2.8s ease-in-out infinite}
.activity-card:is(:hover,:focus-visible) .preview-drop{animation:preview-drip 2.8s ease-in-out infinite}
.activity-card:is(:hover,:focus-visible) .preview-sequence{animation:preview-card 2.8s ease-in-out infinite}
.activity-card:is(:hover,:focus-visible) .preview-identify{animation:preview-card 2.4s ease-in-out infinite}
.activity-card:is(:hover,:focus-visible) .preview-cycle{transform-origin:160px 95px;animation:preview-orbit 10s linear infinite}
.activity-card:is(:hover,:focus-visible) .preview-optimum{animation:preview-card 2s ease-in-out infinite}
#learn-grid .activity-card,#practice-grid .activity-card{transition:transform .25s ease,box-shadow .25s ease}
#learn-grid .activity-card:is(:hover,:focus-visible),#practice-grid .activity-card:is(:hover,:focus-visible){transform:translateY(-5px);box-shadow:0 15px 28px #244e3420}
@keyframes preview-breathe{50%{transform:scale(1.035)}}
@keyframes preview-bind{0%,20%,100%{transform:translateY(0)}55%,80%{transform:translateY(40px)}}
@keyframes preview-fill{0%,10%,100%{transform:scaleY(.22)}65%,85%{transform:scaleY(1)}}
@keyframes preview-drip{0%,15%{opacity:0;transform:translateY(0)}25%{opacity:1}60%,100%{opacity:0;transform:translateY(65px)}}
@keyframes preview-card{50%{transform:translateY(-7px)}}
@keyframes preview-orbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.activity-card,.activity-card *{animation:none!important;transition:none!important}.activity-card:is(:hover,:focus-visible){transform:none!important}}