
/* UPDATE 8 — restrained screen texture inside the selected DNA application. */
body[data-scene="dna"] .detail .app-info{position:relative;isolation:isolate;overflow:hidden;box-shadow:inset 0 0 22px rgba(0,217,255,.035)}
body[data-scene="dna"] .detail .app-info::before,
body[data-scene="dna"] .detail .app-info::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit}
body[data-scene="dna"] .detail .app-info::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E");
 background-size:150px 150px;opacity:.065;mix-blend-mode:screen;animation:ecosystem-screen-static .8s steps(1,end) infinite
}
body[data-scene="dna"] .detail .app-info::after{
 background-image:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.15) 3px,rgba(0,0,0,.15) 4px),linear-gradient(to bottom,transparent 35%,rgba(130,232,255,.045) 49%,rgba(130,232,255,.065) 50%,transparent 64%);
 background-size:100% 4px,100% 240px;background-repeat:repeat;animation:ecosystem-screen-refresh 8s linear infinite
}
@keyframes ecosystem-screen-static{
 0%,100%{background-position:0 0}20%{background-position:29px -37px}40%{background-position:-47px 19px}60%{background-position:13px 61px}80%{background-position:-31px -11px}
}
@keyframes ecosystem-screen-refresh{from{background-position:0 0,0 -240px}to{background-position:0 0,0 240px}}
@media(prefers-reduced-motion:reduce){
 body[data-scene="dna"] .detail .app-info::before,body[data-scene="dna"] .detail .app-info::after{animation:none}
}
