/* The approved food photograph and molecular canvas share one unchanged foreground. */
#food-biology .food-visual{height:680px;isolation:isolate}
#food-biology .food-photo-frame{top:365px;width:115%;max-width:none}
#food-biology .food-reveal{z-index:2}
#food-biology .food-explorer{z-index:3;bottom:0}
#food-biology[data-food-state="molecular"] .food-visual{height:calc(565px + var(--food-explorer-height,240px))}
#food-biology .food-reveal-question{bottom:62px}
#food-biology .food-reveal-label{bottom:15px}
.food-plan-devices{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1400px}
.food-plan-tablet{position:absolute;left:0;top:15px;width:89%;aspect-ratio:1.54;padding:9px;border-radius:22px;background:linear-gradient(130deg,#cad5cf,#f4f7f2 22%,#7f938c 75%,#dde5df);box-shadow:3px 18px 30px #254b3d26,inset 0 0 0 1px #617f7170;transform:rotate(-5deg) rotateY(7deg)}
.food-device-screen{height:100%;overflow:hidden;border-radius:14px;background:#e7eef7;border:1px solid #fff9}
.food-device-heading{height:36px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;color:#273d46;font-size:10px;background:#eef3f9}
.food-device-heading strong{font-weight:600;font-size:13px}
.food-device-recipes{height:calc(100% - 36px);position:relative;overflow:hidden}
.food-device-recipes img{position:absolute;width:190%;max-width:none;height:auto;left:-12%;top:-42%;display:block}
.food-plan-tablet>i{position:absolute;left:3px;top:49%;height:3px;width:3px;border-radius:50%;background:#43594f}
.food-plan-mobile{position:absolute;right:-1%;top:58px;width:25%;aspect-ratio:.48;padding:5px;border-radius:22px;background:linear-gradient(110deg,#b3c3b8,#f4f7f1 18%,#789284);box-shadow:4px 12px 20px #254b3d29;transform:rotate(6deg)}
.food-plan-mobile .food-device-screen{border-radius:17px}
.food-mobile-status{height:22px;padding:5px 8px;display:flex;justify-content:space-between;font-size:6px;color:#354940;background:#eef3f9}
.food-mobile-status i{width:33%;height:8px;border-radius:9px;background:#2e443a}
.food-plan-mobile .food-device-heading{padding:0 7px;height:24px}
.food-plan-mobile .food-device-heading strong{font-size:9px}
.food-plan-mobile .food-device-recipes{height:calc(100% - 46px)}
.food-plan-mobile .food-device-recipes img{width:440%;left:-28%;top:-31%}
@media(min-width:761px) and (max-width:1050px){
 #food-biology .food-photo-frame{top:320px}
 #food-biology .food-visual{height:590px}
 #food-biology[data-food-state="molecular"] .food-visual{height:calc(475px + var(--food-explorer-height,240px))}
 .food-device-heading{padding:0 8px;font-size:8px}.food-device-heading strong{font-size:10px}
}
@media(max-width:760px){
 #food-biology .food-visual{height:565px;margin-top:28px}
 #food-biology .food-photo-frame{top:310px;width:108%;max-width:560px}
 #food-biology[data-food-state="molecular"] .food-visual{height:calc(500px + var(--food-explorer-height,240px))}
 .food-plan-devices{max-width:560px;left:50%;width:100%;transform:translateX(-50%)}
 .food-plan-tablet{width:82%;left:5%;top:16px;border-radius:17px;padding:6px}
 .food-device-screen{border-radius:11px}.food-device-heading{height:27px;padding:0 9px;font-size:8px}.food-device-heading strong{font-size:10px}
 .food-device-recipes{height:calc(100% - 27px)}
 .food-plan-mobile{right:4%;top:47px;width:24%;padding:4px;border-radius:16px}
 .food-plan-mobile .food-device-screen{border-radius:12px}
 .food-mobile-status{height:16px;padding:3px 5px;font-size:5px}.food-mobile-status i{height:6px}
 .food-plan-mobile .food-device-heading{height:21px;padding:0 5px}.food-plan-mobile .food-device-heading strong{font-size:7px}
 .food-plan-mobile .food-device-recipes{height:calc(100% - 37px)}
 #food-biology .food-reveal-question{bottom:64px}
}
/* Keep the foreground particle silhouettes readable through the reveal. */
.food-plan-devices{transition:opacity 1.1s ease}
#food-biology[data-food-state="molecular"] .food-plan-devices{opacity:.25}
@media(prefers-reduced-motion:reduce){.food-plan-devices{transition:none}}
@media(min-width:1051px){
 #food-biology .food-visual{height:710px}
 #food-biology .food-photo-frame{top:345px;max-width:740px}
 #food-biology .food-reveal-question{top:615px;bottom:auto}
 #food-biology .food-reveal-label{top:665px;bottom:auto}
 #food-biology[data-food-state="molecular"] .food-visual{height:calc(645px + var(--food-explorer-height,240px))}
}